/*
Theme Name: Flashprice App UI
Theme URI: https://flashprice.in
Author: Flashprice
Description: A custom, ultra-lightweight, mobile-first block theme for the Flashprice cashback & deal ecosystem.
Version: 2.1.2
Text Domain: flashprice-app
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Change ANY value here to update the entire app instantly.
   ========================================================================== */
:root {
    /* Brand Colors */
    --fp-primary: #FACC15;
    /* Flashprice Yellow */
    --fp-secondary: #5E57E6;
    /* Flashprice Purple */
    --fp-green: #2ecc71;
    /* Cashback Green */
    --fp-red: #EF4444;
    /* Alert / Sale Red */
    --fp-background: #FFFFFF;
    /* App Background - PURE WHITE, no blue */
    --fp-surface: #FFFFFF;
    /* Cards & Header */
    --fp-text-main: #111827;
    /* Dark Text */
    --fp-text-muted: #6B7280;
    /* Grey Text */
    --fp-border: #F0F0F0;
    /* Subtle Borders */
    --fp-search-bg: #F3F4F6;
    /* Search Input BG */

    /* Sizing — Border Radius Scale (complete) */
    --fp-radius-1:  1px;
    --fp-radius-2:  2px;
    --fp-radius-xs: 4px;
    --fp-radius-5:  5px;
    --fp-radius-6:  6px;
    --fp-radius-7:  7px;
    --fp-radius-sm: 8px;
    --fp-radius-9:  9px;
    --fp-radius-10: 10px;
    --fp-radius-md: 12px;
    --fp-radius-14: 14px;
    --fp-radius-lg: 16px;
    --fp-radius-18: 18px;
    --fp-radius-20: 20px;
    --fp-radius-22: 22px;
    --fp-radius-xl: 24px;
    --fp-radius-26: 26px;
    --fp-radius-2xl: 28px;
    --fp-radius-30: 30px;
    --fp-radius-32: 32px;
    --fp-radius-36: 36px;
    --fp-radius-40: 40px;
    --fp-radius-42: 42px;
    --fp-radius-pill: 50px;
    --fp-radius-60: 60px;
    --fp-radius-circle: 50%;

    /* Typography — Font Families */
    --fp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fp-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Typography — Type Scale (complete)
       Every font-size used in the project is tokenized here. */
    --fp-text-4xs:  0.45rem;   /* 7.2px  — micro labels */
    --fp-text-3xs:  0.5rem;    /* 8px    — tiny fine print */
    --fp-text-2xs:  0.58rem;   /* 9.3px  — compact badges */
    --fp-text-xs:   0.6rem;    /* 9.6px  — fine print */
    --fp-text-xs2:  0.62rem;   /* 9.9px  — small labels */
    --fp-text-sm:   0.7rem;    /* 11.2px — captions */
    --fp-text-sm2:  0.74rem;   /* 11.8px — small body */
    --fp-text-base: 0.83rem;   /* 13.3px — body text */
    --fp-text-md:   0.92rem;   /* 14.7px — emphasis */
    --fp-text-md2:  0.98rem;   /* 15.7px — subtitles */
    --fp-text-lg:   1.05rem;   /* 16.8px — section labels */
    --fp-text-lg2:  1.2rem;    /* 19.2px — section titles */
    --fp-text-xl:   1.35rem;   /* 21.6px — page titles */
    --fp-text-xl2:  1.4rem;    /* 22.4px — large titles */
    --fp-text-2xl:  1.55rem;   /* 24.8px — hero text */
    --fp-text-2xl2: 1.6rem;    /* 25.6px — hero subtitle */
    --fp-text-2xl3: 1.65rem;   /* 26.4px */
    --fp-text-3xl:  1.7rem;    /* 27.2px — hero heading */
    --fp-text-3xl2: 1.8rem;    /* 28.8px */
    --fp-text-4xl:  2.2rem;    /* 35.2px — landing hero */
    --fp-text-4xl2: 2.4rem;    /* 38.4px */
    --fp-text-5xl:  3rem;      /* 48px   — display */
    --fp-text-5xl2: 3.2rem;    /* 51.2px — display large */

    /* Spacing Scale (4px base unit) */
    --fp-space-1:   4px;
    --fp-space-2:   8px;
    --fp-space-3:  12px;
    --fp-space-4:  16px;
    --fp-space-5:  20px;
    --fp-space-6:  24px;
    --fp-space-8:  32px;
    --fp-space-10: 40px;
    --fp-space-12: 48px;
    --fp-space-16: 64px;

    /* Shadow Scale — Elevation levels */
    --fp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --fp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --fp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --fp-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* Gradient Presets — Reusable across pages */
    --fp-gradient-dark:  linear-gradient(145deg, #0A0A0A 0%, #171717 100%);
    --fp-gradient-green: linear-gradient(135deg, #2ecc71, #27ae60);
    --fp-gradient-cta:   linear-gradient(135deg, var(--fp-primary), #f59e0b);
    --fp-gradient-slate: linear-gradient(135deg, #111827, #374151);

    /* Transitions */
    --fp-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Neutral / Slate Scale — for surfaces, borders, muted text variations */
    --fp-slate-50:  #f8fafc;
    --fp-slate-100: #f1f5f9;
    --fp-slate-200: #e2e8f0;
    --fp-slate-300: #cbd5e1;
    --fp-slate-400: #94a3b8;
    --fp-slate-500: #64748b;
    --fp-slate-600: #475569;
    --fp-slate-700: #334155;
    --fp-slate-800: #1e293b;
    --fp-slate-900: #0f172a;

    /* AI Accent Palette — for AI-themed sections (deal/coupon pages) */
    --fp-ai-indigo: #6366f1;
    --fp-ai-violet: #a855f7;
    --fp-ai-purple: #6C63FF;
    --fp-ai-pink:   #ec4899;

    /* Amber / Warning palette */
    --fp-amber:        #f59e0b;
    --fp-amber-dark:   #b45309;
    --fp-amber-deep:   #d97706;
    --fp-amber-light:  #fef3c7;
    --fp-amber-lighter:#fffbeb;

    /* Green palette extensions */
    --fp-green-deep:   #10b981;
    --fp-green-dark:   #15803d;
    --fp-green-light:  #ecfdf5;
    --fp-green-soft:   #dcfce7;
    --fp-green-mint:   #bbf7d0;

    /* Lime / vibrant CTA green (TenereTeam-style) */
    --fp-lime:         #c4f542;
    --fp-lime-deep:    #a8d635;
    --fp-lime-dark:    #6b8a1f;
    --fp-lime-soft:    #e8fbb9;
    --fp-lime-glow:    rgba(196, 245, 66, 0.35);
    --fp-gradient-lime: linear-gradient(135deg, #d3ff5c 0%, var(--fp-lime) 50%, var(--fp-lime-deep) 100%);

    /* Red palette extensions */
    --fp-red-light:  #fef2f2;
    --fp-red-soft:   #fee2e2;
    --fp-red-dark:   #b91c1c;
    --fp-red-deep:   #dc2626;

    /* Blue / Info palette */
    --fp-blue:        #3b82f6;
    --fp-blue-deep:   #1d4ed8;
    --fp-blue-light:  #dbeafe;
    --fp-blue-soft:   #bfdbfe;

    /* Page surfaces */
    --fp-page-bg: #fafafa;

    /* Third-party brand colors (used on social/share buttons) */
    --fp-brand-whatsapp: #25d366;
    --fp-brand-whatsapp-glow: rgba(37, 211, 102, 0.25);
    --fp-brand-telegram: #229ed9;
    --fp-brand-telegram-deep: #0088cc;
    --fp-brand-telegram-glow: rgba(0, 136, 204, 0.25);
    --fp-brand-x:        #000000;
    --fp-brand-hot-pink: #e91e63;

    /* Yellow CTA pill — exact coupon-page recipe */
    --fp-gradient-yellow-pill: linear-gradient(135deg, #fde047, var(--fp-primary));
    --fp-yellow-300: #fde047;
    --fp-yellow-400: var(--fp-primary);
    --fp-yellow-glow: rgba(250, 204, 21, 0.3);

    /* Coupon-page share panel surfaces */
    --fp-share-panel-bg:
        linear-gradient(135deg, #fffef5 0%, #ffffff 40%, #f0fdf4 100%);
    --fp-share-panel-border: #fde68a;

    /* Purple CTA (coupon-page extension button) */
    --fp-purple-500: #8b5cf6;
    --fp-purple-700: #6d28d9;
    --fp-purple-glow: rgba(139, 92, 246, 0.35);

    /* Soft sky blue used in coupon-page ext orb */
    --fp-sky-glow: rgba(56, 189, 248, 0.25);
    --fp-violet-glow: rgba(168, 85, 247, 0.35);

    /* Bank palette (used in card-offer gradients) */
    --fp-bank-hdfc-from: #1e3a8a;
    --fp-bank-sbi-from:  #3a0ca3;
    --fp-bank-axis-from: #9a1f1f;
    --fp-bank-icici-from:#ea580c;
    --fp-bank-icici-to:  #f97316;

    /* Pale accent variations */
    --fp-violet-50:   #ede9fe;
    --fp-violet-800:  #5b21b6;
    --fp-amber-200:   #fde68a;
    --fp-amber-300:   #fed7aa;
    --fp-amber-900:   #9a3412;
    --fp-red-300:     #fca5a5;
    --fp-yellow-200:  #fef08a;
    --fp-black-pure:  #020617;

    /* AI / Premium Gradients */
    --fp-gradient-ai:     linear-gradient(135deg, var(--fp-ai-violet), var(--fp-ai-indigo));
    --fp-gradient-loot:   linear-gradient(135deg, var(--fp-red), var(--fp-brand-hot-pink));
    --fp-gradient-bag:    linear-gradient(135deg, var(--fp-yellow-200), var(--fp-primary), var(--fp-amber-deep));
    --fp-gradient-mesh-ai:
        radial-gradient(60% 80% at 0% 0%, rgba(94,87,230,0.08) 0%, transparent 60%),
        radial-gradient(50% 70% at 100% 0%, rgba(250,204,21,0.10) 0%, transparent 60%),
        radial-gradient(70% 70% at 50% 100%, rgba(16,185,129,0.05) 0%, transparent 60%);

    /* ── New Brand Direction (indigo + lime — full migration coming) ── */
    --fp-brand-indigo:        #3730E8;
    --fp-brand-indigo-mid:    #5B57F0;
    --fp-brand-indigo-soft:   #EEEFFE;
    --fp-brand-indigo-border: #C4C3FC;
    --fp-brand-indigo-glow:   rgba(55, 48, 232, 0.12);
    --fp-gradient-brand-bar:  linear-gradient(90deg, #3730E8 0%, #5B57F0 55%, #c4f542 100%);
}

/* ==========================================================================
   2. GLOBAL RESET
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--fp-background);
    color: var(--fp-text-main);
    font-family: var(--fp-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

/* Kill WordPress default block spacing inside our header */
.fp-header>* {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */

.fp-header {
    background: var(--fp-surface);
    position: relative;
    z-index: 99999;
}

/* --- ROW 1: Brand Bar --- */
.fp-header-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 8px 4px 8px;
    gap: 2px;
}

/* Hamburger (Mobile) */
.fp-hamburger {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 28px;
    height: 40px;
    border: none;
    background: none;
    color: var(--fp-text-main);
    border-radius: var(--fp-radius-sm);
    flex-shrink: 0;
    transition: background var(--fp-transition);
}

.fp-hamburger img {
    opacity: 0.6;
    /* Dims black to softer gray #696969 */
}

.fp-hamburger:active {
    background: var(--fp-search-bg);
}

/* Logo */
.fp-logo {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.fp-logo-icon {
    font-size: var(--fp-text-xl);
    line-height: 1;
}

.fp-logo-text {
    font-size: var(--fp-text-xl);
    font-weight: 800;
    color: var(--fp-text-main);
    letter-spacing: -0.5px;
}

/* If using an image logo instead of text */
.fp-logo-img {
    height: 32px;
    width: auto;
    transition: height var(--fp-transition);
}

/* Right Actions */
.fp-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    order: 2;
}

/* Notification Bell */
.fp-header-notification {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--fp-radius-circle);
    color: var(--fp-text-main);
    transition: background var(--fp-transition);
}

.fp-header-notification:hover {
    background: var(--fp-surface);
}

.fp-header-notification svg {
    opacity: 0.7;
}

.fp-notification-dot {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--fp-red);
    border: 2px solid #ffffff;
    border-radius: var(--fp-radius-circle);
}

/* Smart Search Wrapper (Mobile Default) */
.fp-header-search-desktop {
    order: 3;
    width: 100%;
    margin-top: 8px;
}

/* Desktop Smart Header overrides */
@media (min-width: 1024px) {
    .fp-logo {
        flex: 0 0 auto;
    }

    .fp-header-brand {
        flex-wrap: nowrap;
        padding: 12px 24px;
        gap: 32px;
        transition: padding var(--fp-transition);
    }

    .fp-header-search-desktop {
        order: 2;
        flex: 1;
        width: auto;
        max-width: none;
        margin: 0 16px;
    }

    .fp-header-actions {
        order: 3;
        margin-left: 0;
        gap: 16px;
    }

    .fp-header-notification svg {
        opacity: 0.8;
    }
}

/* Wallet Badge */
.fp-wallet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #27272a 0%, #09090b 100%);
    border-radius: var(--fp-radius-pill);
    padding: 5px 10px;
    font-size: var(--fp-text-base);
    line-height: 1;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-wallet-badge:hover {
    background: linear-gradient(135deg, #3f3f46 0%, #18181b 100%);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.4);
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-1px);
}

.fp-wallet-badge svg,
.fp-wallet-icon {
    display: block;
    color: #ffffff;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.fp-wallet-amount {
    display: block;
    line-height: 1;
    margin-top: 1px;
}

/* Wallet Badge — Compact on mobile */
@media (max-width: 767px) {
    .fp-wallet-badge {
        padding: 1px 4px;
        font-size: var(--fp-text-3xs);
        gap: 1px;
        border-width: 1px;
        line-height: 1;
    }

    .fp-wallet-badge img,
    .fp-wallet-badge svg,
    .fp-wallet-icon {
        width: 8px;
        height: 8px;
        margin-right: 1px;
    }
}

/* User Avatar */
.fp-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--fp-radius-circle);
    background: #E4E4E7;
    color: var(--fp-text-muted);
    border: 1px solid #ffffff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* The SVG icon inside the avatar */
.fp-login-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fp-user-avatar:hover {
    background: #D4D4D8;
    transform: translateY(-1px);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.fp-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--fp-radius-circle);
}

.fp-header-tabs-wrapper {
    background: var(--fp-surface);
    /* Removed the var(--fp-border) box-shadow to hide the bottom line */
    overflow: hidden;
    transition: max-height var(--fp-transition), opacity var(--fp-transition);
    max-height: 120px;
    /* Increased from 56px to fit the new larger 3D cards */
    opacity: 1;
    position: relative;
    /* For the fade gradient */
}

/* Subtle right-edge fade out to hint at more tabs */
.fp-header-tabs-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--fp-surface));
    pointer-events: none;
    /* So it doesn't block touches */
    z-index: 10;
}


.fp-header-tabs-wrapper.fp-collapsed {
    max-height: 0;
    opacity: 0;
}

.fp-header-tabs {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 4px 40px 16px 20px;
    /* Extra right padding so last item clears the fade */
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    /* Hardware-accelerated scroll snapping */
}

.fp-header-tabs::-webkit-scrollbar {
    display: none;
}

/* 3D App Card Base */
.fp-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 8px;
    /* Less left padding since icon overlaps edge */
    border-radius: var(--fp-radius-md);
    border: 2px solid #ffffff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    /* Updated shadow per user request */
    transition: transform var(--fp-transition), box-shadow var(--fp-transition);
    position: relative;
    flex-shrink: 0;
    text-decoration: none;
    scroll-snap-align: start;
    /* Card snaps to the left edge smoothly */
    scroll-margin-left: 20px;
    /* Accounts for container padding so it doesn't snap flush to screen edge */
}

