@import url(https://fonts.googleapis.com/css2?family=Jost:wght@400;700&family=Montserrat:wght@400&display=swap);

.primary-button.active .button-loader, .secondary-button.active .button-loader { stroke-linecap: round; display: block; color: var(--primary-font-color); }
.form_control, .line-primary, .range_container, .slider-wrapper, .sliders_control, .tab-button, .ui-menu { position: relative; }
.star, .star.active { stroke: var(--primary); }
:root { --primary: #1E2938; --secondary: #FDBF5A; --white: #ffffff; --gray: #e7e7e7; --silver: #f7f7f7; --black: #000000; --green: #006300; --red: #ff0000; --gold: #e8b923; --placeholder: var(--gray); --primary-font-family: "Jost", serif; --primary-font-color: var(--black); --inverted-font-color: #ffffff; --mask-background-color: rgba(0, 0, 0, 0.4); }
html, body { font-family: var(--primary-font-family); }
#header-categories li:last-child a { border-bottom: unset; }
#header-categories { top: 40px; white-space: nowrap; }
#header-categories div[type="button"]:hover + div { display: block; left: 170px; height: fit-content; }
#header-categories:has(+ div:hover) { display: block; }
.primary-button { display: block; color: var(--primary); background-color: var(--white); border: 1px solid var(--primary); }
.primary-button:hover svg path { fill: var(--white); stroke: var(--white); }
.primary-button.active, .primary-button:hover { color: var(--primary); background-color: var(--white); border: 1px solid var(--primary); }
.primary-button.active .button-loader { color: var(--primary); stroke-linecap: round; }
.primary-button.active .button-loader .path { stroke: var(--primary); }
.primary-button.inverted { display: block; color: var(--primary); background-color: var(--white); border: 1px solid var(--primary); }
.primary-button.inverted:hover { color: var(--white); background-color: var(--primary); border: 1px solid var(--white); }
.primary-button.inverted.active { background-color: var(--primary); color: var(--inverted-font-color); border-color: var(--primary); }
.primary-button.inverted.active .button-loader { color: var(--white); stroke-linecap: round; display: block; }
.primary-button.inverted.active .button-loader .path { stroke: var(--white); }
.secondary-button { color: var(--primary-font-color); background-color: var(--secondary); border: 1px solid var(--secondary); }
.secondary-button:hover { color: var(--secondary); background-color: var(--white); border: 1px solid var(--secondary); }
.secondary-button:hover svg path { fill: var(--secondary); stroke: var(--secondary); }
.secondary-button.active { color: var(--secondary); background-color: var(--white); border: 1px solid var(--secondary); }
.secondary-button.active .button-loader { stroke-linecap: round; display: block; color: var(--primary-font-color); }
.secondary-button.active .button-loader .path { stroke: var(--white); }
button { background-color: var(--primary-font-color); color: var(--inverted-font-color); }
button.active { background-color: var(--primary); color: var(--white); }
button.disabled, button.primary-button.disabled { background-color: var(--secondary-background); opacity: 0.6; color: var(--primary-font-color); cursor: not-allowed; border-color: var(--primary-border); }
.button-loader { animation: rotate 2s linear infinite; z-index: 2; width: 20px; height: 20px; display: none; }
@keyframes rotate { 100% { transform: rotate(360deg); } }
@keyframes dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }
.client-address.selected { font-weight: 700; border-width: 2px; }
.ui-menu { width: 50%; overflow-x: hidden; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px; background-color: var(--primary-input) !important; z-index: 60 !important; position: relative; margin-top: 2rem; border-radius: 0.5rem; border-width: 1px; --tw-border-opacity: 1; border-color: var(--primary-border); max-height: 200px; }
.autocomplete-option.selected { border-color: var(--primary-border); background-color: var(--secondary-background); color: var(--primary-font-color); border-width: 2px; }
.autocomplete-option.selected span { font-weight: bold; }
.ui-menu .ui-menu-item { padding: 0.5rem; cursor: pointer; }
.ui-menu .ui-menu-item:hover { background-color: var(--secondary-background); }
.ui-helper-hidden-accessible { display: none; }
.invalid { border-color: var(--red) !important; }
.valid { border-color: var(--green) !important; }
.line-primary { position: relative; margin-bottom: 2rem; }
.line-primary:after { content: ""; background: var(--primary); position: absolute; bottom: -1rem; left: 0; width: 50%; height: 0.4rem; }
.tab-button { position: relative; }
.tab-button.active { font-weight: bold; cursor: not-allowed; }
.tab-line-primary.active::before { content: ""; background: var(--primary); position: absolute; top: -2.2rem; left: 0; width: 90%; height: 0.5rem; border-radius: 10px; }
.variant-select:hover { background-color: var(--primary); border-color: var(--secondary-accent); color: var(--white); cursor: pointer; }
.variant-select.active { border-color: var(--secondary-accent); color: var(--white); }
.range_container { position: relative; display: flex; flex-direction: column; }
.sliders_control { position: relative; min-height: 25px; }
.form_control { position: relative; color: #635a5a; }
.image-attribute.active{border-color: var(--primary);}
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: all; width: 24px; height: 24px; background-color: var(--primary); border-radius: 50%; box-shadow: 0 0 0 1px var(--gray); cursor: pointer; }
input[type="range"]::-moz-range-thumb { -webkit-appearance: none; pointer-events: all; width: 24px; height: 24px; background-color: var(--primary); border-color: var(--secondary-accent); border-radius: 50%; box-shadow: 0 0 0 1px var(--gray); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb:hover { background: #f7f7f7; }
input[type="range"]::-webkit-slider-thumb:active { box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe; -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { opacity: 1; }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 2px; width: 100%; position: absolute; background-color: #c6c6c6; pointer-events: none; }
#fromSlider { height: 0; z-index: 1; }
.slider-wrapper { position: relative; }
input[type="range"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; outline: none; position: absolute; margin: auto; top: 0; bottom: 0; background-color: transparent; pointer-events: none; }
input[type="checkbox"] { accent-color: var(--primary); width: 20px; }
#search-autocomplete-wrapper { position: absolute; top: 100%; background-color: white; z-index: 1000; height: 350px; width: 100%; overflow-y: auto; display: none; }
.autocomplete-item { display: flex; padding: 1rem; gap: 1rem; align-items: center; cursor: pointer; border-bottom: 1px solid var(--border-color); }
.autocomplete-item:hover { background-color: var(--red); color: var(--white); border-color: 1px solid var(--red); }
.star { fill: var(--white); stroke: var(--primary); }
.star.active { fill: var(--primary); stroke: var(--primary); }
.slick-slide { margin: 0 10px; }
.slick-list { margin: 0 10px; padding-bottom: 10px !important; }
.slick-dots { display: flex !important; justify-content: center; align-items: center; list-style: none; padding: 0; margin: 20px 0 0 0; }
.slick-dots li { display: inline-block; margin: 0 8px; }
.slick-dots li button { font-size: 0; border: none; background: transparent; padding: 0; cursor: pointer; }
.slick-dots li button:before { content: ''; display: block; width: 10px; height: 10px; background-color: var(--gray); border-radius: 50%; transition: background-color 0.3s ease, transform 0.3s ease; }
.slick-dots li.slick-active button:before { background-color: var(--primary); transform: scale(1.2); }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }