/* =====================================================================
   AfroPin — public site styles
   Theme tokens live in the :root block below — change them once
   to re-theme the entire front end.
   ===================================================================== */

:root {
    /* AfroPin brand (navy primary, coral accent, cream surfaces). The token names are older ("green", "lime"):
       --afropin-green is the primary (buttons, links, headings), so it is navy; eyebrows take the coral ink, which
       passes contrast as text on white and cream. */
    --afropin-green: #0B1B3B;
    --afropin-secondary: #0B1B3B;
    --afropin-secondary-darkest: #07132B;
    --afropin-green-hover: #13264D;
    --afropin-green-darkest: #07132B;
    --afropin-green-eyebrow: #C2412F;

    /* Soft surfaces: cream */
    --afropin-lime: #FBF7F0;
    --afropin-lime-hover: #FFD2CB;
    --afropin-lime-soft: #FBF7F0;
    --afropin-lime-bg-soft: #F5EEE2;
    --afropin-progress-fill-light: #FF6B5B;

    /* Surfaces & borders */
    --afropin-white: #ffffff;
    --afropin-soft-bg: #FBF7F0;
    --afropin-hairline: #EDE5D8;
    --afropin-hairline-2: #eef0f2;
    --afropin-image-placeholder: #e6e8e8;
    --afropin-progress-track: #e2e6ea;
    --afropin-input-border: #d6dadd;
    --afropin-breadcrumb-sep: #c7cdd0;
    --afropin-dot-gray: #c8c8c8;

    /* Text */
    --afropin-text: #16181a;
    --afropin-text-prose: #2a2e33;
    --afropin-text-muted: #4a5057;
    --afropin-text-mute2: #4F576B; /* matches the dashboard */
    --afropin-text-placeholder: #5B6376; /* AA on white and cream, matches the dashboard */

    /* Text on dark backgrounds */
    --afropin-text-on-dark: #C9D1E3;
    --afropin-text-on-dark-2: #FBF7F0;
    --afropin-text-on-dark-3: #8C97B2;

    /* Status */
    --afropin-error: #d92d20;
    --afropin-error-soft: #ffb3b3;

    /* Misc */
    --afropin-black: #000;
}

[x-cloak] {
    display: none !important;
}

/* ==========================================================
   front → about
   ========================================================== */
/* ----- Hero ----- */

a {
    color: var(--afropin-green);
    text-decoration: none;
}

.bg-dark {
    --si-bg-opacity: 1;
    background-color: var(--afropin-lime-hover) !important;
}

/* ----- Stats strip ----- */

/* ----- Pillars ----- */

/* ----- Team ----- */

/* ----- CTA ----- */

/* ==========================================================
   front → blog → partials → styles
   ========================================================== */
/* ----- Hero ----- */


.article-card:hover .article-title {
    color: var(--afropin-green);
}

/* ----- Search ----- */

@keyframes bg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Search dropdown */

/* ----- Category chips strip ----- */

/* ----- Section headers ----- */

/* ----- Popular grid ----- */


.article-card .article-meta {
    display: flex;
    gap: 14px;
    color: var(--afropin-text-mute2);
    font-size: 0.78rem;
    margin-bottom: 10px;
}


.article-card .article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ----- All articles list ----- */

/* ----- Article view ----- */

/* ==========================================================
   front → category
   ========================================================== */

/* ==========================================================
   front → causes
   ========================================================== */

/* ==========================================================
   front → contact
   ========================================================== */
/* ----- Hero ----- */

/* ----- Main body ----- */

/* Info side */

/* Form side */

/* intl-tel-input dropdown polish */

/* ==========================================================
   front → crowd → funding
   ========================================================== */
/* ----- Hero ----- */

/* ----- Stats ----- */

/* ----- Benefits ----- */

/* ----- FAQ ----- */

/* ----- CTA ----- */

/* ==========================================================
   front → fundraisers
   ========================================================== */
/* ----- Hero ----- */

/* ----- Explorer body ----- */

@keyframes fr-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ----- Card grid ----- */

