/* ==========================================================================
   BetPlus Affiliates — the public marketing site
   --------------------------------------------------------------------------
   `.afp-*`, and only that: the landing page, the terms and the FAQ. These are
   pages a stranger arrives on from a search result, so they wear BetPlus's own
   dark-blue-and-gold theme — the same one the player site wears.

   Sign-in and everything behind it are a different product with a different
   audience, and they load affiliate-portal.css instead. The two files share no
   selectors on purpose; see the note at the top of that one.

   The palette comes from the same tokens as the player site — see
   resources/scss/_tokens.scss, which was read off the reference's own dark
   bundle. The values are repeated here rather than imported because this file
   is served directly out of public/, the way admin.css is, and is not part of
   the Vite build.
   ========================================================================== */

:root {
  /* --- background ramp -----------------------------------------------------
     Mirror of the ramp in resources/scss/_tokens.scss. This file is served on
     its own, without the compiled app bundle, so the rungs have to be redeclared
     here. Keep the twelve values identical to the SCSS ones or the two halves
     of the site drift apart. */
  --bg-0:  #1f1030;
  --bg-1:  #2a1048;
  --bg-2:  #2f1053;
  --bg-3:  #361062;
  --bg-4:  #471b79;
  --bg-5:  #5d2b97;
  --bg-6:  #5b1fa0;
  --bg-7:  #4e0a9c;
  --bg-8:  #6927b5;
  --bg-9:  #853fd5;
  --bg-10: #bda6d8;
  --bg-11: #dacfe8;

    --af-bg: var(--bg-1);
    --af-bg-2: var(--bg-1);
    --af-panel: var(--bg-4);
    --af-panel-2: var(--bg-4);
    --af-line: rgba(255, 255, 255, .1);
    --af-line-strong: rgba(255, 255, 255, .18);

    --af-gold: #f4b600;
    --af-gold-2: #ffc20f;
    --af-blue: var(--bg-8);
    --af-blue-deep: var(--bg-5);
    --af-input: var(--bg-3);

    --af-txt: #ffffff;
    --af-muted: rgba(255, 255, 255, .62);
    --af-faint: rgba(255, 255, 255, .40);

    --af-ok: #0dd183;
    --af-warn: #feb032;
    --af-bad: #ff5757;
    --af-info: #3976ff;

    --af-radius: 12px;
    --af-radius-sm: 8px;
    --af-shadow: 0 18px 40px rgba(0, 0, 0, .35);

    --af-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --af-bengali: 'Noto Sans Bengali', 'Source Sans 3', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--af-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--af-txt);
    background: var(--af-bg);
    -webkit-font-smoothing: antialiased;
}

/* Bengali needs a taller line and its own face, or the diacritics collide. */
body.is-bn { font-family: var(--af-bengali); line-height: 1.85; }

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.22; font-weight: 800; }
p { margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; }

/* Visible focus everywhere. A partner filling in a KYC form with a keyboard
   should never have to guess which field they are in. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--af-gold);
    outline-offset: 2px;
}

.afp-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.afp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--af-radius-sm);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease, background .12s ease;
    white-space: nowrap;
}

.afp-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.afp-btn:active { transform: translateY(0); }

.afp-btn--gold {
    background: linear-gradient(180deg, var(--af-gold-2) 0%, var(--af-gold) 100%);
    color: var(--bg-1);
}

.afp-btn--ghost {
    background: transparent;
    border-color: var(--af-line-strong);
    color: var(--af-txt);
}

.afp-btn--lg { padding: 14px 30px; font-size: 17px; }

.afp-btn[disabled] {
    opacity: .5; cursor: not-allowed; transform: none; filter: none;
}

/* ==========================================================================
   Public site — header
   ========================================================================== */

.afp-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, var(--af-blue) 0%, var(--af-blue-deep) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, .25);
}

.afp-head__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
}

.afp-logo { display: flex; align-items: center; gap: 10px; }
.afp-logo img { display: block; height: 36px; width: auto; }

.afp-logo__word {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--af-txt);
}

.afp-logo__word b { color: var(--af-gold); font-weight: 800; }

.afp-logo__tag {
    align-self: flex-start;
    margin-top: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--af-gold);
}

.afp-head__right { display: flex; align-items: center; gap: 10px; }

.afp-lang {
    display: flex;
    border: 1px solid var(--af-line-strong);
    border-radius: 999px;
    overflow: hidden;
    margin-right: 4px;
}

