/* ============================================================
   Any Extra Taxi - Estilos personalizados
   (equivale al <style> de index.html + estilos dinámicos de Navbar.tsx)
   El estado de scroll se marca con la clase "scrolled" en <body>
   ============================================================ */

/* Ocultar scrollbar pero permitir scroll */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

/* Barra de scroll personalizada moderna */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #3e6ae1 #171a20;
}
.custom-scrollbar::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #171a20;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #3e6ae1;
  border-radius: 10px;
  transition: background 0.3s ease;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
  cursor: grab;
}

.snap-x {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.snap-center {
  scroll-snap-align: center;
}

.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* ============================================================
   Estilos para el Widget de Linguise
   (padding/márgenes según estado de scroll, como en Navbar.tsx)
   ============================================================ */

/* Estilos del contenedor popup */
.linguise_switcher .linguise_switcher_popup {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  padding: 12px 1px !important;
  transition: padding 0.3s ease !important;
}

body.scrolled .linguise_switcher .linguise_switcher_popup {
  padding: 5px 1px !important;
}

/* Fondo transparente y bordes eliminados */
.linguise_switcher,
div.linguise_switcher,
ul.linguise_switcher.linguise_switcher_dropdown.linguise_flag_rounded {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 25px !important;
}

/* Ensure the main container is transparent, but not dropdown lists */
.linguise_switcher > div, .linguise_switcher > a {
    background-color: transparent !important;
}

li.linguise_current {
    border-color: transparent !important;
}

#dropdown .linguise_switcher_dropdown li.linguise_current .linguise_current_lang {
    border: transparent !important;
}

/* Ajuste de márgenes y espaciado del nombre del idioma y la flecha */
.linguise_switcher span.linguise_language_icon+.linguise_lang_name {
    margin-left: 10px;
    word-break: keep-all;
    overflow-wrap: normal;
    margin-right: 5px !important;
}

/* Flecha (Caret) en color blanco */
.linguise_switcher .lccaret svg,
.linguise_switcher .lccaret svg path {
    fill: white !important;
}

/* Lógica de Márgenes para PC y Tablet (>= 768px) */
/* Transparente: 15px | Negro (Scroll): 5px */
@media (min-width: 768px) {
    ul.linguise_switcher.linguise_switcher_dropdown.linguise_flag_rounded {
        margin-top: 15px !important;
        margin-right: 90px !important;
        transition: all 0.3s ease !important;
    }
    body.scrolled ul.linguise_switcher.linguise_switcher_dropdown.linguise_flag_rounded {
        margin-top: 5px !important;
    }
}

/* Lógica de Márgenes para Móvil (< 768px) */
/* Transparente: 3px | Negro (Scroll): -5px */
@media (max-width: 767px) {
    ul.linguise_switcher.linguise_switcher_dropdown.linguise_flag_rounded {
        margin-top: 3px !important;
        transition: all 0.3s ease !important;
    }
    body.scrolled ul.linguise_switcher.linguise_switcher_dropdown.linguise_flag_rounded {
        margin-top: -5px !important;
    }
}
