/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — ENHANCED FOOTER POLISH (E5)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-footer.css
 * @package     Lavisa_Destinations_Theme
 * @since       2.9.6  (E5 — Visual Enhancement Roadmap v2)
 * @depends     ldt-tokens-enhanced.css      (E1 — gradients, shadows, glass tokens)
 *              ldt-enhanced-animations.css  (E3 — keyframes, pulse halo, marquee)
 *
 *   Footer / brand / newsletter / social / payment polish. PURE CSS LAYER —
 *   no PHP partial is modified. Hooks the existing class system already
 *   emitted by template-parts/footer/*:
 *
 *     .ldt-footer + #ldt-footer-{hash}      main wrapper (existing dark
 *                                           gradient is preserved — we add
 *                                           animated blob shapes on top via
 *                                           ::before/::after pseudo-elements)
 *     .ldt-footer__brand-logo, __site-name, __tagline, __desc
 *                                           brand block — typography polish
 *     .ldt-footer__contact-item             contact rows — soft hover lift
 *     .ldt-footer__social-btn               social icons — per-platform
 *                                           hover colors via [aria-label]
 *                                           attribute selectors
 *     .ldt-fnl + .ldt-fnl__*                newsletter form — glass-dark
 *                                           wrapper + accent gradient submit
 *                                           button + green pulse on success
 *     .ldt-footer__payment-badge            payment badges — grayscale →
 *                                           color on hover with lift
 *     .ldt-footer__title + __title-icon     section headings — pulse glow
 *
 *   SPECIFICITY:
 *     The existing inline `<style>` block in `footer-main.php` uses
 *     `#<?php echo $fid; ?>` (ID-prefixed) selectors, giving them 1,1,0
 *     specificity. To win against those we have three tactics:
 *       • Add NEW behavior that doesn't conflict (most blobs, halos, hovers,
 *         pseudo-elements) → plain selectors are fine.
 *       • Use `body` + class chains for higher specificity where possible.
 *       • Use `!important` ONLY where the inline rule sets the same property
 *         and we genuinely need to override (e.g., newsletter row background,
 *         payment badge background). The existing inline CSS doesn't use
 *         `!important` itself, so our `!important` wins cleanly.
 *
 *   ZERO PHP EDITS:
 *     Same approach as E4. The existing footer markup already emits every
 *     class we need; visual polish is layered via this file alone.
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. BACKGROUND BLOBS — animated decorative wash on the footer
 *
 * The existing footer has a 160deg blue-dark → blue → blue-light gradient.
 * We add two animated blurred blobs on top via ::before/::after pseudo-elements
 * (the existing CSS doesn't use these on .ldt-footer). The blobs sit behind
 * the content (z-index: 1; main content is z-index: 2) so they enhance depth
 * without competing with the text.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-footer {
    /* The existing rule sets `overflow: hidden` and `position: relative` —
       we rely on that here. */
}

.ldt-footer::before,
.ldt-footer::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.ldt-footer::before {
    width: 600px;
    height: 600px;
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.18) 0%,
        rgba(255, 140, 0, 0.10) 100%
    );
    top: -200px;
    right: -200px;
    animation: ldt-float-shape 22s ease-in-out infinite reverse;
}

.ldt-footer::after {
    width: 700px;
    height: 700px;
    background: linear-gradient(
        135deg,
        rgba(0, 87, 184, 0.20) 0%,
        rgba(0, 53, 128, 0.14) 100%
    );
    bottom: -300px;
    left: -300px;
    animation: ldt-float-shape 28s ease-in-out infinite;
}

[dir="rtl"] .ldt-footer::before,
.ldt-rtl .ldt-footer::before {
    right: auto;
    left: -200px;
}

[dir="rtl"] .ldt-footer::after,
.ldt-rtl .ldt-footer::after {
    left: auto;
    right: -300px;
}

/* Hide blobs on mobile — perf cost outweighs visual gain at <=768px */
@media (max-width: 768px) {
    .ldt-footer::before,
    .ldt-footer::after {
        display: none;
    }
}

