/*
********************************************************
Cambio - Bootstrap 5 Overrides
Prevents Bootstrap from breaking existing Cambio styles.
Loaded AFTER Bootstrap CSS.
********************************************************
*/

/* ----------------------------------------------------------------
   Toast — brand blue
   ---------------------------------------------------------------- */
.toast-cambio {
    background-color: #0C0CCC;
    color: #ffffff;
}

/* ----------------------------------------------------------------
   Checkout step1/step2 send-button — match .btn-proceed blue style
   Overrides the legacy btn_background.png sprite in default.css
   ---------------------------------------------------------------- */
.checkout .form_wrap .send-button a {
    padding: 8px 15px;
    display: inline-block;
    float: right;
    text-decoration: none;
    background: #0C0CCC;
    background-image: none;
    color: #ffffff;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    width: auto;
    margin: 10px 0 10px 0;
}

.checkout .form_wrap .send-button a:hover {
    background: #000000;
    background-image: none;
    color: #ffffff;
}

.checkout .form_wrap .send-button a span {
    padding: 0;
    margin: 0;
    background: none;
}

/* ----------------------------------------------------------------
   Contact page send-button — match checkout blue button style
   Overrides the legacy btn_background.png sprite in default.css
   ---------------------------------------------------------------- */
.contact-us .send-button a {
    padding: 8px 15px;
    display: inline-block;
    float: none;
    text-decoration: none;
    background: #0C0CCC;
    background-image: none;
    color: #ffffff;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    width: auto;
    margin: 10px 0 10px 0;
}

.contact-us .send-button a:hover {
    background: #000000;
    background-image: none;
    color: #ffffff;
}

.contact-us .send-button a span {
    padding: 0;
    margin: 0;
    background: none;
}

/* ----------------------------------------------------------------
   Checkout buttons — right arrow icon (Bootstrap Icons bi-arrow-right)
   Applied to all three checkout action buttons via ::after
   ---------------------------------------------------------------- */
.checkout .btn-proceed a::after,
.checkout .form_wrap .send-button a::after,
.contact-us .send-button a::after {
    content: "\F138";
    font-family: "bootstrap-icons";
    font-style: normal;
    font-weight: normal;
    margin-left: 8px;
    font-size: 15px;
    vertical-align: middle;
    line-height: 1;
}

/* ----------------------------------------------------------------
   Nav link chevrons — replace arrow_right.png background images
   with a CSS Bootstrap-style right-pointing chevron (#444444).
   Covers all sidebar sub-nav link areas across the site.
   ---------------------------------------------------------------- */
.myaccount #sub-nav ul li a,
.myaccount .convert,
.help #sub-nav ul li a,
.distributor #sub-nav ul li a,
.offers .offer-items li a,
.news .news-items li a,
.news .news-list li a {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23444444'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c%2fsvg%3e") !important;
    background-size: 10px 10px !important;
    background-repeat: no-repeat !important;
}


/* Sidebar section navigation (About Us, Contact Us, etc.)
   ---------------------------------------------------------------- */
.section-nav {
    margin-bottom: 1rem;
}

.section-nav-heading {
    font-size: 15px;
    font-weight: bold;
    color: #444444;
    padding: 6px 10px;
    margin: 0 0 4px 0;
    border-bottom: 2px solid #0C0CCC;
    line-height: normal;
}

.section-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .section-nav-links li {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #BBBBBB;
    }

    .section-nav-link {
        display: block;
        padding: 5px 8px 5px 10px;
        color: #444444;
        text-decoration: none;
        font-size: 14px;
    }

        .section-nav-link:hover {
            background-color: #000000;
            color: #ffffff;
            text-decoration: none;
        }

        .section-nav-link.active {
            background-color: #000000;
            color: #ffffff;
            font-weight: bold;
            text-decoration: none;
        }

/* Restore #sub-nav h2 exactly as default.css specifies */
#sub-nav h2 {
    font-size: 16px;    
    padding: 0px 0 0 0px;
    margin: 0;
    line-height: normal;
}

#sub-nav h2.heading {
    margin: 0 0 10px 0;
    font-weight: bold;
}

/* Prevent Bootstrap's default link colors overriding Cambio */
a:link, a {
    color: #444444;
    text-decoration: underline;
}

    a:hover {
        color: #0C0CCC;
    }

/* Prevent Bootstrap from affecting existing form elements */
.criteria input,
.criteria select,
.criteria textarea {
    border-radius: 0;
}

