:root {
    --page-padding: clamp(16px, calc((100vw - 400px) / 6.5), 32px);
}

* {
    -webkit-tap-highlight-color: transparent;
}


/* Change selected text color and background */
::selection {
    background: var(--primary);
    color: white; /* optional, for better contrast */
}

/* For Firefox (needs a prefix) */
::-moz-selection {
    background: var(--primary);
    color: white;
}

body {
    text-align: center;
    background: var(--background);
}

main {
    display: flex !important;
    flex-direction: column;
    max-width: 1842px;
    padding: 0 var(--page-padding) 32px;
    gap: 64px;
    color: var(--on-background);
    transition: 0.3s ease;

    overflow-x: hidden;
}

footer {
    max-width: 1842px;
    display: flex;
    padding: 0 var(--page-padding);
    transition: 0.3s ease;
}

.icon {
    width: 24px;
    height: 24px;
    transition: 0.3s ease;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.section-icon {
    width: clamp(32px, 3vw, 40px);
    height: clamp(32px, 3vw, 40px);

    &.primary-icon path {
        fill: var(--primary);
    }
}

.card {
    border: none;
    background: var(--tertiary-container);
    outline: 1px solid var(--tertiary);
    border-radius: 16px;
    gap: clamp(16px, 3vw, 24px);
    padding: clamp(16px, 3vw, 24px);

    transition: all 0.3s ease !important;
}

.card-button {
    width: fit-content;
    min-height: 40px;
    padding: 16px 16px;
    border-radius: calc(16px - (clamp(4px, 3vw, 8px)));
    outline: 1px solid var(--secondary);
    background: transparent;

    & label {
        font-size: clamp(14px, 2vw, 16px);
        font-weight: 300;
        color: var(--secondary);
        text-wrap: nowrap;
    }

    &:hover {
        background: var(--secondary);

        & label {
            color: var(--on-secondary);
        }
    }

    transition: all 0.3s ease;
}

a.card:hover  {
    outline: 1px solid var(--secondary);
    background: var(--on-secondary);
    box-shadow: 0 4px 8px 3px var(--shadow) !important;

    & .card-button {
        background: var(--secondary);

        & label {
            color: var(--on-secondary);
        }
    }
}

.card.no-bg {
    background: transparent;
    outline: 0 solid transparent;
}

.sub-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    border: none;
    min-width: 260px;
    width: 260px;
    flex-wrap: wrap;
    background: var(--surface-variant);
    outline: 2px solid transparent;
    border-radius: calc(56px - (clamp(24px, 3vw, 32px))) !important;
    padding: clamp(16px, 3vw, 24px);
    gap: clamp(50px, 3vw, 190px);

    transition: 0.3s ease;
}

.sub-card.no-bg {
    background: transparent;
}

.sub-card h3 {
    font-weight: 600;
    font-size: clamp(32px, 3vw, 40px) !important;
    color: var(--primary);
}

.sub-card h4 {
    font-weight: 500;
    font-size: clamp(16px, 3vw, 24px) !important;
    color: var(--primary);
}

.sub-card:hover h5 {
    color: var(--primary);
}

.sub-card label {
    pointer-events: none;
    text-align: start;
    font-weight: 400;
    font-size: clamp(14px, 3vw, 16px);
!important;
    transition: 0.3s ease;
}


textarea {
    resize: vertical;
    min-height: 268px !important;
    max-height: 368px;
    width: 100%;
    padding: clamp(16px, 3vw, 32px) !important;
    transition: all 0.3s ease-out;
}


.input {
    border: none !important;
    min-height: 50px;
    outline: 1px solid var(--primary);
    border-radius: 8px !important;
    padding: 16px;

    color: var(--primary);

    transition: 0.3s ease;

    &:hover, &:focus {
        border: none !important;
        transition: 0.3s ease;
    }

    &:hover {
        outline: 1px solid var(--secondary);
    }

    &:focus {
        outline: 1px solid var(--secondary) !important;

    }

    &::placeholder {
        color: var(--placeholder) !important;
        font-weight: 500 !important;
    }
}

.input-alt-theme {
    border: none !important;
    min-height: 50px;
    background: white !important;
    outline: 1px solid var(--tertiary);
    border-radius: 8px !important;
    padding: 16px;

    transition: 0.3s ease;

    &:hover, &:focus {
        border: none !important;
        transition: 0.3s ease;
    }

    &:hover {
        outline: 2px solid var(--tertiary);
    }

    &:focus {
        outline: 2px solid var(--tertiary) !important;
    }

    &::placeholder {
        color: var(--placeholder-alt) !important;
        font-weight: 500 !important;
    }
}



#popup-form .close {
    min-width: 160px;
}

.important {
    font-size: 12px;
    font-weight: 200;
    color: var(--error);
}

.optional {
    font-size: 12px;
    font-weight: 200;
}

.form-field {
    display: flex;
    flex: auto;
    flex-flow: column;
    min-width: 280px;
    gap: 8px;
}

.field-group {
    display: flex;
    flex-flow: wrap;
    gap: 16px;
}

@media only screen and (max-width: 940px) {
    main {
        gap: 48px;
    }
}


/* TODO: REFACTOR CSS */

.section-style {
    gap: clamp(16px, 2vw, 24px);
    display: flex;
    flex-direction: column;
}

.title-style {
    padding-left: 48px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.title-text-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}


@media only screen and (max-width: 940px) {
    .title-style {
        padding-left: 16px;
    }
}


