/* ============================================================================
   SNAP PAY — Frontend design system
   Modern layer on top of Bootstrap 5.1.3 + the Payyed theme (css/stylesheet.css).
   Brand aligned to the LIVE site green: --snap-green #2DBE60 / dark #1f8f46.
   Goals: readable typography, a calculator that POPS, depth, polish.
   ========================================================================== */
:root {
    --bs-primary: #2DBE60;
    --bs-primary-rgb: 45,190,96;
    --snap-green: #2DBE60;
    --snap-green-dark: #1f8f46;
    --snap-green-darker: #18713a;
    --snap-green-soft: #e9f9f0;
    --snap-ink: #15212e;        /* headings */
    --snap-body: #475569;       /* body text */
    --snap-muted: #64748b;      /* secondary text */
    --snap-line: #e7ecf2;       /* borders */
    --snap-bg-soft: #f5f8fb;
    --snap-radius: 16px;
    --snap-shadow-sm: 0 2px 10px rgba(16,33,46,.06);
    --snap-shadow: 0 12px 34px rgba(16,33,46,.10);
    --snap-shadow-lg: 0 26px 60px rgba(16,33,46,.16);
}

/* ---------- Base typography (Payyed ships a cramped 14px/22px) ------------- */
body {
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--snap-body);
    font-size: 16px;
    line-height: 1.65;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { font-family: 'Poppins', system-ui, sans-serif; color: var(--snap-ink); font-weight: 700; line-height: 1.2; }
