/* urbanist-regular - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/urbanist-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
    /* urbanist-italic - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/urbanist-v15-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
    /* urbanist-600 - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/urbanist-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
    /* urbanist-600italic - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/urbanist-v15-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
    /* urbanist-900 - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/urbanist-v15-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
    /* urbanist-900italic - latin */
    @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Urbanist';
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/urbanist-v15-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    * {
        box-sizing: border-box;
    }

    :root {
        --primary-color: #1d3b5e;
        --body-background-color:#f3f3f3f1;
    }

    body {
        font-family: 'Urbanist', sans-serif;
        font-weight: 400;
        background-color: var(--body-background-color);
        color: var(--primary-color);
        margin: 0;
        padding: 0;
    }
    .container {
        display: flex;
        flex-direction: row;
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 50px;
        align-items: start;
    }

    h1 {
        margin-bottom: 10px;
    }

    .configurator .config-section .color-options{
        flex-wrap: wrap;
    }
    .image-section {
        flex: 60%;
        margin-right: 20px;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-direction: column;
        gap: 10px;
        position: sticky;
        top: 20px;
    }
    .image-section img {
        max-width: 100%;
    }
    .config-section {
        flex: 40%;
        padding: 10px;
        overflow-y: scroll;
        height: 100%;
        background-color: transparent;
        border-radius: 10px;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    hr{
        margin: 40px 0;
        border: 1px solid #ccc;
    }
    .config-section::-webkit-scrollbar {
        display: none;
    }
    .config-section h2 {
        font-size: 45px;
        font-style: italic;
        font-family: 'Urbanist',sans-serif;
        text-transform: uppercase;
        font-weight: 900;
        margin-bottom: 10px;
        margin-top: 0;
    }
    .config-options {
        margin-top: 25px;
        margin-bottom: 20px;
    }
    .fullscreen-container .swiper-slide {
        display: block!important;
        position: relative;
    }

    .fullscreen .base-image {
        display: block;
        width: 100%;
        height: auto;
    }

    .config-options h3 {
        font-family: 'Urbanist', sans-serif;
        font-size: 20px;
        margin-bottom: 10px;
        font-weight: 400;
        text-transform: capitalize;
        color: var(--primary-color);
    }

    .config-options h3 span {
        font-weight: 600;
    }

    .config-options h3 strong {
        font-weight: normal;
        font-size: 18px;
    }

    .color-options .heading, .wheel-type .heading {
        font-weight: normal;
        font-size: small;
    }
    .wheel-option input[type="radio"] {
        display: none;
    }
    .color-options, .wheel-options, .radio-options {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2,1fr);
    }

    .wheel-type, .wheels, .brakes {
        grid-template-columns: 1fr 2fr;
    }

    .option-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 10px;
    }
    .color-options [data-color], .wheel-options [data-color] {
        width: 80px;
        height: 80px;
        cursor: pointer;
        border: 2px solid transparent;
        box-shadow: #ccc;
        border-radius: 10px;
        border: 2px solid transparent;
        outline: 2px solid transparent;
        margin-bottom: 10px;
    }
    .color-options div.selected, .wheel-options div.selected {
        border: 2px solid #fff;
        outline: 2px solid #000;
    }
    .color-options .sable-black { background: #000; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Sable Black.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .talisman-silver { background: #efefef; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Talisman Silver.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .phoenix-red { background: #7c1017; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Phoenix Red.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .signal-red { background: #9f1f28; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Signal Red.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .burst-yellow { background: #e4bf09; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Burst Yellow.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .cotswold-yellow { background: #e9d492; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Cotswold Yellow.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .bathurst-green { background: #244e39; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Bathurst Green.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .sage-green { background: #8ba087; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Sage Green.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .minestone-blue { background: #0347b9; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Minestone Blue.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .sapphire-blue { background: #0c3350; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Sapphire Blue.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .ochre-gold { background: #b3a075; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Ochre Gold.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .savoy-grey { background: #333337; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Savoy Grey.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .storm-grey { background: #323232; background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Storm Grey.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options .talisman-silver { background: rgb(234,234,234); background-image: url("/twr/img/exterior/vehicle_colour/swatches/car_paint/Talisman Silver.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; }


    .color-options.wheels .satin-black { background: #000; background-image: url(/twr/img/exterior/vehicle_colour/swatches/wheels/satin-black.png); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options.wheels .gloss-charcoal { background: #000; background-image: url(/twr/img/exterior/vehicle_colour/swatches/wheels/gloss-charcoal.png); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options.wheels .gloss-bronze { background: #a47e62; background-image: url(/twr/img/exterior/vehicle_colour/swatches/wheels/gloss-bronze.png); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options.wheels .silver { background: rgb(234,234,234); background-image: url(/twr/img/exterior/vehicle_colour/swatches/wheels/silver.png); background-size: cover; background-repeat: no-repeat; background-position: center center; }


    .color-options.brakes .black { background: #000; background-image: url(/twr/img/exterior/vehicle_colour/swatches/brakes/black.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; }
    .color-options.brakes .red { background: #a60404; background-image: url(/twr/img/exterior/vehicle_colour/swatches/brakes/red.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; }

    .color-options .tan { background: rgb(255,204,102); }
    .color-options .burnt-orange { background: #8f502f; }
    .color-options .mocha { background: #4f4039; }
    .color-options .ox-blood { background: rgb(153,51,0); }
    .color-options .aluminum { background: rgb(234,234,234); }
    .color-options .carbon { background: rgb(128,128,128); }


    /* INTERIOR COCKPIT COLOURS */
    .color-options.interior .black { background-color: #000!important }
    .color-options.interior .fastnet-grey { background-color: #7B7B7C!important }
    .color-options.interior .fawn { background-color: #cfb598!important }
    .color-options.interior .navy-blue { background-color: #2b3e55!important }

    .color-options .disabled {
        opacity: 0.35;
        pointer-events: none;
        filter: grayscale(1);
    }


    .wheel-option {
        display: flex;
        flex-direction: column;
        align-items: start;
        cursor: pointer;
    }

    .wheel-option img {
        width: 100px;
        height: auto;
        border-radius: 6px;
        margin-bottom: 6px;
        border: 2px solid transparent;
        transition: 0.25s ease;
    }

    .wheel-option input:checked + img {
        border-color: var(--primary-color);
    }

    .wheel-option span {
        font-size: 14px;
        color: #fff;
    }

    .accordion-section {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 4px 16px var(--tw-shadow-color, #00000029);
        padding: 20px;
    }

    .accordion-section h3 {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
        margin: 0;
    }

    .accordion-section h3 .icon {
    width: 16px;       /* width of the horizontal bar */
    height: 2px;       /* thickness of the line */
    background-color: var(--primary-color, #000);
    position: relative;
    transition: all 0.3s ease;
    }

    .accordion-section h3 .icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 2px;
    background-color: inherit;
    transform: rotate(90deg);  /* vertical bar */
    transform-origin: center;
    transition: all 0.3s ease;
    opacity: 0; /* hidden initially for minus icon */
    }

.accordion-section h3.active .icon::before {
  opacity: 1; /* show vertical bar for plus */
}



    .swiper {
        width: 1200px;
        height: auto;
        margin: 0!important;
    }

    .swiper-slide {
        text-align: center;
        position: relative;
        display: flex!important;
    }

    .overlay-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .base-image {
        z-index: 0;
    }

    .overlay-image {
        z-index: 1; 
    }

    .nav-container {
        display: flex;
        list-style: none;
        padding: 0;
        gap: 20px;
    }

    .swiper-slide img {
        height: auto;
        width: 100%;
    }

    .nav-item {
        padding: 0 0 5px 0;
        position: relative;
        cursor: pointer;
    }

    .nav-item.active {
        border-bottom: 2px solid #1d3b5e;
    }

    .nav-item:not(:first-child):before {
        content: "|";
        position: absolute;
        left: -2px;
        width: 5px;
        color: #ccc;
    }

    #thumbs img {
        height: 100%;
        width: auto;
        border-radius: 10px;
        cursor: pointer;
        padding: 2px;
        border: 2px solid transparent;
    }

    #carousel img {
        border-radius: 10px;
    }

    #thumbs .swiper-slide-thumb-active img, #thumbs img:hover {
        border: 2px solid var(--primary-color);
        padding: 2px;
    }

    .fullscreen-button {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
        background: #fff;
        color: #fff;
        border: none;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 5px;
    }
    
    .fullscreen-button:hover {
        background: #c5c5c5;
    }
    
    /* Adjust the swiper when fullscreen */
    .swiper.fullscreen {
        width: 100vw;
        height: 100vh;
    }
    
    #thumbs.fullscreen {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 70%;
        top: 15px;
        height: auto;
    }

    #thumbs.fullscreen img {
        height: 75px;
    }

    .fullscreen-container {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        padding: 0;
    }

    .color-options.interior {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }

    @media (max-width: 768px){
        .color-options {
            grid-template-columns: repeat(2,1fr)!important;
        }
    }

    @media (min-width:769px) and (max-width: 1024px) {
        .swiper {
            width: 700px;
        }
    }


    @media (max-width:1200px){

        .container.configurator {
            flex-direction: column;
            padding: 0;
        }

        .swiper {
            width: 100%;
        }
        .image-section, .config-section {
            flex: 100%;
            width: 100%;
            top: 0;
            left: 0;
        }
        

        .image-section {
            position: sticky;
            z-index: 2;
            background-color: #f3f3f3;
            padding: 30px;
        }

        #fullscreenToggle {
            display: none;
        }

        .color-options {
            grid-template-columns: repeat(3,1fr);
        }
    }

    @media (min-width: 1940px){
        .container {
            max-width: 1920px;
        }
    }


    @media (min-width:1220px) and (max-width:1600px){
        .swiper {
            width: 900px;
        }
    }