/* Image Placeholder overlapping the left edge */
.fp-tab-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: var(--fp-radius-circle);
    /* Background removed per user request */
    margin-left: -18px;
    /* Pulls the icon outside the left edge */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.fp-tab-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Text and Badge Layout */
.fp-tab-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3px;
}

.fp-tab-label {
    font-size: var(--fp-text-base);
    /* Reduced from 15px per user request */
    font-weight: 800;
    line-height: 1;
}

/* The Vibrant Yellow Pill Badge */
.fp-tab-badge {
    background: #fede00;
    color: #111;
    font-size: var(--fp-text-xs);
    /* Reduced from 11px for a more compact look */
    font-weight: 800;
    padding: 1px 5px;
    /* Reduced from 2px 7px for tighter spacing */
    border-radius: var(--fp-radius-5);
    line-height: 1.2;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Vibrant App Colors (Matched to Reference) */
.fp-tab[href="/cashback"] {
    background: #33eba0;
}

.fp-tab[href="/cashback"] .fp-tab-label {
    color: #111;
}

.fp-tab[href="/coupons"] {
    background: #fd425d;
}

.fp-tab[href="/coupons"] .fp-tab-label {
    color: #fff;
}

.fp-tab[href="/price-history"] {
    background: #4D3FE5;
}

.fp-tab[href="/price-history"] .fp-tab-label {
    color: #fff;
}

.fp-tab[href="/price-history"] .fp-tab-badge {
    background: #fff;
    color: #4D3FE5;
}

/* High contrast badge to match primary color */

.fp-tab[href="/loot-deals"] {
    background: #a850ff;
}

.fp-tab[href="/loot-deals"] .fp-tab-label {
    color: #fff;
}

.fp-tab[href="/shop"] {
    background: #15bdfc;
}

.fp-tab[href="/shop"] .fp-tab-label {
    color: #111;
}

.fp-tab[href="/extension"] {
    background: linear-gradient(135deg, #374151, #111827);
}

.fp-tab[href="/extension"] .fp-tab-label {
    color: #fff;
}

.fp-tab[href="/extension"] .fp-tab-badge {
    background: #F3F4F6;
    color: #111;
}

/* Interactive States */
.fp-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.fp-tab:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Trending Pulse Dot */
.fp-tab-dot {
    width: 6px;
    height: 6px;
    background: var(--fp-red);
    border-radius: var(--fp-radius-circle);
    display: inline-block;
    animation: fp-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes fp-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.4);
    }
}

/* --- ROW 3: Search + Promo --- */
.fp-header-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px;
    overflow: visible;
    transition: max-height var(--fp-transition), opacity var(--fp-transition), padding var(--fp-transition);
    max-height: 70px;
    opacity: 1;
}

.fp-header-search-row>*,
.fp-header-search-row .wp-block-template-part {
    margin: 0 !important;
}