/* ================================================================
   HEADER LAYOUT: Logo | Nav | Basket icons on the same row
   Matches the original Cambio design (screenshot reference).
   ================================================================ */

/* Override default.css min-height on header-container */
#header-container {
    min-height: auto;
}

/* Single flex row: logo (left) | nav (center/grows) | basket (right) */
.header-main-row {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative; /* mega-menu anchors to this */
    padding: 8px 0;
}

    /* Logo: override default.css float: left and fixed margins */
    .header-main-row #logo {
        float: none;
        width: auto;
        height: auto;
        margin: 0 10px 0 0;
        flex-shrink: 0;
    }

    /* Basket icons: override default.css float: right and margin-top: 40px */
    .header-main-row #basket-items {
        float: none !important;
        margin: 0 0 0 auto !important;
        padding: 0;
        flex-shrink: 0;
        align-self: center;
        position: relative;
    }

    .header-main-row #basket-items ul {
        float: right;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .header-main-row #basket-items li {
        float: none;
        margin: 0;
        padding: 0 3px;
        list-style: none;
    }

    .accordion-body {
        padding: 0;
    }

    .accordion-body .list-unstyled li {
        margin: 0;
    }

/* Mobile: stack nav below logo+basket row */
@media (max-width: 991px) {
    .header-main-row {
        flex-wrap: wrap;
        align-items: center;
    }

        .header-main-row #logo {
            flex: 0 0 auto;
            margin: 0;
        }

        .header-main-row #basket-items {
            flex: 0 0 auto;
            margin-left: auto; /* push to right of logo row */
        }

    #nav-primary {
        flex: 0 0 100% !important; /* full width row below logo/basket */
        order: 10;
    }

    /* Mobile collapse chevron — inside .accordion wrapper so Bootstrap's ::after SVG variables resolve */
    .mobile-nav-chevron-btn.accordion-button {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #444444 !important;
        padding: 4px 8px !important;
        width: auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0;
    }

    /* Smaller chevron — match sidebar accordion (12px) */
    .mobile-nav-chevron-btn.accordion-button::after {
        width: 12px;
        height: 12px;
        background-size: 12px;
        margin-left: 0;
    }

    /* Open state — Bootstrap Collapse JS sets aria-expanded, not .collapsed */
    .mobile-nav-chevron-btn.accordion-button[aria-expanded="true"]::after {
        transform: rotate(-180deg);
    }

    .mobile-nav-chevron-btn.accordion-button:not(.collapsed) {
        background-color: transparent !important;
        color: #444444 !important;
        box-shadow: none !important;
    }

    .mobile-sub-nav {
        margin: 4px 0 0 10px;
    }

    /* Prevent sub-nav long links from expanding the container and shifting the chevron */
    .mobile-sub-nav .nav-link {
        white-space: normal;
    }

    /* Constrain the accordion wrapper and flex row so chevron stays fixed at right */
    .d-lg-none.accordion {       
        overflow: hidden;
    }

    .d-lg-none.accordion .d-flex {
        min-width: 0;
    }

}

/* ================================================================
   NAV-PRIMARY: Bootstrap navbar styled to match original RadMenu
   White background, dark text, blue underline on hover/active.
   ================================================================ */

/* Comprehensively reset ul/li global styles from default.css
   inside the navbar. Using #nav-primary ID for high specificity. */
#nav-primary ul,
#nav-primary li,
#nav-primary .navbar-nav,
#nav-primary .navbar-nav > li,
#nav-primary .dropdown-menu,
#nav-primary .dropdown-menu > li {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

/* Fix margin-left bleed from default.css `ul { margin-left: 1.8em }` */
#nav-primary .navbar-collapse ul,
#nav-primary .navbar-nav {
    margin-left: 0;
}

/* nav-primary: grows to fill space between logo and basket icons */
#nav-primary {
    flex: 1 1 auto;
    min-width: 0; /* prevent flex overflow */
    margin: 0;
    padding: 0;
    text-align: left;
}

/* ----------------------------------------------------------------
   Navbar container - white background matching original header
   ---------------------------------------------------------------- */
.navbar-cambio {
    background-color: #ffffff;
    padding: 0;
    border: none;
    border-radius: 0;
    width: 100%;
}

