/*
 Theme Name: Flatsome Child
 Theme URI: https://flatsome3.uxthemes.com/
 Description: Tema hijo personalizado para Tarifa Soul
 Author: UX-Themes + Tarifa Soul
 Author URI: https://uxthemes.com/
 Template: flatsome
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: flatsome-child
*/

/******************************************************************
 * ESTILOS PERSONALIZADOS PARA EL CHECKOUT DE TARIFA SOUL (v. Final)
 ******************************************************************/

/* ===== FONDO GENERAL DE LA PÁGINA DE CHECKOUT ===== */
body.woocommerce-checkout {
  background-color: #F8F5F2 !important;
}

/* ===== TARJETA IZQUIERDA: FORMULARIO DE DETALLES ===== */
body.woocommerce-checkout .large-7.col .col-inner {
  background: #fff !important;
  border: 1px solid #ECECEC !important;
  border-radius: 14px !important;
  padding: 28px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.06) !important;
}

/* ===== TARJETA DERECHA: RESUMEN DEL PEDIDO ===== */
body.woocommerce-checkout .large-5.col .col-inner.is-well {
  background: #fff !important;
  border: 1px solid #ECECEC !important;
  border-radius: 14px !important;
  padding: 28px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.06) !important;
  position: sticky; /* Efecto "pegajoso" al hacer scroll */
  top: 40px;
}

/* ===== ESTILO DE LOS CAMPOS (INPUTS, SELECTS) ===== */
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  border: 1px solid #D8D8D8 !important;
  border-radius: 10px !important;
  padding: 12px !important;
  font-size: 15px !important;
  background: #fff !important;
  transition: box-shadow .15s ease, border-color .15s ease !important;
}

/* Efecto al hacer clic en un campo */
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  border-color: #C76E4E !important;
  box-shadow: 0 0 0 3px rgba(199,110,78,0.15) !important;
  outline: none !important;
}

/* ===== BOTÓN PRINCIPAL DE REALIZAR PEDIDO ===== */
.woocommerce-checkout #place_order {
  background: #C76E4E !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 16px 22px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  width: 100% !important;
  border: none !important;
}

.woocommerce-checkout #place_order:hover {
  filter: brightness(0.92) !important;
}

.woocommerce-checkout #place_order::before {
  content: "🔒 " !important;
  margin-right: 6px !important;
}

/* ===== OTROS AJUSTES Y DETALLES FINALES ===== */

/* Ocultar campo de empresa */
body.woocommerce-checkout #billing_company_field {
  display: none !important;
}

/* Mensajes de cupón, etc. con acento de color */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .checkout_coupon {
  border-radius: 12px !important;
  border-top-color: #C76E4E !important;
}

/* Unificar el color de los enlaces con la marca */
.woocommerce-checkout a:not(.button) {
  color: #C76E4E !important;
}
.woocommerce-checkout a:not(.button):hover {
  color: #a35a3f !important; /* Tono más oscuro al pasar el ratón */
}

/* Suavizar los breadcrumbs para que no destaquen tanto */
.checkout-breadcrumbs.breadcrumbs {
  color: #a79c91 !important; /* Un color gris/arena más suave */
}


/******************************************************************
 * ESTILOS PERSONALIZADOS PARA LA PÁGINA DEL CARRITO DE TARIFA SOUL
 ******************************************************************/

/* ===== DISEÑO GENERAL Y TIPOGRAFÍA ===== */

/* Fondo blanco limpio para la página del carrito */
body.woocommerce-cart {
  background-color: #fff !important;
}

/* Tipografía Serif para los títulos de la página y las secciones */
.woocommerce-cart .cart-title,
.woocommerce-cart .cart-collaterals .cart_totals h2 {
  font-family: "Georgia", "Times New Roman", serif;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 24px;
  letter-spacing: 1.5px;
  color: #4a4a4a;
}