/* WP Block Tempate Part Wrapper Fix */
.fp-header-search-row .wp-block-template-part {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.fp-header-search-row.fp-collapsed {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    margin-bottom: -60px;
    /* Pulls content up to fill the gap */
}

/* -------------------------------------------
   Smart Scroll: Desktop Full Header Sticky
   ------------------------------------------- */
@media (min-width: 1024px) {
    .fp-header.fp-search-sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        transform: translateY(0);
        opacity: 1;
        margin-bottom: 0;
    }

    /* Smart Shrink: Reduce padding and logo size when sticky on desktop */
    .fp-header.fp-search-sticky .fp-header-brand {
        padding: 6px 24px;
    }

    .fp-header.fp-search-sticky .fp-logo-img {
        height: 32px;
    }
}

/* -------------------------------------------
   Smart Scroll: Mobile Search-Only Sticky
   ------------------------------------------- */
@media (max-width: 1023px) {
    .fp-header.fp-search-sticky .fp-header-search-desktop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        margin-top: 0;
        background: #fff;
        padding: 8px 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        border-bottom: 1px solid var(--fp-border);
        animation: fpSlideDown 0.3s ease-out;
    }
}

@keyframes fpSlideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Hide promo badge when sticky for clean look */
.fp-search-sticky .fp-promo-badge {
    display: none;
}

/* Search Bar */
/* Promo Badge (Image or Text) */
.fp-promo-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--fp-radius-md);
    overflow: hidden;
    height: 42px;
    width: auto;
    /* Shrink wraps precisely to the image so there is absolutely zero empty space */
    min-width: auto;
    max-width: none;
    border: 2px solid #ffffff;
    /* Match tabs border */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    /* Match tabs shadow */
    transition: transform var(--fp-transition), box-shadow var(--fp-transition);
}

/* --- INSTANT SEARCH DROPDOWN --- */
/* The main form wrapper must be relative to anchor the absolute dropdown */
.fp-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    /* Automatically takes all remaining space */
    background: var(--fp-search-bg);
    border-radius: var(--fp-radius-md);
    /* Changed from pill to 12px to match tabs */
    padding: 0 6px 0 14px;
    margin: 0;
    /* Reset WP form margin */
    height: 42px;
    /* Increased from 40px to match Apple minimum touch target */
    gap: 2px;
    border: 1.5px solid transparent;
    transition: border-color var(--fp-transition), box-shadow var(--fp-transition);
}

.fp-search-bar:focus-within {
    border-color: transparent;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 12px;
    /* Soft elevation shadow */
    background: var(--fp-surface);
}

.fp-search-icon {
    color: var(--fp-text-muted);
    flex-shrink: 0;
}

.fp-mobile-search-back {
    display: none;
    cursor: pointer;
}

.fp-search-input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: var(--fp-text-base);
    color: var(--fp-text-main);
    padding: 8px 6px;
    font-family: var(--fp-font);
    min-width: 0;
}

.fp-search-input::placeholder {
    color: var(--fp-text-muted);
    font-size: var(--fp-text-base);
    transition: opacity 0.2s;
}

.fp-search-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    /* Reduced from 34px to pull icons closer together */
    height: 26px;
    /* Reduced from 34px to pull icons closer together */
    border-radius: var(--fp-radius-circle);
    border: none;
    background: none;
    color: var(--fp-text-muted);
    flex-shrink: 0;
    transition: background var(--fp-transition), color var(--fp-transition);
}

.fp-search-action-btn:hover {
    background: var(--fp-border);
    color: var(--fp-secondary);
}

.fp-instant-search-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    transform: translateY(-10px);
    width: 100%;
    max-width: none;
    background: #ffffff;
    border-radius: var(--fp-radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

/* 1. Make Dropdown Full Width Overlay on Mobile (Default behavior) */
@media (max-width: 768px) {
    .fp-instant-search-dropdown {
        position: fixed;
        /* Break out of relative form wrapper */
        top: 60px;
        /* Below header */
        left: 0;
        transform: translateY(-10px);
        /* Reset centering from desktop */
        width: 100vw;
        height: calc(100vh - 60px);
        max-height: calc(100vh - 60px);
        border-radius: 0;
        border-top: 1px solid var(--fp-border);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* 2. Full-Screen Modal Overlay (when active) */
body.fp-search-modal-active {
    overflow: hidden;
    /* Prevent body scroll beneath modal */
}

body.fp-search-modal-active .fp-header {
    z-index: 10000;
    position: relative;
}

body.fp-search-modal-active .fp-header-search-row {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    /* accounts for mobile browser UI */
    max-height: none !important;
    /* OVERRIDE clamp */
    background: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    margin: 0;
}

/* Fix the inner WP template wrapper */
body.fp-search-modal-active .wp-block-template-part {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
}

body.fp-search-modal-active .fp-search-bar {
    border-radius: 0;
    background: transparent;
    border-bottom: none;
    box-shadow: none !important;
    margin-bottom: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* The new input wrapper is the top row */
body.fp-search-modal-active .fp-search-input-wrapper {
    border-bottom: 1px solid var(--fp-border);
    padding: 4px 0 12px 0;
    flex-shrink: 0;
}

/* Keep the search input row horizontal */
body.fp-search-modal-active .fp-search-input {
    flex: 1;
    min-width: 0;
}

body.fp-search-modal-active .fp-search-icon {
    display: none;
    /* Hide magnifying glass, show back arrow */
}

body.fp-search-modal-active .fp-mobile-search-back {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--fp-text-main);
    padding: 0;
    margin-right: 8px;
}

body.fp-search-modal-active .fp-instant-search-dropdown {
    position: static;
    /* Dropdown becomes inline content of the modal */
    flex: 1;
    width: 100%;
    height: 0;
    /* Let flex control height */
    max-height: none;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border-top: none;
    padding-top: 12px;
    overflow-y: auto;
}

/* 2. Fix the squashed search bar by forcing wrapping */
.fp-header-search-area {
    flex-wrap: wrap;
}

.fp-search-bar {
    order: -1;
    /* Move search bar above the flash sale button */
    min-width: 100%;
    margin-bottom: 8px;
}

.fp-instant-search-dropdown.fp-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fp-instant-search-results {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 16px;
}

/* =======================================================
   HYBRID INSTANT SEARCH LAYOUT
   ======================================================= */

/* 1. SWIMLANE (Top Horizontal Cards) */
.fp-is-swimlane-wrap {
    display: flex;
    gap: 12px;
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    border-bottom: 5px solid var(--fp-border);
    /* Thicker separator between sections */
    background: #fdfdfd;
}

.fp-is-swimlane-wrap::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Individual Card (Loot & History) */
.fp-is-card {
    flex: 0 0 140px;
    /* Exact size for 'Peek Scrolling' on mobile */
    min-width: 140px;
    background: #fff;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    box-sizing: border-box;
}

.fp-is-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Card Tags */
.fp-is-card-tag {
    position: absolute;
    top: -8px;
    left: -8px;
    font-size: var(--fp-text-xs);
    font-weight: 800;
    padding: 4px 8px;
    border-radius: var(--fp-radius-6);
    color: #fff;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.fp-tag-loot {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    /* Fiery Red */
}

.fp-tag-history {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    /* Blue Data */
}

/* Card Image */
.fp-is-card-img {
    height: 90px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.fp-is-card-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Card Content */
.fp-is-card-title {
    font-size: var(--fp-text-base);
    font-weight: 700;
    color: var(--fp-text-main);
    line-height: 1.2;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fp-is-card-cb {
    font-size: var(--fp-text-xs);
    font-weight: 700;
    color: #2ecc71;
    /* Green text, not badge to save space */
    margin-bottom: 6px;
}

/* Card Pricing */
.fp-is-card-prices {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    margin-top: auto;
    /* Pushes to bottom */
}

.fp-is-old-price {
    font-size: var(--fp-text-xs);
    color: var(--fp-text-muted);
    text-decoration: line-through;
}

.fp-is-new-price {
    font-size: var(--fp-text-base);
    font-weight: 800;
    color: var(--fp-green);
}

.fp-is-trend-icon {
    font-size: var(--fp-text-sm);
    margin-left: auto;
}

/* Card Button */
.fp-is-card-btn {
    text-align: center;
    background: var(--fp-text-main);
    color: #fff;
    font-size: var(--fp-text-sm);
    font-weight: 700;
    padding: 6px 0;
    border-radius: var(--fp-radius-6);
    width: 100%;
    transition: background 0.2s ease;
}

.fp-is-card:hover .fp-is-card-btn {
    background: var(--fp-primary);
    color: #111;
}

/* --- VERTICAL LIST VIEW FOR DEALS (Zepto/Blinkit Style) --- */
.fp-is-deals-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px;
    border-bottom: 2px solid var(--fp-border);
}

.fp-is-list-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius-md);
    padding: 10px;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform var(--fp-transition), box-shadow var(--fp-transition);
    text-decoration: none;
    position: relative;
    width: 100%;
}

.fp-is-list-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.fp-is-list-card .fp-is-card-img-wrap {
    width: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #f9f9f9;
    border-radius: var(--fp-radius-sm);
    padding: 4px;
}

.fp-is-list-card .fp-is-card-img-wrap img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

.fp-is-list-card .fp-is-card-tag {
    position: absolute;
    top: -6px;
    left: -4px;
    font-size: var(--fp-text-2xs);
    padding: 2px 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
    border-radius: var(--fp-radius-xs);
    font-weight: 700;
}

.fp-is-list-card .fp-is-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.fp-is-list-card .fp-is-card-title {
    font-size: var(--fp-text-base);
    font-weight: 600;
    line-height: 1.3;
    color: var(--fp-text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
    flex: none;
}

.fp-is-list-card .fp-is-card-cb {
    font-size: var(--fp-text-xs);
    color: var(--fp-green);
    font-weight: 700;
    margin-bottom: 6px;
}

.fp-is-list-card .fp-is-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
}

.fp-is-list-card .fp-is-card-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.fp-is-list-card .fp-is-old-price {
    font-size: var(--fp-text-xs);
    color: var(--fp-text-muted);
    text-decoration: line-through;
    line-height: 1;
}

.fp-is-list-card .fp-is-new-price {
    font-size: var(--fp-text-md);
    font-weight: 800;
    color: var(--fp-text-main);
    line-height: 1;
    margin-top: 2px;
}

.fp-is-list-card .fp-is-card-btn {
    font-size: var(--fp-text-xs);
    padding: 6px 14px;
    background: var(--fp-text-main);
    color: #fff;
    border-radius: var(--fp-radius-6);
    font-weight: 600;
    transition: background 0.2s;
    margin: 0;
}

.fp-is-list-card:hover .fp-is-card-btn {
    background: var(--fp-primary);
    color: var(--fp-text-main);
}

/* =======================================================
   REDESIGNED LIST-CENTRIC INSTANT SEARCH (Contentstack-like)
   ======================================================= */

/* Section Wrapper */
.fp-is-section {
    margin-bottom: 24px;
}

.fp-is-section:last-child {
    margin-bottom: 0;
}

/* Section Header */
.fp-is-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 8px 20px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 8px;
}

.fp-is-sh-title {
    font-size: var(--fp-text-xs);
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
}

.fp-is-sh-link {
    font-size: var(--fp-text-xs);
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.fp-is-sh-link:hover {
    color: #2563eb;
}

/* List Item Container */
.fp-is-section-list {
    display: flex;
    flex-direction: column;
    padding: 0 12px;
}

/* Individual List Item */
.fp-is-list-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: var(--fp-radius-10);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease, transform 0.1s ease;
    gap: 16px;
}

.fp-is-list-item:hover {
    background: #f8fafc;
    transform: translateX(4px);
}

/* Left Icon/Image Area */
.fp-is-li-left {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fp-radius-sm);
    background: #fff;
    border: 1px solid #f1f5f9;
    overflow: hidden;
}

