/* ==========================================================
   FastDelivery Child — ux.css
   UX layer (Bloque G): mobile CTA bar, scroll progress & reveal,
   micro-interactions, back-to-top, cookie banner, navigation
   loader and the optional dark theme.
   ========================================================== */

:root {
    --fd-mobile-cta-h: 0px;          /* set by ux.js from the real bar height */
    --fd-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --fd-float-bg: #ffffff;
    --fd-float-fg: var(--fd-navy);
    --fd-float-border: var(--fd-slate-200);
}

/* Keyboard focus visible everywhere (the templates rely on hover only) */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--fd-primary);
    outline-offset: 3px;
}

/* ──────────────────────────────────────────────────────────
   G2 — MOBILE CTA BAR
   ────────────────────────────────────────────────────────── */
.fd-mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    padding: 0.625rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--fd-slate-200);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
}
.fd-mobile-cta__buttons {
    display: flex;
    gap: 0.625rem;
}
.fd-mobile-cta__btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 0.9375rem;
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.fd-mobile-cta__btn:active { transform: scale(0.96); }
.fd-mobile-cta__btn--primary {
    background: var(--fd-primary);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(232, 25, 44, 0.3);
}
.fd-mobile-cta__btn--whatsapp {
    background: var(--fd-whatsapp);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
}
.fd-mobile-cta__btn .material-symbols-outlined { font-size: 1.25rem; }
.fd-mobile-cta p {
    margin-top: 0.375rem;
    margin-bottom: 0;
    font-size: 0.6875rem;
    line-height: 1.3;
}

@media (max-width: 767.98px) {
    body.fastdelivery-page { padding-bottom: var(--fd-mobile-cta-h); }
}
@media (min-width: 768px) {
    .fd-mobile-cta { display: none; }
}

/* ──────────────────────────────────────────────────────────
   G3 — SCROLL PROGRESS + REVEAL
   ────────────────────────────────────────────────────────── */
.fd-scroll-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--fd-primary), #ff5a67);
    transform-origin: 0 50%;
    transform: scaleX(var(--fd-progress, 0));
    pointer-events: none;
}

.fd-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 0.7s var(--fd-ease-out),
        transform 0.7s var(--fd-ease-out);
    transition-delay: var(--fd-delay, 0ms);
}
.fd-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ──────────────────────────────────────────────────────────
   G4 — MICRO-INTERACTIONS (fine pointers only)
   ────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    /* Cursor spotlight on white cards — background-image only, no layout change */
    .fd-spot {
        background-image: radial-gradient(
            420px circle at var(--fd-mx, -999px) var(--fd-my, -999px),
            rgba(232, 25, 44, 0.07),
            transparent 60%
        );
    }

    /* Arrow icons slide forward when their link is hovered */
    .fd-arrow { transition: transform 200ms var(--fd-ease-out); }
    a:hover .fd-arrow,
    button:hover .fd-arrow { transform: translateX(4px); }

    /* Animated underline for links inside blog posts */
    .fd-article-content a {
        text-decoration: none !important;
        background-image: linear-gradient(currentColor, currentColor);
        background-size: 0% 2px;
        background-position: 0 100%;
        background-repeat: no-repeat;
        box-shadow: inset 0 -1px 0 rgba(232, 25, 44, 0.35);
        transition: background-size 250ms var(--fd-ease-out), opacity 150ms;
    }
    .fd-article-content a:hover {
        background-size: 100% 2px;
        opacity: 1;
    }
}

/* Press feedback for primary CTAs that do not already scale */
.fd-btn:active,
.fd-press:active { transform: scale(0.97); }

/* ──────────────────────────────────────────────────────────
   G5 — BACK TO TOP
   Astra ships its own (#ast-scroll-top) under the WhatsApp FAB;
   hidden in favour of this one, which is placed above the FAB.
   ────────────────────────────────────────────────────────── */
#ast-scroll-top { display: none !important; }

