/* ===================== VARIABLES ===================== */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;700&family=Montserrat:wght@400&display=swap");:root {--primary:#E80202;--secondary:#282828;--primary-font-family:"Jost",serif;--mask-background-color:rgba(0,0,0,0.4);--placeholder:var(--gray);--white:#ffffff;--gray:#e7e7e7;--silver:#f7f7f7;--black:#000000;--green:#006300;--red:#bd0000;--blue:#387bbe;--inbound-price:var(--primary);--outbound-price:var(--silver)}
html,body{font-family:var(--primary-font-family);}

/* ===================== HEADER ===================== */
#header-categories {white-space:nowrap;}
#header-categories div[type="button"]:hover + div {display:block;left:170px;height:fit-content;}
#header-categories:has(+ div:hover) {display:block;}
/* ===================== BUTTON ===================== */
.button-loader{animation:rotate 2s linear infinite;z-index:2;width:20px;height:20px;display:none;}
button.active,button.active:hover {color:var(--white);background-color:var(--primary);border:1px solid var(--primary);}
button.disabled,.button.disabled,button.disabled:hover, button.disabled.active {background: var(--silver)!important;  color: rgba(0, 0, 0, 0.3)!important; cursor: not-allowed!important;border: var(--black);}
/* primary button */
.primary-button {display:flex;color:var(--white);background-color:var(--primary);border:1px solid var(--primary);}
.primary-button.activе, .primary-button:hover {color:var(--primary);background-color:var(--white);}
.primary-button:hover svg path {fill:var(--white);stroke:var(--white);}
.primary-button.active .button-loader {color:var(--primary);stroke-linecap:round;}
.primary-button.active .button-loader .path {stroke:var(--primary);}
.primary-button.inverted {display:flex;color:var(--primary);background-color:var(--white);border:1px solid var(--primary);}
.primary-button.inverted.activе, .primary-button.inverted:hover {color:var(--white);background-color:var(--primary);}
.primary-button.inverted:hover svg path {fill:var(--primary);stroke:var(--primary);}
.primary-button.inverted.active .button-loader {color:var(--white);stroke-linecap:round;}
.primary-button.inverted.active .button-loader .path {stroke:var(--white);}
/* secondary button  */
.secondary-button {display:flex;color:var(--white);background-color:var(--secondary);border:1px solid var(--secondary);}
.secondary-button.activе,.secondary-button:hover {color:var(--secondary);background-color:var(--white);}
.secondary-button:hover svg path {fill:var(--white);stroke:var(--white);}
.secondary-button.active .button-loader {color:var(--secondary);stroke-linecap:round;}
.secondary-button.active .button-loader .path {stroke:var(--secondary);}
.secondary-button.inverted {display:flex;color:var(--secondary);background-color:var(--white);border:1px solid var(--secondary);}
.secondary-button.inverted.activе,.secondary-button.inverted:hover {color:var(--white);background-color:var(--secondary);}
.secondary-button.inverted:hover svg path {fill:var(--secondary);stroke:var(--secondary);}
.secondary-button.inverted.active .button-loader {color:var(--white);stroke-linecap:round;}
.secondary-button.inverted.active .button-loader .path {stroke:var(--white);}

/* ===================== SLICK ===================== */
.slick-track {display:flex !important;padding-block: 10px;}
.slick-slide {margin:0 10px;height:inherit !important;}
.slick-dots {display:flex !important;flex-wrap:wrap;justify-content:center;align-items:center;list-style:none;padding:0;margin:10px 0 10px 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);}

/* ===================== TABS ===================== */
.tab-button {position:relative;}
.tab-button.active {cursor:not-allowed;font-weight: bold;}
.tab-line-primary.active::before {content:"";background:var(--primary);position:absolute;top:-2.2rem;left:0;width:90%;height:0.5rem;border-radius:10px;}

/* ===================== ANIMATIONS ===================== */
@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; } }

/* ===================== FORM ELEMENTS ===================== */
.range_container { position: relative; display: flex; flex-direction: column; }
.sliders_control { position: relative; min-height: 25px; }
.form_control { position: relative; color: var(--gray); }
.slider-wrapper { position: relative; }
/* Range Inputs */
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: all; width: 24px; height: 24px; background-color: var(--white); 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(--white); border-color: var(--gray); border-radius: 50%; box-shadow: 0 0 0 1px var(--gray); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb:hover { background: var(--silver); }
input[type="range"]::-webkit-slider-thumb:active { box-shadow: inset 0 0 3px var(--blue), 0 0 9px var(--blue); -webkit-box-shadow: inset 0 0 3px var(--blue), 0 0 9px var(--blue); }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 2px; width: 100%; position: absolute; background-color: var(--gray); pointer-events: none; }
#fromSlider { height: 0; z-index: 1; }
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; }
/* Number Inputs */
input[type="number"] { width: 50px; height: 30px; font-size: 20px; border: none; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { opacity: 1; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
/* Checkboxes */
input[type="checkbox"] { accent-color: var(--primary); width: 20px; }

/* ===================== VALIDATION STATES ===================== */
.invalid { border-color: var(--red) !important; }
.valid { border-color: var(--green) !important; }

/* ===================== AUTOCOMPLETE & MENUS ===================== */
.ui-menu { width: 50%; overflow-x: hidden; box-shadow: rgba(0,0,0,0.2) 0px 0px 10px; background-color: var(--black) !important; position: relative; margin-top: 2rem; border-radius: 0.5rem; border-width: 1px; --tw-border-opacity: 1; border-color: var(--black); max-height: 200px; }
.ui-menu .ui-menu-item { padding: 0.5rem; cursor: pointer; }
.ui-menu .ui-menu-item:hover { background-color: var(--white); }
.ui-helper-hidden-accessible { display: none; }
.autocomplete-option.selected { border-color: var(--black); background-color: var(--white); color: var(--black); border-width: 2px; }
.autocomplete-option.selected span { font-weight: bold; }
#search-autocomplete-wrapper { position: absolute; top: 100%; background-color: var(--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(--black); }
.autocomplete-item:hover { background-color: var(--red); color: var(--white); border-color: 1px solid var(--red); }

/* ===================== COMPONENTS ===================== */
.client-address.selected { font-weight: 700; border-width: 2px; }
.variant-select:hover { background-color: var(--primary); border-color: var(--white); color: var(--black); cursor: pointer; }
.variant-select.active { border-color: var(--white); color: var(--black); }
.star { fill: var(--white); stroke: var(--primary); }
.star.active { fill: var(--primary); stroke: var(--primary); }
.index-vendors-carousel img { max-height: 40px; width: auto; }

/* ===================== DECORATIVE & LAYOUT ===================== */
.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; }

/* ===================== TABLES ===================== */
.details table { width: 100% !important; border: solid 1px var(--gray); font-size: 0.9em; }
.details table tr { border: solid 1px var(--gray); }
.details table td { padding: 5px; }
.details table tr td:last-child { text-align: left; min-width: 150px; font-weight: bold; }