/**
 * ============================================================================
 * YITH BOOKING - CUSTOM PRICE BREAKDOWN BY PERSON TYPE
 * ============================================================================
 *
 * Styling for the custom booking price breakdown showing:
 * - Person type icons and names (Adult, Child, Infant)
 * - Detailed calculation per person type
 * - Grand total
 * - Extra costs and discounts
 *
 * Related files:
 * - PHP: functions.php -> mks_custom_booking_totals_html()
 * - Template: woocommerce/single-product/add-to-cart/booking-form/persons/people-selector.php
 * ============================================================================
 */

/* ============================================
   BOOKING META - CHECKIN/CHECKOUT ALIGNMENT
   ============================================ */

.yith-booking-meta .yith-booking-checkin,
.yith-booking-meta .yith-booking-checkout {
    text-align: left !important;
}

/* ============================================
   BOOKING FORM FIELDS - GLASSMORPHISM STYLE
   ============================================ */

/* Form section labels - Hidden to save space */
.yith-wcbk-form-section__label,
.yith-wcbk-booking-form__label {
    display: none !important;
}

/* Input fields */
.yith-wcbk-booking-form input[type="text"],
.yith-wcbk-booking-form input[type="number"],
.yith-wcbk-booking-form select,
.yith-wcbk-date-picker input,
.yith-wcbk-booking-start-date,
.yith-wcbk-booking-duration,
.yith-wcbk-people-selector__toggle-handler {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #2d3748 !important;
    box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.003), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.004), 12.5px 12.5px 10px rgba(0, 0, 0, 0.005), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.006), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.007), 100px 100px 80px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.3s ease !important;
}

.yith-wcbk-booking-form input[type="text"]:focus,
.yith-wcbk-booking-form input[type="number"]:focus,
.yith-wcbk-booking-form select:focus,
.yith-wcbk-date-picker input:focus {
    outline: none !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.003), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.004), 12.5px 12.5px 10px rgba(0, 0, 0, 0.005), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.006), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.007), 100px 100px 80px rgba(0, 0, 0, 0.01) !important;
    background: rgba(255, 255, 255, 0.9) !important;
}

/* Form sections wrapper */
.yith-wcbk-form-section {
    margin-bottom: 16px !important;
}

/* Duration field - read-only style */
.yith-wcbk-booking-duration {
    background: rgba(240, 240, 245, 0.6) !important;
    cursor: not-allowed !important;
}

/* People selector dropdown */
.yith-wcbk-people-selector__toggle-handler {
    cursor: pointer !important;
    position: relative !important;
}

.yith-wcbk-people-selector__toggle-handler:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

/* People selector fields container */
.yith-wcbk-people-selector__fields-container {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(13px) !important;
    -webkit-backdrop-filter: blur(13px) !important;
    border: 1px solid rgba(255, 255, 255) !important;
    border-radius: 8px !important;
    box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.003), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.004), 12.5px 12.5px 10px rgba(0, 0, 0, 0.005), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.006), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.007), 100px 100px 80px rgba(0, 0, 0, 0.01) !important;
    padding: 16px !important;
    margin-top: 10px !important;
}

/* Check-in header */
.yith-booking-meta {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.003), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.004), 12.5px 12.5px 10px rgba(0, 0, 0, 0.005), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.006), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.007), 100px 100px 80px rgba(0, 0, 0, 0.01) !important;
}

.yith-booking-meta .yith-booking-checkin,
.yith-booking-meta .yith-booking-checkout {
    font-weight: 600 !important;
}

/* Add to cart button */
.yith-wcbk-add-to-cart-button,
button.yith-wcbk-add-to-cart-button {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 16px 0 rgba(16, 185, 129, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.yith-wcbk-add-to-cart-button:hover,
button.yith-wcbk-add-to-cart-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px 0 rgba(16, 185, 129, 0.4) !important;
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.yith-wcbk-add-to-cart-button:disabled,
button.yith-wcbk-add-to-cart-button:disabled {
    background: rgba(156, 163, 175, 0.5) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Date picker icon */
.yith-wcbk-date-picker .yith-wcbk-booking-date-icon {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.yith-wcbk-date-picker:hover .yith-wcbk-booking-date-icon {
    opacity: 1;
}

/* Select dropdowns styling */
.yith-wcbk-booking-form select {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23667eea" d="M6 9L1 4h10z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
}

/* ============================================
   2-COLUMN LAYOUT FOR BOOKING FORM
   ============================================ */

/* Ensure parent containers don't restrict width */
.product .summary,
.product-info,
form.cart {
    max-width: 100% !important;
    width: 100% !important;
}

/* Main booking form wrapper */
.yith-wcbk-booking-form {
    position: relative !important;
    max-width: 100% !important;
    /* width: 100% !important; */
    /* display: block !important; */

    /* Subtle background gradient */
    /* background: linear-gradient(135deg, rgba(247, 250, 252, 0.8) 0%, rgba(237, 242, 247, 0.8) 100%) !important; */
    /* border-radius: 16px !important; */
    /* padding: 20px !important; */
    /* box-shadow: 0 4px 20px 0 rgba(31, 38, 135, 0.08) !important; */

    /* Create 2-column layout with padding on the right for totals */
    padding-right: calc(50% + 15px) !important;
}

/* All form fields stay in left column (natural flow) */
.yith-wcbk-form-section-dates-wrapper,
.yith-wcbk-form-section-persons-wrapper,
.yith-wcbk-form-section:not(.yith-wcbk-form-section-totals),
.yith-wcbk-booking-form-message {
    width: 100% !important;
    max-width: 100% !important;
}

/* Totals section - fixed to right column, aligned to bottom */
.yith-wcbk-form-section-totals {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: calc(50% - 15px) !important;
    max-width: calc(50% - 15px) !important;
}

/* ============================================
   PEOPLE SELECTOR - PRICE DISPLAY
   ============================================ */

/* Price next to person type name */
.yith-wcbk-people-selector__field__title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.yith-wcbk-people-selector__field__title .person-type-name {
    font-weight: 600;
}

.yith-wcbk-people-selector__field__title .person-type-price {
    color: var(--fs-color-primary);
    font-weight: 600;
    font-size: 1rem;
}

/* Mobile */
@media (max-width: 768px) {
    .yith-wcbk-people-selector__field__title {
        flex-wrap: wrap;
    }

    .yith-wcbk-people-selector__field__title .person-type-price {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .yith-wcbk-people-selector__field__title {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .yith-wcbk-people-selector__field__title .person-type-price {
        font-size: 12px;
    }
}

/* ============================================
   PRICE BREAKDOWN - GLASSMORPHISM STYLE
   ============================================ */

/* Container */
.mks-custom-breakdown {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.003), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.004), 12.5px 12.5px 10px rgba(0, 0, 0, 0.005), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.006), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.007), 100px 100px 80px rgba(0, 0, 0, 0.01);
    padding: 16px;
    margin: 0;
    transition: all 0.3s 
ease;
}

/* Person Type Row */
.mks-breakdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.mks-breakdown-row:last-of-type {
    margin-bottom: 14px;
}

.mks-breakdown-person-type {
    min-width: 70px;
}

.person-name {
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Calculation Row */
.mks-breakdown-calculation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4a5568;
}

.calc-item {
    font-weight: 600;
    color: #2d3748;
}

.calc-operator {
    color: #a0aec0;
    font-weight: 400;
}

.calc-result {
    font-weight: 800;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 14px;
    margin-left: 4px;
}

/* Total Row */
.mks-breakdown-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 12px;
    margin-top: 10px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    position: relative;
    overflow: hidden;
}

.mks-breakdown-total::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
    pointer-events: none;
}

