/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — ENHANCED BOOKING EXTRAS (E20)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-sections-booking-extras.css
 * @package     Lavisa_Destinations_Theme
 * @since       2.9.21  (E20 — Visual Enhancement Roadmap v2 — Stage 7 middle)
 * @depends     ldt-tokens-enhanced.css                 (E1)
 *              ldt-enhanced-base.css                   (E2)
 *              ldt-enhanced-animations.css             (E3 — keyframes:
 *                                                           ldt-fade-up)
 *              ldt-enhanced-sections-deals.css         (E10 — testimonials
 *                                                           strip already polished)
 *              ldt-enhanced-sections-booking.css       (E19 — booking forms)
 *
 *   Polishes the supporting content sections on flights / hotels / cars
 *   booking pages — what visitors scroll through after the search form:
 *
 *     section-hotels-categories.php       Wraps section-feature-grid
 *     section-cars-categories.php         Wraps section-feature-grid
 *     section-flights-faq.php             Wraps section-faq with --flights
 *     section-hotels-faq.php              Wraps section-faq with --hotels
 *     section-cars-faq.php                Wraps section-faq with --cars
 *     section-booking-testimonials.php    Wraps section-testimonials-strip
 *
 *   The polish hooks off:
 *     .ldt-booking-content                outer wrapper (per-variant)
 *     .ldt-fg / .ldt-fg--card             feature-grid card variant
 *     .ldt-faq / .ldt-faq--card           accordion FAQ with details/summary
 *
 *   PURE CSS LAYER — no PHP partial is touched.
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. BOOKING CONTENT WRAPPER — per-variant section background tints
 *
 * The .ldt-booking-content wrapper has inline `padding: 48px 0 8px` from each
 * PHP partial's <style> block. We don't override that — we add per-variant
 * accent tints on category sections + soft surface backgrounds.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Variant-aware soft surface for category sections (hotels/cars) */
body .ldt-booking-content--hotels {
    background: linear-gradient(
        180deg,
        rgba(255, 140, 0, 0.02) 0%,
        rgba(0, 53, 128, 0.02) 100%
    );
}

body .ldt-booking-content--cars {
    background: linear-gradient(
        180deg,
        rgba(0, 53, 128, 0.03) 0%,
        rgba(15, 23, 42, 0.02) 100%
    );
}

body .ldt-booking-content--testimonials {
    background: linear-gradient(
        180deg,
        rgba(0, 53, 128, 0.03) 0%,
        transparent 100%
    );
}

body .ldt-booking-content--faq {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 53, 128, 0.03) 100%
    );
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. FEATURE GRID — card variant (.ldt-fg.ldt-fg--card)
 *
 * Used by hotels-categories ("Every Kind of Stay") and cars-categories
 * ("Find the Right Vehicle"). Items are clickable cards with icon + title +
 * description.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Header */
body .ldt-fg__header {
    text-align: center;
    margin-bottom: 28px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

body .ldt-fg__title {
    background: var(--ldt-gradient-text,
                linear-gradient(135deg, #003580 0%, #0057b8 50%, #ff8c00 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ldt-primary, #003580);  /* fallback */
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

body .ldt-fg__subtitle {
    color: var(--ldt-gray-600, #64748b);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
}

/* Grid (ul/ol) */
body .ldt-fg__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Item — wraps either anchor or div */
body .ldt-fg__item {
    list-style: none;
}

/* Item inner — card surface */
body .ldt-fg--card .ldt-fg__item-inner,
body .ldt-fg--card .ldt-fg__item-inner--link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px;
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.92));
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 53, 128, 0.08);
    border-radius: var(--ldt-radius-card, 1.25rem);
    box-shadow: 0 4px 14px rgba(0, 53, 128, 0.06);
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition:
        transform 350ms var(--ldt-ease-portal, ease),
        border-color 350ms var(--ldt-ease-portal, ease),
        box-shadow 350ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-fg--card .ldt-fg__item-inner--link:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 140, 0, 0.30);
        box-shadow:
            0 18px 36px -8px rgba(0, 53, 128, 0.18),
            0 0 0 1px rgba(255, 140, 0, 0.10);
    }
}

