/*
 * Urgencia de hora de corte en los labels de entrega — diseño "Opcion Envio
 * Domicilio" (Claude Design). Markup en inc/frontend/delivery-cutoff.php.
 * Hereda tipografía del subtítulo donde vive (side-cart, ficha, checkout);
 * tokens --bb-* de style.css con fallbacks del diseño.
 */

.bb-cutoff {
    position: relative;
}

/* "Llega hoy" en verde y negrita; al cerrar el corte vuelve al color del texto */
.bb-cutoff-lead {
    font-weight: 800;
    color: var(--bb-success, #3BA88C);
}

.bb-cutoff--closed .bb-cutoff-lead {
    color: inherit;
}

.bb-cutoff-hour {
    font-weight: 800;
    color: var(--bb-ink, #3D3A5C);
}

/* Pill coral del countdown (y del "Cerrado" post-corte) */
.bb-cutoff-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bb-coral-50, #FEEFEC);
    color: var(--bb-coral-deep, #E0604D);
    font-weight: 800;
    font-size: 12.5px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    vertical-align: -2px;
    white-space: nowrap;
}

/* Info */
.bb-cutoff-wrap {
    position: relative;
    display: inline-flex;
    margin-left: 2px;
    vertical-align: -3px;
}

button.bb-cutoff-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 2px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--bb-ink-3, #8B88AD);
    cursor: pointer;
    line-height: 1;
    transition: color 150ms;
}

button.bb-cutoff-info:hover,
.bb-cutoff-wrap.is-open button.bb-cutoff-info {
    color: var(--bb-purple, #7579E7);
}

/* Popover card blanco con cierre, debajo del info */
.bb-cutoff-pop {
    display: none;
    position: absolute;
    z-index: 40;
    top: calc(100% + 10px);
    right: -10px;
    width: 300px;
    max-width: 78vw;
    padding: 12px 14px;
    border: 1px solid var(--bb-line, #E8E7F4);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-pop, 0 12px 30px -12px rgba(61, 58, 92, .35));
    animation: bb-cutoff-pop-in 160ms ease-out;
}

.bb-cutoff-wrap.is-open .bb-cutoff-pop {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.bb-cutoff-pop-text {
    flex: 1;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bb-ink-2, #5A5780);
    text-align: left;
    text-wrap: pretty;
    white-space: normal;
}

button.bb-cutoff-close {
    flex: none;
    display: grid;
    place-items: center;
    margin: -2px -2px 0 0;
    padding: 2px;
    border: none;
    background: transparent;
    color: var(--bb-ink-3, #8B88AD);
    cursor: pointer;
}

button.bb-cutoff-close:hover {
    color: var(--bb-ink, #3D3A5C);
}

@keyframes bb-cutoff-pop-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}