/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — ENHANCED ARCHIVE PREVIEW + INFO SECTIONS (E14)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-sections-archive-extras.css
 * @package     Lavisa_Destinations_Theme
 * @since       2.9.15  (E14 — Visual Enhancement Roadmap v2 — closes Stage 5)
 * @depends     ldt-tokens-enhanced.css                  (E1)
 *              ldt-enhanced-base.css                    (E2)
 *              ldt-enhanced-animations.css              (E3)
 *              ldt-enhanced-sections-archive.css        (E12 — base archive)
 *              ldt-enhanced-sections-archive-pages.css  (E13 — page-specific)
 *
 *   Polishes the supplementary preview + info sections that appear on
 *   country / city / region archive pages alongside the main destination
 *   grid:
 *
 *     section-attractions-preview.php  Top attractions (image cards + categories)
 *     section-dining-preview.php       Restaurants (image cards + cuisine tags)
 *     section-hotels-preview.php       Hotels (image cards + stars + price + score)
 *     section-practical-info.php       Panel cards (icon + key-value rows)
 *     section-travel-tips.php          Tip cards (icon + label + value + note)
 *     section-visa-banner.php          Visa requirements banner with CTA
 *
 *   PURE CSS LAYER — no PHP partial is touched. Same approach as E4-E13.
 *   Closes Stage 5 (Archive & Listing).
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. SHARED PREVIEW SECTION HEADERS
 *
 * The three preview sections (attractions, dining, hotels) all use the same
 * header pattern with __title, __subtitle, __viewall. We unify the polish.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-ap__header,
body .ldt-dp__header,
body .ldt-hp__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

body .ldt-ap__title,
body .ldt-dp__title,
body .ldt-hp__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;
}