/* Reduced-motion: keep blobs visible but stop them moving */
@media (prefers-reduced-motion: reduce) {
    .ldt-footer::before,
    .ldt-footer::after {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. BRAND COLUMN — typography polish + tagline accent
 *
 * Existing `.ldt-footer__site-name` is 22px / weight 800. Polish lays a
 * subtle text-shadow for depth on the dark backdrop and tightens the
 * tagline letter-spacing.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-footer .ldt-footer__site-name {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.20);
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.85) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Brand block hover — site name shifts slightly toward accent */
.ldt-footer .ldt-footer__brand-logo > a {
    transition: transform 250ms var(--ldt-ease-portal, ease);
    display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
    .ldt-footer .ldt-footer__brand-logo > a:hover {
        transform: translateY(-2px);
    }
}

/* Tagline — keep accent color but tighten + animate underline on hover */
.ldt-footer .ldt-footer__tagline {
    position: relative;
    display: inline-block;
}

/* Subtle accent dot before tagline — visual rhythm match to portal */
.ldt-footer .ldt-footer__tagline::before {
    content: "✦";
    margin-right: 6px;
    color: var(--ldt-accent, #ff8c00);
    font-size: 10px;
    vertical-align: middle;
    opacity: 0.8;
}

[dir="rtl"] .ldt-footer .ldt-footer__tagline::before,
.ldt-rtl .ldt-footer .ldt-footer__tagline::before {
    margin-right: 0;
    margin-left: 6px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. CONTACT ITEMS — softer hover lift + accent icon glow
 *
 * Existing `.ldt-footer__contact-item` already has rgba(255,255,255,0.04) bg
 * and a transition. We layer a brand-tinted hover state and an accent glow
 * on the icon — keeping the existing transform: translateX behavior.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-footer .ldt-footer__contact-item {
    border: 1px solid transparent;
    transition:
        background-color 250ms var(--ldt-ease-portal, ease),
        border-color 250ms var(--ldt-ease-portal, ease),
        transform 250ms var(--ldt-ease-portal, ease),
        box-shadow 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    .ldt-footer .ldt-footer__contact-item:hover {
        background: rgba(255, 140, 0, 0.10) !important;
        border-color: rgba(255, 140, 0, 0.22);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }
}

/* Icon container — gain a glow on parent hover */
.ldt-footer .ldt-footer__contact-icon {
    transition:
        transform 300ms var(--ldt-ease-portal, ease),
        filter 300ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    .ldt-footer .ldt-footer__contact-item:hover .ldt-footer__contact-icon {
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.5));
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. SOCIAL ICONS — glass-dark base + per-platform hover colors + lift
 *
 * Existing `.ldt-footer__social-btn` is a plain anchor with emoji content.
 * The existing CSS doesn't define a circular bg, so we shape it here.
 * Per-platform hover colors target the [aria-label] attribute the existing
 * markup already emits ("Facebook", "Instagram", etc.).
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-footer .ldt-footer__social-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 16px;
    transition:
        background-color 250ms var(--ldt-ease-portal, ease),
        border-color 250ms var(--ldt-ease-portal, ease),
        transform 250ms var(--ldt-ease-portal, ease),
        box-shadow 250ms var(--ldt-ease-portal, ease),
        color 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    .ldt-footer .ldt-footer__social-btn:hover {
        transform: translateY(-4px);
        border-color: transparent;
        color: #ffffff;
    }
}

/* Per-platform hover colors — keyed off aria-label which the markup emits */
@media (hover: hover) and (pointer: fine) {

    /* Facebook — solid Meta blue */
    .ldt-footer .ldt-footer__social-btn[aria-label="Facebook"]:hover {
        background: #1877f2;
        box-shadow: 0 8px 20px rgba(24, 119, 242, 0.45);
    }

    /* Instagram — gradient (yellow → pink → purple) */
    .ldt-footer .ldt-footer__social-btn[aria-label="Instagram"]:hover {
        background:
            radial-gradient(circle at 30% 107%,
                #fdf497 0%, #fdf497 5%, #fd5949 45%,
                #d6249f 60%, #285AEB 90%);
        box-shadow: 0 8px 20px rgba(214, 36, 159, 0.45);
    }

    /* Twitter / X — black */
    .ldt-footer .ldt-footer__social-btn[aria-label="Twitter"]:hover {
        background: #000000;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
    }

    /* YouTube — solid YT red */
    .ldt-footer .ldt-footer__social-btn[aria-label="Youtube"]:hover,
    .ldt-footer .ldt-footer__social-btn[aria-label="YouTube"]:hover {
        background: #ff0000;
        box-shadow: 0 8px 20px rgba(255, 0, 0, 0.45);
    }

    /* WhatsApp — solid WA green */
    .ldt-footer .ldt-footer__social-btn[aria-label="Whatsapp"]:hover,
    .ldt-footer .ldt-footer__social-btn[aria-label="WhatsApp"]:hover {
        background: #25D366;
        box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45);
    }

    /* TikTok — black */
    .ldt-footer .ldt-footer__social-btn[aria-label="Tiktok"]:hover,
    .ldt-footer .ldt-footer__social-btn[aria-label="TikTok"]:hover {
        background: #000000;
        box-shadow: 0 8px 20px rgba(255, 0, 80, 0.45);
    }

    /* LinkedIn — solid LI blue */
    .ldt-footer .ldt-footer__social-btn[aria-label="Linkedin"]:hover,
    .ldt-footer .ldt-footer__social-btn[aria-label="LinkedIn"]:hover {
        background: #0a66c2;
        box-shadow: 0 8px 20px rgba(10, 102, 194, 0.45);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. NEWSLETTER FORM — glass-dark wrapper + accent gradient submit + green pulse
 *
 * Existing form has a translucent white-ish row with a flat orange button.
 * We layer:
 *   - The whole `.ldt-fnl` becomes a glass-dark card (subtle backdrop blur)
 *   - The row gets a stronger transparent surface with thicker border
 *   - The button becomes accent gradient with brand-tinted shadow
 *   - The success state runs a brief pulse animation (extends existing keyframe)
 *
 * SPECIFICITY: existing rules are inline scoped via `#fid`, so we use
 * `!important` on properties we genuinely need to override.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-footer .ldt-fnl {
    /* Wrap form area in a subtle glass card. Pseudo-element sits behind the
       form content so we don't disturb the existing row/button layout. */
    position: relative;
    padding: 4px;
    border-radius: var(--ldt-radius-input, 0.75rem);
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 250ms var(--ldt-ease-portal, ease),
                box-shadow 250ms var(--ldt-ease-portal, ease);
}

.ldt-footer .ldt-fnl:focus-within {
    border-color: var(--ldt-accent, #ff8c00);
    box-shadow:
        0 0 0 3px rgba(255, 140, 0, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.20);
}

/* Inner row — slightly stronger transparent surface */
.ldt-footer .ldt-fnl__row {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid transparent !important;
    border-radius: calc(var(--ldt-radius-input, 0.75rem) - 4px);
    transition: border-color 200ms var(--ldt-ease-portal, ease);
}

/* Override the existing :focus-within rule (which sets border-color to orange)
   with a smoother orange + slight glow */
.ldt-footer .ldt-fnl__row:focus-within {
    border-color: rgba(255, 140, 0, 0.50) !important;
}

/* Submit button — accent gradient + brand-tinted shadow + subtle uppercase */
.ldt-footer .ldt-fnl__btn {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%)) !important;
    box-shadow: var(--ldt-shadow-accent-soft,
                0 4px 15px rgba(255, 140, 0, 0.20));
    border-radius: calc(var(--ldt-radius-input, 0.75rem) - 4px);
    letter-spacing: 0.04em;
    transition:
        transform 250ms var(--ldt-ease-portal, ease),
        box-shadow 250ms var(--ldt-ease-portal, ease),
        filter 250ms var(--ldt-ease-portal, ease) !important;
}

@media (hover: hover) and (pointer: fine) {
    .ldt-footer .ldt-fnl__btn:hover {
        background: linear-gradient(135deg, #ffa133 0%, #ff8c00 100%) !important;
        box-shadow: var(--ldt-shadow-accent,
                    0 10px 30px rgba(255, 140, 0, 0.30));
        filter: brightness(1.05);
        transform: translateY(-1px);
    }
}

/* Success state — green pulse animation, runs once on success class addition.
   The existing `.ldt-fnl__msg--success` style sets bg + color; we add motion. */
.ldt-footer .ldt-fnl__msg--success {
    animation: ldt-success-pulse 1.6s var(--ldt-ease-portal, ease);
    border: 1px solid rgba(34, 197, 94, 0.30);
}

@keyframes ldt-success-pulse {
    0% {
        transform: scale(0.96);
        opacity: 0;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.50);
    }
    20% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.20);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Error state — small shake to draw attention without being aggressive */
.ldt-footer .ldt-fnl__msg--error {
    animation: ldt-error-shake 400ms var(--ldt-ease-portal, ease);
    border: 1px solid rgba(239, 68, 68, 0.30);
}

@keyframes ldt-error-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    50%      { transform: translateX(3px); }
    75%      { transform: translateX(-2px); }
}

/* WhatsApp button polish — already exists; refine shadow on hover */
.ldt-footer .ldt-fnl__wa {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.30);
    transition:
        transform 250ms var(--ldt-ease-portal, ease),
        box-shadow 250ms var(--ldt-ease-portal, ease),
        background-color 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    .ldt-footer .ldt-fnl__wa:hover {
        box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
    }
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ldt-footer .ldt-fnl__msg--success,
    .ldt-footer .ldt-fnl__msg--error {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 6. PAYMENT BADGES — grayscale → color on hover with lift
 *
 * Existing `.ldt-footer__payment-badge` has a flat translucent surface with
 * border. We desaturate the emoji icon by default and restore color on hover,
 * plus a soft lift.
 *
 * The whole strip gets a glass border-top instead of the existing flat divider.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-footer .ldt-footer__payment {
    position: relative;
    z-index: 2;
}

.ldt-footer .ldt-footer__payment .ldt-footer__divider {
    /* Replace the flat divider with a centered gradient hairline */
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.16) 30%,
        rgba(255, 140, 0, 0.32) 50%,
        rgba(255, 255, 255, 0.16) 70%,
        transparent 100%
    ) !important;
    height: 1px;
}

.ldt-footer .ldt-footer__payment-badge {
    transition:
        background-color 250ms var(--ldt-ease-portal, ease),
        border-color 250ms var(--ldt-ease-portal, ease),
        transform 250ms var(--ldt-ease-portal, ease),
        color 250ms var(--ldt-ease-portal, ease),
        filter 250ms var(--ldt-ease-portal, ease),
        box-shadow 250ms var(--ldt-ease-portal, ease);

    /* Default state — slightly desaturated. The emoji icons before the
       label text get filtered. */
    filter: saturate(0.6);
    cursor: default;
}

@media (hover: hover) and (pointer: fine) {
    .ldt-footer .ldt-footer__payment-badge:hover {
        background: rgba(255, 255, 255, 0.14) !important;
        border-color: rgba(255, 140, 0, 0.40) !important;
        color: #ffffff !important;
        transform: translateY(-2px);
        filter: saturate(1.2);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    }
}

/* SSL chip on the right of payment row — small accent shield */
.ldt-footer .ldt-footer__payment-ssl {
    transition: color 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    .ldt-footer .ldt-footer__payment-ssl:hover {
        color: rgba(34, 197, 94, 0.85) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 7. SECTION TITLES — pulse glow on icon
 *
 * Existing `.ldt-footer__title-icon` has a hover state already (background
 * tint + scale). We add a continuous subtle pulse so the icon feels alive
 * even at rest — matching the portal's "breathing" decoration pattern.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-footer .ldt-footer__title-icon {
    animation: ldt-pulse-glow 4s ease-in-out infinite;
    will-change: transform, filter;
}

/* Hover: pause the pulse + apply existing inline hover state cleanly */
@media (hover: hover) and (pointer: fine) {
    .ldt-footer .ldt-footer__title:hover .ldt-footer__title-icon {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ldt-footer .ldt-footer__title-icon {
        animation: none;
    }
}

/* Title line — subtler default, full accent line on column hover (group hover) */
.ldt-footer .ldt-footer__title-line {
    transition: background 350ms var(--ldt-ease-portal, ease);
}

.ldt-footer .ldt-footer__col:hover .ldt-footer__title-line {
    background: linear-gradient(
        90deg,
        rgba(255, 140, 0, 0.65) 0%,
        rgba(255, 140, 0, 0.20) 100%
    );
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 8. FOOTER LINK LIST — accent left-bar on hover (instead of just translateX)
 *
 * Existing `.ldt-footer__links a` has a `::before` chevron and a translateX
 * effect on hover. We add a vertical accent bar that grows from 0 height to
 * full link height — gives the link a "selected" sense.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-footer .ldt-footer__links a {
    position: relative;
    overflow: visible;
}

.ldt-footer .ldt-footer__links a::after {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--ldt-accent, #ff8c00);
    border-radius: 2px;
    transform: translateY(-50%);
    transition: height 250ms var(--ldt-ease-portal, ease);
}

[dir="rtl"] .ldt-footer .ldt-footer__links a::after,
.ldt-rtl .ldt-footer .ldt-footer__links a::after {
    left: auto;
    right: -8px;
}

@media (hover: hover) and (pointer: fine) {
    .ldt-footer .ldt-footer__links a:hover::after {
        height: 70%;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 9. BACK-TO-TOP BUTTON — glass-dark with accent ring on hover
 *
 * The existing back-to-top component uses its own classes inside
 * `template-parts/footer/components/footer-back-to-top.php`. We polish via
 * a generic selector that catches any back-to-top class pattern.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-footer .ldt-footer__btt,
.ldt-footer__back-to-top,
.ldt-back-to-top {
    background: var(--ldt-glass-dark, rgba(15, 23, 42, 0.60)) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
    transition:
        transform 250ms var(--ldt-ease-portal, ease),
        background-color 250ms var(--ldt-ease-portal, ease),
        border-color 250ms var(--ldt-ease-portal, ease),
        box-shadow 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    .ldt-footer .ldt-footer__btt:hover,
    .ldt-footer__back-to-top:hover,
    .ldt-back-to-top:hover {
        background: var(--ldt-gradient-accent,
                    linear-gradient(135deg, #ff8c00, #e07a00)) !important;
        border-color: transparent !important;
        box-shadow: 0 12px 30px rgba(255, 140, 0, 0.45);
        transform: translateY(-3px);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 10. BOTTOM BAR + ACCESSIBILITY ROW — subtle visual rhythm
 *
 * Bottom bar typically holds copyright + small links. Polish the divider
 * above it and slightly soften the spacing.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-footer .ldt-footer__bottom,
.ldt-footer__bottom-bar {
    position: relative;
    z-index: 2;
}

.ldt-footer .ldt-footer__bottom::before,
.ldt-footer__bottom-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.10) 50%,
        transparent 100%
    );
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 11. RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Tighter social icons on mobile */
    .ldt-footer .ldt-footer__social-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    /* Newsletter glass wrap less prominent on mobile (saves contrast for content) */
    .ldt-footer .ldt-fnl {
        padding: 2px;
    }

    /* Payment badges: keep saturate at 0.8 on mobile (no hover anyway) */
    .ldt-footer .ldt-footer__payment-badge {
        filter: saturate(0.85);
    }
}


/* ─── END OF ldt-enhanced-footer.css ──────────────────────────────────────── */