.afp-lang__btn {
    padding: 5px 13px;
    font-size: 13px;
    font-weight: 600;
    color: var(--af-muted);
}

.afp-lang__btn.on { background: var(--af-gold); color: var(--bg-1); }

/* ==========================================================================
   Public site — hero
   ========================================================================== */

.afp-hero {
    padding: 74px 0 84px;
    background:
        radial-gradient(1100px 460px at 12% -10%, rgba(91, 58, 149, .55), transparent 70%),
        radial-gradient(760px 380px at 92% 8%, rgba(244, 182, 0, .16), transparent 70%),
        var(--af-bg);
}

.afp-hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 48px;
    align-items: center;
}

.afp-kicker {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--af-gold);
}

.afp-hero h1 { font-size: clamp(32px, 4.6vw, 54px); letter-spacing: -.02em; }
.is-bn .afp-hero h1 { letter-spacing: normal; }

.afp-lead { font-size: 18px; color: var(--af-muted); max-width: 58ch; }

.afp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.afp-hero__ref {
    margin-top: 16px;
    font-size: 14px;
    color: var(--af-gold);
}

/* The rate card. Text, not an image — the number has to be readable by a
   crawler, which is the whole reason this is not a JPEG like the reference. */
.afp-rate {
    padding: 30px 26px;
    text-align: center;
    background: linear-gradient(160deg, rgba(244, 182, 0, .14), rgba(91, 58, 149, .2));
    border: 1px solid rgba(244, 182, 0, .35);
    border-radius: 20px;
    box-shadow: var(--af-shadow);
}

.afp-rate__top {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--af-muted);
}

.afp-rate__earn { margin: 14px 0 0; font-size: 15px; color: var(--af-muted); }

/* The figure alone, and never wrapped — a percentage broken across two lines
   stops reading as a number at all. Anything qualifying it goes in __sub. */
.afp-rate__big {
    margin: 2px 0;
    font-size: clamp(52px, 8vw, 78px);
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
    color: var(--af-gold);
    text-shadow: 0 6px 24px rgba(244, 182, 0, .3);
}

.afp-rate__sub { margin: 6px 0 0; font-size: 15px; font-weight: 600; }

/* ==========================================================================
   Public site — sections
   ========================================================================== */

.afp-sec { padding: 72px 0; }
.afp-sec--alt { background: var(--af-bg-2); }
.afp-sec--why { padding-top: 8px; }

.afp-sechead { max-width: 68ch; margin-bottom: 40px; }
.afp-sechead h2 { font-size: clamp(26px, 3.2vw, 38px); }
.afp-sechead p { margin: 0; color: var(--af-muted); font-size: 17px; }

/* Five cards, and five is the number that matters: at minmax(250px) the fifth
   wraps onto a line of its own and the block reads as four features plus an
   afterthought. 210px lets all five sit on one row at the wrap's full width. */
.afp-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}

.afp-feature {
    padding: 26px 24px;
    background: var(--af-panel);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius);
    transition: border-color .15s ease, transform .15s ease;
}

.afp-feature:hover { border-color: rgba(244, 182, 0, .45); transform: translateY(-3px); }

.afp-feature__ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(244, 182, 0, .14);
}

.afp-feature__ico svg { width: 24px; height: 24px; fill: var(--af-gold); }
.afp-feature h3 { font-size: 19px; }
.afp-feature p { margin: 0; color: var(--af-muted); font-size: 15px; }

/* Steps */
.afp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.afp-step {
    position: relative;
    padding: 26px 22px;
    background: var(--af-panel);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius);
}

.afp-step__n {
    display: block;
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: 800;
    color: rgba(244, 182, 0, .55);
    line-height: 1;
}

.afp-step h3 { font-size: 18px; }
.afp-step p { margin: 0; color: var(--af-muted); font-size: 15px; }

/* Tables on the marketing page */
.afp-tablewrap { overflow-x: auto; border-radius: var(--af-radius); border: 1px solid var(--af-line); }

.afp-plan, .afp-calc { min-width: 420px; background: var(--af-panel); }

.afp-plan th, .afp-plan td,
.afp-calc th, .afp-calc td {
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid var(--af-line);
}

.afp-plan thead th {
    background: rgba(0, 0, 0, .22);
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--af-muted);
}

.is-bn .afp-plan thead th { text-transform: none; letter-spacing: normal; }

