/*
    ==========================================================================
    SPECSAVERS CI BOOTSTRAP 5 OVERRIDES
    ==========================================================================

    Purpose:
    - Provides Specsavers CI styling for Bootstrap 5 pages.
    - Keeps Bootstrap 5 as the base framework.
    - Applies CI typography, colours and component styling.
    - Uses rem for typography and scalable spacing.
    - Keeps brand colours centralised in :root.
    - Handles responsive typography without duplicate markup.

    This stylesheet is used by:
    Views/Shared/_LayoutBootstrap5.cshtml

    It is not loaded alongside Bootstrap 3.
*/


/* ==========================================================================
   1. FONTS
   ========================================================================== */

@font-face {
    font-family: 'Montserrat Regular';
    src: url(../fonts/Montserrat/Montserrat-Regular.ttf);
}

@font-face {
    font-family: 'Montserrat Light';
    src: url(../fonts/Montserrat/Montserrat-Light.ttf);
}

@font-face {
    font-family: 'Montserrat Extra Light';
    src: url(../fonts/Montserrat/Montserrat-ExtraLight.ttf);
}
@font-face {
    font-family: 'OpenSans Regular';
    src: url(../fonts/OpenSans/OpenSans-Regular.ttf);
}

@font-face {
    font-family: 'OpenSans Light';
    src: url(../fonts/OpenSans/OpenSans-Light.ttf);
}


/* ==========================================================================
   2. CI VARIABLES
   ========================================================================== */

:root {
    /* Brand Colours */
    --ci-primary: #009A3E;
    --ci-primary-hover: #007A31;
    --ci-secondary: #0061A1;
    --ci-secondary-hover: #004D80;
    --ci-dark-bg: #12141D;
    /* Neutral Colours */
    --ci-black: #0C0C0C;
    --ci-white: #FFFFFF;
    --ci-grey-primary: #E3E3E3;
    --ci-grey-secondary: #F7F7F7;
    --ci-text-secondary: #747474;
    --ci-green-secondary: #BCDFC6;
    --ci-blue-secondary: #C7DCEA;
    /* Bootstrap Colour Mapping */
    --bs-primary: var(--ci-primary);
    --bs-primary-rgb: 0, 154, 62;
    --bs-secondary: var(--ci-secondary);
    --bs-secondary-rgb: 0, 97, 161;
    --bs-body-color: var(--ci-black);
    --bs-body-bg: var(--ci-white);
    --bs-link-color: var(--ci-black);
    --bs-link-hover-color: var(--ci-secondary);
    --bs-body-font-family: 'Montserrat', 'Montserrat Light','Montserrat Extra Light', sans-serif;
    /* Bootstrap Geometry */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-link-decoration: none;
}


/* ==========================================================================
   3. GLOBAL BASE STYLES
   ========================================================================== */

html {
    font-size: 14px; /* Base 1rem = 14px */
}

body {
    font-family: var(--bs-body-font-family);
    font-size: 1rem; /* 16px equivalent */
    font-weight: 400;
    line-height: 24px;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}


/* ==========================================================================
   4. TYPOGRAPHY (SPEC ALIGNED FOR 14PX ROOT)
   ========================================================================== */

/* Headings */
h1, .h1 {
    font-size: 2.857142857rem; /* Exactly 40px at 14px root */
    font-weight: 500;
}