/* Numbered variant */
body .ldt-fg__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--ldt-gradient-brand,
                linear-gradient(135deg, #003580 0%, #0057b8 100%));
    color: #ffffff;
    border-radius: var(--ldt-radius-input, 0.75rem);
    font-family: var(--ldt-font-mono, 'JetBrains Mono', monospace);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 53, 128, 0.20);
}

/* Icon — emoji square */
body .ldt-fg__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ldt-radius-input, 0.75rem);
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.10) 0%,
        rgba(255, 140, 0, 0.04) 100%
    );
    border: 1px solid rgba(255, 140, 0, 0.20);
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    transition:
        background 300ms var(--ldt-ease-portal, ease),
        transform 300ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-fg--card .ldt-fg__item-inner--link:hover .ldt-fg__icon {
        background: var(--ldt-gradient-accent,
                    linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
        border-color: transparent;
        transform: scale(1.06);
    }
}

/* Item title */
body .ldt-fg__item-title {
    color: var(--ldt-dark, #1e293b);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin: 0;
    transition: color 300ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-fg--card .ldt-fg__item-inner--link:hover .ldt-fg__item-title {
        color: var(--ldt-primary, #003580);
    }
}

/* Item text */
body .ldt-fg__item-text {
    color: var(--ldt-gray-600, #64748b);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. FAQ ACCORDION — card variant (.ldt-faq.ldt-faq--card)
 *
 * Used by flights-faq, hotels-faq, and cars-faq. Each FAQ item is a
 * `<details>` element with `<summary>` (question) + answer body. Includes
 * single_open behavior managed via JS.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-faq {
    padding: 32px 0;
}

/* Header */
body .ldt-faq__header {
    text-align: center;
    margin-bottom: 24px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

body .ldt-faq__title {
    background: var(--ldt-gradient-text,
                linear-gradient(135deg, #003580 0%, #0057b8 50%, #ff8c00 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ldt-primary, #003580);  /* fallback */
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

body .ldt-faq__subtitle {
    color: var(--ldt-gray-600, #64748b);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
}

/* List wrapper */
body .ldt-faq__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 880px;
    margin: 0 auto;
}

/* Item — <details> wrapper as a card */
body .ldt-faq--card .ldt-faq__item {
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.92));
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 53, 128, 0.08);
    border-radius: var(--ldt-radius-card, 1.25rem);
    box-shadow: 0 2px 8px rgba(0, 53, 128, 0.04);
    overflow: hidden;
    transition:
        border-color 300ms var(--ldt-ease-portal, ease),
        box-shadow 300ms var(--ldt-ease-portal, ease);
}

/* Open state — accent border + soft glow */
body .ldt-faq--card .ldt-faq__item[open] {
    border-color: rgba(255, 140, 0, 0.30);
    box-shadow:
        0 8px 22px rgba(255, 140, 0, 0.08),
        0 0 0 1px rgba(255, 140, 0, 0.10);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-faq--card .ldt-faq__item:not([open]):hover {
        border-color: rgba(0, 53, 128, 0.16);
        box-shadow: 0 6px 16px rgba(0, 53, 128, 0.08);
    }
}

/* Question (the <summary>) */
body .ldt-faq__question {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 200ms var(--ldt-ease-portal, ease);
}

/* Hide default disclosure arrow */
body .ldt-faq__question::-webkit-details-marker {
    display: none;
}

body .ldt-faq__question::marker {
    display: none;
}

/* Hover (when not open) — soft brand-tint background */
@media (hover: hover) and (pointer: fine) {
    body .ldt-faq--card .ldt-faq__item:not([open]) .ldt-faq__question:hover {
        background: rgba(0, 53, 128, 0.03);
    }
}

/* Question text */
body .ldt-faq__question-text {
    flex: 1;
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    line-height: 1.35;
    transition: color 250ms var(--ldt-ease-portal, ease);
}

body .ldt-faq--card .ldt-faq__item[open] .ldt-faq__question-text {
    color: var(--ldt-primary, #003580);
}

/* Chevron — accent gradient circle that rotates 180° when open */
body .ldt-faq__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 140, 0, 0.10);
    border: 1px solid rgba(255, 140, 0, 0.20);
    color: var(--ldt-accent, #ff8c00);
    font-size: 14px;
    flex-shrink: 0;
    transition:
        background 300ms var(--ldt-ease-portal, ease),
        border-color 300ms var(--ldt-ease-portal, ease),
        color 300ms var(--ldt-ease-portal, ease),
        transform 300ms var(--ldt-ease-portal, ease);
}

body .ldt-faq--card .ldt-faq__item[open] .ldt-faq__chevron {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    border-color: transparent;
    color: #ffffff;
    transform: rotate(180deg);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.30);
}

/* Answer wrapper */
body .ldt-faq__answer {
    overflow: hidden;
}

/* Answer inner — actual content */
body .ldt-faq__answer-inner {
    padding: 0 22px 20px;
    color: var(--ldt-gray-700, #334155);
    font-size: 15px;
    line-height: 1.7;
}

body .ldt-faq__answer-inner > *:first-child {
    margin-top: 0;
}

body .ldt-faq__answer-inner > *:last-child {
    margin-bottom: 0;
}

body .ldt-faq__answer-inner a {
    color: var(--ldt-accent-dark, #e07a00);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 140, 0, 0.40);
    transition:
        color 200ms var(--ldt-ease-portal, ease),
        text-decoration-color 200ms var(--ldt-ease-portal, ease);
}

body .ldt-faq__answer-inner a:hover {
    color: var(--ldt-accent, #ff8c00);
    text-decoration-color: var(--ldt-accent, #ff8c00);
}

body .ldt-faq__answer-inner strong {
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
}

/* Open-state subtle reveal — fade-up the answer (motion-reduced fallback inside) */
body .ldt-faq--card .ldt-faq__item[open] .ldt-faq__answer-inner {
    animation: ldt-fade-up 350ms var(--ldt-ease-portal, ease);
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-faq--card .ldt-faq__item[open] .ldt-faq__answer-inner {
        animation: none;
    }
}

/* Per-variant accent tints on FAQ section title (subtle category cue) */
body .ldt-booking-content--flights .ldt-faq__title {
    background: linear-gradient(
        135deg,
        #003580 0%,
        #0057b8 50%,
        #1e90ff 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
}

body .ldt-booking-content--cars .ldt-faq__title {
    background: linear-gradient(
        135deg,
        #1e293b 0%,
        #003580 60%,
        #0057b8 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
}

/* Hotels keep the default 3-stop gradient with accent already */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. BOOKING TESTIMONIALS WRAPPER (.ldt-booking-content--testimonials)
 *
 * The inner section-testimonials-strip is already polished by E10. We only
 * polish the booking-page wrapper context here — no double-up on the strip
 * itself.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-booking-content--testimonials {
    /* Soft top border separator from search form above */
    border-top: 1px solid rgba(0, 53, 128, 0.06);
}

/* Per-variant subtle accent on testimonials title (if present) */
body .ldt-booking-content--testimonials.ldt-booking-content--flights {
    /* Inherits flights tint */
}

body .ldt-booking-content--testimonials.ldt-booking-content--hotels {
    background: linear-gradient(
        180deg,
        rgba(255, 140, 0, 0.03) 0%,
        transparent 100%
    );
}

body .ldt-booking-content--testimonials.ldt-booking-content--cars {
    background: linear-gradient(
        180deg,
        rgba(0, 53, 128, 0.04) 0%,
        transparent 100%
    );
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Feature grid: tighter card padding */
    body .ldt-fg--card .ldt-fg__item-inner,
    body .ldt-fg--card .ldt-fg__item-inner--link {
        padding: 18px 16px;
    }

    body .ldt-fg__icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    /* FAQ: tighter padding + smaller chevron */
    body .ldt-faq {
        padding: 24px 0;
    }

    body .ldt-faq__question {
        padding: 14px 16px;
        gap: 12px;
    }

    body .ldt-faq__question-text {
        font-size: 15px;
    }

    body .ldt-faq__chevron {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    body .ldt-faq__answer-inner {
        padding: 0 16px 16px;
        font-size: 14px;
    }
}


/* ─── END OF ldt-enhanced-sections-booking-extras.css ─────────────────────── */