body .ldt-ap__subtitle,
body .ldt-dp__subtitle,
body .ldt-hp__subtitle {
    color: var(--ldt-gray-600, #64748b);
    margin: 0;
}

body .ldt-ap__viewall,
body .ldt-dp__viewall,
body .ldt-hp__viewall {
    color: var(--ldt-primary, #003580);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition:
        color 200ms var(--ldt-ease-portal, ease),
        gap 200ms var(--ldt-ease-portal, ease);
}

body .ldt-ap__viewall:hover,
body .ldt-dp__viewall:hover,
body .ldt-hp__viewall:hover {
    color: var(--ldt-accent, #ff8c00);
    gap: 10px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. ATTRACTIONS PREVIEW (.ldt-ap-card)
 *
 * Image card with category badge + name + meta row.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-ap-card {
    background: #ffffff;
    border-radius: var(--ldt-radius-card, 1.25rem);
    overflow: hidden;
    border: 1px solid rgba(0, 53, 128, 0.04);
    box-shadow: 0 4px 14px rgba(0, 53, 128, 0.06);
    transition:
        transform 350ms var(--ldt-ease-portal, ease),
        box-shadow 350ms var(--ldt-ease-portal, ease),
        border-color 350ms var(--ldt-ease-portal, ease);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-ap-card:hover {
        transform: translateY(-6px);
        border-color: rgba(255, 140, 0, 0.20);
        box-shadow:
            0 18px 36px -8px rgba(0, 53, 128, 0.20),
            0 0 0 1px rgba(255, 140, 0, 0.08);
    }
}

body .ldt-ap-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

body .ldt-ap-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

body .ldt-ap-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ldt-ease-portal, ease);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-ap-card:hover .ldt-ap-card__img {
        transform: scale(1.08);
    }
}

body .ldt-ap-card__img--placeholder {
    background: linear-gradient(
        135deg,
        rgba(0, 53, 128, 0.16) 0%,
        rgba(255, 140, 0, 0.16) 100%
    );
}

/* Category badge — glass-light pill top-right */
body .ldt-ap-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--ldt-radius-pill, 9999px);
    color: var(--ldt-accent-dark, #e07a00);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

[dir="rtl"] body .ldt-ap-card__badge,
.ldt-rtl body .ldt-ap-card__badge {
    right: auto;
    left: 12px;
}

body .ldt-ap-card__body {
    padding: 16px 18px;
}

body .ldt-ap-card__name {
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    transition: color 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-ap-card:hover .ldt-ap-card__name {
        color: var(--ldt-primary, #003580);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. DINING PREVIEW (.ldt-dp-card)
 *
 * Restaurant cards — similar shape to attractions, with cuisine pill instead.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-dp-card {
    background: #ffffff;
    border-radius: var(--ldt-radius-card, 1.25rem);
    overflow: hidden;
    border: 1px solid rgba(0, 53, 128, 0.04);
    box-shadow: 0 4px 14px rgba(0, 53, 128, 0.06);
    transition:
        transform 350ms var(--ldt-ease-portal, ease),
        box-shadow 350ms var(--ldt-ease-portal, ease),
        border-color 350ms var(--ldt-ease-portal, ease);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-dp-card:hover {
        transform: translateY(-6px);
        border-color: rgba(255, 140, 0, 0.20);
        box-shadow:
            0 18px 36px -8px rgba(0, 53, 128, 0.20),
            0 0 0 1px rgba(255, 140, 0, 0.08);
    }
}

body .ldt-dp-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

body .ldt-dp-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

body .ldt-dp-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ldt-ease-portal, ease);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-dp-card:hover .ldt-dp-card__img {
        transform: scale(1.08);
    }
}

body .ldt-dp-card__img--placeholder {
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.16) 0%,
        rgba(0, 53, 128, 0.16) 100%
    );
}

/* Cuisine pill — accent gradient (food = appetite = orange) */
body .ldt-dp-card__cuisine {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: var(--ldt-shadow-accent-soft,
                0 2px 10px rgba(255, 140, 0, 0.30));
    z-index: 1;
}

[dir="rtl"] body .ldt-dp-card__cuisine,
.ldt-rtl body .ldt-dp-card__cuisine {
    left: auto;
    right: 12px;
}

body .ldt-dp-card__body {
    padding: 16px 18px;
}

body .ldt-dp-card__name {
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    transition: color 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-dp-card:hover .ldt-dp-card__name {
        color: var(--ldt-accent-dark, #e07a00);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. HOTELS PREVIEW (.ldt-hp-card)
 *
 * Hotel cards — image + score badge overlay + name + neighborhood + stars + price.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hp-card {
    background: #ffffff;
    border-radius: var(--ldt-radius-card, 1.25rem);
    overflow: hidden;
    border: 1px solid rgba(0, 53, 128, 0.04);
    box-shadow: 0 4px 14px rgba(0, 53, 128, 0.06);
    transition:
        transform 350ms var(--ldt-ease-portal, ease),
        box-shadow 350ms var(--ldt-ease-portal, ease),
        border-color 350ms var(--ldt-ease-portal, ease);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-hp-card:hover {
        transform: translateY(-6px);
        border-color: rgba(255, 140, 0, 0.20);
        box-shadow:
            0 18px 36px -8px rgba(0, 53, 128, 0.20),
            0 0 0 1px rgba(255, 140, 0, 0.08);
    }
}

body .ldt-hp-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

body .ldt-hp-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

body .ldt-hp-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ldt-ease-portal, ease);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-hp-card:hover .ldt-hp-card__img {
        transform: scale(1.08);
    }
}

body .ldt-hp-card__img--placeholder {
    background: linear-gradient(
        135deg,
        rgba(0, 53, 128, 0.16) 0%,
        rgba(0, 87, 184, 0.16) 100%
    );
}

/* Score badge — brand-blue gradient pill (review score, e.g. "9.2 Excellent") */
body .ldt-hp-card__score {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    background: var(--ldt-gradient-brand,
                linear-gradient(135deg, #003580 0%, #0057b8 100%));
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--ldt-radius-pill, 9999px);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(0, 53, 128, 0.30);
    z-index: 1;
}

[dir="rtl"] body .ldt-hp-card__score,
.ldt-rtl body .ldt-hp-card__score {
    left: auto;
    right: 12px;
}

body .ldt-hp-card__body {
    padding: 16px 18px;
}

body .ldt-hp-card__name {
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    transition: color 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-hp-card:hover .ldt-hp-card__name {
        color: var(--ldt-primary, #003580);
    }
}

body .ldt-hp-card__neighborhood {
    color: var(--ldt-gray-500, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Bottom row — stars + price */
body .ldt-hp-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 53, 128, 0.06);
}

/* Star rating */
body .ldt-hp-card__stars {
    color: var(--ldt-accent, #ff8c00);
    font-size: 14px;
    letter-spacing: 0.04em;
    filter: drop-shadow(0 1px 1px rgba(255, 140, 0, 0.30));
}

/* Price block */
body .ldt-hp-card__price {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

[dir="rtl"] body .ldt-hp-card__price,
.ldt-rtl body .ldt-hp-card__price {
    align-items: flex-start;
}

body .ldt-hp-card__price-from {
    color: var(--ldt-gray-500, #94a3b8);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Price amount — gradient text (the visual focal point) */
body .ldt-hp-card__price-amount,
body .ldt-hp-card__price > strong,
body .ldt-hp-card__price > span:not(.ldt-hp-card__price-from) {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ldt-accent, #ff8c00);  /* fallback */
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. PRACTICAL INFO (.ldt-practical-info, .ldt-practical-panel)
 *
 * Panel cards with icon + title in header + key-value definition list.
 * Used for things like Currency, Time Zone, Visa, Plug Type, etc.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-practical-info__header {
    text-align: center;
    margin-bottom: 24px;
}

body .ldt-practical-info__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-practical-info__subtitle {
    color: var(--ldt-gray-600, #64748b);
    margin: 0;
}

body .ldt-practical-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

/* Panel card */
body .ldt-practical-panel {
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.92));
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 53, 128, 0.08);
    border-radius: var(--ldt-radius-card, 1.25rem);
    box-shadow: 0 4px 16px rgba(0, 53, 128, 0.06);
    padding: 22px;
    transition:
        transform 300ms var(--ldt-ease-portal, ease),
        box-shadow 300ms var(--ldt-ease-portal, ease),
        border-color 300ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-practical-panel:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 140, 0, 0.20);
        box-shadow: 0 14px 30px rgba(0, 53, 128, 0.10);
    }
}

/* Panel header — icon + title */
body .ldt-practical-panel__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 53, 128, 0.06);
}

body .ldt-practical-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ldt-radius-input, 0.75rem);
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    color: #ffffff;
    box-shadow: var(--ldt-shadow-accent-soft,
                0 4px 12px rgba(255, 140, 0, 0.25));
    flex-shrink: 0;
}

body .ldt-practical-panel__title {
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    margin: 0;
}

/* Definition list */
body .ldt-practical-panel__list {
    margin: 0;
    padding: 0;
}

body .ldt-practical-panel__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0, 53, 128, 0.08);
}