.afp-plan tbody th { font-weight: 600; }
.afp-plan td b { font-size: 20px; color: var(--af-gold); }
.afp-plan tr.is-top { background: rgba(244, 182, 0, .09); }
.afp-plan tr:last-child th, .afp-plan tr:last-child td { border-bottom: 0; }

.afp-note { margin: 16px 0 0; font-size: 14px; color: var(--af-faint); max-width: 80ch; }

.afp-formula {
    margin: 0 0 22px;
    padding: 18px 22px;
    background: rgba(244, 182, 0, .1);
    border: 1px dashed rgba(244, 182, 0, .45);
    border-radius: var(--af-radius);
    font-size: 17px;
    font-weight: 700;
    color: var(--af-gold);
    text-align: center;
}

.afp-calc__sign { width: 40px; font-size: 20px; font-weight: 800; text-align: center; }
.afp-calc__sign.is-minus { color: var(--af-bad); }
.afp-calc__sign.is-plus { color: var(--af-ok); }
.afp-calc__note { color: var(--af-faint); font-size: 14px; }
.afp-calc tfoot th { background: rgba(0, 0, 0, .25); color: var(--af-gold); font-size: 17px; }

/* CTA band */
.afp-cta {
    padding: 54px 0;
    background: linear-gradient(120deg, var(--af-blue-deep), var(--af-blue));
}

.afp-cta__in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.afp-cta h2 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 34px); }
.afp-cta p { margin: 0; color: rgba(255, 255, 255, .8); }

/* Left-aligned like every other section — `max-width` on the wrap itself would
   centre the block and make this one heading start further in than the rest. */
.afp-about h2 { font-size: clamp(24px, 3vw, 34px); }
.afp-about p { color: var(--af-muted); font-size: 17px; max-width: 92ch; }

/* ==========================================================================
   Public site — footer
   ========================================================================== */

.afp-foot { padding: 56px 0 34px; background: var(--bg-0); border-top: 1px solid var(--af-line); }

.afp-foot__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 32px;
}

.afp-foot__col--brand p { color: var(--af-faint); font-size: 14px; margin-top: 14px; }

.afp-foot__col h3 {
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--af-gold);
    margin-bottom: 14px;
}

.is-bn .afp-foot__col h3 { text-transform: none; letter-spacing: normal; font-size: 15px; }

.afp-foot__col ul { margin: 0; padding: 0; list-style: none; }
.afp-foot__col li { margin-bottom: 9px; color: var(--af-muted); font-size: 15px; }
.afp-foot__col a:hover { color: var(--af-gold); }

.afp-foot__pay { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--af-line); }
.afp-foot__pay h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--af-muted); }
.is-bn .afp-foot__pay h3 { text-transform: none; letter-spacing: normal; }

.afp-foot__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; }
.afp-foot__logos img { height: 26px; width: auto; opacity: .85; }

.afp-foot__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--af-line);
    font-size: 13px;
    color: var(--af-faint);
}


/* Long-form pages: terms, FAQ */
.afp-doc { padding: 56px 0 80px; }
.afp-doc__in { max-width: 82ch; }
.afp-doc h2 { margin-top: 36px; font-size: 24px; color: var(--af-gold); }
.afp-doc h3 { margin-top: 26px; font-size: 18px; }
.afp-doc p, .afp-doc li { color: var(--af-muted); }
.afp-doc ol, .afp-doc ul { padding-left: 20px; }
.afp-doc li { margin-bottom: 8px; }

.afp-faq details {
    margin-bottom: 12px;
    padding: 16px 20px;
    background: var(--af-panel);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius);
}

.afp-faq summary { cursor: pointer; font-weight: 700; font-size: 17px; }
.afp-faq summary::marker { color: var(--af-gold); }
.afp-faq details p { margin: 12px 0 0; }


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
    .afp-hero__in { grid-template-columns: 1fr; gap: 34px; }
    .afp-rate { max-width: 380px; }
}

@media (max-width: 680px) {
    .afp-head__in { min-height: 60px; flex-wrap: wrap; padding: 10px 0; }
    .afp-lang { margin-right: 0; }
    .afp-hero { padding: 46px 0 56px; }
    .afp-sec { padding: 48px 0; }
    .afp-btn--lg { padding: 12px 22px; font-size: 16px; }
}

@media print {
    .afp-head, .afp-foot { display: none !important; }
    body { background: #fff; color: #000; }
}