.button {
    border: none !important;
    min-height: 60px;
    position: relative;
    outline: 2px solid transparent;
    padding: 0;
    box-shadow: 0 0 0 0 transparent;
    transition: all 0.3s ease !important;

    & svg.highlight-icon path {
        transition: 0.3s ease;
    }

    &:hover, &:active/*, &:focus*/ {
        border: none !important;
        outline: 2px solid var(--outline-dealer);
        background: var(--surface);

        backface-visibility: hidden;

        transition: all 0.3s ease !important;

        & svg {
            filter: none !important;
        }

        & svg.highlight-icon path {
            fill: var(--primary);
            transition: 0.3s ease;
        }

        & span:not(.stable-text) {
            color: var(--primary);
            font-weight: 500;
        }

        & #inner-button {
            outline: 2px solid var(--outline-dealer);
        }
    }

    &.disable {
        cursor: default;

        &:hover, &:active {
            & span, label {
                color: var(--on-surface-variant) !important;
                font-weight: 400 !important;
            }

            & #inner-button {
                outline: 2px solid transparent;
                box-shadow: 0 0 0 0 transparent !important;
            }
        }
    }
}

.icon.rotated {
    transform: scaleY(-1) !important;
    transition: 0.3s ease;
}

.button:not(.sub-card) {
    background: var(--surface);
}

.popup-background {
    display: flex;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-overlay);
    backdrop-filter: blur(var(--blur));
    /*justify-content: center;*/
    align-items: center;
    flex-direction: column;
    gap: 56px;
    overflow-y: scroll;
    padding: 48px clamp(16px, 3vw, 64px) 0;
    justify-content: start;

    /* Initial state (hidden) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.popup-background.active {
    opacity: 1;
    visibility: visible;
}

#carousel {
    /*display: none;*/
}

.hide-scrollbar, #carousel {
    scrollbar-gutter: stable !important;
    & > div, > button, > a {
        margin-bottom: -2px;
    }
}

/* Hide scrollbar buttons (arrows) */
::-webkit-scrollbar-button {
    display: none;
}

/* Customize the scrollbar width */
::-webkit-scrollbar {
    width: 8px; /* Adjust width for a slim scrollbar */
    height: 2px; /* For horizontal scrollbars */
}

/* Scrollbar track (background) */
::-webkit-scrollbar-track {
    background: transparent; /* Make it blend into the background */
    margin-left: 48px;
    margin-right: 48px;
}

/* Scrollbar thumb (draggable part) */
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* Subtle visibility */
    border-radius: 3px; /* Rounded corners */
    transition: .3s ease !important;
}

/* Hide scrollbar when not in use */
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
    background: rgba(0, 0, 0, 0.6);
    transition: .3s ease !important;
}

.logo-icon {
    width: 360px;
    height: 70px;
}

.button {
    & svg.menu-icon {
        max-width: fit-content;
        max-height: 30px;

        & path {
            color: var(--on-surface-variant);
            fill: transparent;
            transition: 0.3s ease;
        }
    }

    &:hover svg.menu-icon {
        & path {
            fill: color-mix(in srgb, var(--primary) 8%, transparent);
            stroke: var(--on-primary-container);
            transition: 0.3s ease;
        }
    }
}

.loading {
    display: none;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    transition: opacity 0.3s ease-out;
}

/* Loading Screen */
#loading-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 9999;
    font-family: sans-serif;
}


.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */
}


.sidebar-wrapper {
    container-type: inline-size; /* Enable container queries */
    flex: 1 !important;
}


.selected:not(.custom-option) {
    outline: 2px solid var(--outline-dealer);
    background: var(--primary-container) !important;

    & svg path {
        fill: var(--primary);
    }

    & p, span {
        font-weight: 600;
        color: var(--primary);
    }
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.sticky {
    position: sticky;
    top: 132px;
    align-self: end;
    overflow: auto;
    max-height: 76vh;

    margin: -4px;
    padding: 4px;

    border-radius: 48px;
}

@container (min-width: 361px) {
    .sticky {
        position: relative;
        top: 0;
    }
}

select.button {
    background-image: url("https://auto.spektr.ca/wp-content/uploads/2025/03/GeneralDown.svg") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 24px) !important;
    background-position-y: center !important;
    background-size: 24px !important;
    padding: 8px 24px;
}

select.input {
    background-image: url("https://auto.spektr.ca/wp-content/uploads/2025/03/GeneralDown.svg") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 16px) !important;
    background-position-y: center !important;
    background-size: 24px !important;
}

/* Product Card */

.product-card {
    overflow: clip !important;
    padding: 0 !important;
    min-height: fit-content;
    display: flex;
    flex: 1;

    &:hover p:first-of-type {
        color: var(--primary);
        font-weight: 500;
    }

    & div#product-info {
        display: flex;
        flex: 1;
        flex-direction: column;

        & #product-text p, #product-text label {
            padding: 0 16px;
        }

        & p#title {
            max-width: clamp(220px, 3vw, 260px);
            font-weight: 400;
            padding-bottom: 4px;
        }

        justify-content: space-between;
    }

    & img {
        width: 100%;

        object-fit: cover;
        border-radius: 8px;
        aspect-ratio: 1;
        height: auto;
    }

    & .card-button {
        width: calc(100% - 16px);
        margin: 0 8px 8px 8px;
    }
}

.separator {
    width: 100%;
    height: 1px;
    min-width: 25px;
    border-radius: 99px;
    background: var(--tertiary);
}