/* ==========================================================
   Majir – Shared Styles
   ========================================================== */

/* ---------- Theme custom properties ---------- */
:root {
    --canvas: #FBFAF7;
    --canvas-sunk: #F4F1EA;
    --ink: #0E1512;
    --ink-soft: #3A4440;
    --ink-muted: #6B7570;
    --brand: #008000;
    --brand-hover: #006B00;
    --line: #E8E3D8;
    --surface: #FFFFFF;
}

[data-theme="dark"] {
    --canvas: #0E1512;
    --canvas-sunk: #1A2420;
    --ink: #F4F1EA;
    --ink-soft: #B8C4BD;
    --ink-muted: #7A8B82;
    --brand: #33A033;
    --brand-hover: #008000;
    --line: #2A3530;
    --surface: #1A2420;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--canvas);
    color: var(--ink);
}
.font-display {
    font-family: 'Archivo', 'Inter', 'Inter', -apple-system, sans-serif;
}
/* Logo wordmark - uses the display family (Archivo) so the type system is
   unified across web, webapp, and mobile: Inter for text, Archivo for display.
   (Previously Space Grotesk, now retired.) */
.font-logo {
    font-family: 'Archivo', 'Inter', -apple-system, sans-serif;
    letter-spacing: -0.02em;
    font-weight: 800;
}

html {
    scroll-behavior: smooth;
}

/* ---------- Grain overlay (disabled for light theme) ---------- */
.grain::after {
    display: none;
}

/* ---------- Glow & mesh ---------- */
.glow-green {
    box-shadow: 0 0 60px rgba(0,128,0,0.10), 0 0 120px rgba(0,128,0,0.04);
}
.text-glow {
    text-shadow: 0 0 40px rgba(0,128,0,0.2);
}
.mesh-bg {
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(0,128,0,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(0,128,0,0.03) 0%, transparent 50%),
        radial-gradient(ellipse 50% 60% at 50% 80%, rgba(0,107,0,0.02) 0%, transparent 50%);
}

