@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url("https://use.typekit.net/zwr0dkl.css");


html, body {
    background: transparent !important;
    font-size: 20px;
    line-height: 1.2;
    --color-bg: transparent;
    --color-text: #fff;
    --color-headline: #FFFFFF;
    --color-highlight: #C79388;
    --color-text_on_highlight: #FFFFFF;
    --color-highlight_form_element: #333232;
    --color-icon_line: #C79388;
    --color-icon_fill: #666;
    --color-progressbar_bg: #E3C9C3;
    --color-progressbar_filled: #fefbf4;
    --color-progressbar_empty: #fefbf4;
    --color-grid_lines: #E3C9C3;
    --color-ai_highlight: #FFFFFF;
    --button-border-radius: 999px;
    --button-text-transform: uppercase;
    --border-width: 2px;
    --body-font-family: "Bricolage Grotesque", sans-serif;
    --headings-font-family: "the-seasons", sans-serif;
    --subheadings-font-family: "Bricolage Grotesque", sans-serif;
    --body-font-weight: 400;
    --headings-font-weight: 400;
    --subheadings-font-weight: 700;
}

body.display-iframe {
    background: #000 !important;
}

.smt-q-progressbar {
    background-color: rgba(0,0,0,0.9) !important;
}

@media (min-width: 700px) {
    .smt-q-progressbar {
        background-color: rgba(255,255,255,0.15) !important;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
    }
}

@media (min-width: 700px) {
    h2 {
        font-size: 3em !important;
        line-height: 1.2em !important;
        transition: none !important;
    }

    .smt-q-slide h2 .smt-q-small {
        font-size: 30px !important;
        line-height: 1.2em !important;
    }
}

.smt-q-step-label {
    background: #111 !important;
}

.smt-q-answer.smt-q-checkbox-answer .smt-q-answer-inner::before {
    border-color: #fff !important;
}

.smt-q-open-overlay, .smt-q-start, .smt-q-button-highlight, .smt-q-get-results {
    border: 2px solid #fff !important;
    background: transparent !important;
    color: #fff !important;
}

@property --a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.smt-q-slide .smt-q-start,
.smt-q-slide #smt-q-facescan-start-btn {
    position: relative;
    border-width: 0 !important;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background: conic-gradient(from var(--a) at 17% 50%, #e3b5c6, #E0A349, #4EA3D3, #E2B4E1) !important;
    background: conic-gradient(from var(--a) at 17% 50%, #000, #fff, #000) !important;
	animation: spin-gradient 2s linear infinite !important;
    padding: calc(1rem + 2px) calc(2rem + 2px);
}

.smt-q-slide #smt-q-facescan-skip {
    border-color: rgba(255,255,255,0.25) !important;
}

.smt-q-slide #smt-q-facescan-start-btn::before {
    content: '' !important;
    background: #000 !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: calc(100% - 4px) !important;
    height: calc(100% - 4px) !important;
    border-radius: 999px !important;
    z-index: 0 !important;
}

.smt-q-slide #smt-q-facescan-start-btn .inner {
    position: relative;
    z-index: 1;
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes spin-gradient {
    0% {
        --a:0deg;
    }
   
    
    100% {
        --a:360deg;
    }
}

.smt-q-questionnaire-nav,
.smt-q-questionnaire-nav .smt-q-prev, .smt-q-questionnaire-nav .smt-q-next {
    background-color: transparent !important;
}


.smt-q-answer.smt-q-selected::before {
    /* background: conic-gradient(from var(--a) at 50% 50%, #e3b5c6, #E0A349, #4EA3D3, #E2B4E1) !important; */
    background-color: #fff !important;
	/* animation: spin-gradient 5s linear infinite !important;     */
    opacity: 0.1 !important;
}

.smt-q-slide[data-question-id='haircolor'] .smt-q-image {
    border: 2px solid #fff;
    margin-bottom: 1em;
}

.smt-q-slide[data-question-id='haircolor'] .smt-q-selected .smt-q-image {
    box-shadow: 0 0 2em rgba(255,255,255,0.2)
}

.smt-q-product-data .smt-q-buttons * {
    pointer-events: none !important;
}

.smt-q-selected.smt-q-ai-selection::after {
    background-color: #eec04b !important;
}