/* Breadcrumbs (pasos del proceso) con estilo refinado */
.woocommerce-cart .woocommerce-breadcrumb {
  font-family: "Georgia", "Times New Roman", serif;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 40px;
}
.woocommerce-cart .woocommerce-breadcrumb a {
  color: #a79c91 !important; /* Color suave para los pasos no activos */
}
.woocommerce-cart .woocommerce-breadcrumb .active {
  color: #4a4a4a !important; /* Color oscuro para el paso activo */
  border-bottom: 2px solid #4a4a4a;
  padding-bottom: 4px;
}
.woocommerce-cart .woocommerce-breadcrumb .divider {
  display: none; /* Ocultar el separador ">" */
}

/* ===== TABLA PRINCIPAL DEL CARRITO ===== */

/* Eliminar bordes y fondos por defecto */
.woocommerce-cart table.shop_table {
  border: none !important;
  background-color: transparent !important;
}

/* Cabecera de la tabla (PRODUCTO, PRECIO, etc.) */
.woocommerce-cart table.shop_table thead {
  border-bottom: 1px solid #e0e0e0;
}
.woocommerce-cart table.shop_table thead th {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: #888;
  border: none !important;
  padding: 15px 0;
}

/* Filas de los productos */
.woocommerce-cart table.shop_table tbody tr {
  border-bottom: 1px solid #e0e0e0;
}
.woocommerce-cart table.shop_table tbody td {
  border: none !important;
  padding-top: 25px;
  padding-bottom: 25px;
}

/* Celda de la imagen del producto */
.woocommerce-cart .product-thumbnail img {
  width: 90px !important;
  height: auto !important;
  border-radius: 8px;
  border: 1px solid #eee;
}

/* Celda del nombre del producto */
.woocommerce-cart .product-name a {
  font-family: "Georgia", "Times New Roman", serif;
  color: #2e2e2e !important;
  font-size: 18px;
  font-weight: normal;
}
.woocommerce-cart .product-name .variation {
  margin-top: 5px;
}
.woocommerce-cart .product-name .variation dt,
.woocommerce-cart .product-name .variation dd {
  font-size: 14px;
  color: #777;
}