/* ----- Load more ----- */

/* ----- Empty state ----- */

/* ==========================================================
   front → guarantee → beneficiary
   ========================================================== */
/* ----- Hero ----- */

/* ----- Body / form ----- */

/* Form card */

/* ==========================================================
   front → guarantee → donor
   ========================================================== */
/* ----- Hero ----- */
/* ----- Body / form ----- */
/* Form card */

/* ==========================================================
   front → guidelines
   ========================================================== */
html {
    scroll-behavior: smooth;
}

/* ----- Hero ----- */

/* ----- Main layout ----- */

/* TOC sidebar */

/* Guideline cards */

/* Closing card */

/* ==========================================================
   front → helpcenter → article
   ========================================================== */
/* ----- Article hero ----- */

/* ----- Article body ----- */

/* ----- Sidebar ----- */

/* ==========================================================
   front → helpcenter → index
   ========================================================== */
/* ----- Hero ----- */

@keyframes hc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ----- Search dropdown ----- */

/* ----- Popular articles ----- */

/* ----- Topics ----- */

/* ----- Contact CTA ----- */

/* ==========================================================
   front → helpcenter → topic
   ========================================================== */
/* ----- Topic hero ----- */

/* ----- Article list ----- */

/* ----- Bottom contact ----- */

/* ==========================================================
   front → how
   ========================================================== */
/* ----- Hero ----- */

/* ----- Steps ----- */

/* ----- FAQ ----- */

/* ----- CTA ----- */

/* ==========================================================
   front → index
   ========================================================== */

.article-card {
    display: flex;
    flex-direction: column;
    background: var(--afropin-white);
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s, box-shadow 0.25s;
    border: 1px solid var(--afropin-hairline);
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(10, 77, 46, 0.18);
}

.article-card .article-image {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--afropin-image-placeholder);
    position: relative;
    transition: transform 0.4s;
}

.article-card:hover .article-image {
    transform: scale(1.04);
}

.article-card .article-image-wrap {
    overflow: hidden;
    position: relative;
}

.article-card .article-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--afropin-green-eyebrow);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    backdrop-filter: blur(6px);
    z-index: 1;
}

