/* ============================================================
   Componentes reutilizables — botones, badges, barra de perfil
   ============================================================ */

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px var(--spacing-xl);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: 2px solid transparent;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}

.btn:active { transform: scale(0.97); }

/* Loading: mantiene el label visible y suma un spinner al lado.
   El JS agrega .is-loading + disabled durante el request AJAX. */
.btn.is-loading {
    opacity: 0.75;
    pointer-events: none;
}

.btn.is-loading::after {
    content: '';
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn--primary {
    background: var(--color-dorado);
    color: var(--color-oscuro);
    border-color: var(--color-dorado);
}

.btn--primary:hover {
    background: var(--color-dorado-hover);
    border-color: var(--color-dorado-hover);
    color: var(--color-oscuro);
}

.btn--outline {
    background: transparent;
    color: var(--color-dorado-suave); /* texto dorado oscuro: contraste AA sobre fondos claros */
    border-color: var(--color-dorado);
}

.btn--outline:hover {
    background: var(--color-dorado);
    color: var(--color-oscuro);
}

.btn--dark {
    background: var(--color-oscuro);
    color: #fff;
    border-color: var(--color-oscuro);
}

.btn--dark:hover {
    background: #2a1f1a;
    border-color: #2a1f1a;
    color: #fff;
}

.btn--sm {
    padding: 6px var(--spacing-md);
    font-size: var(--font-size-xs);
}

.btn--lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
}

.btn--full { width: 100%; }

/* ---- Cart Badge ---- */
.cart-icon__badge {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--color-dorado);
    color: var(--color-oscuro);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    display: block;
    transition: transform var(--transition-fast);
    pointer-events: none;
}

.cart-icon__badge.is-empty { display: none; }

/* ---- SCA / Country Badge ---- */
.sca-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(26, 19, 16, 0.80);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    line-height: 1.4;
}

.sca-badge--gold {
    background: linear-gradient(180deg, #e0bb55 0%, var(--color-dorado) 100%);
    color: var(--color-oscuro);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    gap: 5px;
    padding: 4px 11px;
    border: 0;
    box-shadow: 0 2px 6px rgba(140, 98, 57, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sca-badge--gold svg {
    width: 13px;
    height: 13px;
}

/* ---- Profile Bar (Intensidad / Acidez / Cuerpo) ---- */
.profile-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.profile-bar__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 80px;
    color: var(--color-texto-suave);
    flex-shrink: 0;
}

.profile-bar__segments {
    display: flex;
    gap: 3px;
}

.profile-bar__segment {
    width: 16px;
    height: 6px;
    border-radius: 3px;
    background: var(--color-borde);
    transition: background var(--transition-fast);
}

.profile-bar__segment--active { background: var(--color-dorado); }

/* ---- Pill selector (250g / 1kg, molienda) ---- */
.pill-selector {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.pill-selector__option {
    padding: 6px var(--spacing-md);
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-borde);
    background: transparent;
    color: var(--color-texto-suave);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
    line-height: 1.4;
}

.pill-selector__option:hover,
.pill-selector__option:focus-visible {
    border-color: var(--color-oscuro);
    color: var(--color-oscuro);
}

.pill-selector__option.is-selected,
.pill-selector__option[aria-selected="true"] {
    background: var(--color-oscuro);
    border-color: var(--color-oscuro);
    color: #fff;
}

/* ============================================================
   DIVIDER — reusable decorative separator:  ——— ☕ ———
   Base look only. Visibility & spacing are scoped by the parent
   context (.section-divider, .sc-account, .woocommerce-MyAccount-content).
   ============================================================ */
.sc-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--color-separador);
}

.sc-divider__line {
    flex: 1;
    height: 1px;
    background: currentColor;
}

.sc-divider__icon {
    flex-shrink: 0;
    display: inline-flex;
}

.sc-divider__icon svg {
    width: 26px;
    height: 26px;
}

