/* ============================================================================
   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); }


/* Disabled primary buttons must stay on brand.
   Bootstrap's `.btn-primary:disabled` sets its own blue and outranks the plain
   `.btn-primary` override above on specificity — so every disabled CTA on the
   site rendered #0d6efd blue. Most visible on Pay Out (disabled until the rate
   is locked) and Top Up (disabled while redirecting to checkout), where the
   primary action turned a different colour at the exact moment the user was
   watching it. Mute with opacity, keep the hue. */
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled] {
    background-color: var(--snap-green) !important;
    border-color: var(--snap-green) !important;
    color: #fff !important;
    opacity: .5;
    box-shadow: none !important;
    transform: none !important;
}

/* ── Activity rows (frontend/stablecoin/_activity_row.blade.php) ──────────────
   One partial shared by the wallet overview and the history page, so its look
   lives here, once, rather than in each page's own style block. Tokens fall
   back to the site palette so the rows read the same wherever they appear. */
.act-row { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; border-top: 1px solid var(--snap-line, #ece5da); }
.act-row.is-failed .act-t { color: var(--snap-muted, #6b7280); }
.act-ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .82rem; }
.act-ic.in  { background: var(--snap-green-soft, #e8f8ee); color: var(--snap-green-dark, #1f8f46); }
.act-ic.out { background: #faf7f2; color: var(--snap-muted, #6b7280); }
.act-ic.no  { background: #fef3f2; color: #b42318; }
.act-main { flex: 1; min-width: 0; }
.act-t { font-size: .9rem; font-weight: 600; color: var(--snap-ink, #15212e); }
.act-m { font-size: .76rem; color: var(--snap-muted, #6b7280); margin-top: .1rem; }
.act-ref { font-size: .68rem; color: #a39d94; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.act-amt { text-align: right; flex-shrink: 0; }
.act-amt .num { font-family: 'Poppins', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: .98rem; font-weight: 700; }
.act-amt .ccy { font-size: .7rem; font-weight: 500; color: var(--snap-muted, #6b7280); }
.act-pill { display: inline-block; margin-top: .25rem; font-size: .66rem; font-weight: 600; padding: .18rem .55rem; border-radius: 999px; }
.act-pill.wait { background: #fdf6e7; color: #8a6300; border: 1px solid #f0dcae; }
.act-pill.ok { background: var(--snap-green-soft, #e8f8ee); color: var(--snap-green-dark, #1f8f46); border: 1px solid #bfe6cd; }
@media (max-width: 767.98px) {
    .act-row { padding: .8rem .9rem; gap: .7rem; }
    .act-ref { display: none; }
}