/* Mobile toggler - inside basket-items ul, right of basket icon */
#basket-items .navbar-toggler {
    flex-shrink: 0;
    align-self: center;
    border-color: rgba(0,0,0,0.3);
    padding: 8px 12px;
}

#basket-items .navbar-toggler .navbar-toggler-icon {
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23333333' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ----------------------------------------------------------------
   Force horizontal layout on desktop (>= 992px).
   Using #nav-primary ID + !important to beat any conflicting styles.
   ---------------------------------------------------------------- */
@media (min-width: 992px) {
    #nav-primary .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        flex-direction: row;
    }

    #nav-primary .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
    }

    #nav-primary .nav-item {
        display: flex !important;
        align-items: stretch;
    }

    /* Hover to show dropdown — links are plain anchors (no data-bs-toggle) so clicks navigate.
       top/left set explicitly because Popper.js is not initialised without data-bs-toggle. */
    .navbar-cambio .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        top: 100%;
        left: 0;
    }
}

/* ----------------------------------------------------------------
   Nav links - match original RadMenu .rmHorizontal .rmItem a
   Dark text, blue underline on hover (no background change)
   ---------------------------------------------------------------- */
.navbar-cambio .navbar-nav {
    align-items: stretch;
}

.navbar-cambio .nav-item {
    display: flex;
    align-items: stretch;
    margin: 0 2px 0 0; /* matches .RadMenu .rmHorizontal .rmItem { margin: 0 2px 0 0 } */
}

.navbar-cambio .nav-link {
    color: #333333;
    text-decoration: none;    
    padding: 5px 8px 5px 8px; /* matches RadMenu `padding: 4px 0 4px 8px` approximately */
    display: flex;
    align-items: center;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}

    /* Hover - blue underline only, no background change (matches original) */
    .navbar-cambio .nav-link:hover,
    .navbar-cambio .nav-link:focus {
        color: #333333;
        background-color: transparent;
        border-bottom: 3px solid #0C0CCC;
        text-decoration: none;
    }

    /* Active/selected - blue underline + bold (matches .rmRootLink.rmSelected) */
    .navbar-cambio .nav-link.active {
        color: #333333;
        font-weight: bold;
        background-color: transparent;
        border-bottom: 3px solid #0C0CCC;
    }

    /* Hide Bootstrap dropdown caret arrows in navbar (original design has no carets) */
    .navbar-cambio .nav-link.dropdown-toggle::after,
    .navbar-cambio .nav-link.dropdown-toggle::before {
        display: none;
    }

    /* Mobile sub-link active state */
    @media (max-width: 991px) {
        .navbar-cambio .mobile-sub-nav .nav-link.active {
            border-bottom: 3px solid #0C0CCC;
            font-weight: bold;
        }
    }

    /* Mobile tap targets — min 44px height for reliable touch */
    @media (max-width: 991px) {
        .navbar-cambio .nav-link {
            min-height: 40px;
            padding-top: 5px;
            padding-bottom: 5px;
        }
    }

/* ----------------------------------------------------------------
   Dropdown menus - blue background matching original RadMenu dropdown
   .RadMenu .rmVertical.rmGroup { background-color: #0C0CCC }
   ---------------------------------------------------------------- */
