/*
 * enhanced-pricing-luxury.css
 * Compact luxury styling for ALL enhanced pricing structures.
 * Presentation only — does not change AJAX, calculation, or submission logic.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

.enhanced-pricing-section {
    --ep-lux-gold: #C9A84C;
    --ep-lux-gold-light: rgba(201, 168, 76, 0.12);
    --ep-lux-gold-mid: rgba(201, 168, 76, 0.32);
    --ep-lux-navy: #0D1B2A;
    --ep-lux-ivory: #FDFCF9;
    --ep-lux-silver: #E4E8ED;
    --ep-lux-charcoal: #1E2A38;
    --ep-lux-radius: 12px;
    --ep-lux-radius-sm: 8px;
    --ep-lux-shadow: 0 2px 12px rgba(13, 27, 42, 0.07);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--ep-lux-ivory);
    color: var(--ep-lux-charcoal);
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.enhanced-pricing-section > h3 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--ep-lux-navy) !important;
    font-size: clamp(18px, 4.5vw, 22px) !important;
}

/* ─── Accordion panels (all structure types) ─────────────────────────────── */
.enhanced-pricing-section .pricing-structure-accordion {
    border: 1px solid var(--ep-lux-silver) !important;
    border-radius: var(--ep-lux-radius) !important;
    background: #fff !important;
    box-shadow: var(--ep-lux-shadow) !important;
    overflow: hidden;
    max-width: 100%;
}

.enhanced-pricing-section .pricing-accordion-header {
    background: var(--ep-lux-navy) !important;
    color: var(--ep-lux-gold) !important;
    border: none !important;
    padding: clamp(12px, 3vw, 16px) !important;
}

.enhanced-pricing-section .pricing-accordion-header h3,
.enhanced-pricing-section .pricing-accordion-header span {
    color: var(--ep-lux-gold) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(15px, 3.8vw, 17px) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.35 !important;
}

.enhanced-pricing-section .pricing-accordion-content {
    overflow-x: hidden !important;
    padding: clamp(12px, 3vw, 16px) !important;
    background: var(--ep-lux-ivory) !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* ─── Shared booking / summary cards ─────────────────────────────────────── */
.enhanced-pricing-section .occupancy-tiers-booking-section,
.enhanced-pricing-section .fixed-price-summary-wrapper,
.enhanced-pricing-section [data-structure-key] > div[style*="border-radius"],
.enhanced-pricing-section .group-joining-interactive-panel,
.enhanced-pricing-section .sp-overview,
.enhanced-pricing-section .sp-card {
    border-radius: var(--ep-lux-radius) !important;
    box-shadow: var(--ep-lux-shadow) !important;
}

.enhanced-pricing-section .occupancy-tiers-booking-section,
.enhanced-pricing-section .fixed-price-summary-wrapper {
    padding: clamp(14px, 3.5vw, 20px) !important;
    border: 1px solid rgba(201, 168, 76, 0.28) !important;
    background: linear-gradient(160deg, #fff 0%, var(--ep-lux-ivory) 100%) !important;
    max-width: 100%;
    box-sizing: border-box;
}

.enhanced-pricing-section .fixed-price-summary-wrapper h4,
.enhanced-pricing-section .occupancy-tiers-booking-section h5,
.enhanced-pricing-section .occupancy-tiers-booking-section h6 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--ep-lux-navy) !important;
}

/* Fixed price combined container (inline styles override via specificity) */
.enhanced-pricing-section [data-structure-key="fixed_price"] > div[data-no-auto-select] > div[style*="border-radius: 12px"] {
    padding: 14px !important;
    border-radius: var(--ep-lux-radius) !important;
    border-color: rgba(201, 168, 76, 0.25) !important;
}

