/* configurator */
.inim-component.configurator { margin: 2rem 1rem; padding:0; overflow: hidden; }
.inim-component.configurator .wizard-steps { padding:0 10rem; width: 100%; max-width: 1280px; margin: 0 auto; height:0rem; overflow:hidden; display: flex; align-items: flex-start; position: relative; transition: all .3s; }
.inim-component.configurator .wizard-steps:not(.intro-phase) { height:5rem; margin-bottom:2rem; }
.inim-component.configurator .wizard-steps::before { width: 32%; height:1px; content:""; background: rgb(var(--gray-2)); position:absolute; z-index: -1; right:50%; top:12px; transition: all .3s; }
.inim-component.configurator .wizard-steps::after { width: 32%; height:1px; content:""; background: rgb(var(--gray-2)); position:absolute; z-index: -1; left:50%; top:12px; transition: all .3s; }
.inim-component.configurator .wizard-steps.second-phase::before, .inim-component.configurator .wizard-steps.third-phase::before { background:rgb(var(--accent));}
.inim-component.configurator .wizard-steps.third-phase::after { background:rgb(var(--accent));}
.inim-component.configurator .wizard-steps > div { flex: 0 0 10rem; display: flex; flex-direction: column; gap:.5rem; justify-content: center; align-items: center; z-index:10; margin: 0 auto; }
.inim-component.configurator .wizard-steps > div:first-child { margin-left: 0; }
.inim-component.configurator .wizard-steps > div:last-child { margin-right: 0; }
.inim-component.configurator .wizard-steps > div > div:first-child { width:1.5rem; height:1.5rem; position:relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background:rgb(var(--white)); border:2px solid rgb(var(--white)); }
.inim-component.configurator .wizard-steps > div.current > div:first-child { border-color:rgb(var(--accent)); }
.inim-component.configurator .wizard-steps > div.passed > div:first-child { border:0; }
.inim-component.configurator .wizard-steps > div > div:first-child::before { content:""; background: rgb(var(--gray-2)); width:1rem; height:1rem; border-radius: 50%; }
.inim-component.configurator .wizard-steps > div.current > div:first-child::before { background: rgb(var(--accent)); }
.inim-component.configurator .wizard-steps > div > div:first-child i { display: flex; opacity:0; transition: all .3s; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:1.5rem; height:1.5rem; background: rgb(var(--accent));  color: white; font-size: 1rem; align-items: center; justify-content: center; }
.inim-component.configurator .wizard-steps > div.passed > div:first-child i { opacity: 1; }
.inim-component.configurator .wizard-steps > div > div:last-child { font-family:var(--font-headings); font-size:0.875rem; letter-spacing:0.06em; font-weight:bold; line-height:0.875rem; text-transform:uppercase; text-align:center; }
.inim-component.configurator .wizard-steps > div.current > div:last-child,
.inim-component.configurator .wizard-steps > div.passed > div:last-child { color:rgb(var(--accent)); }
.inim-component.configurator form { display: flex; align-items: flex-start; flex-wrap: nowrap; gap:0; }
.inim-component.configurator .configurator-step { flex:0 0 auto; }
.inim-component.configurator .configurator-step .slide-select { display:none; }
.inim-component.configurator .configurator-step.intro-phase { display:inline-block; }
.inim-component.configurator .configurator-step.intro-phase h2 { margin-top: 2rem; margin-bottom: 2rem; }
.inim-component.configurator .configurator-step ul { list-style: none; padding:0; margin:0; }
.inim-component.configurator .configurator-step.intro-phase ul li { display:flex; align-items: center; margin-bottom:1rem; gap:2rem; }
.inim-component.configurator .configurator-step ul .configurator-intro-icon { width:5rem; flex: 0 0 auto; }
.inim-component.configurator .configurator-step.first-phase ul { display:flex; gap:2rem; align-items: flex-start; justify-content: center; flex-wrap: nowrap; margin-top: 2rem; }
.inim-component.configurator .configurator-step.first-phase ul li { flex: 0 0 18rem; height: 16rem; border: 1px solid rgb(var(--gray-1)); border-radius:20px; padding:2rem 2rem; background:rgb(var(--white)); display: flex; flex-direction: column; align-items: center; gap:2rem; }
.inim-component.configurator .configurator-step.first-phase ul li.radio-button { padding:0; }
.inim-component.configurator .configurator-step.first-phase ul li > label { display: flex; flex-direction: column; align-items: center; gap:2rem; width:100%; height:100%; padding:2rem 2rem; }
.inim-component.configurator .configurator-step.first-phase ul li.radio-button > label { cursor:pointer; }
.inim-component.configurator .configurator-step.first-phase ul li .configurator-choices-icon { min-height:3rem; }
.inim-component.configurator .configurator-step.first-phase ul li .configurator-choices-icon img { height:5rem; }
.inim-component.configurator .configurator-step.first-phase ul li .configurator-choices-text,
.inim-component.configurator .configurator-step.first-phase ul li .configurator-choices-box label { font-family:var(--font-headings); font-size:0.875rem; letter-spacing:0.06em; font-weight:bold; line-height:0.875rem; text-transform:uppercase; display: flex; gap: 0.5rem; align-items: center; }
.inim-component.configurator .configurator-step.first-phase ul li .configurator-choices-box { display:flex; gap:1.5rem; }
.inim-component.configurator .configurator-step.first-phase ul li .configurator-choices-box a { padding:0.5rem; font-size:1.5rem; }
.inim-component.configurator .configurator-navigation { margin-top: 2rem; width:100%; display: flex; gap:2rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.inim-component.configurator .intro-phase .configurator-navigation { justify-content: flex-start; }
.inim-component.configurator :not(.intro-phase) .configurator-navigation a { width:14rem; }
.inim-component.configurator :not(.intro-phase) .configurator-navigation a.disabled { opacity:.65; cursor: default; }
.inim-component.configurator .second-phase .product-list ul {  padding:0; width:100%; }
.inim-component.configurator .second-phase .product-list .featured-products,
.inim-component.configurator .second-phase .product-list .other-products { margin:5rem 0; }
.inim-component.configurator .second-phase .product-list .featured-products ul { margin:5rem auto; width:40rem; }
.inim-component.configurator .second-phase .product-list .other-products ul { margin:3rem auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; row-gap: 3rem; }
.inim-component.configurator .second-phase .product-list li { display:flex; align-items: center; gap:2rem; }
.inim-component.configurator .second-phase .product-list li .product-image { width:12rem; height:12rem; border-radius:10px; flex:0 0 auto; overflow:hidden; display: flex; justify-content: center; align-items: center; border:1px solid rgb(var(--gray-1)); background-color:rgb(var(--gray-light-background)); }
.inim-component.configurator .second-phase .product-list li .product-image img { height: 100%; max-width: none; min-width: 100%; width: auto; flex: 0 0 auto; }
.inim-component.configurator .second-phase .product-list .other-products li .product-image { width:10rem; height:10rem; }
.inim-component.configurator .second-phase .product-list li .product-content * { text-align:left; }
.inim-component.configurator .second-phase .product-list li .product-checkbox { width:3rem; height:2rem; display: inline-block; }
.inim-component.configurator .third-phase .user-data-input { display:flex; gap:2rem; margin:5rem 0; flex-wrap: wrap; }
.inim-component.configurator .third-phase .user-data-input > div { flex: 1 0 25rem; }
.inim-component.configurator .third-phase .user-data-input > div label { text-align: left; font-size:.875rem; }
.inim-component.configurator .third-phase .user-data-input > div input[type=text],
.inim-component.configurator .third-phase .user-data-input > div input[type=email],
.inim-component.configurator .third-phase .user-data-input > div input[type=tel] { width:100%; margin-top:.5rem; border:1px solid rgb(var(--gray-3)); border-radius: .5rem; padding:0.5rem 1rem; font-family:var(--font-headings); font-size:1rem; line-height: 2rem; text-align: left; }
.inim-component.configurator .third-phase .user-data-input > div input[type=text]::placeholder,
.inim-component.configurator .third-phase .user-data-input > div input[type=email]::placeholder,
.inim-component.configurator .third-phase .user-data-input > div input[type=tel]::placeholder { color:rgb(var(--gray-2)); }
.inim-component.configurator .third-phase .user-data-input > div input[type=text].input-error,
.inim-component.configurator .third-phase .user-data-input > div input[type=email].input-error,
.inim-component.configurator .third-phase .user-data-input > div input[type=tel].input-error { border-color:rgb(var(--red)); }
.inim-component.configurator .conf-checkbox label { text-align: left; display: block; position: relative; padding-left: 2.5rem; margin-bottom: 1rem; font-family:var(--font-headings); font-size:0.875rem; line-height:1.5rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.inim-component.configurator .conf-checkbox input[type=checkbox] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.inim-component.configurator .conf-checkbox label .checkmark { position: absolute; top: 0; left: 0; height: 24px; width: 24px; border-radius: 0.25rem; border: 1px solid rgb(var(--gray-1)); }
.inim-component.configurator .conf-checkbox label input[type=checkbox]:checked ~ .checkmark { background-color: rgb(var(--accent)); border-color: rgb(var(--accent)); }
.inim-component.configurator .conf-checkbox label input[type=checkbox].input-error ~ .checkmark { border-color: rgb(var(--red)); }
.inim-component.configurator .conf-checkbox label .checkmark::after { content: ""; position: absolute; display: none; left: 8px; top: 4px; width: 7px; height: 12px; border: solid rgb(var(--white)); border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.inim-component.configurator .conf-checkbox label input[type=checkbox]:checked ~ .checkmark::after { display:block; }
.inim-component.configurator .last-phase * { text-align:center; }
.inim-component.configurator .last-phase img { width:auto; display:inline-block; margin:2rem 0; }
.inim-component.configurator .last-phase .configurator-navigation a { width:auto; }
.inim-component.configurator .medium-text { font-size: 1.25rem; line-height:2rem; font-weight: normal; color:rgb(var(--gray-0)); }
.inim-component.configurator .large-text { font-size: 1.625rem; line-height:2.5rem; font-weight: normal; color:rgb(var(--gray-0)); font-family: var(--font-headings); }


/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) {
    .inim-component.configurator { margin-top: 5rem; margin-bottom:5rem; }
}

/* Large devices (laptops/desktops, 992px and up) */
@media (min-width: 992px) {
    .inim-component.configurator .configurator-step.intro-phase h2 { margin-top: 5rem; margin-bottom: 3rem; }
    .inim-component.configurator .configurator-navigation { margin-top: 5rem; }
    .inim-component.configurator .configurator-step .wrapped { padding-left: 12rem; padding-right: 12rem; max-width: var(--content-width); margin-left: auto; margin-right: auto; }
    .inim-component.configurator .configurator-step.first-phase * { text-align:center }
    .inim-component.configurator .configurator-step.first-phase ul { display:flex; gap:2rem; align-items: flex-start; justify-content: center; flex-wrap: nowrap; margin-top: 5rem; }
}