/* ==========================================================================
   1. FONT
   ========================================================================== */
    .ff-poppins {
        font-family: 'Poppins', sans-serif !important;
    }

    .ff-almarai {
        font-family: 'Almarai', sans-serif !important;
    }

    .fw-100 {
    font-weight: 100 !important;
    }
    .fw-200 {
        font-weight: 200 !important;
    }
    .fw-300 {
        font-weight: 300 !important;
    }
    .fw-400 {
        font-weight: 400 !important;
    }
    .fw-500 {
        font-weight: 500 !important;
    }
    .fw-600 {
        font-weight: 600 !important;
    }
    .fw-700 {
        font-weight: 700 !important;
    }
    .fw-800 {
        font-weight: 800 !important;
    }
    .fw-900 {
        font-weight: 900 !important;
    }


/* ==========================================================================
   1. TEXT COLORS
   ========================================================================== */
.text-pio-primary {
    color: var(-\-pio-primary-color) !important;
}

.text-pio-secondary {
    color: var(-\-pio-blue-color) !important;
}


/* ==========================================================================
   2. BACKGROUNDS
   ========================================================================== */
.bg-pio-primary {
    background-color: var(-\-pio-primary-color);
}

.bg-pio-secondary {
    background-color: var(-\-pio-blue-color);
}

/* soft tints: subtle brand wash for chips, highlights, selected rows */
.bg-pio-primary-soft {
    background-color: color-mix(in srgb, var(-\-pio-primary-color) 12%, transparent);
}

.bg-pio-secondary-soft {
    background-color: color-mix(in srgb, var(-\-pio-blue-color) 12%, transparent);
}


/* ==========================================================================
   3. BORDERS (color only - width/style stay yours)
   ========================================================================== */
.border-pio-primary {
    border-color: var(-\-pio-primary-color);
}

.border-pio-secondary {
    border-color: var(-\-pio-blue-color);
}


/* ==========================================================================
   4. BUTTONS
   Filled:  colored background, white text; hover = lighter fill, active = darker.
   Outline: colored border + text, transparent background;
            hover/active = fills with the color, text (incl. span/a/svg) -> white.
   Every variant defines default / hover / active(click) / focus / disabled so
   nothing falls back to Bootstrap's default blue/grey button colors.
   Combine with Bootstrap's .btn: <button class="btn btn-pio-primary">
   ========================================================================== */
.btn-pio-primary,
.btn-pio-secondary,
.btn-pio-outline-primary,
.btn-pio-outline-secondary {
    font-weight: 600;
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    border-radius: 8px;
    padding: 8px 12px;
    border: 1.5px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

    /* kill Bootstrap's default focus ring; a branded ring is added on
       :focus-visible (keyboard) below */
    .btn-pio-primary:focus,
    .btn-pio-secondary:focus,
    .btn-pio-outline-primary:focus,
    .btn-pio-outline-secondary:focus {
        box-shadow: none;
        outline: none;
    }

    .btn-pio-primary:focus-visible,
    .btn-pio-outline-primary:focus-visible {
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(-\-pio-primary-color) 40%, transparent);
    }

    .btn-pio-secondary:focus-visible,
    .btn-pio-outline-secondary:focus-visible {
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(-\-pio-blue-color) 40%, transparent);
    }

    /* disabled: muted, non-interactive - same for every variant */
    .btn-pio-primary:disabled, .btn-pio-primary.disabled,
    .btn-pio-secondary:disabled, .btn-pio-secondary.disabled,
    .btn-pio-outline-primary:disabled, .btn-pio-outline-primary.disabled,
    .btn-pio-outline-secondary:disabled, .btn-pio-outline-secondary.disabled {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
    }

