html {
    overflow: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0; /* Remove scrollbar space */
    background: transparent; /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
}

body {
    font-family: 'Poppins', sans-serif;
}

/* ── Type scale ────────────────────────────────────────────────────
   Base 16px. Everything below picks from this list rather than inventing
   a size, so text stays consistent from page to page.

     micro   13px   legal lines, timestamps
     small   14px   secondary text, labels, help text
     body    16px   default
     lead    18px   section intros
     h3      20px
     h3      20px
     stat    24px   figures inside a card
     h2      28 to 36px, fluid
     h1      32 to 52px, fluid
     hero    24 to 32px, fluid, the figures in the hero

   12px is reserved for uppercase labels, where the tracking carries it.
   Nothing that reads as a sentence goes below 13px.
   ------------------------------------------------------------------ */
:root {
    --text-eyebrow: 0.72rem;
    --text-micro: 0.8125rem;
    --text-small: 0.875rem;
    --text-body: 1rem;
    --text-lead: 1.125rem;
    --text-h3: 1.25rem;
    --text-stat: 1.5rem;
    --text-stat-lg: clamp(1.5rem, 1rem + 1.4vw, 2rem);
    --text-h2: clamp(1.75rem, 1.2rem + 1.7vw, 2.25rem);
    --text-h1: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
}

body {
    font-size: var(--text-body);
    line-height: 1.6;
}


.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out !important;
}

.faq-answer:not(.hidden) {
    max-height: 200px; /* Adjust based on content height */
}

.grid.align-start {
    align-items: start;
}


/*Stepper */

.step {
    transition: opacity 0.3s ease;
}

.step.hidden {
    opacity: 0;
    display: none;
}


/* Heading */

h2 {
    font-family: 'Montserrat', sans-serif;
}

/* Breathing room by default. Tailwind loads after this file, so an explicit
   mb-* in the markup still wins. */
h1, h2 {
    margin-bottom: 0.65rem;
}

h3 {
    margin-bottom: 0.4rem;
}

/* Headings space themselves with utility classes. The blanket 80px that used to
   live here put a gap under every h2 on every page, including the short cards
   on the tracking and receipt pages. */


.underline-decorated::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5rem;
    height: 3px;
    background-color: #fbcc14;
}

/* End Heading */


/* ── Partner slider ───────────────────────────────────────────────
   A native scroll container: swipes on touch, arrows on desktop, and
   it degrades to a plain scrollable row without JavaScript. */

.partner-rail {
    position: relative;
    /* Sits inside the page container, so its left edge lines up with the
       heading, then stretches past the right edge of the viewport. */
    margin-right: calc(50% - 50vw);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
}