.article-card .article-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-card .article-title {
    font-weight: 700;
    color: var(--afropin-text);
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 0 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

/* ==========================================================
   front → legal
   ========================================================== */
/* ----- Hero ----- */

/* ----- Contact directory ----- */

/* ----- Notice strip ----- */

/* ==========================================================
   front → menu
   ========================================================== */

/* Rich dropdown (with images) */

/* ===== Mobile drawer (offcanvas) ===== */

/* ==========================================================
   front → press → index
   ========================================================== */
/* ----- Hero ----- */

/* ----- Press list ----- */

/* ----- Empty state ----- */
/* ----- Press kit CTA ----- */

/* ==========================================================
   front → pricing
   ========================================================== */
/* ----- Hero ----- */

/* ----- Pricing cards ----- */

/* ----- Included ----- */

/* ----- FAQ ----- */

/* ----- CTA ----- */

/* ==========================================================
   front → tips
   ========================================================== */
/* ----- Tips hero ----- */

/* ----- Tips list ----- */

/* ----- Bottom CTA ----- */
/* ==========================================================
   partials → campaigns
   ========================================================== */

/* ==========================================================
   partials → category
   ========================================================== */

/* ==========================================================
   partials → services
   ========================================================== */


/* ==========================================================
   Newsletter subscribe (Livewire + Alpine modal)
   ========================================================== */


/* ==========================================================
   Homepage hero & value section (gfm-*)
   ========================================================== */

/* Shared lime pill chip used by both the hero badge and the value eyebrow */

/* ----- Value section ----- */

/* ==========================================================
   Region modal (country / language / timezone switcher)
   ========================================================== */

/* Make sure Choices.js dropdowns inside the modal stack above the modal body */

.region-modal .choices__list[aria-expanded] {
    z-index: 2000;
}

/* Choices.js polish inside the region modal */


/* ==========================================================
   Campaign preview (cp-*)
   ========================================================== */

/* Team */

/* Buttons */

/* Affiliate card */

/* Donation card (sticky on desktop) */

/* Donor list inside donate card */

/* Word of Support */

/* Update images */

/* Campaign preview modals */

/* ==========================================================
   Report fundraiser trigger + claim choice modal
   ========================================================== */

/* Claim choice cards inside the modal */

/* ==========================================================
   Campaign preview — media overlays + days-left meta
   ========================================================== */

/* Meta strip day-counter variants */

/* ==========================================================
   Share modal — channel grid + copy link
   ========================================================== */

/* ==========================================================
   Embed widget modal — accordion
   ========================================================== */


/* ==========================================================
   Contributions page (cn-*)
   ========================================================== */

/* Donor list */


/* ==========================================================
   Donate page (dn-*)
   ========================================================== */

/* Header card */

/* Blocks (amount + tip + payment) */

/* Amount input */

/* Inline error */

/* Tip card */

/* Warning callout (tip = 0) */

/* Proceed button extra width on its own row */

/* Payment card (revealed when payment = true) */

/* Country picker (custom searchable select) */

/* Checkbox row */

/* Loading spinner inside submit button */

/* Sidebar summary cards */

/* Transaction summary rows */

/* Secure card */

/* Large-tip modal action stack */

/* noUiSlider brand polish (applies to #slider only inside the donate page) */

/* ==== Campaign updates (timeline) ==== */

/* ==== Thanks (post-donate) page ==== */

/* =====================================================================
   HOMEPAGE (front/index) — built on the --afropin tokens.
   All classes are prefixed .vh- to avoid collisions.
   ===================================================================== */

/* Eyebrow pill */

/* Section heading */

/* Buttons */

/* Hero */

/* Hero image with soft brand glow + gentle float */

/* Floating feature chips around the image */

@keyframes vh-hero-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

/* Pillar card */

/* Icon chip */

/* Numbered step chip */

/* Soft background section */

/* Dark indigo band (service highlights, security) */

/* Service highlight cells inside the band */

/* ---- Consumer highlights ("Why you'll love") ---- */

/* Business card bullet list (light card) */

/* ---- Who accepts (icon card grid) ---- */

/* ---- Agents & retailers (partner cards) ---- */

/* ---- About (editorial split) ---- */

/* Use-case tile */

/* Brand logos */

/* Security band */

/* CTA band */

/* Responsive */

@media (max-width: 575px) {

    /* Service highlights: tidy 2x2 grid with a clean cross divider and
       tighter spacing so the narrow cells don't feel cramped. */
}

/* =====================================================================
   HOMEPAGE v2 — creative additions (hero voucher card, trust bar,
   gradient CTA). Uses the --afropin tokens.
   ===================================================================== */

/* Soft brand glow behind the hero */

/* ---- Voucher card mockup ---- */

@keyframes vh-float {

    0%,
    100% {
        transform: rotate(-5deg) translateY(0);
    }

    50% {
        transform: rotate(-5deg) translateY(-12px);
    }
}

/* Floating pills around the card */

/* ---- Trust bar ---- */

@media (max-width: 575px) {

    /* Phones: single left-aligned column — each item on one line, icon
       centered with its text, so nothing wraps or looks ragged. */
}

/* ---- Gradient CTA ---- */

@media (max-width: 575px) {

    /* Phones: straighten and steady the card so it never overflows the
       clipped hero and reads cleanly on small screens. */
}

/* =====================================================================
   HOMEPAGE v3 — section polish (why split, use-case hover, security)
   ===================================================================== */

/* Why: left aside supporting copy */

/* Use-case tiles: fill indigo + invert on hover */

/* Rich security band */

/* Segmented toggle (Become a Brand / Reseller) */


/* ===== STORE LOCATOR (moved from locator.css) ===== */
/* =====================================================================
   Store locator (purchase / redemption locations)
   Full-screen map + a single results panel that becomes a bottom sheet
   on mobile. Brand colour: var(--afropin-green).
   ===================================================================== */

#map {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #e9eef2;
}