p { color: var(--snap-body); }
.lead { font-size: 1.12rem; line-height: 1.7; }
a { color: var(--snap-green-dark); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--snap-green-darker); }
.text-muted { color: var(--snap-muted) !important; }       /* darker than Payyed's #8e9a9d */
.section-title { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); margin-bottom: .75rem; }
.text-white .section-title, .text-white h1, .text-white h2, .text-white h3, .text-white h4 { color: #fff; }

/* ---------- Color utilities → brand green --------------------------------- */
.bg-primary { background-color: var(--snap-green) !important; }
.text-primary { color: var(--snap-green-dark) !important; }
.border-primary { border-color: var(--snap-green) !important; }
.link-primary, a.text-primary { color: var(--snap-green-dark) !important; }
.bg-soft { background-color: var(--snap-bg-soft) !important; }
.text-white-75 { color: rgba(255,255,255,.85); }

/* ---------- Buttons ------------------------------------------------------- */
.btn { font-family: 'Poppins', sans-serif; font-weight: 600; border-radius: 12px; padding: .62rem 1.4rem; transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease; }
.btn-lg { padding: .85rem 1.8rem; font-size: 1.02rem; border-radius: 14px; }
.btn-sm { padding: .42rem 1rem; border-radius: 10px; }
.btn-primary { background-color: var(--snap-green); border-color: var(--snap-green); color: #fff; box-shadow: 0 8px 20px rgba(45,190,96,.28); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--snap-green-dark) !important; border-color: var(--snap-green-dark) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(45,190,96,.38); }
.btn-outline-primary { color: var(--snap-green-dark); border-color: var(--snap-green); border-width: 1.5px; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--snap-green) !important; border-color: var(--snap-green) !important; color: #fff !important; transform: translateY(-2px); }
.btn-light { background:#fff; border-color:#fff; color: var(--snap-green-dark); }
.btn-light:hover { background:#f1f5f9; color: var(--snap-green-darker); }
.btn-warning { color: #15212e; }

/* ---------- Header / navbar ---------------------------------------------- */
#header { box-shadow: var(--snap-shadow-sm); }
.primary-menu.navbar { padding-top: .65rem; padding-bottom: .65rem; }
.navbar .nav-link { font-family: 'Poppins', sans-serif; font-weight: 500; color: #283544 !important; padding: .5rem 1rem !important; border-radius: 8px; }
.navbar .nav-link:hover { color: var(--snap-green-dark) !important; }
.navbar-nav .nav-item.active > .nav-link, .navbar .nav-link.active { color: var(--snap-green-dark) !important; }
.navbar-nav .nav-item.active > .nav-link::after { content:""; display:block; height:3px; width:22px; margin:.15rem auto 0; border-radius:3px; background: var(--snap-green); }
.dropdown-menu { border:0; border-radius:14px; box-shadow: var(--snap-shadow); padding:.4rem; }
.dropdown-item { border-radius:9px; padding:.5rem .9rem; font-weight:500; }
.dropdown-item:hover { background: var(--snap-green-soft); color: var(--snap-green-darker); }

/* ---------- Cards / sections --------------------------------------------- */
.card { border: 1px solid var(--snap-line); border-radius: var(--snap-radius); }
.shadow-sm { box-shadow: var(--snap-shadow-sm) !important; }
.shadow, .shadow-lg { box-shadow: var(--snap-shadow-lg) !important; }
.rounded-4 { border-radius: var(--snap-radius) !important; }
section { padding: 84px 0; }
section.py-5 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.feature-card { background:#fff; border:1px solid var(--snap-line); border-radius: var(--snap-radius); padding:1.8rem; height:100%; box-shadow: var(--snap-shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--snap-shadow); }
.feature-ico { width:56px; height:56px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; background:linear-gradient(135deg,var(--snap-green),var(--snap-green-dark)); margin-bottom:1rem; box-shadow:0 8px 18px rgba(45,190,96,.30); }
.icon-chip { width:40px; height:40px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background: var(--snap-green-soft); color: var(--snap-green-dark); }

/* ---------- Forms (Payyed forces .form-control to 38px — relax it) -------- */
.form-label { font-weight:600; color:#334155; margin-bottom:.4rem; }
.form-control, .form-select { border:1.5px solid var(--snap-line); border-radius:11px; color:#15212e; }
.form-control:focus, .form-select:focus { border-color: var(--snap-green); box-shadow: 0 0 0 .22rem rgba(45,190,96,.18); }
.form-control-lg, .form-select-lg { height:52px !important; font-size:1.02rem; border-radius:12px; }

/* ---------- HERO + live calculator (the headline widget) ------------------ */
.hero-wrap { background: linear-gradient(135deg, #2DBE60 0%, #1f8f46 60%, #18713a 100%) !important; color:#fff; position:relative; overflow:hidden; }
.hero-wrap.py-5 { padding-top:3.5rem !important; padding-bottom:3.5rem !important; }
.hero-wrap h1.display-5 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); }
/* Background image slider behind the hero (live-site style) */
.hero-slides { position:absolute; inset:0; z-index:0; }
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease-in-out; will-change:opacity; }
.hero-slide.is-active { opacity:1; }
/* Dark mask over the photos (matches the live site's bg-dark opacity-7) so the
   image shows through naturally while white text + the calculator card stay readable. */
.hero-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(8,18,12,.66) 0%, rgba(10,22,15,.52) 55%, rgba(6,14,9,.60) 100%); }

/* Header logo sizing (live uses ~100px; keep it prominent but balanced) */
.navbar .logo .snap-logo, .navbar-brand .snap-logo { height:62px; width:auto; max-width:230px; display:block; }
@media (max-width: 575.98px) { .navbar .logo .snap-logo, .navbar-brand .snap-logo { height:48px; } }
.hero-wrap::after { content:""; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.14), transparent 65%); pointer-events:none; }
.hero-wrap h1 { color:#fff; letter-spacing:-.5px; }
.hero-wrap .lead { color: rgba(255,255,255,.92); }
.hero-rate { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:.5rem 1rem; font-weight:600; backdrop-filter: blur(4px); }
.hero-rate .rate-val { color:#ffe48a; }
.hero-badge { display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.95); color:#15212e; border-radius:999px; padding:.5rem .9rem; font-size:.86rem; font-weight:600; box-shadow:var(--snap-shadow-sm); }
.hero-badge i { color: var(--snap-green-dark); }

/* The calculator card: white, elevated, compact (sized to match the live site). */
.snap-calc-card { border:0 !important; border-radius:16px !important; overflow:hidden; box-shadow: var(--snap-shadow-lg) !important; max-width:420px; margin-left:auto; }
.snap-calc-card .calc-head { background:#fff; padding:.95rem 1.2rem .1rem; }
.snap-calc-card .calc-head h5 { margin:0; color:#15212e; font-weight:700; font-size:1.05rem; }
.snap-calc-card .calc-head .calc-sub { color: var(--snap-muted); font-size:.8rem; }
.snap-calc-card .card-body { padding:.9rem 1.2rem 1.2rem; }
.snap-calc-card .mb-3 { margin-bottom:.7rem !important; }
.snap-calc-card .form-label { color:#64748b; font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.25rem; }
/* Beat Payyed's `.form-control{height:38px!important}` — compact but readable. */
.snap-calc-card .form-control, .snap-calc-card .form-select { height:46px !important; font-size:1.02rem !important; font-weight:700; color:#15212e; border:1.5px solid var(--snap-line); background:#fbfdff; }
.snap-calc-card .input-group .form-select { max-width:5.6rem; font-weight:600; font-size:.88rem !important; background:#fff; color:#334155; border-left:0; }
.snap-calc-card .btn-lg { padding:.6rem 1.4rem; font-size:.98rem; }
/* Country flag prefix on each currency field */
.snap-calc-card .sc-flagwrap { background:#fff; border:1.5px solid var(--snap-line); border-right:0; border-left:0; padding:0 .45rem; }
.snap-calc-card .sc-flag { width:24px; height:16px; object-fit:cover; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.08); display:block; }
.snap-calc-card .form-control:focus, .snap-calc-card .form-select:focus { border-color: var(--snap-green); box-shadow:0 0 0 .22rem rgba(45,190,96,.16); background:#fff; }
.snap-calc-card #recipientGets { color: var(--snap-green-darker); background: var(--snap-green-soft); }
#sc-quote { background:#f6f9fc !important; border:1px solid var(--snap-line) !important; border-radius:12px; color:#334155; font-size:.9rem; }
#sc-quote .fw-bold { color:#15212e; }
#sc-quote .d-flex { padding:.12rem 0; }

/* ---------- Stats / counters --------------------------------------------- */
.stat-counter .num { font-family:'Poppins',sans-serif; font-weight:700; font-size:2.4rem; color: var(--snap-green-dark); line-height:1; }
.stat-counter .label { color: var(--snap-muted); font-size:.92rem; }

/* ---------- Eyebrow label ------------------------------------------------- */
.eyebrow { display:inline-block; font-family:'Poppins',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--snap-green-dark); background:var(--snap-green-soft); border-radius:999px; padding:.3rem .8rem; margin-bottom:.8rem; }

/* ---------- FAQ section --------------------------------------------------- */
.faq-section .faq-aside { position:sticky; top:90px; }
.faq-help { background:#fff; border:1px solid var(--snap-line); border-radius:var(--snap-radius); padding:1.6rem; box-shadow:var(--snap-shadow-sm); }
.faq-cat { font-family:'Poppins',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--snap-green-dark); padding-left:.7rem; border-left:3px solid var(--snap-green); margin:1.4rem 0 .9rem; }
.faq-accordion .accordion-button { font-family:'Poppins',sans-serif; font-weight:600; font-size:1rem; color:#15212e; border-radius:12px !important; padding:1.05rem 1.2rem; }
.faq-accordion .accordion-button:not(.collapsed) { background:var(--snap-green-soft); color:var(--snap-green-darker); box-shadow:none; }
.faq-accordion .accordion-button:focus { box-shadow:0 0 0 .2rem rgba(45,190,96,.18); border-color:transparent; }
/* Custom +/− indicator (replaces the default chevron) */
.faq-accordion .accordion-button::after { content:"\002B"; font-family:inherit; background:none !important; width:auto; height:auto; font-size:1.3rem; font-weight:600; color:var(--snap-green-dark); transform:none; display:flex; align-items:center; justify-content:center; transition:transform .2s ease; }
.faq-accordion .accordion-button:not(.collapsed)::after { content:"\2212"; transform:rotate(180deg); }
.faq-accordion .accordion-body { color:var(--snap-body); padding:0 1.2rem 1.15rem; line-height:1.7; }
.faq-accordion .accordion-item { border:1px solid var(--snap-line); border-radius:12px !important; margin-bottom:.7rem; overflow:hidden; background:#fff; box-shadow:var(--snap-shadow-sm); transition:box-shadow .15s ease; }
.faq-accordion .accordion-item:hover { box-shadow:var(--snap-shadow); }

/* ---------- Footer -------------------------------------------------------- */
#footer, footer.bg-dark, .site-footer { background:#0f1b15 !important; color:#c7d2cd; }
#footer a, .site-footer a { color:#aebfb6; }
#footer a:hover, .site-footer a:hover { color:#fff; }
#footer h5, #footer h6 { color:#fff; }

/* ---------- Split-screen auth (signup/login) ------------------------------ */
.auth-split { min-height: calc(100vh - 70px); }
.auth-hero { background: linear-gradient(150deg, #2DBE60 0%, #1f8f46 55%, #18713a 100%); color:#fff; position:relative; overflow:hidden; }
.auth-hero::after { content:""; position:absolute; right:-120px; bottom:-120px; width:340px; height:340px; border-radius:50%; border:46px solid rgba(255,255,255,.07); }
.auth-hero h2 { color:#fff; }
.auth-hero .auth-hero-inner { max-width:460px; position:relative; z-index:1; }
.auth-hero .auth-feature { display:flex; gap:.75rem; align-items:flex-start; }
.auth-hero .auth-feature i { margin-top:.2rem; }
@media (max-width: 991.98px) { .auth-hero { min-height:auto; } }

/* ---------- Misc --------------------------------------------------------- */
.badge.bg-primary { background-color: var(--snap-green) !important; }
.back-to-top { position: fixed; right: 1rem; bottom: 1rem; display: none; z-index: 60; }
::selection { background: rgba(45,190,96,.22); }