/* ---- Banner de ajuste de stock (fijo arriba del formulario, persistente) ---- */
.sc-stock-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin: 0 auto var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: #fbf3e0;
    border: 1px solid var(--color-dorado);
    border-radius: var(--radius-card);
    color: var(--color-oscuro);
    font-size: var(--font-size-sm);
    line-height: 1.55;
}

.sc-stock-banner__icon {
    color: var(--color-dorado-hover);
    flex-shrink: 0;
    margin-top: 1px;
}

.sc-stock-banner__text { flex: 1; }

.sc-stock-banner__close {
    background: none;
    border: none;
    color: var(--color-texto-suave);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: color var(--transition-fast);
}

.sc-stock-banner__close:hover { color: var(--color-oscuro); }

/* ---- Aviso "Envíos a Regiones" (checkout por bloques, arriba de las tarifas) ---- */
.sc-regions-notice {
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: #fbf3e0;
    border: 1px solid var(--color-dorado);
    border-radius: var(--radius-card);
    color: var(--color-oscuro);
    font-size: var(--font-size-sm);
    line-height: 1.55;
}

.sc-regions-notice a {
    color: var(--color-dorado-hover);
    text-decoration: underline;
    font-weight: 600;
}

/* ---- Cartel de oferta "primera compra" (BIENVENIDO15) ---- */
.sc-first-purchase-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}
.sc-first-purchase-banner strong { font-weight: 700; }

/* Home: chip centrado debajo del subtítulo de "Nuestros Cafés" — vive
   dentro de .catalog-section__header, que ya centra sus hijos. */
.sc-first-purchase-banner--home {
    background: var(--color-beige);
    border: 1px solid var(--color-dorado);
    color: var(--color-oscuro);
    /* Mismo espaciado que el cartel del checkout — el badge "15% OFF"
       queda con más aire y su tamaño de siempre (2rem, ver
       .sc-first-purchase-banner__pct) en vez del 1.5rem más apretado que
       tenía antes. */
    padding: var(--spacing-md) var(--spacing-lg);
    gap: var(--spacing-lg);
    width: fit-content;
}
.sc-first-purchase-banner--home .sc-first-purchase-banner__body { text-align: left; }

/* Ficha de producto: mismo layout que el checkout (badge + párrafo), justo
   debajo del precio. */
.sc-first-purchase-banner--product {
    /* Mismo estilo que el de la home (chip con borde dorado, ancho ajustado
       al contenido, radio pill heredado de .sc-first-purchase-banner) —
       antes tenía su propio look (sin borde, radio chico, ancho completo). */
    background: var(--color-beige);
    border: 1px solid var(--color-dorado);
    color: var(--color-oscuro);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-md) 0;
    align-items: center;
    gap: var(--spacing-lg);
    width: fit-content;
}

/* Checkout: badge "15% OFF" a la izquierda + párrafo/botón a la derecha. */
.sc-first-purchase-banner--checkout {
    background: #fbf3e0;
    border: 1px solid var(--color-dorado);
    color: var(--color-oscuro);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-card);
    align-items: center;
    gap: var(--spacing-lg);
}

.sc-first-purchase-banner__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.95;
    flex-shrink: 0;
    color: var(--color-dorado-hover);
}
.sc-first-purchase-banner__pct {
    font-family: var(--font-heading, inherit);
    font-size: 2rem;
    font-weight: 700;
}
.sc-first-purchase-banner__off {
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.sc-first-purchase-banner__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}
.sc-first-purchase-banner__body p { margin: 0; }

/* Checkout: párrafo + botón en la misma fila, el botón pegado a la
   derecha (justify-content: space-between, con el párrafo creciendo). */
.sc-first-purchase-banner--checkout .sc-first-purchase-banner__body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex: 1;
}
.sc-first-purchase-banner--checkout .sc-first-purchase-banner__body p { flex: 1; min-width: 200px; }