/* ---------- Panel ---------- */

/* Search */

#autocomplete {
    width: 100%;
    height: 50px;
    border: 1px solid #e3e7ec;
    border-radius: 14px;
    padding: 0 56px 0 44px;
    font-size: .95rem;
    outline: none;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

#autocomplete:focus {
    border-color: var(--afropin-green);
    box-shadow: 0 0 0 3px rgba(46, 49, 146, .12);
}

/* Retailer select */

/* Results header */

/* Store cards */

/* Empty state */

/* ---------- Mobile: bottom sheet ---------- */

/* ============================================================
   Marketplace / Business store (livewire.marketplace)
   ============================================================ */
.store-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    overflow: hidden;
    border-radius: 24px;
    padding: 30px 34px;
    color: #fff;
    background: linear-gradient(120deg, var(--afropin-green, #3FA64C) 0%, var(--afropin-secondary, #02344F) 100%);
    /* box-shadow: 0 26px 50px -24px rgba(2, 52, 79, .55); */
}

.store-hero::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -6%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 68%);
    pointer-events: none;
}

.store-hero-badge {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .25);
}

.store-hero-eyebrow {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 4px;
}

.store-hero-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0 0 6px;
}

.store-hero-sub {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

.store-hero-stat {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    text-align: center;
    padding: 12px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
}

.store-hero-count {
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
}

.store-hero-count-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

/* Brand tiles */
.store-card {
    height: 100%;
    border: 1px solid #eef0f2;
    border-radius: 18px;
    padding: 16px 12px 14px;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.store-card:hover {
    transform: translateY(-4px);
    border-color: var(--afropin-green, #3FA64C);
    box-shadow: 0 16px 30px -16px rgba(2, 52, 79, .28);
}

.store-card-title {
    margin: 12px 0 2px;
    font-size: .82rem;
    font-weight: 600;
    color: #16181a;
    text-align: center;
}

/* Category list active state */

@media (max-width: 767px) {
    .store-hero {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 24px;
    }

    .store-hero-stat {
        align-self: stretch;
    }
}

/* Store hero badge with a real business logo */
.store-hero-badge--logo {
    background: #fff;
    padding: 8px;
}

.store-hero-badge--logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

/* Store product / checkout: sticky order summary on desktop */
@media (min-width: 992px) {
    .store-checkout-side {
        position: sticky;
        top: 24px;
        align-self: flex-start;
    }
}

/* ============================================================
   Store checkout (livewire.store.product) — form elements
   Scoped under .store-checkout so shared classes are untouched.
   ============================================================ */
/* Unified label typography (section + field labels) */

.store-checkout .form-label {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    color: #16181a;
    letter-spacing: -.01em;
    margin: 0 0 .5rem;
}

.store-checkout .form-control {
    border: 1.5px solid #e4e8ec;
    border-radius: 12px;
    padding: .72rem .95rem;
    font-size: .95rem;
    background: #fbfcfd;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.store-checkout .form-control:focus {
    border-color: var(--afropin-green, #3FA64C);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 107, 91, .14);
}

.store-checkout .iti {
    width: 100%;
}

/* Amount stepper */

/* Denomination pills */

/* Delivery chips */

/* Pay button */

/* Summary card */

/* Compact quantity stepper */

.nav-tabs-alt .nav-link.active {
    border-bottom-color: var(--afropin-green);
}

.nav-link.active {
    color: var(--afropin-green);
}

:not(.btn-check)+.btn:hover,
.btn:first-child:hover {
    color: #ffffff;
    background-color: var(--afropin-green);
    border-color: var(--afropin-green);
}

.btn-outline-success {
    color: var(--afropin-green);
    background-color: #ffffff;
    border-color: var(--afropin-green);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--afropin-green);
}
/* ---- Store receipt ---- */

@media print {
     .store-hero { display: none !important; }
    .store-checkout-side { position: static !important; }
}

/* Store receipt — template features list */