.fd-back-to-top {
    position: fixed;
    right: 1.75rem;                       /* centred on the 60px FAB at right-6 */
    bottom: 6.25rem;                      /* above the FAB (bottom-6 + 60px + gap) */
    z-index: 9980;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fd-float-bg);
    color: var(--fd-float-fg);
    border: 1px solid var(--fd-float-border);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
    opacity: 0;
    transform: translateY(12px) scale(0.9);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms var(--fd-ease-out), background-color 150ms, color 150ms;
}
.fd-back-to-top[hidden] { display: none; }
.fd-back-to-top.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.fd-back-to-top:hover { background: var(--fd-primary); color: #fff; border-color: var(--fd-primary); }
.fd-back-to-top:active { transform: scale(0.92); }

@media (max-width: 767.98px) {
    .fd-back-to-top {
        right: 1rem;
        bottom: calc(var(--fd-mobile-cta-h) + 0.75rem);
    }
}

/* ──────────────────────────────────────────────────────────
   G6 — COOKIE BANNER (small corner card, non-blocking)
   ────────────────────────────────────────────────────────── */
.fd-cookie {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 9995;
    width: min(360px, calc(100vw - 2rem));
    padding: 1rem 1.125rem;
    border-radius: 1rem;
    background: var(--fd-float-bg);
    color: var(--fd-slate-600);
    border: 1px solid var(--fd-float-border);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    font-size: 0.8125rem;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 250ms ease, transform 250ms var(--fd-ease-out);
}
.fd-cookie[hidden] { display: none; }
.fd-cookie.is-visible { opacity: 1; transform: none; }
.fd-cookie__text { margin: 0 0 0.75rem; }
.fd-cookie__text a {
    color: var(--fd-primary);
    font-weight: 700;
    text-decoration: underline;
}
.fd-cookie__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
.fd-cookie__btn {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.8125rem;
    border: 1.5px solid var(--fd-slate-200);
    color: var(--fd-float-fg);
    background: transparent;
    cursor: pointer;
    transition: background-color 150ms, transform 150ms;
}
.fd-cookie__btn:hover { background: var(--fd-slate-100); }
.fd-cookie__btn:active { transform: scale(0.96); }
.fd-cookie__btn--accept {
    background: var(--fd-navy);
    border-color: var(--fd-navy);
    color: #fff;
}
.fd-cookie__btn--accept:hover { background: var(--fd-primary); border-color: var(--fd-primary); }

@media (max-width: 767.98px) {
    .fd-cookie {
        left: 1rem;
        right: 1rem;
        width: auto;
        bottom: calc(var(--fd-mobile-cta-h) + 0.75rem);
    }
}

/* ──────────────────────────────────────────────────────────
   G9 — NAVIGATION LOADER (top bar while the next page loads)
   ────────────────────────────────────────────────────────── */
.fd-nav-loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    height: 3px;
    width: 100%;
    background: var(--fd-primary);
    box-shadow: 0 0 10px rgba(232, 25, 44, 0.6);
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0;
    pointer-events: none;
}
.fd-nav-loader.is-loading {
    opacity: 1;
    animation: fd-nav-load 8s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}
@keyframes fd-nav-load {
    0%   { transform: scaleX(0); }
    10%  { transform: scaleX(0.35); }
    100% { transform: scaleX(0.92); }
}

/* ──────────────────────────────────────────────────────────
   G7 — 404
   ────────────────────────────────────────────────────────── */