/* Celda de eliminar producto (la X) */
.woocommerce-cart .product-remove a.remove {
  color: #ccc !important;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}
.woocommerce-cart .product-remove a.remove:hover {
  background-color: #c76e4e !important;
  color: #fff !important;
  border-color: #c76e4e !important;
}

/* ===== SELECTOR DE CANTIDAD ===== */
.woocommerce-cart .quantity .qty-minus,
.woocommerce-cart .quantity .qty-plus {
  background-color: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #888 !important;
  height: 40px !important;
  width: 40px !important;
}
.woocommerce-cart .quantity input.qty {
  height: 40px !important;
  border-color: #e0e0e0 !important;
  font-weight: bold;
}
.woocommerce-cart .quantity .qty-minus { border-radius: 8px 0 0 8px; }
.woocommerce-cart .quantity .qty-plus { border-radius: 0 8px 8px 0; }

/* ===== TOTALES Y BOTONES ===== */

/* Contenedor de la derecha */
.woocommerce-cart .cart-collaterals {
  border: 1px solid #e0e0e0;
  padding: 30px;
  border-radius: 12px;
}

/* Botones inferiores (Seguir, Actualizar) */
.woocommerce-cart .actions .button {
  height: auto;
  padding: 12px 24px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 14px;
  border-radius: 8px;
  background-color: #9ab890 !important; /* Verde Salvia */
  color: #fff !important;
  border: none !important;
}
.woocommerce-cart .actions .button[name="update_cart"]:hover {
  filter: brightness(0.92);
}

/* Botón "Seguir Comprando" con estilo de contorno */
.woocommerce-cart .actions a.button {
  background-color: #fff !important;
  color: #9ab890 !important;
  border: 2px solid #9ab890 !important;
}
.woocommerce-cart .actions a.button:hover {
  background-color: #9ab890 !important;
  color: #fff !important;
}

/* Botón principal "Finalizar Compra" */
.wc-proceed-to-checkout .checkout-button {
  background: #C76E4E !important; /* Terracota */
  color: #fff !important;
  border-radius: 8px !important;
  padding: 14px 22px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: block;
  width: 100%;
}

/* Sección de Cupón */
.woocommerce-cart .coupon .input-text {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  height: auto;
  padding: 12px;
}
.woocommerce-cart .coupon .button {
  background-color: #f5f5f5 !important;
  color: #888 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  height: auto;
  padding: 12px 24px;
  text-transform: uppercase;
  font-weight: 600;
}
.woocommerce-cart .coupon .button:hover {
  background-color: #e0e0e0 !important;
  color: #333 !important;
}

/* Ocultar "Calcular envío" si no lo necesitas */
.woocommerce-cart .cart-collaterals .shipping-calculator-form {
  display: none;
}

/* --- ESTILOS PARA EL SELECTOR DE IDIOMA (SOLO BANDERA) EN EL MENÚ DE FLATSOME --- */

/* A. CONTENEDOR PRINCIPAL DEL SHORTCODE DE TRANSLATEPRESS */
/* Este es el div que suele tener la clase .trp-language-switcher y un ancho grande por defecto */
.header-main .trp-language-switcher {
    width: auto !important; /* Que se ajuste al contenido, no a un ancho fijo */
    min-width: 0 !important; /* Anular cualquier min-width */
    height: 100% !important; /* Para alineación vertical */
    display: flex !important;
    align-items: center !important;
    position: relative; /* TranslatePress lo usa para el desplegable, mantener por si acaso */
    margin: 0 !important; /* Sin márgenes propios */
    padding: 0 !important; /* Sin paddings propios */
}

/* B. CONTENEDOR DEL IDIOMA ACTUAL (EL QUE MUESTRA LA BANDERA) */
.header-main .trp-language-switcher > div.trp-ls-shortcode-current-language {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;

    /* Eliminamos la imagen de fondo (flecha) ya que no se usa */
    background-image: none !important;

    width: auto !important; /* Que se ajuste al tamaño del elemento de enlace interno */
    min-width: 0 !important;
    padding: 0 2px 0 2px !important; /* Un padding mínimo alrededor de la bandera (ajusta 2px si es mucho/poco) */

    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Centra el elemento de enlace si el div fuera un poco más ancho */
    height: 100%;
    margin: 0 !important;
}

/* C. ENLACE INTERNO QUE CONTIENE LA IMAGEN DE LA BANDERA */
.header-main .trp-ls-shortcode-current-language a.trp-ls-shortcode-disabled-language {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important; /* Clave: hace que el elemento de enlace sea solo tan ancho como la bandera */
    align-items: center !important;
    width: auto !important; /* Redundante con inline-flex, pero por seguridad */
    height: 100%;
    text-decoration: none !important;
    line-height: 1 !important; /* Para evitar espacio extra vertical */
}

/* D. LA IMAGEN DE LA BANDERA EN SÍ */
.header-main .trp-ls-shortcode-current-language a.trp-ls-shortcode-disabled-language img.trp-flag-image {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important; /* Evita espacio extra debajo de la imagen si fuera inline */
    max-width: 18px !important; /* O el ancho real de tu bandera */
    height: auto !important;
}

/* E. ELEMENTO DEL MENÚ DE FLATSOME (LI) QUE CONTIENE EL SELECTOR */
/* Asegúrate de tener la clase 'menu-item-idioma' en el item del menú desde Apariencia > Menús */
.header-main .header-nav > li.menu-item.menu-item-idioma {
    background-color: transparent !important;
    padding: 0 !important; /* Sin padding en el LI */
    /*
      Ajusta el margen para controlar el espacio con los iconos adyacentes (carrito, etc.)
      Flatsome suele usar 'margin: 0 7px;' para sus items. Reduce esto para acercarlo.
      Ejemplo: 'margin: 0 3px;' o incluso menos si es necesario.
    */
    margin: 0 3px !important;
    display: flex !important;
    align-items: center !important;
    line-height: normal !important; /* O 'line-height: 1 !important;' si hay problemas de altura */
    width: auto !important; /* Que el LI sea solo tan ancho como su contenido (el selector de idioma) */
    min-width: 0 !important;
}

/* F. CONTENEDOR HTML INTERNO DE FLATSOME (SI SE USA) */
.header-main .header-nav > li.menu-item.menu-item-idioma > .header-html {
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100%;
    width: 100%; /* Toma el ancho de su padre LI, que ahora es 'auto' */
}

/* G. ESTILOS PARA EL DESPLEGABLE (SI AÚN SE USA, AUNQUE NO SEA VISIBLE LA FLECHA) */
/* Estos son opcionales si el desplegable ya no es una preocupación visual */
.header-main .trp-language-switcher .trp-ls-shortcode-language {
    /* Si necesitas que el desplegable (lista de otros idiomas) sea transparente: */
    /* background-color: rgba(255, 255, 255, 0.9) !important; */ /* Fondo blanco semitransparente ejemplo */
    /* border: 1px solid #ccc !important; */
}

/* =========================
   COOKIES – Banner + estilos
   ========================= */

/* Banner contenedor */
#ts-cookie-banner{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff; border-top:1px solid #eaeaea;
  z-index:99999;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.ts-cookie-inner{ max-width:980px; margin:0 auto; padding:18px 16px; }

#ts-cookie-banner h2{ margin:0 0 8px; font-size:18px; }
#ts-cookie-banner p{ margin:0 0 12px; font-size:14px; line-height:1.5; }

.ts-actions{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.ts-btn{
  padding:10px 14px; border-radius:6px; border:1px solid #ddd;
  background:#fff; cursor:pointer; font-size:14px;
}
.ts-btn.ts-primary{ background:#9eaf96; border-color:#9eaf96; color:#fff; }
.ts-btn.ts-outline{ border-color:#9eaf96; color:#9eaf96; }
.ts-btn.ts-outline:hover{ background:#f6f6f6; }

#ts-prefs{
  margin-top:8px; padding:10px; border:1px solid #eee;
  border-radius:8px; background:#fafafa;
}
.ts-pref-row{ margin:8px 0; }
.ts-legal{ font-size:12px; color:#666; margin-top:8px; }

/* Accesibilidad focus en botones del banner */
.ts-btn:focus{
  outline:2px solid color-mix(in srgb, #9eaf96 40%, #fff);
  outline-offset:2px;
}

/* Layout desktop: banner centrado y elevado */
@media (min-width:768px){
  #ts-cookie-banner{
    left:50%; transform:translateX(-50%);
    width:100%; max-width:980px;
    border:1px solid #eaeaea;
    border-bottom-left-radius:10px; border-bottom-right-radius:10px;
    bottom:24px;
  }
}

/* =========================
   Enlace “Configurar cookies” (footer)
   ========================= */
.cookies-inline{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:#9eaf96;               /* Verde de marca */
  text-decoration:none;
  padding:0;
  margin-left:18px;            /* separarlo de “Cookies” */
  line-height:1;
}
.cookies-inline:hover,
.cookies-inline:focus{
  text-decoration:underline;
  color:#9eaf96;
  outline:0;                  /* dejamos solo subrayado */
}

/******************************************************************
 * ESTILOS ANTISPAM - HONEYPOT PARA FORMULARIOS DE CONTACTO
 ******************************************************************/

/* Ocultar completamente el campo honeypot */
div[style="display: none;"] {
    display: none !important;
}

/* Otra capa de seguridad */
.honeypot {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
}