/* ─── Buttons (select package, counters, CTA) ─────────────────────────────── */
.enhanced-pricing-section .select-occupancy-package-btn,
.enhanced-pricing-section .fixed-select-package-btn,
.enhanced-pricing-section .btn-select-package,
.enhanced-pricing-section button[class*="select"],
.enhanced-pricing-section .gj-select-btn {
    border-radius: var(--ep-lux-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    max-width: 100%;
}

.enhanced-pricing-section .select-occupancy-package-btn:not(:disabled),
.enhanced-pricing-section .fixed-select-package-btn,
.enhanced-pricing-section .btn-select-package:not(:disabled) {
    background: linear-gradient(135deg, var(--ep-lux-gold) 0%, #b8943f 100%) !important;
    color: var(--ep-lux-navy) !important;
    border: none !important;
}

.enhanced-pricing-section .counter-btn,
.enhanced-pricing-section .guest-btn,
.enhanced-pricing-section .occupancy-tiers-booking-section .counter-btn {
    border: 2px solid var(--ep-lux-gold) !important;
    color: var(--ep-lux-gold) !important;
    background: #fff !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: var(--ep-lux-radius-sm) !important;
}

.enhanced-pricing-section .counter-btn:hover,
.enhanced-pricing-section .guest-btn:hover {
    background: var(--ep-lux-gold) !important;
    color: var(--ep-lux-navy) !important;
}

.enhanced-pricing-section .step-number {
    background: var(--ep-lux-gold) !important;
    color: var(--ep-lux-navy) !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
}

/* ─── Inputs & date pickers ──────────────────────────────────────────────── */
.enhanced-pricing-section input.form-control,
.enhanced-pricing-section select.form-control,
.enhanced-pricing-section .occupancy-date-input,
.enhanced-pricing-section .tour-start-date,
.enhanced-pricing-section .fixed-date-picker,
.enhanced-pricing-section [class*="date-picker"] {
    border: 2px solid var(--ep-lux-silver) !important;
    border-radius: var(--ep-lux-radius-sm) !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.enhanced-pricing-section input:focus,
.enhanced-pricing-section select:focus {
    border-color: var(--ep-lux-gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18) !important;
    outline: none !important;
}

/* ─── Extra service / guest type cards ───────────────────────────────────── */
.enhanced-pricing-section .fixed-extra-service-card,
.enhanced-pricing-section .extra-service-item,
.enhanced-pricing-section .guest-type-section {
    padding: 12px !important;
    border-radius: var(--ep-lux-radius-sm) !important;
    max-width: 100%;
    box-sizing: border-box;
}

.enhanced-pricing-section .fixed-extra-service-card {
    gap: 10px !important;
}

.enhanced-pricing-section .guest-type-section[style*="background:#f0fdf4"] {
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.1) 0%, rgba(201, 168, 76, 0.04) 100%) !important;
    border-left: 3px solid var(--ep-lux-gold) !important;
}

.enhanced-pricing-section .guest-type-section[style*="background:#fefce8"] {
    background: linear-gradient(135deg, rgba(13, 27, 42, 0.06) 0%, rgba(13, 27, 42, 0.02) 100%) !important;
    border-left: 3px solid var(--ep-lux-navy) !important;
}

/* ─── Pricing tables (occupancy otp + generic) ───────────────────────────── */
.enhanced-pricing-section .otp-table-wrap,
.enhanced-pricing-section .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: var(--ep-lux-radius-sm);
    border: 1px solid var(--ep-lux-silver);
}

.enhanced-pricing-section .otp-table thead th,
.enhanced-pricing-section table thead th {
    background: var(--ep-lux-navy) !important;
    color: var(--ep-lux-gold) !important;
    font-size: 10px !important;
    padding: 8px 6px !important;
}

.enhanced-pricing-section .otp-table td,
.enhanced-pricing-section .otp-table th {
    font-size: 12px !important;
    padding: 8px 6px !important;
}

.enhanced-pricing-section .otp-season-cell-chip,
.enhanced-pricing-section .otp-date-chip {
    white-space: normal !important;
    word-break: break-word;
    font-size: 10px !important;
}

/* ─── Price summary rows ─────────────────────────────────────────────────── */
.enhanced-pricing-section .price-summary-row,
.enhanced-pricing-section #price-breakdown-container {
    max-width: 100%;
}