.fp-is-li-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-is-li-img.fp-img-contain img {
    object-fit: contain;
    padding: 6px;
}

.fp-is-li-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fp-is-li-icon {
    font-size: var(--fp-text-lg2);
    background: #f1f5f9;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Middle Text Area */
.fp-is-li-mid {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-is-li-title {
    font-size: var(--fp-text-base);
    font-weight: 500;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-is-li-sub {
    font-size: var(--fp-text-base);
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Custom Text Formatting for Search Results */
.fp-hl-green {
    background: #ecfdf5;
    color: #2ecc71;
    padding: 2px 6px;
    border-radius: var(--fp-radius-xs);
    font-weight: 600;
}

.fp-loot-price b {
    color: #ef4444;
    /* Attractive red for loot prices */
}

.fp-coupon-mask {
    border: 1px dashed #2ecc71;
    background: #f0fdf4;
    color: #065f46;
    padding: 2px 8px;
    border-radius: var(--fp-radius-xs);
    font-weight: 600;
    font-size: var(--fp-text-xs);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    margin-top: 2px;
}

/* Right Content Area */
.fp-is-li-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
}

.fp-is-li-pill {
    font-size: var(--fp-text-xs);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--fp-radius-20);
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}

/* Pill Styles */
.fp-is-li-pill.loot {
    background: #fef2f2;
    color: #ef4444;
}

.fp-is-li-pill.history {
    background: #fdf4ff;
    color: #d946ef;
}

.fp-is-li-pill.coupon {
    background: #ecfdf5;
    color: #2ecc71;
}

.fp-is-li-date {
    font-size: var(--fp-text-sm);
    color: #94a3b8;
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

/* Sticky Footer */
.fp-is-sticky-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.fp-is-sf-count {
    font-size: var(--fp-text-sm);
    font-weight: 600;
    color: #64748b;
}

.fp-is-sf-all {
    font-size: var(--fp-text-base);
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.fp-is-sf-all:hover {
    color: var(--fp-primary);
}

/* Mobile Adjustments for Search Dropdown Content */
@media (max-width: 768px) {
    .fp-is-section-list {
        padding: 0 8px;
    }

    .fp-is-li-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .fp-is-li-date {
        min-width: auto;
        font-size: var(--fp-text-xs);
    }

    .fp-is-list-item:hover {
        transform: none;
        /* Disable hover shift on mobile */
    }
}

/* See All Bottom Button (OLD - Hidden now that we have fp-is-sticky-footer) */
.fp-instant-search-all {
    display: none !important;
}

.fp-instant-search-all:hover {
    background: #E5E7EB;
}

.fp-promo-badge:hover {
    transform: scale(1.03);
}

/* When using an image */
.fp-promo-badge-img {
    height: 100%;
    width: auto;
    object-fit: cover;
    border-radius: var(--fp-radius-10);
    /* Slightly less than the outer 12px to prevent corner clipping */
}

/* Text fallback when no image */
.fp-promo-badge-text {
    font-size: var(--fp-text-xs);
    font-weight: 700;
    color: var(--fp-text-main);
    letter-spacing: 0.3px;
    white-space: nowrap;
    padding: 0 10px;
    background: linear-gradient(135deg, var(--fp-primary), #F59E0B);
    border-radius: var(--fp-radius-sm);
    height: 100%;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   4. SIDE MENU
   ========================================================================== */
.fp-side-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.fp-side-menu-overlay.fp-open {
    opacity: 1;
    visibility: visible;
}

.fp-side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 80vw;
    height: 100vh;
    height: 100dvh;
    background: var(--fp-surface);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.fp-side-menu.fp-open {
    transform: translateX(0);
}

.fp-side-menu-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--fp-border);
}

.fp-side-menu-header .fp-logo-icon {
    font-size: var(--fp-text-lg);
}

.fp-side-menu-header .fp-logo-text {
    font-size: var(--fp-text-lg);
    font-weight: 700;
    flex: 1;
}

.fp-side-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--fp-text-muted);
    border-radius: var(--fp-radius-circle);
    transition: background var(--fp-transition);
}

.fp-side-menu-close:hover {
    background: var(--fp-search-bg);
}

.fp-side-menu-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}

/* ====== V4 SIDE MENU — PREMIUM MINIMAL ====== */

/* --- Entrance animation keyframes --- */
@keyframes fpmSlideUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fpmShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes fpmPulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
@keyframes fpmFadeScale {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

/* --- Menu shell --- */
.fp-side-menu {
    width: 88vw;
    max-width: 400px;
    background: #0f0f0f;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.18);
    position: fixed;
    display: flex;
    flex-direction: column;
}

.fp-side-menu.fp-open {
    transform: translateX(0);
}

/* ====== DARK HERO (Pablo-style top section) ====== */
.fpm-hero {
    position: relative;
    background: linear-gradient(180deg, #0a0a0a 0%, #141418 100%);
    padding: 18px 20px 26px;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 2;
}
.fpm-hero-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(251, 191, 36, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 0% 100%, rgba(139, 92, 246, 0.10) 0%, transparent 55%);
}
.fpm-hero-deco::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='220' viewBox='0 0 400 220'%3E%3Cpath d='M-30 60 Q100 20 220 60 T450 50' stroke='%23fff' stroke-opacity='0.035' stroke-width='1.2' fill='none'/%3E%3Cpath d='M-30 130 Q120 90 240 130 T450 120' stroke='%23fff' stroke-opacity='0.025' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top;
}

.fpm-hero-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}
.fpm-hero-title {
    font-size: var(--fp-text-md);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.2px;
}

.fp-side-menu-close.fpm-hero-close {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    height: auto;
    padding: 6px 10px 6px 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--fp-radius-pill);
    color: rgba(255,255,255,0.9);
    font-family: var(--fp-font);
    font-size: var(--fp-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.fp-side-menu-close.fpm-hero-close:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
    transform: none;
}
.fpm-hero-close-label { letter-spacing: 0.1px; }

/* Profile row inside hero */
.fpm-hero-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}
.fpm-hero-avatar {
    width: 58px;
    height: 58px;
    border-radius: var(--fp-radius-circle);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fp-text-xl);
    font-weight: 800;
    color: #111;
    flex-shrink: 0;
    letter-spacing: -0.5px;
    border: 2px solid rgba(255,255,255,0.95);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 0 0 3px #0f0f0f;
    position: relative;
}
.fpm-hero-avatar-guest {
    background: #f3f4f6;
}

.fpm-hero-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.fpm-hero-hi {
    font-size: var(--fp-text-sm);
    color: rgba(255,255,255,0.55);
    font-weight: 500;
    letter-spacing: 0.2px;
}
.fpm-hero-name {
    font-size: var(--fp-text-lg2);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.4px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fpm-hero-tier {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #FBBF24;
    font-weight: 600;
    margin-top: 5px;
    background: rgba(251,191,36,0.1);
    padding: 2px 8px;
    border-radius: var(--fp-radius-20);
    align-self: flex-start;
    border: 1px solid rgba(251,191,36,0.2);
}
.fpm-hero-signup {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fp-text-sm);
    color: #fff;
    font-weight: 600;
    margin-top: 5px;
    text-decoration: none;
    transition: gap 0.25s ease;
    opacity: 0.9;
}
.fpm-hero-signup:hover { gap: 7px; opacity: 1; color: #fff; }

/* ====== WHITE BODY SHEET ====== */
.fp-side-menu-scroll.fpm-sheet {
    background: #FAFAFA;
    border-radius: var(--fp-radius-xl) 24px 0 0;
    margin-top: -14px;
    position: relative;
    z-index: 3;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.06);
    padding-top: 18px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Inline balance strip (logged-in) */
.fpm-balance-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 2px solid #fff;
    border-radius: var(--fp-radius-14);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15);
}
.fpm-balance-left { display: flex; flex-direction: column; gap: 1px; }
.fpm-balance-label {
    font-size: 10.5px;
    color: #2ecc71;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.fpm-balance-amount {
    font-size: var(--fp-text-lg2);
    font-weight: 800;
    color: #065f46;
    letter-spacing: -0.4px;
    line-height: 1;
}
.fpm-balance-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 14px;
    border-radius: var(--fp-radius-10);
    background: #2ecc71;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 2px solid #fff;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}