.total-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    font-size: 15px;
    color: #1f2937;
    position: relative;
    z-index: 1;
}

.total-value {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.2rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}

/* Extra Rows (Discounts, Extra Costs) */
.mks-breakdown-extra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 15px;
    transition: all 0.2s ease;
}

.mks-breakdown-extra-row:hover {
    background: rgba(255, 255, 255, 0.5);
}

.mks-breakdown-extra-row.is-discount {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.mks-breakdown-extra-row.is-discount .extra-label,
.mks-breakdown-extra-row.is-discount .extra-value {
    color: #059669;
}

.extra-label {
    font-weight: 600;
    color: #4a5568;
}

.extra-value {
    font-weight: 700;
    color: #2d3748;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Remove padding on mobile */
    .yith-wcbk-booking-form {
        padding: 20px !important;
        padding-right: 20px !important;
    }

    /* Reset totals section for mobile - stack below form fields */
    .yith-wcbk-form-section-totals {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 20px !important;
    }

    /* Form fields smaller on mobile */
    .yith-wcbk-booking-form input[type="text"],
    .yith-wcbk-booking-form input[type="number"],
    .yith-wcbk-booking-form select {
        padding: 12px 16px !important;
        font-size: 15px !important;
    }

    /* Labels smaller on mobile */
    .yith-wcbk-form-section__label,
    .yith-wcbk-booking-form__label {
        font-size: 14px !important;
    }

    /* Check-in header */
    .yith-booking-meta {
        padding: 12px 16px !important;
    }

    .yith-booking-meta .yith-booking-checkin,
    .yith-booking-meta .yith-booking-checkout {
        font-size: 16px !important;
    }

    /* Add to cart button */
    .yith-wcbk-add-to-cart-button,
    button.yith-wcbk-add-to-cart-button {
        padding: 16px 24px !important;
        font-size: 16px !important;
    }

    /* Price breakdown responsive */
    .mks-custom-breakdown {
        padding: 20px;
        margin: 15px 0;
    }

    .mks-breakdown-header h4 {
        font-size: 18px;
    }

    .mks-breakdown-row {
        padding: 14px 10px;
    }

    .person-name {
        font-size: 15px;
    }

    .mks-breakdown-calculation {
        font-size: 14px;
    }

    .calc-result {
        font-size: 15px;
    }

    .mks-breakdown-total {
        padding: 16px 12px;
        font-size: 16px;
    }

    .total-label {
        font-size: 16px;
    }

    .total-value {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .mks-custom-breakdown {
        padding: 16px;
    }

    .mks-breakdown-header h4 {
        font-size: 16px;
    }

    .mks-breakdown-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 10px;
    }

    .mks-breakdown-person-type {
        min-width: auto;
    }

    .person-name {
        font-size: 14px;
    }

    .mks-breakdown-calculation {
        font-size: 13px;
        gap: 6px;
    }

    .calc-result {
        font-size: 14px;
    }

    .mks-breakdown-total {
        padding: 14px 12px;
    }

    .total-label {
        font-size: 15px;
    }

    .total-value {
        font-size: 20px;
    }
}

.yith-wcbk-booking-form .yith-wcbk-form-section-duration--no-field .yith-wcbk-form-section__content {
    padding: 8px 16px;
    background: #fff !important;
    box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.003), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.004), 12.5px 12.5px 10px rgba(0, 0, 0, 0.005), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.006), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.007), 100px 100px 80px rgba(0, 0, 0, 0.01);
    border-radius: 8px;
    /* min-height: 42px; */
    display: flex
;
    /* align-items: center; */
}