/* Colores invertidos respecto al resto de los .btn--outline del sitio:
   dorado sólido por defecto, blanco al hover (en vez de transparente →
   dorado). Este cartel ya tiene fondo claro, así que un botón transparente
   por defecto se perdía. */
.sc-first-purchase-banner__cta.btn--outline {
    background: var(--color-dorado);
    color: var(--color-oscuro);
    border-color: var(--color-dorado);
}
.sc-first-purchase-banner__cta.btn--outline:hover {
    background: #fff;
    color: var(--color-dorado-hover);
}

.sc-first-purchase-banner__cta { flex-shrink: 0; }

/* Estado "ya aplicado" (checkbox tildado): reemplaza el botón por un texto
   de confirmación, sin apariencia de botón clickeable. */
.sc-first-purchase-banner__cta.is-applied {
    background: transparent;
    border-color: transparent;
    color: var(--color-dorado-hover);
    cursor: default;
    pointer-events: none;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 480px) {
    .sc-first-purchase-banner--checkout { flex-wrap: wrap; }
}

/* Panel "Crear una cuenta con SantoCafé" — se ve y se comporta como una
   tarjeta clickeable entera (no solo el texto/checkbox); ver main.js para
   el click delegado en el padding. Ancho ajustado al contenido (no ocupa
   toda la fila) tanto en reposo como en hover/resaltado — así el hover
   nunca se extiende más allá del checkbox + texto. */
.wc-block-checkout__create-account {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: calc(var(--spacing-xs) * -1) calc(var(--spacing-sm) * -1);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.wc-block-checkout__create-account:hover { background: var(--color-beige); }
.wc-block-checkout__create-account .wc-block-components-checkbox__label {
    font-size: var(--font-size-base);
}

/* Resalta el panel cuando "Agregar cupones" rechaza BIENVENIDO15 por no
   estar marcado, o al tocar "Lo quiero" del cartel (ver main.js). Se queda
   hasta que lo clickean, no se retira solo. */
.wc-block-checkout__create-account.sc-highlight {
    animation: sc-highlight-pulse 0.9s ease-in-out infinite;
    outline: 2px solid var(--color-dorado);
    outline-offset: 4px;
}

@keyframes sc-highlight-pulse {
    0%, 100% { outline-color: var(--color-dorado); background: transparent; }
    50%      { outline-color: var(--color-dorado-hover); background: rgba(223, 179, 62, 0.14); }
}

/* Premio visual al tildar el checkbox: pulso dorado + una estrellita que
   sube y se desvanece (ver main.js, dura 900ms y se autolimpia). */
.wc-block-checkout__create-account.sc-celebrate {
    position: relative;
    animation: sc-celebrate-pop 0.5s ease-out;
}
.sc-celebrate__spark {
    position: absolute;
    top: 0;
    left: 18px;
    font-size: 18px;
    pointer-events: none;
    animation: sc-celebrate-spark 0.9s ease-out forwards;
}

@keyframes sc-celebrate-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
@keyframes sc-celebrate-spark {
    0%   { opacity: 0; transform: translateY(4px) scale(0.6) rotate(0deg); }
    30%  { opacity: 1; transform: translateY(-6px) scale(1.15) rotate(15deg); }
    100% { opacity: 0; transform: translateY(-26px) scale(0.9) rotate(-10deg); }
}

/* ---- Toast (mismo aviso, flotante, para pantallas que NO son checkout) ---- */
.sc-toast {
    position: fixed;
    left: 50%;
    bottom: var(--spacing-lg);
    transform: translate(-50%, 16px);
    z-index: 3000;
    max-width: min(560px, calc(100vw - 2 * var(--spacing-md)));
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-oscuro);
    color: #fff;
    border-radius: var(--radius-card);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.sc-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.sc-toast__close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: color var(--transition-fast);
}

.sc-toast__close:hover { color: #fff; }

/* Variante de error (form de contacto, etc.): acento rojo a la izquierda. */
.sc-toast--error { border-left: 4px solid #d9534f; }