/* ==========================================================================
   Avisos flotantes de WooCommerce · Termales Santa Rosa de Cabal

   Toasts abajo a la derecha, apilados hacia arriba: el último en llegar entra por abajo y
   empuja a los anteriores. Abajo y no arriba porque el header del sitio es sticky y un toast
   arriba a la derecha se pega al carrito y al buscador.

   ⚠️ ESPECIFICIDAD — no quitar el prefijo `.tk-avisos` de los selectores.
   Con una sola clase (0,1,0) el kit de Elementor gana: sus reglas (0,1,1) del tipo
   `.elementor-kit-6 p` fijan tamaño y color del texto, y el reset del tema trae
   `[type="button"],[type="submit"],button{display:inline-block}`, que empata con cualquier
   selector de una clase y va después.

   Por lo mismo se declaran `font-style`, `color` y `font-size` en `p` y `a` aunque parezcan
   redundantes: lo que no se declara aquí lo hereda del reset del tema.
   ========================================================================== */

.tk-avisos {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100000;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;

    width: min(380px, calc(100vw - 48px));
    margin: 0;
    padding: 0;

    /* El contenedor ocupa una franja alta de la pantalla aunque esté vacío: sin esto
       bloquearía los clics de todo lo que tiene debajo. Los toasts sí los reciben. */
    pointer-events: none;
}

.tk-avisos *,
.tk-avisos *::before,
.tk-avisos *::after {
    box-sizing: border-box;
}

