/* ecommerce.css - Shared styles for e-commerce forms */

/* Form Sizing Adjustments */
.ecommerce-form .form-control,
.ecommerce-form .form-select {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    border-radius: 6px;
}

.ecommerce-form .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: #495057;
}

.ecommerce-form .form-text {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Card and Layout Adjustments */
.ecommerce-form .card {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ecommerce-form .card-body {
    padding: 1.25rem;
}

/* Price Section */
.ecommerce-form .price-section {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem;
}

.ecommerce-form .original-price {
    font-size: 0.95rem;
    color: #6c757d;
}

.ecommerce-form .current-price {
    font-weight: 700;
    color: #198754;
    margin: 0.25rem 0;
}

/* Section Headers */
.ecommerce-form .section-header {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
    margin: 1.5rem 0 1rem 0;
}

/* Button Adjustments */
.ecommerce-form .btn-primary {
    padding: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
}

/* Checkboxes */
.ecommerce-form .form-check {
    margin-bottom: 0.75rem;
}

.ecommerce-form .form-check-input {
    margin-top: 0.2rem;
}

.ecommerce-form .form-check-label {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .ecommerce-form .form-control,
    .ecommerce-form .form-select {
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
    }
    
    .ecommerce-form .card-body {
        padding: 1rem;
    }
}

/* Datetimepicker Custom Styles */
.xdsoft_datetimepicker {
    z-index: 1060 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.xdsoft_datetimepicker .xdsoft_datepicker {
    width: 300px !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
    padding: 5px !important;
    font-size: 0.9rem !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
    padding: 5px 10px !important;
}

/* Blackout date styling */
.xdsoft_datetimepicker .xdsoft_disabled {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    opacity: 0.7 !important;
    text-decoration: line-through !important;
    cursor: not-allowed !important;
}

/* Weekend styling */
.xdsoft_datetimepicker .xdsoft_weekend {
    color: #6c757d !important;
    opacity: 0.7 !important;
}

/* Selected date */
.xdsoft_datetimepicker .xdsoft_current {
    background-color: #007bff !important;
    color: white !important;
}

/* Hover state */
.xdsoft_datetimepicker .xdsoft_calendar td:hover:not(.xdsoft_disabled) {
    background-color: #e9ecef !important;
}

/* Date input field */
.datepicker-input {
    cursor: pointer !important;
    background-color: white !important;
}

/* Ensure proper positioning */
.xdsoft_datetimepicker.xdsoft_inline {
    margin-top: 5px;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}