@media (max-width: 767px) {
    .partner-rail {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.partner-track {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: .5rem 0 1rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.partner-track::-webkit-scrollbar { display: none; }

.partner-track:focus-visible {
    outline: 2px solid #6d0101;
    outline-offset: 4px;
    border-radius: .5rem;
}

.partner-card {
    flex: 0 0 auto;
    width: 13rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .9rem;
    padding: 1.25rem 1rem;
    background: #fff;
    border: 1px solid #ebe8e8;
    border-radius: .875rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.partner-card:hover {
    transform: translateY(-4px);
    border-color: #d9c9c9;
    box-shadow: 0 12px 26px -14px rgba(109, 1, 1, .35);
}

/* Fixed logo area so wildly different logo shapes still line up. */
.partner-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 4.25rem;
}

.partner-card__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.partner-card__name {
    font-size: var(--text-micro);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    color: #374151;
    /* Two lines maximum, so card heights stay even. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid #e0dada;
    border-radius: 9999px;
    background: #fff;
    color: #6d0101;
    font-size: var(--text-small);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease,
                opacity .2s ease;
}

.slider-btn:hover:not(:disabled) {
    background: #6d0101;
    border-color: #6d0101;
    color: #fff;
}

.slider-btn:focus-visible {
    outline: 2px solid #eab308;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .partner-track { scroll-behavior: auto; }
    .partner-card:hover { transform: none; }
}



/* ---------------------------------------------------------------
   Application form: step transitions, validation states, tracker
   --------------------------------------------------------------- */

.step.slide-in-right { animation: step-in-right .35s ease-out both; }
.step.slide-in-left  { animation: step-in-left  .35s ease-out both; }

@keyframes step-in-right {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes step-in-left {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}

.shake { animation: shake .4s ease-in-out; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-7px); }
    40%      { transform: translateX(7px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

/* Invalid fields get a red outline without shifting the layout. */
.form-field.has-error input:not([type="radio"]):not([type="checkbox"]),
.form-field.has-error select,
.form-field.has-error textarea {
    border-color: #dc2626;
    box-shadow: 0 0 0 1px #dc2626;
}

.form-field input:not([type="radio"]):not([type="checkbox"]),
.form-field select,
.form-field textarea {
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* Progress rail step markers */
.step-label { cursor: pointer; transition: color .3s ease; }
.step-label .step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 9999px;
    background: #e5e7eb;
    color: #6b7280;
    font-size: var(--text-eyebrow);
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.step-label.is-active { color: #6d0101; font-weight: 600; }
.step-label.is-active .step-dot { background: #6d0101; color: #fff; transform: scale(1.12); }
.step-label.is-done .step-dot { background: #16a34a; color: #fff; }
.step-label.is-done .step-dot::after { content: "\2713"; }
.step-label.is-done .step-dot { font-size: 0; }
.step-label.is-done .step-dot::after { font-size: var(--text-eyebrow); }

/* A figure in a card: the number is the point, so it gets its own step. */
.stat {
    font-size: var(--text-stat);
    line-height: 1.15;
}

/* Reveal-on-load for page sections */
.reveal { animation: reveal-up .5s ease-out both; }

@keyframes reveal-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Success page tick */
.success-check__circle {
    stroke: #16a34a;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: check-circle .6s cubic-bezier(.65, 0, .45, 1) forwards;
}
.success-check__mark {
    stroke: #16a34a;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: check-mark .3s cubic-bezier(.65, 0, .45, 1) .6s forwards;
}

@keyframes check-circle { to { stroke-dashoffset: 0; } }
@keyframes check-mark   { to { stroke-dashoffset: 0; } }

/* Current stage marker on the tracking timeline */
.pulse-dot { animation: pulse-ring 1.8s ease-in-out infinite; }

@keyframes pulse-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(109, 1, 1, .45); }
    50%      { box-shadow: 0 0 0 6px rgba(109, 1, 1, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .step.slide-in-right,
    .step.slide-in-left,
    .shake,
    .reveal,
    .pulse-dot,
    .success-check__circle,
    .success-check__mark {
        animation: none;
    }
    .success-check__circle,
    .success-check__mark { stroke-dashoffset: 0; }
}

/* Flash toasts */
.flash-toast {
    animation: flash-in .35s ease-out both;
}

.flash-toast--leaving {
    animation: flash-out .3s ease-in forwards;
}

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes flash-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
    .flash-toast { animation: none; }
}

/* ---------------------------------------------------------------
   Homepage design primitives
   Shared rhythm so sections stop looking like the same block
   repeated. Use .section for vertical space, .eyebrow above a
   heading, .card for anything in a grid.
   --------------------------------------------------------------- */

.section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (min-width: 768px) {
    .section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
}

.section--tight { padding-top: 3rem; padding-bottom: 3rem; }

.eyebrow {
    display: inline-block;
    font-size: var(--text-eyebrow);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a16207;
    margin-bottom: .75rem;
}

.section-title {
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: 1.15;
    color: #1f2937;
    letter-spacing: -.02em;
}

.section-lead {
    color: #4b5563;
    font-size: var(--text-lead);
    line-height: 1.7;
}

/* One card treatment everywhere: quiet by default, lifts on hover. */
.card {
    background: #fff;
    border: 1px solid #e8e6e6;
    border-radius: .875rem;
    padding: 1.75rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card:hover {
    transform: translateY(-4px);
    border-color: #d9c9c9;
    box-shadow: 0 12px 28px -12px rgba(109, 1, 1, .28);
}

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background: #fdf2f2;
    color: #6d0101;
    font-size: var(--text-h3);
    margin-bottom: 1.1rem;
}

/* Numbered steps on the journey section */
.step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: #6d0101;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 0 6px rgba(109, 1, 1, .08);
}

/* Hero */
.hero-overlay {
    background: linear-gradient(100deg,
        rgba(46, 0, 0, .92) 0%,
        rgba(64, 1, 1, .82) 45%,
        rgba(17, 17, 17, .68) 100%);
}

.hero-stat {
    font-size: var(--text-stat-lg);
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.hero-stat-label {
    font-size: var(--text-small);
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .72);
}

/* Reveal sections as they scroll into view.
   Guarded by .js on <html>: without JavaScript nothing is ever hidden. */
.js .reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease-out, transform .6s ease-out;
}

.js .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
    .card:hover { transform: none; }
}

/* Floating WhatsApp button */
.whatsapp-fab {
    position: fixed;
    right: 1.15rem;
    bottom: 1.15rem;
    z-index: 55;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.1rem;
    border-radius: 9999px;
    background: #25d366;
    color: #fff;
    font-weight: 600;
    font-size: var(--text-small);
    text-decoration: none;
    box-shadow: 0 10px 25px -8px rgba(0, 0, 0, .45);
    transition: transform .2s ease, background-color .2s ease;
}

.whatsapp-fab:hover { background: #1fb457; transform: translateY(-2px); }
.whatsapp-fab i { font-size: 1.25rem; }

@media (max-width: 640px) {
    .whatsapp-fab span { display: none; }
    .whatsapp-fab { padding: .9rem; }
}

/* ---------------------------------------------------------------------------
   Spam guard
   The honeypot field in core/templates/core/_spam_guard.html. Moved off screen
   rather than hidden with display:none, which some bots use as a signal to skip
   a field. Never remove this rule without removing the field.
   --------------------------------------------------------------------------- */
.spam-guard {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}