.navbar-cambio .dropdown-menu {
    border-radius: 0 0 8px 8px;
    border: none;
    border-top: 1px solid #cccccc;
    background-color: #0C0CCC;
    font-size: 13px;
    min-width: 160px;
    padding: 5px 0 10px 0;
    margin-top: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.navbar-cambio .dropdown-item {
    font-size: 13px;
    padding: 4px 25px 4px 10px; /* right padding for arrow icon */
    color: #ffffff;
    text-decoration: none; 
    
    
}

    /* Hover/active - black background (matches .rmLink:hover { background-color: #000000 }) */
    .navbar-cambio .dropdown-item:hover,
    .navbar-cambio .dropdown-item:focus,
    .navbar-cambio .dropdown-item.active {
        background-color: #000000;
        color: #ffffff;
        text-decoration: none;
    }

/* ----------------------------------------------------------------
   Mega-menu styles
   ---------------------------------------------------------------- */
.cambio-mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-top: 3px solid #0C0CCC;
    border-radius: 0 0 8px 8px;
    padding: 15px 20px;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

    .cambio-mega-menu.show {
        display: block;
    }

    .cambio-mega-menu .mega-menu-heading {
        display: block;
        color: #0C0CCC;
        font-size: 14px;
        font-weight: bold;
        margin: 0 0 5px 0;
        padding: 0 0 4px 0;
        border-bottom: 1px solid #eee;
    }

        .cambio-mega-menu .mega-menu-heading a {
            color: #0C0CCC;
            text-decoration: none;
        }

            .cambio-mega-menu .mega-menu-heading a:hover {
                text-decoration: underline;
            }

    .cambio-mega-menu .mega-menu-links {
        list-style: none;
        padding: 0;
        margin: 0 0 10px 0;
    }

        .cambio-mega-menu .mega-menu-links li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .cambio-mega-menu .mega-menu-links li a {
                display: block;
                padding: 2px 0;
                color: #444444;
                text-decoration: none;
                font-size: 13px;
            }

                .cambio-mega-menu .mega-menu-links li a:hover {
                    color: #0C0CCC;
                    background-color: #f8f8f8;
                }

.mega-menu-grid {
    column-count: 5;
    column-gap: 20px;
}

.mega-menu-app-block {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 12px;
}

@media (max-width: 1199px) {
    .mega-menu-grid { column-count: 4; }
}

@media (max-width: 991px) {
    .mega-menu-grid { column-count: 2; column-gap: 12px; }
}

/* ----------------------------------------------------------------
   Mobile accordion menu styles
   ---------------------------------------------------------------- */
.cambio-mobile-nav .accordion-button {
    font-size: 15px;
    padding: 8px 12px;
    color: #333333;
    background-color: #ffffff;
}

    .cambio-mobile-nav .accordion-button:not(.collapsed) {
        color: #ffffff;
        background-color: #0C0CCC;
        box-shadow: none;
    }

    .cambio-mobile-nav .accordion-button:focus {
        box-shadow: none;
        border-color: #0C0CCC;
    }

.cambio-mobile-nav .accordion-body {
    padding: 0;
}

    .cambio-mobile-nav .accordion-body a {
        display: block;
        padding: 6px 12px 6px 24px;
        color: #444444;
        text-decoration: none;
        font-size: 14px;
        border-bottom: 1px solid #eee;
    }

        .cambio-mobile-nav .accordion-body a:hover {
            background-color: #f8f8f8;
            color: #0C0CCC;
        }

/* ----------------------------------------------------------------
   Sidebar accordion (submenu)
   ---------------------------------------------------------------- */
.cambio-sidebar-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid #DED4E7;
}

.cambio-sidebar-accordion .accordion-button {
    font-size: 14px;
    padding: 6px 10px 6px 27px;
    color: #444444;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.cambio-sidebar-accordion a.accordion-button {
    font-weight: normal;
}

    .cambio-sidebar-accordion .accordion-button::after {
        width: 12px;
        height: 12px;
        background-size: 12px;
        position: absolute;
        left: 10px;
        right: auto;
    }

    .cambio-sidebar-accordion .accordion-button:hover {
        color: #0C0CCC;
        background-color: transparent;
    }

    .cambio-sidebar-accordion .accordion-button:not(.collapsed) {
        color: #ffffff;
        background-color: #0C0CCC;
        box-shadow: none;
    }

    .cambio-sidebar-accordion .accordion-button:not(.collapsed):hover {
        color: #ffffff;
        background-color: #0C0CCC;
    }

        .cambio-sidebar-accordion .accordion-button:not(.collapsed)::after {
            filter: brightness(0) invert(1);
        }