.fpm-balance-btn:hover {
    background: #2ecc71;
    transform: translateY(-1px);
}

/* --- Staggered entrance animation --- */
.fpm-anim {
    opacity: 0;
    transform: translateY(18px);
}
.fp-side-menu.fp-open .fpm-anim {
    animation: fpmSlideUp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.fp-side-menu.fp-open .fpm-anim:nth-child(1) { animation-delay: 0.06s; }
.fp-side-menu.fp-open .fpm-anim:nth-child(2) { animation-delay: 0.12s; }
.fp-side-menu.fp-open .fpm-anim:nth-child(3) { animation-delay: 0.18s; }
.fp-side-menu.fp-open .fpm-anim:nth-child(4) { animation-delay: 0.24s; }
.fp-side-menu.fp-open .fpm-anim:nth-child(5) { animation-delay: 0.30s; }
.fp-side-menu.fp-open .fpm-anim:nth-child(6) { animation-delay: 0.36s; }
.fp-side-menu.fp-open .fpm-anim:nth-child(7) { animation-delay: 0.42s; }
.fp-side-menu.fp-open .fpm-anim:nth-child(8) { animation-delay: 0.48s; }
.fp-side-menu.fp-open .fpm-anim:nth-child(9) { animation-delay: 0.54s; }

/* --- Section spacing --- */
.fpm-section {
    padding: 0 16px;
    margin-bottom: 10px;
}
.fpm-section:first-child { margin-top: 2px; }

/* ====== NAVIGATION — Pablo-style clean list rows ====== */
.fpm-nav {
    background: #fff;
    border-radius: var(--fp-radius-lg);
    border: 2px solid #fff;
    padding: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
}

.fpm-nav-label {
    display: block;
    padding: 8px 12px 4px;
    font-size: var(--fp-text-xs);
    font-weight: 700;
    color: var(--fp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.fpm-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--fp-radius-10);
    text-decoration: none;
    color: var(--fp-text-main);
    font-size: var(--fp-text-base);
    font-weight: 500;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    font-family: var(--fp-font);
    transition: all 0.2s ease;
    position: relative;
}

.fpm-link:hover {
    background: var(--fp-search-bg);
}

.fpm-link:active {
    background: var(--fp-border);
    transform: scale(0.99);
}

.fpm-link-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--fp-radius-sm);
    background: var(--fp-search-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fp-text-muted);
    flex-shrink: 0;
    transition: all var(--fp-transition);
}

.fpm-link:hover .fpm-link-icon {
    color: var(--fp-text-main);
    background: var(--fp-border);
}

.fpm-link-muted {
    color: var(--fp-text-muted);
    font-size: var(--fp-text-base);
}
.fpm-link-muted .fpm-link-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--fp-radius-7);
}

/* Badges */
.fpm-badge {
    margin-left: auto;
    font-size: var(--fp-text-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--fp-radius-20);
    white-space: nowrap;
    letter-spacing: -0.2px;
}

.fpm-badge-green {
    background: #dcfce7;
    color: #16a34a;
}

.fpm-badge-red {
    background: #fee2e2;
    color: #dc2626;
    min-width: 20px;
    text-align: center;
    border-radius: var(--fp-radius-circle);
    padding: 2px 6px;
    font-size: var(--fp-text-xs);
    animation: fpmPulseGlow 2s ease infinite;
    animation-name: none;
}
/* Pulse only for notification badge */
.fpm-badge-red { animation-name: fpmPulseGlow; }

/* Accordion */
.fpm-accordion-trigger { position: relative; }

.fpm-chevron {
    margin-left: auto;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--fp-text-muted);
    flex-shrink: 0;
}

.fpm-accordion-trigger[aria-expanded="true"] .fpm-chevron {
    transform: rotate(180deg);
}

.fpm-accordion-trigger .fpm-badge { margin-left: 0; }

.fpm-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding-left: 42px;
}

.fpm-accordion-panel.fp-open {
    max-height: 320px;
}

.fpm-sublink {
    display: block;
    padding: 7px 12px;
    font-size: var(--fp-text-base);
    color: var(--fp-text-main);
    text-decoration: none;
    border-radius: var(--fp-radius-sm);
    transition: all 0.2s ease;
    font-weight: 450;
}

.fpm-sublink:hover { background: var(--fp-search-bg); }
.fpm-sublink:active { background: var(--fp-border); }

.fpm-sublink-all {
    color: var(--fp-secondary);
    font-weight: 600;
    margin-top: 2px;
}

/* ====== REFERRAL — Vibrant green pill (matches header-pill design) ====== */
/* ====== REFERRAL ACTION BANNER — Gamified 3D ====== */
.fpm-refer-banner {
    display: block;
    border-radius: var(--fp-radius-20);
    background: linear-gradient(145deg, #09090b 0%, #171720 100%);
    padding: 16px 14px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    border: 2px solid #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 8px;
}
.fpm-refer-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.1);
}
.fpm-refer-banner:active { transform: scale(0.98); }

.fpm-rb-glow {
    position: absolute;
    top: -30%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
    border-radius: var(--fp-radius-circle);
    pointer-events: none;
    z-index: 1;
}

.fpm-rb-graphics {
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

@keyframes fpmMoneyRainNote {
    0% { transform: translateY(-50px) rotate3d(1, 1, 0, 0deg) scale(0.8); opacity: 0; }
    15% { opacity: 1; }
    75% { opacity: 1; }
    100% { transform: translateY(140px) rotate3d(1, 1, 1, 360deg) scale(1); opacity: 0; }
}

@keyframes fpmRealCoinRain {
    0% { transform: translateY(-50px) rotateX(30deg) rotateY(-20deg) rotateZ(10deg) scale(0.8); opacity: 0; }
    15% { opacity: 1; }
    75% { opacity: 1; }
    100% { transform: translateY(140px) rotateX(15deg) rotateY(-30deg) rotateZ(-5deg) scale(1); opacity: 0; }
}

@keyframes fpmRealCoinRainSm {
    0% { transform: translateY(-50px) rotateX(30deg) rotateY(-20deg) rotateZ(10deg) scale(0.65); opacity: 0; }
    15% { opacity: 1; }
    75% { opacity: 1; }
    100% { transform: translateY(140px) rotateX(15deg) rotateY(-30deg) rotateZ(-5deg) scale(0.85); opacity: 0; }
}

.fpm-rb-note {
    position: absolute;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
.fpm-rb-note-1 { top: 0; right: 20px; width: 65px; animation: fpmMoneyRainNote 4s linear infinite; z-index: 2; }
.fpm-rb-note-2 { top: 0; right: 70px; width: 50px; animation: fpmMoneyRainNote 3.5s linear infinite 1.5s; z-index: 1; }

.fpm-rb-real-coin {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: var(--fp-radius-circle);
    background: linear-gradient(135deg, #FEF08A 0%, #FACC15 100%);
    box-shadow: 
        1px 1px 0 #EAB308,
        2px 2px 0 #D97706,
        3px 3px 0 #D97706,
        4px 4px 0 #B45309,
        5px 5px 0 #92400E,
        6px 6px 12px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.fpm-rb-rc-inner {
    width: 32px;
    height: 32px;
    border-radius: var(--fp-radius-circle);
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3), inset -1px -1px 2px rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fp-text-lg2);
    font-weight: 900;
    font-family: Arial, sans-serif;
    transform: rotateZ(-5deg);
}

.fpm-rb-coin-fall-1 { top: 0; right: 5px; animation: fpmRealCoinRain 4.5s linear infinite 0.5s; z-index: 3; }
.fpm-rb-coin-fall-2 { top: 0; right: 60px; animation: fpmRealCoinRainSm 3.8s linear infinite 2.5s; z-index: 2; }

.fpm-rb-content {
    position: relative;
    z-index: 3;
    max-width: 65%;
}
.fpm-rb-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--fp-radius-pill);
    font-size: 9.5px;
    font-weight: 800;
    color: #A5B4FC;
    margin-bottom: 12px;
    backdrop-filter: blur(4px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.fpm-rb-title {
    font-size: var(--fp-text-xl);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
}
.fpm-rb-desc {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    line-height: 1.4;
    margin: 0 0 14px 0;
}
.fpm-rb-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #0F172A;
    padding: 8px 16px;
    border-radius: var(--fp-radius-md);
    font-size: 12.5px;
    font-weight: 800;
    transition: all 0.2s ease;
}
.fpm-rb-cta:hover {
    box-shadow: 0 4px 12px rgba(255,255,255,0.25);
    background: #f8fafc;
}
.fpm-rb-cta svg {
    transition: transform 0.2s ease;
}
.fpm-refer-banner:hover .fpm-rb-cta svg {
    transform: translateX(3px);
}

.fpm-refer-banner-full {
    cursor: default;
}
.fpm-refer-banner-full:hover {
    transform: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.04);
}
.fpm-rb-actions {
    display: flex;
    gap: 8px;
    width: 125%; 
}
.fpm-rb-btn-copy, .fpm-rb-btn-share {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
    border-radius: var(--fp-radius-md);
    font-size: var(--fp-text-sm);
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--fp-font);
}
.fpm-rb-btn-copy {
    background: #fff;
    color: #0F172A;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.fpm-rb-btn-copy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,255,255,0.2); }
.fpm-rb-btn-share {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
}
.fpm-rb-btn-share:hover { background: rgba(255,255,255,0.15); transform: translateY(-1px); }

/* ====== CHANNEL TILES — Solid brand, 3D pill ====== */
/* ====== CHANNEL TILES — Compact mobile-safe ====== */
.fpm-ch-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fpm-ch-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--fp-radius-md);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #171720 0%, #09090b 100%);
    border: 2px solid #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.fpm-ch-banner:active { transform: scale(0.98); }
