/*!
Theme Name: Ohio-Child
Theme URI: http://ohio.colabr.io/
Author: Colabrio
Author URI: http://colabr.io/
Description: Ohio is a WordPress theme bundled with premium plugins to build a modern and functional website.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ohio
Text Domain: ohio-child
Tags: ajax, customizer, ecommerce, portfolio, minimal, page builder, responsive, multipurpose, shop, store, woocommerce, wpml

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/


/* =============================================
   ESTILOS GENERALES Y ESTRUCTURA PRINCIPAL
   ============================================= */

/* ===== CURRENCY ===== */
/* Currency selector */
.currency-selector {
    display: inline-block;
    position: relative;
    margin-right: 0;
}

#currency-selector {
    background-color: var(--clb-fill-color);
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    appearance: none;
    padding: 4px 10px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px;
    cursor: pointer;
    border-radius: 999px;
    width: auto;
    min-width: 68px;
    max-width: 85px;
    text-align: center;
    text-overflow: unset;
    overflow: visible;
    white-space: nowrap;
}

/* === Estilos para selector de divisas con banderas === */
.custom-currency-selector {
  position: relative;
  display: inline-block;
  width: 70px; /* o incluso 72px si lo ves bien */
  font-family: sans-serif;
}

.selected-option {
  display: flex;
  align-items: center;
  font-size: 13px;	
  gap: 4px;
  padding: 4px 8px;
  border-radius: 30px;
  cursor: pointer;
  border: none;
  transition: background-color var(--clb-transition-function) var(--clb-transition-duration);	
}

.currency-flag {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
}

.options-container {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 4px 0;
  z-index: 9999;
  border: none;
  border-radius: 8px;
  margin-top: 4px;
  display: none;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Estilo de cada opción en el menú */
.currency-option {
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease;
}

/* Aseguramos que el texto no se corte y se vea bien */
.currency-option span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== LIGHT MODE (por defecto) ===== */
body:not(.dark-scheme) .selected-option {
  background-color: #f6f6f6;
  color: #666;
}

body:not(.dark-scheme) .options-container {
  background: #f6f6f6;
  color: #333;
}

body:not(.dark-scheme) .currency-option {
  color: #333;
}

body:not(.dark-scheme) .currency-option:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #000;
}

/* ===== DARK MODE ===== */
.dark-scheme .selected-option {
  background-color: #1e1e1e; /* mismo tono que el header en oscuro */
  color: #f1f1f1;
}

.dark-scheme .options-container {
  background: #1e1e1e; /* igual que menú hamburguer */
  color: #f1f1f1;
}

.dark-scheme .currency-option {
  color: #f1f1f1;
}

.dark-scheme .currency-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}


/* ===== [MANTÉN ESTO SIN CAMBIOS - INICIO] ===== */
/* Animación de puntos suspensivos (dejar igual) */
.precio-vuelo.loading::after {
  content: "...";
  animation: dots 1s steps(5, end) infinite;
  display: inline-block;
  margin-left: 4px;
  color: #333;
}

@keyframes dots {
  0% { content: "."; }
  25% { content: ".."; }
  50% { content: "..."; }
  75% { content: ""; }
  100% { content: "."; }
}
/* ===== [MANTÉN ESTO SIN CAMBIOS - FIN] ===== */


/* ===== [TOOLTIPS] ===== */
/* Contenedor principal */
.precio-vuelo-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    font-size: 14px !important;
    font-weight: normal !important;
    color: #FF5E3A !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    overflow: visible !important;
    z-index: 20 !important;
}

.precio-vuelo-link:hover {
    color: #e04d2f !important;
}

/* Tooltip - Versión corregida */
.vuelo-tooltip {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #333 !important;
    color: white !important;
    padding: 6px 10px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    z-index: 100 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease-out !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16) !important;
    text-align: center !important;
}

/* Estados visibles */
.precio-vuelo-link:hover .vuelo-tooltip,
.precio-vuelo-link.mostrar-tooltip .vuelo-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Logo aerolínea */
.logo-aerolinea-tooltip {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
}

/* Mostrar tooltip en hover o móviles con clase especial */
.precio-vuelo-link:hover .vuelo-tooltip,
.precio-vuelo-link.mostrar-tooltip .vuelo-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Logo dentro del tooltip */
.logo-aerolinea-tooltip {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
  vertical-align: middle;
}

/* OCULTAR ICONO PARA VUELOS IDA Y VUELTA */
.precio-vuelo-link[data-tipo-vuelo="ida_vuelta"] .logo-aerolinea-tooltip {
    display: none !important;
}