.cambio-sidebar-accordion .accordion-collapse .list-unstyled {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

    .cambio-sidebar-accordion .accordion-collapse .list-unstyled li {
        border-bottom: 1px solid #BBBBBB;
        list-style: none;
    }

        .cambio-sidebar-accordion .accordion-collapse .list-unstyled li a {
            display: block;
            padding: 5px 8px 5px 32px;
            color: #444444;
            text-decoration: none;
            font-size: 13px;
        }

            .cambio-sidebar-accordion .accordion-collapse .list-unstyled li a:hover {
                background-color: transparent;
                color: #0C0CCC;
            }

            .cambio-sidebar-accordion .accordion-collapse .list-unstyled li a.selected {
                background-color: #000000;
                color: #ffffff;
            }

/* ----------------------------------------------------------------
   Mobile sidebar toggle
   ---------------------------------------------------------------- */
.sidebar-toggle-btn {
    display: none;
    width: 100%;
    margin-bottom: 10px;
    background-color: #0C0CCC;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

    .sidebar-toggle-btn:hover {
        background-color: #000000;
    }

    .sidebar-toggle-btn::after {
        content: '\25BC';
        float: right;
    }

    .sidebar-toggle-btn.collapsed::after {
        content: '\25B6';
    }

@media (max-width: 991px) {
    .sidebar-toggle-btn {
        display: block;
    }
}

/* ----------------------------------------------------------------
   Telerik RadRotator - Bootstrap's box-sizing:border-box breaks
   the rotator's internal pixel-based layout. Reset to content-box
   so Telerik's inline width/height calculations work correctly.
   ---------------------------------------------------------------- */
.RadRotator,
.RadRotator * {
    box-sizing: content-box;
}

/* Ensure the banner wrapper is full width */
#banner-wrap,
#marketing-banner {
    width: 100%;
}

    /* Static banner image - scale to container width */
    #banner-wrap .banner img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    /* ----------------------------------------------------------------
   Rotating banner - make images 100% wide, not fixed 990px.
   Override RadRotator's inline style="width:990px" on the
   outer container and inner clip/item wrappers.
   ---------------------------------------------------------------- */
    #marketing-banner .horizontalRotator {
        width: 100% !important;
        position: relative !important; /* Containing block for Telerik's absolutely-positioned items */
    }

    #marketing-banner .rrWrap,
    #marketing-banner .rrClip {
        width: 100% !important;
    }

    /* Override Telerik's JS-set 0px width on the items list */
    #marketing-banner .rrItemsList {
        width: 100% !important;
    }

    #marketing-banner .rrItemWrapper,
    #marketing-banner .horizontalRotator ul > li {
        width: 100% !important;
    }

    #marketing-banner img {
        width: 100% !important;
        height: auto;
        display: block;
    }

    /* ----------------------------------------------------------------
   Carousel navigation dots - fix positioning for responsive widths.
   The original CSS used margin-left:-480px (hardcoded for 960px).
   Replace with transform so dots stay centred at any container width.
   Also raise z-index above rotator items to ensure clicks register.
   ---------------------------------------------------------------- */
    #marketing-banner .navigation-wrap #carousel_nav {
        margin-left: 0 !important;
        left: 50% !important;
        transform: translateX(-50%);
        z-index: 9999;
    }
}

/* ----------------------------------------------------------------
   Basket/Contact icons — inline SVG replaces PNG background sprites
   ---------------------------------------------------------------- */
#basket-items .contactus {
    background-image: none;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    color: #000000;
}

#basket-items .checkout {
    background-image: none;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    font-size: inherit;
    position: relative;
}

#basket-items .contactus:hover,
#basket-items .checkout:hover {
    color: #0C0CCC;
    opacity: 1;
}

#basket-items .checkout.has-items {
    color: #0C0CCC;
}

#basket-items .checkout .val {
    position: absolute;
    top: -10px;
    left: 10px;
    width: auto;
    min-width: 16px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    z-index: 99;
}

/* ----------------------------------------------------------------
   Search bar — increase input font size
   ---------------------------------------------------------------- */
.criteria input {
    font-size: 15px;
    padding-right: 72px; /* reserve space for clear/spinner + search button */
}

/* ----------------------------------------------------------------
   Breadcrumb — increase from 11px
   ---------------------------------------------------------------- */
.breadcrumb li {
    font-size: 13px;
}

/* ----------------------------------------------------------------
   Footer links — increase from 12px
   ---------------------------------------------------------------- */
#footer-wrap li a {
    font-size: 14px;
}

/* ----------------------------------------------------------------
   strong — override Bootstrap's font-weight:bolder with bold
   ---------------------------------------------------------------- */
strong, b {
    font-weight: bold;
}

/* ----------------------------------------------------------------
   Catalogue currency toggle — replace PNG flag background images
   with Bootstrap Icons (bi-currency-pound / bi-currency-euro)
   ---------------------------------------------------------------- */
.product-details .catalogue .flag li.uk a,
.product-details .catalogue .flag li.eu a {
    background: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 4px;
}

.product-details .catalogue .flag li.uk a .bi,
.product-details .catalogue .flag li.eu a .bi {
    font-size: 16px;
    line-height: 1;
}

/* Toast colour override */
.text-bg-success {
    --bs-success-rgb: 12, 12, 204;
    background-color: #0c0ccc !important;
    color: #ffffff !important;
}