.enhanced-pricing-section .price-summary-label,
.enhanced-pricing-section .price-summary-value {
    font-size: 13px !important;
    white-space: normal !important;
    min-width: 0 !important;
    word-break: break-word;
}

.enhanced-pricing-section #summary-total-price,
.enhanced-pricing-section [id*="total-amount-"] {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--ep-lux-gold) !important;
}

/* ─── Seasonal / group joining compact ───────────────────────────────────── */
.enhanced-pricing-section .person-type-counter,
.enhanced-pricing-section .gj-table-row {
    font-size: 13px !important;
}

.enhanced-pricing-section .sp-card-header,
.enhanced-pricing-section .sp-overview-header,
.enhanced-pricing-section .gj-table-header {
    background: var(--ep-lux-navy) !important;
    color: var(--ep-lux-gold) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
}

/* ─── Flatpickr (occupancy + any in-section) ───────────────────────────────── */
.flatpickr-calendar.occupancy-tier-flatpickr {
    transform: none !important;
    width: min(calc(100vw - 24px), 300px) !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 100002 !important;
    border-radius: var(--ep-lux-radius) !important;
}

.flatpickr-calendar.occupancy-tier-flatpickr .flatpickr-day:not(.flatpickr-disabled) {
    color: var(--ep-lux-charcoal) !important;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.flatpickr-calendar.occupancy-tier-flatpickr .flatpickr-day.selected {
    background: var(--ep-lux-gold) !important;
    color: var(--ep-lux-navy) !important;
}

/* ─── Occupancy-specific (from occupancy-tiers-luxury) ─────────────────── */
[data-structure-key="occupancy_tiers"] .pricing-accordion-content,
[data-structure-key="occupancy_tiers"] .otp-wrap,
[data-structure-key="occupancy_tiers"] .occupancy-tiers-booking-section {
    max-width: 100%;
    box-sizing: border-box;
}

[data-structure-key="occupancy_tiers"] .counter-row .d-flex {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 767px) {
    .enhanced-pricing-section .pricing-structures-accordion {
        gap: 10px !important;
    }

    .enhanced-pricing-section .pricing-accordion-header {
        padding: 12px !important;
    }

    .enhanced-pricing-section .fixed-extra-service-card {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .enhanced-pricing-section .counter-row .d-flex {
        justify-content: space-between;
    }

    /* Occupancy table → stacked cards */
    [data-structure-key="occupancy_tiers"] .otp-table thead {
        display: none;
    }

    [data-structure-key="occupancy_tiers"] .otp-table,
    [data-structure-key="occupancy_tiers"] .otp-table tbody,
    [data-structure-key="occupancy_tiers"] .otp-table tr,
    [data-structure-key="occupancy_tiers"] .otp-table td {
        display: block;
        width: 100%;
    }

    [data-structure-key="occupancy_tiers"] .otp-table tbody tr {
        margin-bottom: 12px;
        padding: 12px;
        background: #fff;
        border: 1px solid var(--ep-lux-silver);
        border-radius: var(--ep-lux-radius);
        box-shadow: var(--ep-lux-shadow);
    }

    [data-structure-key="occupancy_tiers"] .otp-table tbody td {
        border: none !important;
        padding: 6px 0 !important;
        text-align: left !important;
        background: transparent !important;
    }

    [data-structure-key="occupancy_tiers"] .otp-table tbody td:first-child {
        padding-bottom: 10px !important;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--ep-lux-silver) !important;
    }

    [data-structure-key="occupancy_tiers"] .otp-table tbody td[data-label]:not(:first-child) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px;
    }

    [data-structure-key="occupancy_tiers"] .otp-table tbody td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        flex: 1 1 45%;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ep-lux-navy);
    }

    .flatpickr-calendar.occupancy-tier-flatpickr {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

@media (max-width: 380px) {
    .enhanced-pricing-section .select-occupancy-package-btn,
    .enhanced-pricing-section .fixed-select-package-btn {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
}