/* --- El toast --- */
.tk-avisos .tk-aviso {
    position: relative;
    pointer-events: auto;

    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 14px 16px 16px;

    background: #032929;
    border: 1px solid rgba(251, 251, 251, 0.10);
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
    overflow: hidden;

    font-family: 'Montserrat', sans-serif;

    animation: tk-aviso-entra 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Entra deslizando desde la derecha */
@keyframes tk-aviso-entra {
    from { opacity: 0; transform: translateX(24px) scale(0.97); }
    to   { opacity: 1; transform: translateX(0)    scale(1); }
}

/*
 * Salida: además de desvanecerse hay que quitarle el hueco, o los toasts de arriba se quedan
 * flotando hasta que el JS lo borra del DOM. De ahí el max-height y el margin negativo.
 */
.tk-avisos .tk-aviso.is-saliendo {
    animation: tk-aviso-sale 0.3s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes tk-aviso-sale {
    from { opacity: 1; transform: translateX(0);     max-height: 220px; margin-bottom: 0; }
    to   { opacity: 0; transform: translateX(110%);  max-height: 0;     margin-bottom: -12px; }
}

/* --- Icono --- */
.tk-avisos .tk-aviso__icono {
    flex: none;
    display: block;
    width: 22px;
    height: 22px;
    margin-top: 1px;
}

.tk-avisos .tk-aviso__icono svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* --- Cuerpo --- */
.tk-avisos .tk-aviso__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.tk-avisos .tk-aviso__texto {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: 0;
    color: #FBFBFB;
    text-transform: none;
}

/* El enlace que Woo mete dentro de la frase («Ver carrito», «Deshacer») sale del texto y se
   convierte en esta acción — ver gd_avisos_partir() en includes/avisos.php. */
.tk-avisos .tk-aviso__accion {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 0.25s ease;
}

.tk-avisos .tk-aviso__accion:hover,
.tk-avisos .tk-aviso__accion:focus-visible {
    opacity: 0.75;
    text-decoration: none;
}

/* --- Cerrar --- */
.tk-avisos .tk-aviso__cerrar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -2px -2px 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    color: #6B8A8A;
    transition: color 0.25s ease, background 0.25s ease;
}

.tk-avisos .tk-aviso__cerrar svg {
    width: 14px;
    height: 14px;
    display: block;
    pointer-events: none;
}

.tk-avisos .tk-aviso__cerrar:hover {
    color: #FBFBFB;
    background: rgba(251, 251, 251, 0.08);
}

.tk-avisos .tk-aviso__cerrar:focus-visible {
    outline: 2px solid #A8895E;
    outline-offset: 2px;
}

/* --- Barra de tiempo restante --- */
.tk-avisos .tk-aviso__barra {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    transform-origin: left center;
    transform: scaleX(0);
}

/* La duración la pone el JS con `animation-duration`, que es el mismo número que el
   `data-duracion` del toast: así la barra y el temporizador no se pueden desincronizar. */
.tk-avisos .tk-aviso.is-contando .tk-aviso__barra {
    animation: tk-aviso-barra linear forwards;
}

@keyframes tk-aviso-barra {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* El contador se para mientras el puntero está encima o el foco está dentro: si no, un toast
   con un enlace se cierra justo cuando lo vas a pulsar. */
.tk-avisos .tk-aviso:hover .tk-aviso__barra,
.tk-avisos .tk-aviso:focus-within .tk-aviso__barra {
    animation-play-state: paused;
}

/* ==========================================================================
   Tipos
   ========================================================================== */

/* Éxito — dorado de marca. Es el acento «positivo» del sitio; el check del icono es
   el que aporta la semántica, que del color solo no se puede depender. */
.tk-avisos .tk-aviso--exito .tk-aviso__icono { color: #A8895E; }
.tk-avisos .tk-aviso--exito .tk-aviso__accion { color: #A8895E; }
.tk-avisos .tk-aviso--exito .tk-aviso__barra  { background: #A8895E; }

/* Info — verde accent de la paleta */
.tk-avisos .tk-aviso--info .tk-aviso__icono  { color: #7FA8B8; }
.tk-avisos .tk-aviso--info .tk-aviso__accion { color: #7FA8B8; }
.tk-avisos .tk-aviso--info .tk-aviso__barra  { background: #446C7C; }

/* Error — terracota. No está en la paleta de marca, pero ningún color de la paleta lee como
   error; este es el rojo que menos se pelea con los dorados y los verdes.
   Solo lo usan los errores que llegan por AJAX: los del checkout se quedan inline. */
.tk-avisos .tk-aviso--error .tk-aviso__icono  { color: #E08268; }
.tk-avisos .tk-aviso--error .tk-aviso__accion { color: #E08268; }
.tk-avisos .tk-aviso--error .tk-aviso__barra  { background: #C4553F; }

/* ==========================================================================
   Avisos INLINE (los errores)

   Los errores no flotan: se quedan junto al formulario, que es donde sirven de algo. Pero
   tienen que vestir igual que el resto, así que se le quita a Woo su caja lila con el icono
   de fuente y se pone la misma tarjeta verde del toast.

   Woo los pinta con dos markups distintos:
     - errores  → <ul class="woocommerce-error"><li>…</li></ul>
     - mensajes → <div class="woocommerce-message">…</div>
   De ahí que haya que neutralizar también los estilos de lista.
   ========================================================================== */

.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
    position: relative;
    margin: 0 0 24px;
    padding: 16px 20px;

    background: #032929;
    border: 1px solid rgba(251, 251, 251, 0.10);
    border-left: 3px solid #A8895E;
    border-radius: 12px;
    box-shadow: none;

    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    color: #FBFBFB;

    list-style: none;
}

.woocommerce-notices-wrapper .woocommerce-error { border-left-color: #C4553F; }
.woocommerce-notices-wrapper .woocommerce-info  { border-left-color: #446C7C; }

/* Woo mete su icono con un ::before de su fuente propia; sin quitarlo queda un cuadrado. */
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before {
    content: none;
    display: none;
}

.woocommerce-notices-wrapper .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-message li,
.woocommerce-notices-wrapper .woocommerce-info li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: #FBFBFB;
}

.woocommerce-notices-wrapper .woocommerce-error li + li,
.woocommerce-notices-wrapper .woocommerce-message li + li,
.woocommerce-notices-wrapper .woocommerce-info li + li {
    margin-top: 8px;
}

/* El enlace que Woo mete dentro («Ver carrito», «Deshacer») queda como texto de acción,
   no como el botón gris del tema. */
.woocommerce-notices-wrapper .woocommerce-error a,
.woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-notices-wrapper .woocommerce-info a {
    display: inline-block;
    margin-left: 6px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    color: #A8895E;
}

.woocommerce-notices-wrapper .woocommerce-error a { color: #E08268; }
.woocommerce-notices-wrapper .woocommerce-info a  { color: #7FA8B8; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
    .tk-avisos {
        right: 16px;
        left: 16px;
        bottom: 16px;
        width: auto;
        gap: 10px;
    }

    .tk-avisos .tk-aviso {
        padding: 14px 12px 15px 14px;
        border-radius: 14px;
    }

    .tk-avisos .tk-aviso__texto {
        font-size: 13.5px;
    }
}

/* ==========================================================================
   Accesibilidad: sin animación si el sistema la desaconseja.
   La barra se oculta en vez de quedarse llena — llena mentiría, porque el temporizador del
   JS sigue corriendo igual.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tk-avisos .tk-aviso,
    .tk-avisos .tk-aviso.is-saliendo {
        animation: none;
    }

    .tk-avisos .tk-aviso.is-saliendo {
        opacity: 0;
        transition: opacity 0.15s linear;
    }

    .tk-avisos .tk-aviso__barra {
        display: none;
    }
}