/* AJUSTAR ESPACIADO CUANDO NO HAY ICONO */
.precio-vuelo-link[data-tipo-vuelo="ida_vuelta"] .vuelo-tooltip {
    gap: 0 !important;
    padding: 6px 12px !important;
}


/* ===== TOOLTIP MÓVIL - VERSIÓN CORREGIDA ===== */

@media (max-width: 768px) {
  .vuelo-tooltip {
    display: flex !important;
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #333 !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    z-index: 100 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    max-width: 90vw !important;
    width: auto !important;
    white-space: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: auto !important;
  }

  /* Contenedor del contenido del tooltip - SIMPLIFICADO */
  .contenido-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100%;
  }

  /* Estilos para el icono del avión - MEJOR ALINEADO */
  .vuelo-tooltip img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Estilo para el texto de fecha - MEJOR ALINEADO */
  .vuelo-tooltip .texto-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  /* Estado visible */
  .precio-vuelo-link:hover .vuelo-tooltip,
  .precio-vuelo-link.mostrar-tooltip .vuelo-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* CORRECCIÓN PARA IDA Y VUELTA EN MÓVIL - CENTRADO PERFECTO */
  .precio-vuelo-link[data-tipo-vuelo="ida_vuelta"] .vuelo-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    gap: 0 !important;
  }

  .precio-vuelo-link[data-tipo-vuelo="ida_vuelta"] .texto-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* CORRECCIÓN PARA SOLO IDA EN MÓVIL - MEJOR ALINEACIÓN */
  .precio-vuelo-link[data-tipo-vuelo="solo_ida"] .vuelo-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
  }

  .precio-vuelo-link[data-tipo-vuelo="solo_ida"] .contenido-tooltip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* Para pantallas muy pequeñas */
  @media (max-width: 360px) {
    .vuelo-tooltip {
      padding: 6px 10px !important;
      font-size: 11px !important;
      max-width: 85vw !important;
    }
    
    .vuelo-tooltip img {
      width: 14px !important;
      height: 14px !important;
    }
    
    .precio-vuelo-link[data-tipo-vuelo="ida_vuelta"] .vuelo-tooltip {
      padding: 6px 12px !important;
    }
  }
}


/* ===== ICONOS ENCABEZADO ===== */

/* === Estilos base para cualquier encabezado que sea una variante de icono === */
.directo-icon .elementor-heading-title,
.escalas-icon .elementor-heading-title,
.ida-vuelta-icon .elementor-heading-title,
.regionales-icon .elementor-heading-title,
.tradicional-icon .elementor-heading-title,
.lowcost-icon .elementor-heading-title {  /* <--- agregá cada nueva variante */
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  line-height: 1;
  white-space: nowrap;
  position: relative;
}

/* --- Pseudo-elemento común para todas las variantes --- */
.directo-icon .elementor-heading-title::before,
.escalas-icon .elementor-heading-title::before,
.ida-vuelta-icon .elementor-heading-title::before,
.regionales-icon .elementor-heading-title::before,
.tradicional-icon .elementor-heading-title::before,
.lowcost-icon .elementor-heading-title::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: brightness(0) invert(1); /* Ícono blanco */
}

/* --- Íconos por variante --- */
.directo-icon .elementor-heading-title::before {
  background-image: url("/wp-content/uploads/2025/02/directo.svg");
}

.escalas-icon .elementor-heading-title::before {
  background-image: url("/wp-content/uploads/2025/02/escalas.svg");
}

.ida-vuelta-icon .elementor-heading-title::before {
  background-image: url("/wp-content/uploads/2025/02/ida-y-vuelta.svg");
}

.regionales-icon .elementor-heading-title::before {
  background-image: url("/wp-content/uploads/2025/02/top-regiones.svg");
}

.tradicional-icon .elementor-heading-title::before {
  background-image: url("/wp-content/uploads/2025/02/tradicionales.svg");
}

.lowcost-icon .elementor-heading-title::before {
  background-image: url("/wp-content/uploads/2025/02/lc.svg");
}


/* Alinea el icono con el texto del menú */
.menu-link .menu-icon {
  display: inline-block;
  vertical-align: middle;
  height: 1em;        /* escala con la altura de la fuente */
  margin-right: 0.3em; /* espacio entre icono y texto */
}

/* Corrige disposición del icono y texto en el enlace "Ofertas" */
a.menu-link.main-menu-link.item-title > span {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35em;
  text-align: left !important;
  vertical-align: middle;
}

/* Ajustes del icono */
a.menu-link.main-menu-link.item-title > span > .menu-icon {
  height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}