.fd-404-code {
    font-size: clamp(6rem, 22vw, 12rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.06em;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #ffffff 20%, var(--fd-primary) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fd-404-float 6s ease-in-out infinite;
}
@keyframes fd-404-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ──────────────────────────────────────────────────────────
   G8 — THEME TOGGLE
   ────────────────────────────────────────────────────────── */
.fd-theme-toggle {
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    color: var(--fd-slate-600);
    background: transparent;
    border: 1px solid var(--fd-slate-200);
    cursor: pointer;
    transition: background-color 150ms, color 150ms, transform 300ms var(--fd-ease-out);
}
.fd-theme-toggle:hover { color: var(--fd-primary); border-color: var(--fd-primary); }
.fd-theme-toggle:active { transform: rotate(-20deg) scale(0.92); }
.fd-theme-toggle .material-symbols-outlined { font-size: 1.25rem; }
.fd-theme-toggle__sun { display: none; }
html.dark .fd-theme-toggle__sun { display: inline; }
html.dark .fd-theme-toggle__moon { display: none; }

/* Row variant inside the mobile menu */
.fd-theme-toggle--row {
    display: flex;
    justify-content: flex-start;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
}

/* ──────────────────────────────────────────────────────────
   REDUCED MOTION — no reveal, spotlight or loader animation
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fd-reveal { opacity: 1; transform: none; transition: none; }
    .fd-nav-loader.is-loading { animation: none; transform: scaleX(0.6); }
    .fd-404-code { animation: none; }
    .fd-back-to-top,
    .fd-cookie { transition: none; }
}

/* ==========================================================
   G8 — DARK THEME
   Templates are hand-written Tailwind without dark: variants, so
   the light utilities are remapped under html.dark. Tailwind's
   darkMode is "class", so new markup can also use dark: directly.
   ========================================================== */
html.dark {
    color-scheme: dark;
    --fd-d-bg:      #0b1120;
    --fd-d-surface: #111a2e;
    --fd-d-card:    #16213a;
    --fd-d-raised:  #1d2a47;
    --fd-d-border:  rgba(148, 163, 184, 0.16);
    --fd-d-text:    #e2e8f0;
    --fd-d-strong:  #f8fafc;
    --fd-d-muted:   #a3b1c6;
    --fd-d-soft:    #8a99b0;
    --fd-d-primary-text: #f5404f;

    --fd-float-bg: var(--fd-d-card);
    --fd-float-fg: var(--fd-d-strong);
    --fd-float-border: var(--fd-d-border);
}

/* Page + header */
html.dark body,
html.dark .bg-background,
html.dark .bg-surface { background-color: var(--fd-d-bg) !important; color: var(--fd-d-text); }
html.dark .glass-nav.scrolled { background: rgba(11, 17, 32, 0.92); box-shadow: 0 1px 0 var(--fd-d-border); }
html.dark header.glass-nav .text-navy,
html.dark header.glass-nav .text-slate-600 { color: var(--fd-d-strong) !important; }
html.dark header.glass-nav .hover\:bg-slate-100:hover { background-color: var(--fd-d-raised) !important; }
html.dark #fd-mobile-menu { background-color: var(--fd-d-surface) !important; border-color: var(--fd-d-border) !important; }

/* Surfaces */
html.dark .bg-white,
html.dark .fd-card,
html.dark .fd-card-form,
html.dark .fd-faq-item { background-color: var(--fd-d-card) !important; }
html.dark .bg-surface-container-low,
html.dark .bg-surface-low,
html.dark .fd-card-service,
html.dark .bg-slate-50 { background-color: var(--fd-d-surface) !important; }
html.dark .bg-surface-container-highest,
html.dark .bg-surface-high,
html.dark .bg-slate-100,
html.dark .bg-slate-200 { background-color: var(--fd-d-raised) !important; }
html.dark .bg-navy,
html.dark .fd-section-dark,
html.dark .fd-trust-bar,
html.dark .fd-card-protagonist { background-color: #0f1a33 !important; }
html.dark footer.bg-navy { background-color: #070c18 !important; }
html.dark .bg-red-50,
html.dark .bg-amber-50,
html.dark .bg-yellow-100 { background-color: rgba(232, 25, 44, 0.12) !important; }
html.dark .bg-green-50,
html.dark .bg-emerald-50 { background-color: rgba(34, 197, 94, 0.12) !important; }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; }

/* White buttons on navy sections stay white (bg-white + text-navy pairs) */
html.dark .bg-white.text-navy { background-color: #ffffff !important; color: var(--fd-navy) !important; }

/* Text */
html.dark .text-navy,
html.dark .text-on-surface,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .fd-section-title,
html.dark .fd-faq-summary,
html.dark .fd-article-content h2,
html.dark .fd-article-content h3,
html.dark .fd-article-content h4,
html.dark .fd-article-content strong,
html.dark .fd-article-content blockquote { color: var(--fd-d-strong) !important; }
html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .fd-faq-body,
html.dark .fd-article-content { color: var(--fd-d-text) !important; }
html.dark .text-slate-500,
html.dark .fd-section-subtitle { color: var(--fd-d-muted) !important; }
html.dark .text-slate-400,
html.dark .fd-label,
html.dark .fd-legal-disclaimer { color: var(--fd-d-soft) !important; }
html.dark .text-primary { color: var(--fd-d-primary-text) !important; }
html.dark .bg-primary .text-primary,
html.dark .bg-white.text-primary { color: var(--fd-primary) !important; }
html.dark .text-navy\/5 { color: rgba(248, 250, 252, 0.05) !important; }
html.dark .text-red-700,
html.dark .text-red-500 { color: #fca5a5 !important; }
html.dark .text-green-600,
html.dark .text-emerald-600 { color: #4ade80 !important; }
html.dark .text-blue-600 { color: #93c5fd !important; }
html.dark .text-amber-600 { color: #fbbf24 !important; }

/* Borders & dividers */
html.dark .border-slate-50,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-surface-container-low,
html.dark .divide-slate-100 > * + *,
html.dark .fd-card,
html.dark .fd-card-form,
html.dark .fd-card-service,
html.dark .fd-faq-item { border-color: var(--fd-d-border) !important; }
html.dark .border-navy,
html.dark .fd-btn-outline-navy { border-color: var(--fd-d-strong) !important; }
html.dark .fd-btn-outline-navy { color: var(--fd-d-strong) !important; }
html.dark .fd-btn-outline-navy:hover { background-color: var(--fd-d-strong) !important; color: var(--fd-navy) !important; }

/* Gradients that fade to the light page colour */
html.dark .from-white { --tw-gradient-from: var(--fd-d-bg) var(--tw-gradient-from-position) !important; }
html.dark .to-slate-50 { --tw-gradient-to: var(--fd-d-surface) var(--tw-gradient-to-position) !important; }

/* Shadows read as smudges on dark surfaces — tone them down */
html.dark .shadow-xl,
html.dark .shadow-2xl,
html.dark .fd-card,
html.dark .fd-card-form { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important; }

/* Blog post details */
html.dark .fd-article-content blockquote,
html.dark .fd-article-content code,
html.dark .fd-article-content tr:hover td { background-color: var(--fd-d-surface) !important; }
html.dark .fd-article-content td,
html.dark .fd-article-content hr { border-color: var(--fd-d-border) !important; }
html.dark .fd-article-content a { color: var(--fd-d-primary-text); }

/* Pagination */
html.dark .navigation.pagination .nav-links a {
    background-color: var(--fd-d-card);
    color: var(--fd-d-strong);
    border-color: var(--fd-d-border);
}

/* Forminator + native form controls */
html.dark .forminator-ui input[type="text"],
html.dark .forminator-ui input[type="email"],
html.dark .forminator-ui input[type="tel"],
html.dark .forminator-ui input[type="number"],
html.dark .forminator-ui input[type="url"],
html.dark .forminator-ui textarea,
html.dark .forminator-ui .forminator-input,
html.dark .forminator-ui .forminator-textarea,
html.dark .forminator-ui .select2-selection--single,
html.dark .fd-form-input,
html.dark .fd-form-textarea,
html.dark .fastdelivery-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html.dark .fastdelivery-page select,
html.dark .fastdelivery-page textarea {
    background-color: var(--fd-d-surface) !important;
    border-color: var(--fd-d-border) !important;
    color: var(--fd-d-strong) !important;
}
html.dark .forminator-ui input:focus,
html.dark .forminator-ui textarea:focus,
html.dark .forminator-ui .select2-container--open .select2-selection--single { background-color: var(--fd-d-card) !important; }
html.dark .forminator-ui .select2-selection--single .select2-selection__rendered,
html.dark .select2-results__option { color: var(--fd-d-strong) !important; }
html.dark .forminator-ui label,
html.dark .forminator-ui .forminator-label,
html.dark .forminator-ui .forminator-consent { color: var(--fd-d-muted) !important; }
html.dark .select2-dropdown { background: var(--fd-d-card) !important; border-color: var(--fd-d-border) !important; }
html.dark ::placeholder { color: var(--fd-d-soft) !important; }

/* Floating UI */
html.dark .fd-mobile-cta {
    background: rgba(11, 17, 32, 0.94);
    border-top-color: var(--fd-d-border);
}
html.dark .fd-cookie { color: var(--fd-d-muted); }
html.dark .fd-cookie__btn { border-color: var(--fd-d-border); }
html.dark .fd-cookie__btn:hover { background: var(--fd-d-raised); }
html.dark .fd-cookie__btn--accept { background: var(--fd-primary); border-color: var(--fd-primary); }
html.dark .fd-theme-toggle { border-color: var(--fd-d-border); color: var(--fd-d-strong); }
html.dark .fd-theme-toggle--row { color: var(--fd-d-strong); }
html.dark .fd-spot {
    background-image: radial-gradient(
        420px circle at var(--fd-mx, -999px) var(--fd-my, -999px),
        rgba(255, 92, 108, 0.10),
        transparent 60%
    );
}

/* Compact cookie banner on phones */
@media (max-width: 767.98px) {
    .fd-cookie {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0.875rem;
        font-size: 0.75rem;
        line-height: 1.35;
    }
    .fd-cookie[hidden] { display: none; }
    .fd-cookie__text { margin: 0; flex: 1 1 auto; }
    .fd-cookie__actions { flex-direction: column; gap: 0.375rem; flex: 0 0 auto; }
    .fd-cookie__btn { padding: 0.375rem 0.875rem; font-size: 0.75rem; }
}