/* ---- filled: primary (orange) ---- */
.btn-pio-primary {
    background-color: var(-\-pio-primary-color);
    border-color: var(-\-pio-primary-color);
    color: #fff;
}

    /* the inner label/link/icon follows the button text color in EVERY state */
    .btn-pio-primary span, .btn-pio-primary a, .btn-pio-primary svg {
        color: #fff !important;
    }

    .btn-pio-primary:hover {
        background-color: color-mix(in srgb, var(-\-pio-primary-color) 82%, #fff);
        border-color: color-mix(in srgb, var(-\-pio-primary-color) 82%, #fff);
        color: #fff;
    }

    /* active = click / pressed: a touch darker so the press reads */
    .btn-pio-primary:active,
    .btn-pio-primary.active,
    .btn-pio-primary:not(:disabled):not(.disabled):active {
        background-color: color-mix(in srgb, var(-\-pio-primary-color) 85%, #000);
        border-color: color-mix(in srgb, var(-\-pio-primary-color) 85%, #000);
        color: #fff;
    }

/* ---- filled: secondary (cyan) ---- */
.btn-pio-secondary {
    background-color: var(-\-pio-blue-color);
    border-color: var(-\-pio-blue-color);
    color: #fff;
}

    .btn-pio-secondary span, .btn-pio-secondary a, .btn-pio-secondary svg {
        color: #fff !important;
    }

    .btn-pio-secondary:hover {
        background-color: color-mix(in srgb, var(-\-pio-blue-color) 82%, #fff);
        border-color: color-mix(in srgb, var(-\-pio-blue-color) 82%, #fff);
        color: #fff;
    }

    .btn-pio-secondary:active,
    .btn-pio-secondary.active,
    .btn-pio-secondary:not(:disabled):not(.disabled):active {
        background-color: color-mix(in srgb, var(-\-pio-blue-color) 85%, #000);
        border-color: color-mix(in srgb, var(-\-pio-blue-color) 85%, #000);
        color: #fff;
    }

/* ---- outline: primary (orange) ---- */
.btn-pio-outline-primary {
    background-color: transparent;
    border-color: var(-\-pio-primary-color);
    color: var(-\-pio-primary-color);
}

    /* default: label/icon match the border color */
    .btn-pio-outline-primary span, .btn-pio-outline-primary a, .btn-pio-outline-primary svg {
        color: var(-\-pio-primary-color) !important;
    }

    /* hover + active: fill with the color, EVERYTHING inside goes white
       (this is the bug fix - span/a were staying orange on hover before) */
    .btn-pio-outline-primary:hover,
    .btn-pio-outline-primary:active,
    .btn-pio-outline-primary.active,
    .btn-pio-outline-primary:not(:disabled):not(.disabled):active {
        background-color: var(-\-pio-primary-color);
        border-color: var(-\-pio-primary-color);
        color: #fff;
    }

        .btn-pio-outline-primary:hover span, .btn-pio-outline-primary:hover a, .btn-pio-outline-primary:hover svg,
        .btn-pio-outline-primary:active span, .btn-pio-outline-primary:active a, .btn-pio-outline-primary:active svg,
        .btn-pio-outline-primary.active span, .btn-pio-outline-primary.active a, .btn-pio-outline-primary.active svg {
            color: #fff !important;
        }

/* ---- outline: secondary (cyan) ---- */
.btn-pio-outline-secondary {
    background-color: transparent;
    border-color: var(-\-pio-blue-color);
    color: var(-\-pio-blue-color);
}

    .btn-pio-outline-secondary span, .btn-pio-outline-secondary a, .btn-pio-outline-secondary svg {
        color: var(-\-pio-blue-color) !important;
    }

    .btn-pio-outline-secondary:hover,
    .btn-pio-outline-secondary:active,
    .btn-pio-outline-secondary.active,
    .btn-pio-outline-secondary:not(:disabled):not(.disabled):active {
        background-color: var(-\-pio-blue-color);
        border-color: var(-\-pio-blue-color);
        color: #fff;
    }

        .btn-pio-outline-secondary:hover span, .btn-pio-outline-secondary:hover a, .btn-pio-outline-secondary:hover svg,
        .btn-pio-outline-secondary:active span, .btn-pio-outline-secondary:active a, .btn-pio-outline-secondary:active svg,
        .btn-pio-outline-secondary.active span, .btn-pio-outline-secondary.active a, .btn-pio-outline-secondary.active svg {
            color: #fff !important;
        }


/* ==========================================================================
   5. BADGES (pills, like the mode badge in the buy modal)
   ========================================================================== */
.badge-pio-primary,
.badge-pio-secondary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: clamp(0.6311rem, calc(0.6068rem + 0.1035vw), 0.7rem);
    font-weight: 600;
    color: #fff;
    border-radius: 2rem;
    padding: .2rem .65rem;
    white-space: nowrap;
}

.badge-pio-primary {
    background-color: var(-\-pio-primary-color);
}

.badge-pio-secondary {
    background-color: var(-\-pio-blue-color);
}


/* ==========================================================================
   6. SECTION RHYTHM
   One vertical step between top-level <section>s, so a page stops hand-picking
   mt-5 here / py-5 there / section-padding elsewhere and ending up with a
   different gap between every pair of blocks.

   Usage:  <section class="container pio-section"> ... </section>
           .pio-section  = the vertical step
           .container = the horizontal one (bootstrap) - putting both on
           the same element is what .container .section-padding already did, so
           no extra wrapper div is needed.

   For a section that paints its own background and must stay full-bleed, keep
   the section full width and move .container to the inner div:
           <section class="pio-in-person-section pio-section">
               <div class="container"> ... </div>
           </section>

   One direction only: each section carries the gap ABOVE itself as
   padding-block-start, so two neighbours sit exactly --pio-section-space
   apart (24px on phones, 40px at 1920). To retune the whole site, change the
   clamp and nothing else.
   ========================================================================== */
:root {
    -\-pio-section-space: clamp(1.5rem, calc(1rem + 1.5vw), 2.5rem);
}

.pio-section {
    padding-block: var(-\-pio-section-space) 0;
}

/* opt-outs, for the odd block that has to break the grid */
.pio-section-tight {
    padding-block: calc(var(-\-pio-section-space) * .5) 0;
}

.pio-section-flush-top {
    padding-top: 0;
}

.pio-section-flush-bottom {
    padding-bottom: 0;
}