/* ===================== VARIABLES ===================== */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap'); :root { --primary: #827196; --secondary: #FEBD37;--darker-primary:#61617C; --primary-font-family: 'Jost', sans-serif; --mask-background-color: rgba(0, 0, 0, 0.4); --placeholder: var(--gray); --white: #ffffff; --gray: #E9E9ED; --silver: #F4F4F6; --black: #000000; --green: #006300; --red: #bd0000;--orange: #F04923; --blue: #387bbe; --inbound-price: var(--primary); --outbound-price: var(--black); --yellow: #facc15;}
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;justify-content: center; color: var(--white); background-color: var(--primary); border: 1px solid var(--primary); }
.primary-button.active,
.primary-button:hover { color: var(--primary); background-color: var(--white); }
.primary-button:hover svg path { fill: var(--primary); stroke: 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: flex; color: var(--primary); background-color: var(--white); border: 1px solid var(--primary); }
.primary-button.inverted.active,
.primary-button.inverted:hover { color: var(--white); background-color: var(--primary); }
.primary-button.inverted:hover svg path { fill: var(--white); stroke: var(--white); }
.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;
  justify-content: center;  
  color: var(--white); 
  /* Added gradient background */
  background-image: linear-gradient(135deg, var(--orange), var(--secondary)); 
  border: 1px solid var(--orange); 
}

.secondary-button.active,
.secondary-button:hover { 
  color: var(--secondary); 
  background-image: none;
  background-color: var(--white); 
  border-color: var(--secondary);
}

.secondary-button:hover svg path { 
  fill: var(--secondary); 
  stroke: var(--secondary); 
}

.secondary-button.active .button-loader { 
  color: var(--secondary); 
  stroke-linecap: round; 
}
.secondary-button.active .button-loader .path { 
  stroke: var(--secondary); 
}

/* Inverted State */
.secondary-button.inverted { 
  display: flex; 
  color: var(--darker-primary); 
  background-image: none;
  background-color: var(--secondary); 
  border: 1px solid var(--secondary); 
}

.secondary-button.inverted.active,
.secondary-button.inverted:hover { 
  color: var(--white); 
  /* Inverted hover gets the gradient background */
  background-image: linear-gradient(135deg, var(--orange), var(--secondary)); 
  border-color: var(--orange);
}

.secondary-button.inverted:hover svg path { 
  /* Icons change to match the gradient tone on hover */
  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(--secondary);
}
/* ===================== 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: 8px; height: 8px;opacity: 0.3; background-color: var(--orange); border-radius: 50%; transition: background-color 0.3s ease, transform 0.3s ease; }
.slick-dots li.slick-active button:before { background-color: var(--orange); width: 25px; border-radius: 20px; opacity: 1;}
/* ===================== 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(--black);border-radius:50%;border: 2px solid var(--black);box-shadow: none;}
input[type="range"]::-moz-range-thumb{-webkit-appearance:none;pointer-events:all;width:24px;height:24px;background-color:var(--black);border-radius:50%;border: 2px solid var(--primary);box-shadow: none;}
input[type="range"]::-webkit-slider-thumb:hover{background:#f7f7f7;}
input[type="range"]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px var(--black),0 0 9px var(--black);-webkit-box-shadow:inset 0 0 3px var(--black),0 0 9px var(--black)}
input[type='range'] { -webkit-appearance: none; appearance: none; height: 4px; 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(--white) !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: 70vh;max-height: fit-content; 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: transparent; 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 ===================== */
#product-descriptions table { width: 100% !important; border: solid 1px var(--gray); font-size: 0.9em; }
#product-descriptions table tr { border: solid 1px var(--gray); }
#product-descriptions table th { border-bottom: 2px solid var(--gray); }
#product-descriptions table td { padding: 5px; }
#product-descriptions table tr td:last-child { text-align: left; min-width: 150px; font-weight: bold; }

#page_content p {
  margin-bottom: 4px;
}
 
.hover-ripple {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: transparent;
  /* Transitions the text color smoothly */
  transition: color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.hover-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  background-color: transparent;
}

/* Hover Active State */
.hover-ripple:hover {
  background-color: #ffffff;
  color: var(--primary);
  /* Gentle delay on the main white background fade to let the ripple breathe */
  transition: background-color 0.4s ease 0.15s, color 0.4s ease;
}

.hover-ripple:hover::before {
  animation: smoothRipple 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hover-ripple {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: transparent;
  /* Handles smooth background and text transition when mouse leaves */
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350%;
  height: 350%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  /* Trigger the "OUT" animation when NOT hovered */
  animation: smoothRippleOut 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* --- HOVER IN STATES --- */
.hover-ripple:hover {
  background-color: #ffffff;
  color: var(--primary);
  transition: background-color 0.4s ease 0.15s, color 0.4s ease;
}

.hover-ripple:hover::before {
  /* Trigger the "IN" animation when hovered */
  animation: smoothRippleIn 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Ensure text handles both ways smoothly */
.hover-ripple h3,
.hover-ripple p {
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-ripple:hover h3,
.hover-ripple:hover p {
  color: var(--primary) !important;
}


/* --- THE TIMELINE KEYFRAMES --- */

/* Hover In: Transparent -> Primary (at 30%) -> White (at 100%) */
@keyframes smoothRippleIn {
  0% {
    width: 0;
    height: 0;
    background-color: var(--primary);
    opacity: 0.3;
  }
  25% {
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    opacity: 1;
  }
  100% {
    width: 350%;
    height: 350%;
    background-color: #ffffff;
    opacity: 1;
  }
}

/* Hover Out: White -> Primary (at 40%) -> Transparent (at 100%) */
@keyframes smoothRippleOut {
  0% {
    width: 350%;
    height: 350%;
    background-color: #ffffff;
    opacity: 1;
  }
  40% {
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    opacity: 1;
  }
  100% {
    width: 0;
    height: 0;
    background-color: var(--primary);
    opacity: 0;
  }
}