body .ldt-practical-panel__row:last-child {
    border-bottom: none;
}

body .ldt-practical-panel__label {
    color: var(--ldt-gray-600, #64748b);
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

body .ldt-practical-panel__value {
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    font-size: 14px;
    margin: 0;
    text-align: right;
}

[dir="rtl"] body .ldt-practical-panel__value,
.ldt-rtl body .ldt-practical-panel__value {
    text-align: left;
}

body .ldt-practical-panel__note {
    display: block;
    color: var(--ldt-gray-500, #94a3b8);
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 6. TRAVEL TIPS (.ldt-tt-card)
 *
 * Compact tip cards with prominent icon + title + value + note.
 * (Best time to visit, Tipping, Currency exchange tips, etc.)
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-tt__header {
    text-align: center;
    margin-bottom: 24px;
}

body .ldt-tt__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-tt__subtitle {
    color: var(--ldt-gray-600, #64748b);
    margin: 0;
}

body .ldt-tt__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* Tip card — accent-tinted glass with icon at top-left */
body .ldt-tt-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    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.04);
    transition:
        transform 300ms var(--ldt-ease-portal, ease),
        box-shadow 300ms var(--ldt-ease-portal, ease),
        border-color 300ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-tt-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 140, 0, 0.30);
        box-shadow: 0 14px 28px rgba(255, 140, 0, 0.12);
    }
}

/* Tip icon — accent square with subtle pulse glow */
body .ldt-tt-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ldt-radius-input, 0.75rem);
    background: rgba(255, 140, 0, 0.10);
    border: 1px solid rgba(255, 140, 0, 0.20);
    color: var(--ldt-accent, #ff8c00);
    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-tt-card:hover .ldt-tt-card__icon {
        background: var(--ldt-gradient-accent,
                    linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
        color: #ffffff;
        transform: scale(1.06);
        box-shadow: var(--ldt-shadow-accent-soft,
                    0 4px 12px rgba(255, 140, 0, 0.30));
    }
}

body .ldt-tt-card__body {
    flex: 1;
    min-width: 0;
}

body .ldt-tt-card__title {
    color: var(--ldt-gray-600, #64748b);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 4px;
}

body .ldt-tt-card__value {
    color: var(--ldt-dark, #1e293b);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    line-height: 1.3;
}

body .ldt-tt-card__note {
    color: var(--ldt-gray-500, #94a3b8);
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    font-style: italic;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 7. VISA BANNER (.ldt-visa-banner)
 *
 * Banner alerting visitors about visa requirements with a CTA. Variants exist
 * (--default / --info / --success / --warning) for different visa statuses.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-visa-banner {
    position: relative;
    overflow: hidden;
}

/* Default variant — brand-blue gradient bg with accent CTA */
body .ldt-visa-banner__inner {
    background: linear-gradient(
        135deg,
        #003580 0%,
        #0057b8 100%
    );
    border-radius: var(--ldt-radius-card, 1.25rem);
    padding: 28px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    box-shadow: 0 12px 32px rgba(0, 53, 128, 0.20);
    position: relative;
    overflow: hidden;
}

/* Soft accent blob top-right for depth */
body .ldt-visa-banner__inner::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 140, 0, 0.20) 0%,
        rgba(255, 140, 0, 0) 70%
    );
    pointer-events: none;
}

[dir="rtl"] body .ldt-visa-banner__inner::before,
.ldt-rtl body .ldt-visa-banner__inner::before {
    right: auto;
    left: -100px;
}

@media (max-width: 768px) {
    body .ldt-visa-banner__inner::before { display: none; }
}

/* Variant: --info (blue/teal — visa not required, easy access) */
body .ldt-visa-banner--info .ldt-visa-banner__inner,
body .ldt-visa-banner--success .ldt-visa-banner__inner {
    background: linear-gradient(
        135deg,
        #0d9488 0%,
        #14b8a6 50%,
        #003580 100%
    );
}

/* Variant: --warning (orange/amber — eVisa or special requirements) */
body .ldt-visa-banner--warning .ldt-visa-banner__inner {
    background: linear-gradient(
        135deg,
        #ea580c 0%,
        #f59e0b 100%
    );
}

/* Variant: --danger / --required (red/orange — visa required) */
body .ldt-visa-banner--required .ldt-visa-banner__inner,
body .ldt-visa-banner--danger .ldt-visa-banner__inner {
    background: linear-gradient(
        135deg,
        #b91c1c 0%,
        #dc2626 100%
    );
}

body .ldt-visa-banner__main {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* Passport icon — large, glassy circle */
body .ldt-visa-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--ldt-radius-input, 0.75rem);
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
}

body .ldt-visa-banner__text {
    flex: 1;
    min-width: 0;
}

body .ldt-visa-banner__title {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

body .ldt-visa-banner__subtitle {
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
}

body .ldt-visa-banner__note {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    margin: 4px 0 0;
}

/* CTA — white pill with reading direction text */
body .ldt-visa-banner__cta {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

body .ldt-visa-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: #ffffff;
    color: var(--ldt-primary, #003580);
    border-radius: var(--ldt-radius-pill, 9999px);
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20);
    transition:
        transform 250ms var(--ldt-ease-portal, ease),
        box-shadow 250ms var(--ldt-ease-portal, ease),
        background 250ms var(--ldt-ease-portal, ease),
        color 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-visa-banner__btn:hover {
        transform: translateY(-2px);
        background: var(--ldt-accent, #ff8c00);
        color: #ffffff;
        box-shadow: 0 12px 28px rgba(255, 140, 0, 0.45);
    }
}

/* On warning/required variants, CTA is dark for contrast */
body .ldt-visa-banner--warning .ldt-visa-banner__btn,
body .ldt-visa-banner--required .ldt-visa-banner__btn,
body .ldt-visa-banner--danger .ldt-visa-banner__btn {
    color: var(--ldt-dark, #1e293b);
}

/* Arrow icon inside CTA — slides on hover */
body .ldt-visa-banner__btn-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-visa-banner__btn:hover .ldt-visa-banner__btn-arrow {
        transform: translateX(4px);
    }

    [dir="rtl"] body .ldt-visa-banner__btn:hover .ldt-visa-banner__btn-arrow,
    .ldt-rtl body .ldt-visa-banner__btn:hover .ldt-visa-banner__btn-arrow {
        transform: translateX(-4px) scaleX(-1);
    }
}

/* In RTL, the arrow should already be flipped by the layout. Apply flip. */
[dir="rtl"] body .ldt-visa-banner__btn-arrow,
.ldt-rtl body .ldt-visa-banner__btn-arrow {
    transform: scaleX(-1);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 8. RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Practical info: smaller panels */
    body .ldt-practical-panel {
        padding: 18px;
    }

    body .ldt-practical-panel__icon {
        width: 32px;
        height: 32px;
    }

    /* Travel tips: tighter cards */
    body .ldt-tt-card {
        padding: 14px;
        gap: 10px;
    }

    body .ldt-tt-card__icon {
        width: 36px;
        height: 36px;
    }

    /* Visa banner: stack vertically */
    body .ldt-visa-banner__inner {
        padding: 22px;
        flex-direction: column;
        align-items: flex-start;
    }

    body .ldt-visa-banner__cta {
        width: 100%;
    }

    body .ldt-visa-banner__btn {
        width: 100%;
        justify-content: center;
    }

    body .ldt-visa-banner__icon {
        width: 48px;
        height: 48px;
    }
}


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