/* ---------- Gradient border ---------- */
.gradient-border { position: relative; }
.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0,128,0,0.3), transparent 40%, transparent 60%, rgba(0,128,0,0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* ---------- Keyframes ---------- */
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
@keyframes marquee { 0%{transform:translateX(0%)} 100%{transform:translateX(-50%)} }

.animate-float    { animation: float 6s ease-in-out infinite; }
.animate-fade-up  { animation: fadeUp 0.8s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.6s ease-out forwards; }
.animate-marquee  { animation: marquee 30s linear infinite; }

.delay-100{animation-delay:.1s}
.delay-200{animation-delay:.2s}
.delay-300{animation-delay:.3s}
.delay-400{animation-delay:.4s}

/* ---------- Light section green override ---------- */
/* Apply .section-light to any white/cream background container.
   All green text inside will use a darker shade for better contrast. */
.section-light .text-majir-green { color: #006B00 !important; }
.section-light svg[stroke="#008000"] { stroke: #006B00; }
.section-light svg[fill="#008000"] { fill: #006B00; }
.section-light .step-number {
    background: linear-gradient(135deg, #006B00, #005200);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.section-light .border-majir-green\/20 { border-color: rgba(0,107,0,0.2); }

/* ---------- Step numbers (gradient text) ---------- */
.step-number {
    background: linear-gradient(135deg, #008000, #006B00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- Cards ---------- */
.card-hover {
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.card-hover:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 40px rgba(0,128,0,0.06);
}

/* ---------- Neumorphic (light sections) ---------- */
.neumorphic {
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid var(--line);
}
.neumorphic.card-hover:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
}

/* ---------- Glassmorphic (now light card style) ---------- */
.glass {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.glass.card-hover:hover {
    border-color: rgba(0,128,0,0.2);
    box-shadow: 0 4px 16px rgba(0,128,0,0.06);
}

/* ---------- Phone mockup (iPhone frame) ----------
   The device frame is graphite/gunmetal titanium by default (light mode)
   and the original Space Black in dark mode. Colours are exposed as custom
   properties consumed by inline styles on the frame elements in index.html,
   so the same markup themes itself without duplication. */
.iphone-frame {
    filter: drop-shadow(0 25px 60px rgba(0,0,0,0.22)) drop-shadow(0 8px 20px rgba(0,0,0,0.14));
    /* IMPORTANT: the INNER body is the dominant visible frame band - the shell
       shows only as a ~1px outer edge (the screen sits 6px in, the inner body
       1px in, so the inner body fills the ~5px ring you actually see). So the
       frame colour must live on --frame-inner; --frame-shell is just the thin
       outer edge line. Light mode = carbon/graphite with a metallic sheen and
       lit side buttons; dark = Space Black. */
    --frame-shell:  #3a4048;
    --frame-inner:  linear-gradient(145deg, #4a525b 0%, #323841 25%, #262c33 50%, #323841 75%, #4a525b 100%);
    --frame-btn-hi: #757d87;
    --frame-btn-lo: #3a4149;
    --frame-rim:    rgba(255,255,255,0.12);
}
[data-theme="dark"] .iphone-frame {
    --frame-shell:  linear-gradient(145deg, #2a2a2a 0%, #111 15%, #000 40%, #000 60%, #111 85%, #1a1a1a 100%);
    --frame-inner:  #000000;
    --frame-btn-hi: #333333;
    --frame-btn-lo: #111111;
    --frame-rim:    rgba(255,255,255,0.15);
}

/* ---------- Phone mockup screen (themed app UI) ----------
   The mockup depicts the Majir iOS app, so its SCREEN carries its own
   light/dark palette, independent of the marketing-site tokens. That keeps
   the device reading as a real phone in both site themes:
     - light site theme -> light app screen (the default values below)
     - dark site theme  -> dark app screen  (the [data-theme="dark"] block)
   Light is the default to match the site's light-first :root (a first
   visit with no stored theme has no data-theme attribute at all). The
   dark values equal the previously hard-coded hexes, so dark mode is
   visually unchanged. Palette is declared on .phone-screen-bg (the outer
   screen wrapper) so the custom properties cascade to .phone-screen and
   every element inside it. */
.phone-screen-bg {
    --p-screen:   #FFFFFF;  /* device screen background              */
    --p-surface:  #F2F5F1;  /* cards, header buttons, inactive pills  */
    --p-chip:     #E7ECE6;  /* small source / location chips          */
    --p-border:   rgba(14,21,18,0.08);
    --p-ink:      #0E1512;  /* primary text (Wallet title, counts)    */
    --p-ink-soft: #4A554F;  /* merchant names                         */
    --p-muted:    #66726B;  /* muted labels, expiry, nav captions     */
    --p-green:    #008000;  /* brand green on the screen              */
    --p-sb:       #0E1512;  /* status-bar glyphs (time, wifi, signal) */
    --p-sb-30:    rgba(14,21,18,0.30);
    --p-sb-40:    rgba(14,21,18,0.40);
}
[data-theme="dark"] .phone-screen-bg {
    --p-screen:   #141614;
    --p-surface:  #1e2220;
    --p-chip:     #282c2a;
    --p-border:   rgba(255,255,255,0.08);
    --p-ink:      #F4F1EA;
    --p-ink-soft: #B8C4BD;
    --p-muted:    #7A8B82;
    --p-green:    #33A033;
    --p-sb:       #FFFFFF;
    --p-sb-30:    rgba(255,255,255,0.30);
    --p-sb-40:    rgba(255,255,255,0.40);
}
.phone-screen-bg,
.phone-screen { background: var(--p-screen); }
.phone-screen { overflow: hidden; color: var(--p-ink); }

/* Surfaces, borders, and accent fills inside the screen (both themes) */
.phone-screen .bg-\[\#1e2220\]         { background-color: var(--p-surface) !important; }
.phone-screen .bg-\[\#282c2a\]         { background-color: var(--p-chip) !important; }
.phone-screen .border-white\/\[0\.08\] { border-color: var(--p-border) !important; }
.phone-screen .bg-majir-green          { background-color: var(--p-green) !important; }

/* Text inside the screen (both themes) */
.phone-screen .text-majir-green        { color: var(--p-green) !important; }
.phone-screen .text-majir-gray-muted   { color: var(--p-muted) !important; }
.phone-screen .text-gray-600           { color: var(--p-ink-soft) !important; }

/* Status-bar glyphs follow the screen's own light/dark ink via --p-sb */
.phone-screen .text-white       { color: var(--p-sb); }
.phone-screen .bg-white         { background-color: var(--p-sb); }    /* solid signal bars */
.phone-screen .bg-white\/30     { background-color: var(--p-sb-30); } /* faded signal bars */
.phone-screen .bg-white\/40     { background-color: var(--p-sb-40); } /* battery nub        */
.phone-screen svg[fill="white"] { fill: var(--p-sb); }                /* wifi glyph         */
/* Glyphs that sit on the green logo tile / battery stay white in both themes.
   The extra class outranks the --p-sb status-bar rules above. */
.phone-screen .bg-majir-green .text-white       { color: #ffffff; }
.phone-screen .bg-majir-green svg[fill="white"] { fill: #ffffff; }
/* "All" active filter pill sits on green: white label in light mode,
   restored to the original cream ink in dark mode (unchanged). */
.phone-screen .text-majir-dark                      { color: #ffffff !important; }
[data-theme="dark"] .phone-screen .text-majir-dark  { color: var(--ink) !important; }

/* ---------- Navigation ---------- */
.nav-blur {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
/* Liquid-glass nav: a translucent background lets the backdrop blur show
   through. !important overrides the opaque .bg-majir-cream fallback so the
   glass effect is consistent across the site (and matches the dev pages). */
nav.nav-blur,
#mobile-menu.nav-blur { background-color: rgba(251,250,247,0.72) !important; }
[data-theme="dark"] nav.nav-blur,
[data-theme="dark"] #mobile-menu.nav-blur { background-color: rgba(14,21,18,0.72) !important; }

/* ---------- Icon containers ---------- */
.icon-container {
    background: linear-gradient(135deg, rgba(0,128,0,0.12), rgba(0,128,0,0.04));
    border: 1px solid rgba(0,128,0,0.1);
}

/* ---------- hCaptcha compact ---------- */
.h-captcha {
    transform: scale(0.5);
    transform-origin: left top;
    max-height: 40px;
}
#cta-captcha {
    transform-origin: center top;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--canvas-sunk); }
::-webkit-scrollbar-thumb { background: var(--ink-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ---------- Spacing overrides ---------- */
/* Reduce How It Works section-heading-wrapper bottom margin from mb-20 (80px) to 48px */
#product .max-w-2xl.mb-20 { margin-bottom: 3rem; }
/* Reduce final CTA section vertical padding from py-24/lg:py-32 to py-16/lg:py-24 */
#waitlist { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 1024px) {
    #waitlist { padding-top: 6rem; padding-bottom: 6rem; }
}

/* ---------- Dark mode overrides ---------- */
/* Nav and footer use Tailwind classes for bg/border; override via data-theme */
[data-theme="dark"] nav {
    background-color: rgba(14,21,18,0.95) !important;
    border-color: var(--line) !important;
    color: var(--ink);
}
[data-theme="dark"] #mobile-menu {
    background-color: rgba(14,21,18,0.95) !important;
    border-color: var(--line) !important;
}
[data-theme="dark"] footer {
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink);
}
/* Section-light green override is not needed in dark mode */
[data-theme="dark"] .section-light .text-majir-green { color: var(--brand) !important; }

/* ---------- Tailwind custom-color fallbacks ----------
   Tailwind Play CDN intermittently fails to generate these classes before
   paint, so define them directly against theme custom properties. They
   auto-invert in dark mode via [data-theme="dark"] redefining the vars. */
.bg-majir-cream         { background-color: var(--canvas); }
.bg-majir-dark          { background-color: var(--ink); }
.bg-majir-dark-card     { background-color: var(--surface); }
.bg-majir-dark-surface  { background-color: var(--canvas-sunk); }
.text-majir-dark        { color: var(--ink); }
.text-majir-cream       { color: var(--canvas); }
.text-majir-gray-light  { color: var(--ink-soft); }
.text-majir-gray-muted  { color: var(--ink-muted); }
.text-majir-green       { color: var(--brand); }
.text-majir-green-dark  { color: var(--brand-hover); }
.bg-majir-green         { background-color: var(--brand); }
.bg-majir-green\/10     { background-color: rgba(0,128,0,0.10); }
.bg-majir-green\/90:hover{ background-color: var(--brand-hover); }
.border-majir-green     { border-color: var(--brand); }
.border-majir-green\/20 { border-color: rgba(0,128,0,0.2); }
.border-majir-green\/30 { border-color: rgba(0,128,0,0.3); }
.border-majir-green\/40 { border-color: rgba(0,128,0,0.4); }

/* The hero "Connect Your Inbox" button sits on a green fill - text must be
   cream in both modes for contrast, not inverting with --ink. */
a.bg-majir-green { color: var(--canvas); }
[data-theme="dark"] a.bg-majir-green { color: #0E1512; }

/* Primary hero CTA - neumorphic-lifted green pill with animated glow.
   Restores the "magic" shimmer that was lost when the button lost its
   box-shadow after the Tailwind-fallback refactor. */
/* Unified site-wide button: add the `cta-primary` class to any button/CTA to
   get the canonical Majir button look (green pill, white text, lifted hover).
   The !important rules let it override a button's existing Tailwind colour,
   radius, and border utilities without having to strip them per element. */
.cta-primary {
    color: #ffffff !important;
    background-color: var(--brand) !important;
    border-radius: 9999px !important;     /* same pill radius as Connect Your Inbox */
    border-color: transparent !important;
    transition: all 0.2s ease;
    box-shadow:
        0 10px 30px rgba(0,128,0,0.35),
        0 4px 12px rgba(0,128,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.cta-primary:hover {
    background-color: var(--brand-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 14px 40px rgba(0,128,0,0.45),
        0 6px 16px rgba(0,128,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
[data-theme="dark"] .cta-primary {
    box-shadow:
        0 10px 30px rgba(51,160,51,0.35),
        0 4px 12px rgba(51,160,51,0.22),
        inset 0 1px 0 rgba(255,255,255,0.18);
}

/* In dark mode the .section-light utility was designed to darken greens on
   cream backgrounds. Dark mode uses dark bg, so reset text-ink to inherit. */
[data-theme="dark"] .section-light { color: var(--ink); }
[data-theme="dark"] .section-light .text-majir-dark,
[data-theme="dark"] .section-light h1,
[data-theme="dark"] .section-light h2,
[data-theme="dark"] .section-light h3,
[data-theme="dark"] .section-light h4 { color: var(--ink); }
[data-theme="dark"] .section-light p,
[data-theme="dark"] .section-light li,
[data-theme="dark"] .section-light span:not(.text-majir-green):not(.step-number) { color: var(--ink-soft); }
[data-theme="dark"] .section-light .text-majir-green { color: var(--brand) !important; }
[data-theme="dark"] .section-light .text-majir-gray-light { color: var(--ink-soft); }
[data-theme="dark"] .section-light .text-majir-gray-muted { color: var(--ink-muted); }

/* Neumorphic / glass cards inside .section-light must use dark surface in dark mode */
[data-theme="dark"] .section-light .neumorphic,
[data-theme="dark"] .section-light .glass,
[data-theme="dark"] .neumorphic,
[data-theme="dark"] .glass {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

/* Borders that used gray-200 in light mode need to switch in dark mode */
[data-theme="dark"] .border-gray-200 { border-color: var(--line) !important; }
[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-theme="dark"] .bg-gray-50 { background-color: var(--canvas-sunk) !important; }
[data-theme="dark"] .bg-gray-100 { background-color: var(--canvas-sunk) !important; }
[data-theme="dark"] .text-gray-900 { color: var(--ink) !important; }
[data-theme="dark"] .text-gray-800 { color: var(--ink) !important; }
[data-theme="dark"] .text-gray-700 { color: var(--ink-soft) !important; }
[data-theme="dark"] .text-gray-600 { color: var(--ink-soft) !important; }
[data-theme="dark"] .text-gray-500 { color: var(--ink-muted) !important; }
[data-theme="dark"] .text-gray-400 { color: var(--ink-muted) !important; }

/* Phone mockup lives inside the hero and renders a fake iOS screen. The
   "New Offer Found!" notification is a white floating card, it must stay
   a light card with dark text in both themes, otherwise dark text inherits
   down from .section-light overrides and goes invisible on white. */
.bg-white\/90 { background-color: rgba(255,255,255,0.9) !important; color: #0E1512; }
.bg-white\/90 * { color: inherit; }
.bg-white\/90 .text-majir-gray-muted { color: #6B7570 !important; }
[data-theme="dark"] .bg-white\/90,
[data-theme="dark"] .bg-white\/90 * { color: #0E1512 !important; }
[data-theme="dark"] .bg-white\/90 .text-majir-gray-muted { color: #6B7570 !important; }

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}
.theme-toggle:hover {
    color: var(--brand);
    border-color: var(--brand);
}