.fpm-ch-banner:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.6); }

.fpm-ch-b-content {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
}
.fpm-ch-b-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--fp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fpm-ch-b-icon-tg { background: #229ED9; }
.fpm-ch-b-icon-wa { background: #25D366; }
.fpm-ch-b-icon svg { width: 18px; height: 18px; fill: #fff; }

.fpm-ch-b-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fpm-ch-b-text strong {
    font-size: var(--fp-text-base);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
    line-height: 1.2;
}
.fpm-ch-b-text span {
    font-size: var(--fp-text-xs);
    font-weight: 600;
    color: #94a3b8;
}

.fpm-ch-b-graphics {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 40px;
    z-index: 2;
}

@keyframes fpmChFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-4px) rotate(5deg); }
}
.fpm-anim-float-ch { animation: fpmChFloat 3s ease-in-out infinite; }
.fpm-anim-float-ch-del { animation: fpmChFloat 3s ease-in-out infinite 1.5s; }

@keyframes fpmRingBell {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50% { transform: rotate(-10deg); }
    20%, 40%, 60% { transform: rotate(10deg); }
    70% { transform: rotate(0deg); }
}
.fpm-anim-bell { animation: fpmRingBell 3s ease-in-out infinite; transform-origin: 50% 20%; }

/* ====== EXTENSION BANNER — Original dark + 3D pill (2px white border + shadow) ====== */
.fpm-ext-banner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px;
    background: #0f172a;
    border-radius: var(--fp-radius-18);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.28), 0 2px 4px rgba(0,0,0,0.06);
}
.fpm-ext-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.35), 0 2px 4px rgba(0,0,0,0.07);
}

.fpm-ext-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(168, 85, 247, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(56, 189, 248, 0.2) 0%, transparent 50%);
    pointer-events: none;
    animation: fpmGlowPulse 8s ease-in-out infinite alternate;
}
@keyframes fpmGlowPulse {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

.fpm-ext-banner:active { transform: scale(0.98); }

.fpm-ext-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
    animation: fpmShimmer 4s ease infinite;
}

.fpm-ext-content {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.fpm-ext-browsers {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.fpm-ext-b {
    width: 32px;
    height: 32px;
    border-radius: var(--fp-radius-circle);
    background: #fff;
    border: 2px solid #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}
.fpm-ext-b:first-child { margin-left: 0; z-index: 4; }
.fpm-ext-b:nth-child(2) { z-index: 3; }
.fpm-ext-b:nth-child(3) { z-index: 2; }
.fpm-ext-b:nth-child(4) { z-index: 1; }

.fpm-ext-b img {
    width: 18px;
    height: 18px;
    display: block;
}

.fpm-ext-text { flex: 1; position: relative; z-index: 1; }

.fpm-ext-title {
    display: block;
    font-size: var(--fp-text-base);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

.fpm-ext-desc {
    display: block;
    font-size: var(--fp-text-xs);
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

.fpm-ext-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 0;
    width: 100%;
    background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
    color: #fff;
    font-size: var(--fp-text-base);
    font-weight: 800;
    border-radius: var(--fp-radius-10);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 16px rgba(147, 51, 234, 0.35);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}
.fpm-ext-banner:hover .fpm-ext-cta {
    box-shadow: 0 6px 24px rgba(147, 51, 234, 0.5);
}

/* ====== 6. FOOTER NAV ====== */
.fpm-footer-nav {
    border-top: 1px solid var(--fp-border);
    padding-top: 6px;
}

/* ====== 9. MENU FOOTER ====== */
.fpm-menu-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    margin-top: 4px;
}

.fpm-menu-footer span {
    font-size: var(--fp-text-xs);
    color: var(--fp-text-muted);
    opacity: 0.6;
}

.fpm-footer-dot {
    width: 3px;
    height: 3px;
    border-radius: var(--fp-radius-circle);
    background: var(--fp-text-muted);
    opacity: 0.3;
}

/* ==========================================================================
   5. GLOBAL FOOTER + FLASHAI
   ========================================================================== */

/* --- A. Mobile Bottom Tab Bar (White Glass Pill Design) --- */
.fp-bottom-bar {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    right: 16px;
    z-index: 9990;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--fp-radius-32);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.fp-bottom-nav-group {
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    padding: 0 8px;
    /* Inner pill padding */
}

.fp-bottom-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    /* Tighter gap between icon and text */
    text-decoration: none;
    flex: 1;
    height: 100%;
    padding: 0;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
    opacity: 0.45;
}

.fp-bottom-tab:active {
    transform: scale(0.9);
}

.fp-bottom-tab-active {
    opacity: 1;
}

.fp-bottom-icon {
    font-size: var(--fp-text-lg2);
    /* Kept for sizing constraints if needed */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: transform 0.2s ease;
}

.fp-bottom-icon svg {
    display: block;
    margin: 0;
}

.fp-bottom-tab-active .fp-bottom-icon {
    transform: translateY(-2px);
}

.fp-bottom-label {
    font-size: var(--fp-text-xs);
    font-weight: 500;
    color: var(--fp-text);
}

.fp-bottom-tab-active .fp-bottom-label {
    color: var(--fp-text-dark, #000);
    font-weight: 600;
}

/* FlashAI Center Button (Floating inside Glass Pill) */
.fp-bottom-ai-wrap {
    position: relative;
    width: 60px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.fp-bottom-ai.fp-ai-hero {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: var(--fp-radius-circle);
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transform: translateZ(0);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Glowing AI Gradient Ring (White/Silver Minimalist) */
.fp-bottom-ai.fp-ai-hero::before {
    content: "";
    position: absolute;
    inset: -2.5px;
    border-radius: var(--fp-radius-circle);
    background: conic-gradient(from 0deg, #ffffff, #888888, #333333, #888888, #ffffff);
    animation: fpAiSpin 3s linear infinite;
    z-index: -2;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
    /* Soft white glow */
}

/* Solid Black Core */
.fp-bottom-ai.fp-ai-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--fp-radius-circle);
    background: #000;
    z-index: -1;
}

@keyframes fpAiSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.fp-bottom-ai.fp-ai-hero:hover {
    transform: scale(1.08) translateZ(0);
}

.fp-bottom-ai.fp-ai-hero:active {
    transform: scale(0.92) translateZ(0);
}

.fp-bottom-ai-icon {
    font-size: var(--fp-text-xl);
    /* Slightly larger AI icon */
    color: #ffffff;
    filter: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Smart sticky: hide on scroll down */
.fp-bottom-bar.fp-bar-hidden {
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.fp-bottom-bar {
    transition: transform 0.3s ease;
}

/* Add bottom padding to body so content isn't hidden */
body {
    padding-bottom: 80px;
}

/* --- B. FlashAI Bottom Sheet (Light Glassmorphism) --- */
.fp-flashai-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    /* Softer backdrop */
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.fp-flashai-overlay.fp-open {
    opacity: 1;
    visibility: visible;
}

.fp-flashai-sheet.fp-glass-sheet {
    position: fixed;
    top: 0;
    /* Full screen */
    left: 0;
    width: 100%;
    height: 100dvh;
    /* Adapts cleanly to mobile soft keyboard */
    z-index: 100001;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 0;
    padding: 0;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    /* Stop main container scrolling */
}

.fp-flashai-sheet.fp-glass-sheet.fp-open {
    transform: translateY(0);
}

/* Close Button (Minimalist, Absolute Top Right) */
.fp-flashai-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0, 0, 0, 0.08);
    /* Darker so it's always visible */
    border-radius: var(--fp-radius-circle);
    color: var(--fp-text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    z-index: 101;
    /* Above sticky header */
}

.fp-flashai-close:hover {
    background: rgba(0, 0, 0, 0.15);
}

/* Friendly Greeting Header (Fixed/Sticky) */
.fp-ai-glass-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px 24px;
    flex-shrink: 0;
    /* Prevent squishing */
    position: sticky;
    top: 0;
    z-index: 100;
    /* Optional: A solid background behind the sticky header so cards slide under it nicely,
       but since the parent sheet is glass, we can let the parent handle the blur unless it overlaps visibly */
    background: inherit;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.fp-flashai-sheet.fp-open .fp-ai-glass-header {
    opacity: 1;
    transform: translateY(0);
}

.fp-ai-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--fp-radius-circle);
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.fp-ai-greeting {
    font-size: var(--fp-text-xl);
    font-weight: 700;
    color: var(--fp-text-dark);
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
}

.fp-ai-subtitle {
    font-size: var(--fp-text-base);
    font-weight: 500;
    color: var(--fp-text-muted);
    margin: 0;
}

/* Stacked Quick Action Cards (Scrollable Area) */
.fp-ai-scroll-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
}

.fp-ai-action-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.fp-ai-action-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: var(--fp-radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

    /* Staggered animation values */
    opacity: 0;
    transform: translateY(15px);
}

.fp-flashai-sheet.fp-open .fp-ai-action-card:nth-child(1) {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
    opacity: 1;
    transform: translateY(0);
}

.fp-flashai-sheet.fp-open .fp-ai-action-card:nth-child(2) {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
    opacity: 1;
    transform: translateY(0);
}

.fp-flashai-sheet.fp-open .fp-ai-action-card:nth-child(3) {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
    opacity: 1;
    transform: translateY(0);
}

.fp-ai-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    background: #fff;
}

.fp-ai-action-card:active {
    transform: scale(0.98);
}

.fp-ai-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--fp-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Card Icon Colors */
.fp-icon-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.fp-icon-green {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.fp-icon-purple {
    background: rgba(168, 85, 247, 0.1);
    color: #9333ea;
}

.fp-ai-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fp-ai-card-title {
    font-size: var(--fp-text-md);
    font-weight: 600;
    color: var(--fp-text-dark);
}

.fp-ai-card-sub {
    font-size: var(--fp-text-base);
    font-weight: 500;
    color: var(--fp-text-muted);
}

/* Floating Omni-Box Input */
.fp-ai-omni-box {
    width: 100%;
    background: #fff;
    border-radius: var(--fp-radius-20);
    padding: 8px 8px 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
    margin-top: auto;
}

.fp-flashai-sheet.fp-open .fp-ai-omni-box {
    opacity: 1;
    transform: translateY(0);
}

.fp-omni-spark {
    font-size: var(--fp-text-lg);
}

.fp-omni-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--fp-text-md);
    font-family: var(--fp-font);
    color: var(--fp-text-dark);
    outline: none;
    padding: 6px 0;
    min-width: 50px;
    /* prevent severe squishing */
}

.fp-omni-input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.fp-omni-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fp-omni-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--fp-radius-10);
    border: none;
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.fp-omni-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.fp-omni-send {
    width: 36px;
    height: 36px;
    border-radius: var(--fp-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fp-omni-send:active {
    transform: scale(0.9);
}

/* --- C. Desktop Sticky FlashAI Bar (Floating Glass Pill) --- */
.fp-flashai-sticky {
    display: none;
    /* hidden on mobile, shown via media query */
}

/* --- Desktop AI Overlay Refinements --- */
@media (min-width: 768px) {
    .fp-flashai-sheet.fp-glass-sheet {
        max-width: 1200px;
        /* Wider desktop view */
        margin: 40px auto;
        /* Center horizontally with top/bottom spacing */
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: var(--fp-radius-xl);
        /* Curved edges instead of full stretch */
        box-shadow: 0 32px 100px rgba(0, 0, 0, 0.2);
        height: calc(100vh - 80px);
        /* Leave room for margin */
        transform: translateY(calc(100% + 80px));
        /* Push completely off-screen to prevent ghosting */
    }

    .fp-flashai-sheet.fp-glass-sheet.fp-open {
        transform: translateY(0);
    }

    .fp-flashai-close {
        top: 24px;
        right: 24px;
    }

    .fp-ai-glass-header {
        padding-top: 40px;
        /* Smaller top padding than mobile context */
    }

    .fp-flashai-sticky.fp-glass-pill {
        display: flex;
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%) translateY(150px);
        z-index: 10000 !important;
        background: rgba(255, 255, 255, 0.85);
        background-clip: padding-box;
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 2px solid transparent;
        border-radius: var(--fp-radius-40);
        padding: 8px 12px 8px 16px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
        opacity: 0;
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
        max-width: 600px;
        width: 90%;
        isolation: isolate;
    }

    .fp-flashai-sticky.fp-glass-pill::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: var(--fp-radius-42);
        background: linear-gradient(90deg, #ffffff 0%, #a3a3a3 25%, #000000 50%, #a3a3a3 75%, #ffffff 100%);
        background-size: 200% auto;
        animation: fpAiBorderGradient 3s linear infinite;
        z-index: -1;
        /* Mask composite to ONLY show the gradient on the 2px border, preventing it from bleeding into the transparent glass background */
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        padding: 2px;
    }

    @keyframes fpAiBorderGradient {
        100% {
            background-position: 200% center;
        }
    }

    .fp-flashai-sticky.fp-glass-pill.fp-visible {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    .fp-flashai-sticky-inner {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .fp-flashai-avatar {
        width: 36px;
        height: 36px;
        border-radius: var(--fp-radius-circle);
        background: #000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .fp-flashai-sticky-divider {
        width: 1px;
        height: 24px;
        background: rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
    }

    .fp-flashai-sticky-input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: var(--fp-text-md);
        font-family: var(--fp-font);
        color: var(--fp-text-dark);
        outline: none;
        padding: 8px 0;
    }

    .fp-flashai-sticky-input::placeholder {
        color: #94a3b8;
        font-weight: 500;
    }

    .fp-flashai-sticky-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .fp-flashai-sticky-action {
        width: 36px;
        height: 36px;
        border-radius: var(--fp-radius-10);
        border: none;
        background: transparent;
        color: #64748b;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }

    .fp-flashai-sticky-action:hover {
        background: rgba(0, 0, 0, 0.05);
        color: var(--fp-text-dark);
    }

    .fp-flashai-sticky-send {
        width: 36px;
        height: 36px;
        border-radius: var(--fp-radius-circle);
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: #fff;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .fp-flashai-sticky-send:active {
        transform: scale(0.9);
    }
}

/* --- D. Desktop Fat Footer — Light Apple Minimal --- */
.fp-fat-footer {
    display: none;
    background: #fafafa;
    border-top: 1px solid rgba(0,0,0,.06);
}

/* ── Footer Keyframes ── */
@keyframes fpFtFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fpFtFloatSlow{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}
@keyframes fpFtPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.6);opacity:0}}
@keyframes fpFtGlow{0%,100%{opacity:.3}50%{opacity:.7}}
@keyframes fpFtSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes fpFtDash{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}
@keyframes fpFtBell{0%,100%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}40%{transform:rotate(-8deg)}50%{transform:rotate(0deg)}}
@keyframes fpFtRipple{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.4);opacity:0}}
@keyframes fpFtFadeUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:none}}
@keyframes fpFtNodePulse{0%,100%{r:4}50%{r:6}}
@keyframes fpFtTagFloat1{0%,100%{transform:translate(30px,38px)}50%{transform:translate(30px,28px)}}
@keyframes fpFtTagFloat2{0%,100%{transform:translate(148px,115px)}50%{transform:translate(148px,108px) rotate(2deg)}}
@keyframes fpFtTagFloat3{0%,100%{transform:translate(38px,155px)}50%{transform:translate(38px,148px)}}
@keyframes fpFtTagFloat4{0%,100%{transform:translate(140px,42px)}50%{transform:translate(140px,35px) rotate(-1deg)}}