h2, .h2 {
    font-size: 2.285714286rem; /* Exactly 32px at 14px root */
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h3, .h3 {
    font-size: 1.571428571rem; /* Exactly 22px at 14px root */
    font-weight: 500;
}

h4, .h4 {
    font-size: 1.285714286rem; /* Exactly 18px at 14px root */
    font-weight: 400;
}

h5, .h5 {
    font-size: 1rem; /* Exactly 14px at 14px root */
    font-weight: 600;
}

p {
    font-size: 1rem; /* Exactly 14px Desktop */
    font-weight: 400;
}

small, .small, h6, .h6 {
    font-size: 0.857142857rem; /* Exactly 12px */
    font-weight: 400;
}

.ci-type-meta {
    font-size: 0.8571rem;
    font-weight: 400;
    letter-spacing: 0.02rem;
    margin-top: 0.15rem;
}

strong,
.fw-semibold {
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

ul,
ol {
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
    color: var(--ci-black);
    text-align: left;
    padding-left: 1.5rem;
    list-style-position: outside;
}

li {
    text-align: left;
    line-height: 24px;
}

ul ul, ol ol, ul ol, ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

ul.list-unstyled,
ol.list-unstyled {
    padding-left: 0;
}


/* ==========================================================================
   5. LINKS
   ========================================================================== */

a {
    color: var(--ci-black);
    text-decoration: none;
}

    a:hover {
        color: var(--ci-secondary);
        text-decoration: none;
    }

    a.link-underline,
    .link-underline {
        text-decoration: underline;
        text-underline-offset: 0.1875rem;
    }

        a.link-underline:hover,
        .link-underline:hover {
            color: var(--ci-secondary);
        }

    a.link-green,
    .link-green {
        color: var(--ci-primary);
        text-decoration: none;
    }

        a.link-green:hover,
        .link-green:hover {
            color: var(--ci-primary);
            text-decoration: underline;
        }

    a.link-blue,
    .link-blue {
        color: var(--ci-secondary);
        text-decoration: none;
    }

        a.link-blue:hover,
        .link-blue:hover {
            color: var(--ci-secondary);
            text-decoration: underline;
        }

    /* Base link arrow setup */
    a.link-arrow,
    .link-arrow,
    a.link-arrow-left,
    .link-arrow-left {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-weight: 600;
    }

        /* Transition setup */
        a.link-arrow i,
        .link-arrow i,
        a.link-arrow-left i,
        .link-arrow-left i {
            transition: transform 0.2s ease-in-out;
        }

        /* Right arrow hover (moves right) */
        a.link-arrow:hover i,
        .link-arrow:hover i {
            transform: translateX(0.25rem);
        }

        /* Left arrow hover (moves left) */
        a.link-arrow-left:hover i,
        .link-arrow-left:hover i {
            transform: translateX(-0.25rem);
        }

    a.link-dark-secondary,
    .link-dark-secondary {
        color: var(--ci-black) !important;
        text-decoration: none;
        transition: color 0.15s ease-in-out;
    }

        a.link-dark-secondary:hover,
        .link-dark-secondary:hover {
            color: var(--ci-text-secondary) !important;
            text-decoration: none;
        }
.nav-link.active {
    color: var(--ci-secondary) !important;
    background-color: var(--ci-white) !important;
    border: 0.0625rem solid var(--ci-secondary) !important;
}
/* ==========================================================================
   6. FOOTER STYLES
   ========================================================================== */
.footerLink-headers {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.0625rem;
    margin-bottom: 0.75rem;
}

.footer-link {
    color: var(--ci-text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.03125rem;
}

    .footer-link:hover {
        color: var(--ci-secondary);
    }

.footer-list-left, .footer-list-left li {
    text-align: left !important;
}

.footer-list-center, .footer-list-center li {
    text-align: center !important;
}

.footer-list-right, .footer-list-right li {
    text-align: right !important;
}

/* ==========================================================================
   BUTTON HOVER CONTEXTS (HOVER 1 VS HOVER 2)
   ========================================================================== */

.btn {
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    border-radius: 0;
    border-width: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    box-shadow: none !important;
}

/* --- 1. PRIMARY BUTTON (GREEN) --- */

.btn-primary-subscribe {
    color: var(--ci-secondary) !important;
    background-color: #fff !important;
    border-color: var(--ci-primary) !important;
}

.btn-primary,
.btn-green,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active {
    color: var(--ci-white) !important;
    background-color: var(--ci-primary) !important;
    border-color: var(--ci-primary) !important;
}

    /* Hover 1: Default on White Container */
    .btn-primary:hover,
    .btn-green:hover, .btn-primary-subscribe:hover {
        color: var(--ci-black) !important;
        background-color: var(--ci-grey-primary) !important;
        border-color: var(--ci-grey-primary) !important;
    }

/* Hover 2: Special Case on Grey Container */
.bg-grey .btn-primary:hover,
.bg-grey .btn-green:hover {
    color: var(--ci-black) !important;
    background-color: var(--ci-white) !important;
    border-color: var(--ci-white) !important;
}


/* --- 2. SECONDARY BUTTON (BLUE) --- */
.btn-secondary,
.btn-blue,
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-secondary:active,
.btn-secondary.active {
    color: var(--ci-white) !important;
    background-color: var(--ci-secondary) !important;
    border-color: var(--ci-secondary) !important;
}

    /* Hover 1: Default on White Container */
    .btn-secondary:hover,
    .btn-blue:hover {
        color: var(--ci-black) !important;
        background-color: var(--ci-grey-primary) !important;
        border-color: var(--ci-grey-primary) !important;
    }

/* Hover 2: Special Case on Grey Container */
.bg-grey .btn-secondary:hover,
.bg-grey .btn-blue:hover {
    color: var(--ci-black) !important;
    background-color: var(--ci-white) !important;
    border-color: var(--ci-white) !important;
}


/* --- 3. OUTLINE BUTTONS --- */
.btn-outline-primary,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active {
    color: var(--ci-primary) !important;
    background-color: var(--ci-white) !important;
    border: 0.0625rem solid var(--ci-primary) !important;
}

    .btn-outline-primary:hover {
        color: var(--ci-black) !important;
        background-color: var(--ci-grey-primary) !important;
        border-color: var(--ci-grey-primary) !important;
    }

.btn-outline-secondary,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active {
    color: var(--ci-secondary) !important;
    background-color: var(--ci-white) !important;
    border: 0.0625rem solid var(--ci-secondary) !important;
}

    .btn-outline-secondary:hover {
        color: var(--ci-black) !important;
        background-color: var(--ci-grey-primary) !important;
        border-color: var(--ci-grey-primary) !important;
    }

.btn-outline-tertiary,
.btn-ci-small-tertiary,
.btn-outline-tertiary:focus,
.btn-outline-tertiary:focus-visible,
.btn-outline-tertiary:active,
.btn-ci-small-tertiary:focus,
.btn-ci-small-tertiary:focus-visible,
.btn-ci-small-tertiary:active {
    color: var(--ci-black) !important;
    background-color: var(--ci-white) !important;
    border: 0.0625rem solid var(--ci-black) !important;
}

    .btn-outline-tertiary:hover,
    .btn-ci-small-tertiary:hover {
        color: var(--ci-black) !important;
        background-color: var(--ci-grey-primary) !important;
        border-color: var(--ci-grey-primary) !important;
    }


/* --- 4. SIZING DEFINITIONS --- */
.btn-ci-standard,
.btn-default-ci {
    padding: 32px 44px;
    font-size: 1rem;
    line-height: 24px;
}

.btn-ci-small {
    padding: 20px 30px;
    font-size: 1rem;
    line-height: 24px;
}

.btn-lg {
    padding: 0.9375rem 1.25rem;
    font-size: 0.75rem;
}

.btn-xl {
    padding: 2rem 2.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
}


/* ==========================================================================
   8. BADGES & CARDS
   ========================================================================== */

.badge {
    border-radius: 0;
    font-weight: 400;
    font-size: 0.8571rem !important;
}

.text-bg-primary {
    background-color: var(--ci-primary) !important;
}

.text-bg-secondary {
    background-color: var(--ci-secondary) !important;
}

.card {
    border-radius: 0;
    --bs-card-cap-bg: var(--ci-grey-secondary);
}

.card-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

    .card-lift:hover {
        transform: translateY(-0.428rem);
        box-shadow: 0 0.857rem 2.285rem rgba(0, 0, 0, 0.12) !important;
    }

.card-zoom, .ci-card-zoom {
    overflow: hidden;
    cursor: pointer;
}

    .card-zoom .card-img-top, .ci-card-zoom .card-img-top {
        transition: transform 0.3s ease;
    }

    .card-zoom:hover .card-img-top, .ci-card-zoom:hover .card-img-top {
        transform: scale(1.05);
    }

.ci-card-overlay {
    position: relative;
    overflow: hidden;
    min-height: 20rem;
}

    .ci-card-overlay .card-img {
        height: 100%;
        object-fit: cover;
    }

    .ci-card-overlay .card-img-overlay {
        background: linear-gradient(180deg, rgba(12,12,12,0.1) 0%, rgba(12,12,12,0.85) 100%);
    }

.ci-card-action {
    border-top: 0.285rem solid var(--ci-primary) !important;
}


/* ==========================================================================
   9. FORMS & INPUTS
   ========================================================================== */

.form-control, .form-select {
    border-radius: 0;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--ci-primary) !important;
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
    }

/* Green Checkbox */
.form-check-input:checked {
    background-color: var(--ci-primary);
    border-color: var(--ci-primary);
}

.form-check-input:focus {
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Secondary Blue Checkbox */
.form-check-input-blue:checked {
    background-color: var(--ci-secondary);
    border-color: var(--ci-secondary);
}

.form-check-input-blue:focus {
    border-color: var(--ci-secondary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.25);
}

.form-check-input-blue[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}


/* ==========================================================================
   10. ALERTS & UTILITIES
   ========================================================================== */

.alert {
    border-radius: 0;
}

.alert-success {
    color: var(--ci-white);
    background-color: var(--ci-primary);
    border-color: var(--ci-primary);
}
.bs5-alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}
    .alert-info {
    color: var(--ci-white);
    background-color: var(--ci-secondary);
    border-color: var(--ci-secondary);
}

.alert-warning {
    color: var(--ci-black);
}

.alert-danger {
    color: var(--ci-white);
}

.alert .alert-link {
    color: inherit;
    text-decoration: underline;
}

.ci-grey-primary {
    background-color: var(--ci-grey-primary);
}

.ci-grey-secondary {
    background-color: var(--ci-grey-secondary);
}

.ci-blue-secondary {
    background-color: var(--ci-secondary);
}

.text-primary-ci {
    color: var(--ci-black) !important;
}

.text-secondary-ci {
    color: var(--ci-text-secondary) !important;
}

.has-header-line-top::before, .header-line-top::before {
    content: "";
    display: block;
    width: 4rem;
    height: 0.120rem;
    background-color: var(--ci-black);
    margin-bottom: 0.75rem;
}

.has-header-line-top-white::before, .header-line-top-white::before {
    content: "";
    display: block;
    width: 4rem;
    height: 0.120rem;
    background-color: #FFFFFF;
    margin-bottom: 0.75rem;
}

.listing-thumb {
    border: 0.125rem solid transparent;
}

    .listing-thumb.active {
        border-color: var(--ci-primary);
    }

/* ==========================================================================
   CI SOFT TOAST VARIANTS (MATCHING ALERT STYLES)
   ========================================================================== */

/* CI Success Soft */
.bs5-toast-success {
    background-color: #E8F5E9 !important;
    color: #1B5E20 !important;
}

    .bs5-toast-success .toast-link {
        color: var(--ci-primary) !important;
    }

/* Primary Soft */
.toast-soft-primary {
    background-color: #E8F4FC !important;
    color: var(--ci-secondary) !important;
}

    .toast-soft-primary .toast-link {
        color: var(--ci-secondary) !important;
    }

/* Secondary Soft */
.toast-soft-secondary {
    background-color: var(--ci-grey-primary) !important;
    color: var(--ci-black) !important;
}

    .toast-soft-secondary .toast-link {
        color: var(--ci-black) !important;
    }

/* Warning Soft */
.toast-soft-warning {
    background-color: #FFF8E1 !important;
    color: #8D6E00 !important;
}

/* Danger Soft */
.toast-soft-danger {
    background-color: #FFEBEE !important;
    color: #C62828 !important;
}


/* ==========================================================================
   11. PROVINCE FILTER BUTTONS
   ========================================================================== */

.province-filter-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 24px;
    border-radius: 0;
    transition: all 0.2s ease-in-out;
}

.province-filter-btn-green.btn-outline-secondary {
    border: 0.0625rem solid var(--ci-primary);
    color: var(--ci-primary);
    background-color: var(--ci-white);
}

    .province-filter-btn-green.btn-outline-secondary:hover,
    .province-filter-btn-green.btn-outline-secondary:focus,
    .province-filter-btn-green.btn-outline-secondary:active {
        border-color: var(--ci-primary);
        background-color: var(--ci-secondary);
        color: var(--ci-white);
    }

.province-filter-btn-green.btn-primary {
    border: 0.0625rem solid var(--ci-primary);
    background-color: var(--ci-primary);
    color: var(--ci-white);
}

.province-filter-btn-blue.btn-outline-secondary {
    border: 0.0625rem solid var(--ci-secondary);
    color: var(--ci-secondary);
    background-color: var(--ci-white);
}

    .province-filter-btn-blue.btn-outline-secondary:hover,
    .province-filter-btn-blue.btn-outline-secondary:focus,
    .province-filter-btn-blue.btn-outline-secondary:active {
        border-color: var(--ci-secondary);
        background-color: var(--ci-secondary);
        color: var(--ci-white);
    }

.province-filter-btn-blue.btn-secondary,
.province-filter-btn-blue.btn-primary {
    border: 0.0625rem solid var(--ci-secondary);
    background-color: var(--ci-secondary);
    color: var(--ci-white);
}


/* ==========================================================================
   12. SELECTION & MEDIA QUERIES
   ========================================================================== */

::selection {
    background-color: rgba(0, 154, 62, 0.25);
    color: var(--ci-black);
}

::-moz-selection {
    background-color: rgba(0, 154, 62, 0.25);
    color: var(--ci-black);
}

/* Responsive Overrides (Max-width: 767.98px) */
@media (max-width: 767.98px) {
    h1, .h1,
    h2, .h2 {
        font-size: 2.142857143rem; /* Exactly 30px Mobile */
    }

    h3, .h3 {
        font-size: 1.428571429rem; /* Exactly 20px Mobile */
    }

    h4, .h4 {
        font-size: 1.142857143rem; /* Exactly 16px Mobile */
    }

    h5, .h5,
    p, body {
        font-size: 1rem; /* Exactly 14px Mobile */
    }

    small, .small,
    h6, .h6 {
        font-size: 0.857142857rem; /* Exactly 12px Mobile */
    }
}


/* ==========================================================================
   13. COMPONENT STYLES (BANNER, MODALS, THEMES)
   ========================================================================== */

.ci-subscribe-banner {
    border-radius: var(--bs-border-radius) !important;
    box-shadow: 0 0.714rem 2.143rem rgba(0, 0, 0, 0.25);
}

.ci-subscribe-input-wrapper {
    background: rgba(255, 255, 255, 0.08);
    border: 0.071rem solid rgba(255, 255, 255, 0.25);
    border-radius: var(--bs-border-radius) !important;
    padding: 0.285rem;
    transition: all 0.2s ease-in-out;
}

    .ci-subscribe-input-wrapper .form-control {
        background: transparent !important;
        border: none !important;
        border-radius: var(--bs-border-radius) !important;
        box-shadow: none !important;
        color: var(--ci-white) !important;
    }

        .ci-subscribe-input-wrapper .form-control::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

.form-control-sharp {
    border-radius: var(--bs-border-radius) !important;
    border: 0.071rem solid #ced4da;
}

.ci-modal-sharp {
    border-radius: var(--bs-border-radius) !important;
}

.ci-modal-header {
    border-bottom: 0.143rem solid var(--ci-grey-secondary);
}

.ci-gender-pill-option {
    display: block;
    cursor: pointer;
}

    .ci-gender-pill-option input[type="radio"] {
        display: none;
    }

.ci-gender-pill-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.857rem 1.143rem;
    border: 0.071rem solid #ced4da;
    border-radius: var(--bs-border-radius) !important;
    background-color: var(--ci-white);
    color: #333333;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Green Theme */
/* Blue Light Theme (Dark Blue to Site Blue) */
.ci-theme-blue-light {
    background: linear-gradient( 135deg, #0A2540 0%, #004B87 35%, #0061A1 65%, var(--ci-secondary) 140% );
    border: 0.071rem solid rgba(var(--bs-secondary-rgb), 0.3);
}
.ci-theme-green-light {
    background: linear-gradient( 135deg, #022C12 0%, #006026 35%, #009A3E 65%, var(--ci-primary) 140% );
    border: 0.071rem solid rgba(var(--bs-secondary-rgb), 0.3);
}
.ci-theme-green {
    background: linear-gradient(135deg, var(--ci-dark-bg) 0%, var(--ci-primary) 140%);
    border: 0.071rem solid rgba(var(--bs-primary-rgb), 0.3);
}

.ci-input-focus-green:focus-within {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--ci-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.3);
}

.btn-ci-green {
    background-color: var(--ci-primary) !important;
    border-color: var(--ci-primary) !important;
    color: var(--ci-white) !important;
    border-radius: var(--bs-border-radius) !important;
    font-weight: 700;
    letter-spacing: 0.035rem;
}

    .btn-ci-green:hover, .btn-ci-green:focus {
        background-color: var(--ci-primary-hover) !important;
        border-color: var(--ci-primary-hover) !important;
        color: var(--ci-white) !important;
    }

.ci-modal-green {
    border: 0.143rem solid var(--ci-primary);
}

.ci-pill-green input[type="radio"]:checked + .ci-gender-pill-card {
    background-color: var(--ci-primary);
    border-color: var(--ci-primary);
    color: var(--ci-white);
}

.ci-pill-green .ci-gender-pill-card:hover {
    border-color: var(--ci-primary);
}

.ci-input-green:focus {
    border-color: var(--ci-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Blue Theme */
.ci-theme-blue {
    background: linear-gradient(135deg, var(--ci-dark-bg) 0%, var(--ci-secondary) 140%);
    border: 0.071rem solid rgba(var(--bs-secondary-rgb), 0.3);
}

.ci-input-focus-blue:focus-within {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--ci-secondary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.3);
}

.btn-ci-blue {
    background-color: var(--ci-secondary) !important;
    border-color: var(--ci-secondary) !important;
    color: var(--ci-white) !important;
    border-radius: var(--bs-border-radius) !important;
    font-weight: 700;
    letter-spacing: 0.035rem;
}

    .btn-ci-blue:hover, .btn-ci-blue:focus {
        background-color: var(--ci-secondary-hover) !important;
        border-color: var(--ci-secondary-hover) !important;
        color: var(--ci-white) !important;
    }

.ci-modal-blue {
    border: 0.143rem solid var(--ci-secondary);
}

.ci-pill-blue input[type="radio"]:checked + .ci-gender-pill-card {
    background-color: var(--ci-secondary);
    border-color: var(--ci-secondary);
    color: var(--ci-white);
}

.ci-pill-blue .ci-gender-pill-card:hover {
    border-color: var(--ci-secondary);
}

.ci-input-blue:focus {
    border-color: var(--ci-secondary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.25) !important;
}

.ci-grid-col {
    background-color: var(--ci-grey-secondary);
    border: 0.071rem solid var(--ci-blue-secondary);
    color: var(--ci-black);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
    border-radius: var(--bs-border-radius) !important;
    transition: all 0.2s ease-in-out;
}

    .ci-grid-col:hover {
        background-color: var(--ci-secondary);
        color: var(--ci-white);
        border-color: var(--ci-secondary);
    }
/* ==========================================================================
   HERO / BANNER UTILITIES
   ========================================================================== */

/* Hero Min-Height (50vh fallback for hero sections) */
.min-vh-50 {
    min-height: 50vh;
}

@media (min-width: 768px) {
    .hero-banner {
        min-height: 600px;
    }
}

/* Z-Index Utility Overrides for Background Layers */
.z-n1 {
    z-index: -1 !important;
}

.z-n2 {
    z-index: -2 !important;
}

/* Dark Blue Brand Gradient Overlay */
.hero-overlay {
    background: linear-gradient(90deg, rgba(0, 40, 75, 0.85) 0%, rgba(0, 40, 75, 0.45) 55%, rgba(0, 40, 75, 0.1) 100%);
}

/* Optional text-spacing utility */
.tracking-wider {
    letter-spacing: 0.0625rem;
}
/* ==========================================================================
   FEATURE SECTION UTILITIES
   ========================================================================== */

/* Fixed-width Icon Container for Feature Lists */
.icon-box-fixed {
    width: 2rem;
    line-height: 1;
}

/* Feature Image Height Constraint */
.feature-img-lg {
    height: 380px;
}



/* Color Tokens */
.bg-grey {
    background-color: var(--ci-grey-primary) !important;
}

.text-primary-ci {
    color: var(--ci-primary) !important;
}

.text-secondary-ci {
    color: var(--ci-secondary) !important;
}

.text-black {
    color: var(--ci-black) !important;
}
/* Custom CI Brand Green Border Utility */
.border-primary-ci {
    border-color: var(--ci-primary) !important;
}



#shop-online {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    --bs-gutter-x: 1.5rem; 
}
@media (min-width: 992px) {
    .feature-img-lg {
        height: 440px;
    }

    .container,
    .container-lg,
    .container-md,
    .container-xl,
    .container-xxl {
        --bs-gutter-x: 8.5rem;
    }
}