/* =====================================================================
   Barra de confianza superior — Analí Secret Boutique
   3 sellos: producto colombiano · paga al recibir · envío rápido
   ===================================================================== */

:root {
    --anali-tb-h: 38px; /* alto de la barra (desktop); se reduce en mobile */
}

/* La barra queda SIEMPRE fija arriba (no se va con el scroll), en todos los anchos. */
.anali-trustbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    width: 100%;
    height: var(--anali-tb-h);
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #51162C 0%, #7C3650 50%, #51162C 100%);
    color: #fff5fa;
    font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Reserva el alto de la barra fija para que el contenido no quede debajo. */
body {
    padding-top: var(--anali-tb-h);
}

/* Empuja el header STICKY de desktop debajo de la barra
   (gana al `top` inline que pone el JS del theme al hacer sticky). */
.c-header--sticky {
    top: var(--anali-tb-h) !important;
}

/* Si hay admin-bar de WordPress en desktop (usuario logueado), bajar 32px más. */
body.admin-bar .anali-trustbar {
    top: 32px;
}
body.admin-bar .c-header--sticky {
    top: calc(32px + var(--anali-tb-h)) !important;
}

/* Brillo sutil que cruza la barra lentamente */
.anali-trustbar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 35%,
        rgba(255, 255, 255, 0.10) 50%,
        transparent 65%
    );
    transform: translateX(-100%);
    animation: analiTrustShine 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes analiTrustShine {
    0%   { transform: translateX(-100%); }
    55%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

.anali-trustbar__track {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(10px, 2.4vw, 34px);
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(6px, 1vw, 9px) 14px;
    position: relative;
    z-index: 1;
}

.anali-trustbar__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: clamp(11px, 1.45vw, 14px);
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    line-height: 1;
}

.anali-trustbar__icon {
    font-size: 1.1em;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* Íconos dibujados en SVG (corazón, flor): consistentes en todos los dispositivos */
.anali-trustbar__svgico {
    display: inline-block;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.20));
}

.anali-trustbar__svgico svg {
    display: block;
    width: 100%;
    height: 100%;
}

.anali-trustbar__sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    flex: 0 0 auto;
}

/* ----- Bandera de Colombia dibujada (SVG inline, sin imagen) ----- */
.anali-flag-co {
    display: inline-block;
    width: 22px;
    height: 15px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    flex: 0 0 auto;
    vertical-align: middle;
}

.anali-flag-co svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Por defecto (desktop e intermedio): todos los sellos en línea */
.anali-trustbar__long  { display: inline; }
.anali-trustbar__short { display: none; }

/* El slide extra de seguimiento solo existe en mobile (rotación). */
.anali-trustbar__item--mo,
.anali-trustbar__sep--mo {
    display: none;
}

/* =====================================================================
   MOBILE (≤1189px): el header del theme pasa a position:fixed y tapaba
   la barra. Solución: fijamos la barra arriba y empujamos el header
   justo debajo. Así header + barra quedan SIEMPRE quietos al hacer scroll.
   ===================================================================== */
@media (max-width: 1189px) {
    :root {
        --anali-tb-h: 34px;
    }

    .anali-trustbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1100; /* sobre el header (99), bajo el menú móvil (1200) */
        height: var(--anali-tb-h);
        display: flex;
        align-items: center;
    }

    .anali-trustbar__track {
        height: var(--anali-tb-h);
        width: 100%;
        padding: 0 12px;
    }

    /* Empuja el header fijo del theme debajo de la barra (gana al inline del JS). */
    .c-header--sticky-support.c-header--init {
        top: var(--anali-tb-h) !important;
    }

    /* Reserva el alto de la barra fija para que el contenido no quede oculto. */
    body {
        padding-top: var(--anali-tb-h);
    }

    /* Si hay admin-bar de WordPress (usuario logueado), bajar todo 46px más. */
    body.admin-bar .anali-trustbar {
        top: 46px;
    }
    body.admin-bar .c-header--sticky-support.c-header--init {
        top: calc(46px + var(--anali-tb-h)) !important;
    }
}

/* =====================================================================
   PANTALLAS ANGOSTAS (≤600px): mostrar los sellos UNO POR UNO (ticker
   con fundido) para que cada mensaje tenga todo el ancho y nada se corte.
   ===================================================================== */
@media (max-width: 600px) {
    .anali-trustbar__track {
        position: relative;
        justify-content: center;
        padding: 0 10px;
    }

    /* Sin separadores en modo rotación */
    .anali-trustbar__sep {
        display: none;
    }

    /* En mobile el slide extra de seguimiento SÍ participa en la rotación */
    .anali-trustbar__item--mo {
        display: inline-flex;
    }

    .anali-trustbar__item {
        position: absolute;
        left: 8px;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        justify-content: center;
        font-size: 12.5px;
        gap: 7px;
        opacity: 0;
        max-width: calc(100% - 16px);
        overflow: hidden;
        text-overflow: ellipsis;
        animation: analiTrustTicker 16s infinite;
    }

    /* En rotación (uno por slide) hay espacio para el texto completo... */
    .anali-trustbar__long  { display: inline; }
    .anali-trustbar__short { display: none; }
    /* ...salvo el de envío: su versión corta, porque "sigue tu envío"
       ya es el slide 4 (📍) y así no se repite ni se desborda. */
    .anali-trustbar__item--3 .anali-trustbar__long  { display: none; }
    .anali-trustbar__item--3 .anali-trustbar__short { display: inline; }

    /* 4 slides, 4s cada uno */
    .anali-trustbar__item--1 { animation-delay: 0s; }
    .anali-trustbar__item--2 { animation-delay: 4s; }
    .anali-trustbar__item--3 { animation-delay: 8s; }
    .anali-trustbar__item--4 { animation-delay: 12s; }

    .anali-flag-co {
        width: 18px;
        height: 12px;
    }
}

/* Cada sello: aparece, se mantiene y se desvanece dentro de su cuarto del ciclo */
@keyframes analiTrustTicker {
    0%   { opacity: 0; }
    3%   { opacity: 1; }
    22%  { opacity: 1; }
    25%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Pantallas muy chicas: reducir un poco el texto */
@media (max-width: 360px) {
    .anali-trustbar__item {
        font-size: 11.5px;
    }
}