/* Reveal on scroll */
.fp-ft-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}
.fp-ft-reveal.fp-ft-vis{opacity:1;transform:none}

/* ══════ CTA Cards Section ══════ */
.fp-ft-ctas{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1200px;margin:0 auto;padding:40px 40px 0}

/* Shared CTA card */
.fp-ft-cta{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;border-radius: var(--fp-radius-xl);padding:36px 32px;position:relative;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s}
.fp-ft-cta:hover{transform:translateY(-4px)}

/* ── FlashAI CTA — Dark ── */
.fp-ft-cta-ai{background:#0a0a0a;color:#fff;box-shadow:0 8px 32px rgba(0,0,0,.15),inset 0 2px 0 rgba(255,255,255,.05);position:relative;animation:fpFtAiGlow 5s ease-in-out infinite;border:2px solid rgba(255,255,255,.1)}
.fp-ft-cta-ai:hover{box-shadow:0 12px 50px rgba(59,130,246,.15),0 0 80px rgba(139,92,246,.06),inset 0 2px 0 rgba(255,255,255,.1);transform:translateY(-4px);border-color:rgba(255,255,255,.15)}
@keyframes fpFtAiGlow{0%,100%{box-shadow:0 8px 32px rgba(0,0,0,.15),0 0 0 rgba(59,130,246,0),inset 0 2px 0 rgba(255,255,255,.05)}50%{box-shadow:0 8px 40px rgba(0,0,0,.2),0 0 40px rgba(59,130,246,.06),0 0 80px rgba(139,92,246,.03),inset 0 2px 0 rgba(255,255,255,.05)}}


/* ── Loot CTA — Light ── */
.fp-ft-cta-loot{background:#fff;border:2px solid #fff;box-shadow:0 8px 24px rgba(0,0,0,.04),inset 0 -2px 0 rgba(0,0,0,.02)}
.fp-ft-cta-loot:hover{box-shadow:0 16px 40px rgba(0,0,0,.08),inset 0 -2px 0 rgba(0,0,0,.02);border-color:#fff}

/* CTA Content */
.fp-ft-cta-content{position:relative;z-index:2;min-width:0}

/* Tag pill */
.fp-ft-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius: var(--fp-radius-pill);font-size:.62rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.08)}
.fp-ft-tag-loot{background:rgba(0,0,0,.03);color:#52525b;border-color:rgba(0,0,0,.06)}

/* CTA heading */
.fp-ft-cta-h{font-size:clamp(1.3rem,2.5vw,1.65rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin:0 0 8px;color:#fff}
.fp-ft-h-dark{color:#09090b;background:linear-gradient(135deg,#000 0%,#3f3f46 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* CTA description */
.fp-ft-cta-p{font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.55);margin:0 0 20px;max-width:320px;font-weight:500}
.fp-ft-p-dark{color:#6b7280}

/* FlashAI button */
.fp-ft-ai-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius: var(--fp-radius-pill);background:#fff;color:#0a0a0a;font-weight:800;font-size:.82rem;border:none;cursor:pointer;letter-spacing:-.01em;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 20px rgba(0,0,0,.15)}
.fp-ft-ai-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 28px rgba(0,0,0,.25)}

/* Loot channel buttons */
.fp-ft-loot-btns{display:flex;gap:10px;flex-wrap:wrap}
.fp-ft-ch-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius: var(--fp-radius-pill);font-size:.78rem;font-weight:700;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);border:1.5px solid transparent}
.fp-ft-ch-btn:hover{transform:translateY(-2px)}
.fp-ft-ch-tg{background:#0088cc;color:#fff;box-shadow:0 4px 14px rgba(0,136,204,.2)}
.fp-ft-ch-tg:hover{box-shadow:0 8px 24px rgba(0,136,204,.3)}
.fp-ft-ch-wa{background:#25d366;color:#fff;box-shadow:0 4px 14px rgba(37,211,102,.2)}
.fp-ft-ch-wa:hover{box-shadow:0 8px 24px rgba(37,211,102,.3)}

/* CTA Visual */
.fp-ft-cta-vis{position:relative;z-index:1;width:180px;height:180px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.fp-ft-ai-svg,.fp-ft-bell-svg{width:100%;height:100%}

/* ── FlashAI SVG Animations ── */
.fp-ft-ring{transform-origin:center}
.fp-ft-r1{animation:fpFtSpin 30s linear infinite}
.fp-ft-r2{animation:fpFtSpin 22s linear infinite reverse}
.fp-ft-r3{animation:fpFtSpin 16s linear infinite}
.fp-ft-line{stroke-dasharray:200;animation:fpFtDash 3s cubic-bezier(.4,0,.2,1) forwards}
.fp-ft-nd{transition:all .3s}
.fp-ft-nd1{animation:fpFtGlow 3s ease-in-out infinite}
.fp-ft-nd2{animation:fpFtGlow 3s ease-in-out infinite .5s}
.fp-ft-nd3{animation:fpFtGlow 3s ease-in-out infinite 1s}
.fp-ft-nd4{animation:fpFtGlow 3s ease-in-out infinite 1.5s}
.fp-ft-nd5{animation:fpFtGlow 3s ease-in-out infinite 2s}
.fp-ft-nd6{animation:fpFtGlow 3s ease-in-out infinite 2.5s}
.fp-ft-bolt{animation:fpFtFloat 4s ease-in-out infinite;transform-origin:center}
.fp-ft-glow{animation:fpFtPulse 4s ease-in-out infinite}
.fp-ft-pt{animation:fpFtFloat 5s ease-in-out infinite}
.fp-ft-pt1{animation-delay:0s}
.fp-ft-pt2{animation-delay:.8s}
.fp-ft-pt3{animation-delay:1.6s}
.fp-ft-pt4{animation-delay:2.4s}
.fp-ft-pt5{animation-delay:3.2s}

/* ── Bell SVG Animations ── */
.fp-ft-bell{animation:fpFtBell 3s ease-in-out infinite;transform-origin:110px 68px}
.fp-ft-rip{animation:fpFtRipple 2.5s ease-out infinite}
.fp-ft-rip1{animation-delay:0s}
.fp-ft-rip2{animation-delay:.4s}
.fp-ft-rip3{animation-delay:.8s}
.fp-ft-notif{animation:fpFtGlow 2s ease-in-out infinite}
.fp-ft-dtag1{animation:fpFtTagFloat1 4s ease-in-out infinite}
.fp-ft-dtag2{animation:fpFtTagFloat2 4.5s ease-in-out infinite .5s}
.fp-ft-dtag3{animation:fpFtTagFloat3 5s ease-in-out infinite 1s}
.fp-ft-dtag4{animation:fpFtTagFloat4 3.5s ease-in-out infinite .3s}

/* ══════ Main Footer Grid ══════ */
.fp-ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1.2fr;gap:28px;max-width:1200px;margin:0 auto;padding:44px 40px 36px;border-top:none}

/* Brand column */
.fp-ft-col-brand{padding-right:12px}
.fp-ft-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fp-ft-logo-name{font-size:1.15rem;font-weight:900;color:#09090b;letter-spacing:-.03em}
.fp-ft-brand-p{font-size:.78rem;color:#6b7280;line-height:1.7;margin:0 0 16px;font-weight:500}

/* Social icons row */
.fp-ft-social-row{display:flex;gap:6px;flex-wrap:wrap}
.fp-ft-soc{width:30px;height:30px;border-radius: var(--fp-radius-circle);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);border:none;background:#18181b;box-shadow:none;color:#fff}
.fp-ft-soc:hover{transform:scale(1.1) translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15);background:#000;color:#fff}
.fp-ft-soc svg{width:14px;height:14px;display:block}

/* Nav columns */
.fp-ft-col{display:flex;flex-direction:column;gap:7px}
.fp-ft-heading{font-size:.68rem;font-weight:800;color:#09090b;text-transform:uppercase;letter-spacing:.7px;margin:0 0 6px;position:relative;padding-bottom:0}

.fp-ft-col a{font-size:.8rem;color:#6b7280;text-decoration:none;font-weight:500;transition:color .2s,transform .2s;display:inline-block}
.fp-ft-col a:hover{color:#09090b;transform:translateX(3px)}

/* App badges */
.fp-ft-col-app{gap:6px}
.fp-ft-badges{display:flex;flex-direction:column;gap:8px}
.fp-ft-store-badge{display:block;height:42px;border-radius: var(--fp-radius-sm);overflow:hidden;transition:all .3s}
.fp-ft-store-badge:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.fp-ft-store-badge img{height:100%;width:auto;display:block;object-fit:contain}
.fp-ft-badge-ext{display:inline-flex;align-items:center;width:142px;height:42px;padding:0 8px;background:linear-gradient(135deg,#18181b,#27272a);border-radius: var(--fp-radius-sm);text-decoration:none;transition:all .3s;border:1px solid rgba(255,255,255,.08);box-shadow:0 2px 8px rgba(0,0,0,.06);gap:8px;box-sizing:border-box;white-space:nowrap}
.fp-ft-badge-ext:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.15);border-color:rgba(255,255,255,.15)}
.fp-ft-badge-ext .fp-ft-badge-txt{display:flex;flex-direction:column;justify-content:center}
.fp-ft-badge-ext .fp-ft-badge-s{display:block;font-size:8px;color:rgba(255,255,255,.6);letter-spacing:0.3px;font-weight:500;text-transform:none;line-height:1;white-space:nowrap}
.fp-ft-badge-ext .fp-ft-badge-t{display:block;font-size:11px;font-weight:700;color:#fff;line-height:1.2;margin-top:2px;letter-spacing:-0.2px;white-space:nowrap}

/* ══════ SEO Link Block ══════ */
.fp-ft-seo{max-width:1200px;margin:0 auto;padding:24px 40px;border-top:1px solid rgba(0,0,0,.04)}
.fp-ft-seo-row{font-size:.72rem;color:#9ca3af;line-height:2;margin-bottom:4px;font-weight:500}
.fp-ft-seo-row strong{color:#374151;font-weight:700}
.fp-ft-seo-row a{color:#9ca3af;text-decoration:none;transition:color .2s}
.fp-ft-seo-row a:hover{color:#09090b}
.fp-ft-sep{display:inline-block;width:3px;height:3px;border-radius: var(--fp-radius-circle);background:#d1d5db;vertical-align:middle;margin:0 8px}

/* ══════ About Flashprice (AIO Content) ══════ */
.fp-ft-about{max-width:1200px;margin:0 auto;padding:24px 40px 20px;border-top:1px solid rgba(0,0,0,.04)}
.fp-ft-about .fp-ft-heading{margin-bottom:8px}
.fp-ft-about p{font-size:.78rem;color:#9ca3af;line-height:1.85;margin:0;font-weight:500}

/* ══════ FAQ Accordion ══════ */
.fp-ft-faq{max-width:1200px;margin:0 auto;padding:4px 40px 24px}
.fp-ft-faq .fp-ft-heading{margin-bottom:12px}
.fp-ft-faq-item{border:1px solid rgba(0,0,0,.05);border-radius:14px;margin-bottom:8px;overflow:hidden;background:#fff;transition:box-shadow .2s}
.fp-ft-faq-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.04)}

.fp-footer-faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;background:transparent;border:none;cursor:pointer;font-size:.8rem;font-weight:700;color:#09090b;font-family:var(--fp-font);transition:background .2s;letter-spacing:-.01em}
.fp-footer-faq-q:hover{background:rgba(0,0,0,.015)}
.fp-ft-faq-chev{flex-shrink:0;color:#9ca3af;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.fp-footer-faq-q[aria-expanded="true"] .fp-ft-faq-chev{transform:rotate(180deg)}
.fp-footer-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.fp-footer-faq-a.fp-open{max-height:200px}
.fp-footer-faq-a p{padding:0 18px 14px;font-size:.78rem;color:#6b7280;line-height:1.75;margin:0;font-weight:500}

/* ══════ Trust Stats Strip ══════ */
.fp-ft-trust{display:flex;align-items:center;justify-content:center;gap:12px;max-width:1200px;margin:0 auto;padding:20px 40px;border-top:1px solid rgba(0,0,0,.04);flex-wrap:wrap}
.fp-ft-trust-item{display:flex;align-items:center;gap:6px;padding:7px 14px;background:#fff;border-radius: var(--fp-radius-pill);border:1px solid rgba(0,0,0,.05);font-size:.7rem;font-weight:700;color:#374151;transition:all .2s}
.fp-ft-trust-item:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.05);border-color:rgba(0,0,0,.08)}
.fp-ft-trust-item svg{flex-shrink:0}

/* ══════ Copyright Bar ══════ */
.fp-ft-copy{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:18px 40px;border-top:1px solid rgba(0,0,0,.04);font-size:.7rem;color:#9ca3af;font-weight:500}
.fp-ft-legal{display:flex;gap:18px}
.fp-ft-legal a{color:#9ca3af;text-decoration:none;transition:color .2s;font-weight:600}
.fp-ft-legal a:hover{color:#09090b}