/* Barra de envío gratis (Codebit)
   Los colores salen de las variables del tema (custom.css); los valores de
   reserva son por si algún día se cambia de tema. */

.cbportes {
    --cbportes-color: var(--pc-caramel, #8f5b2e);
    --cbportes-ok: var(--pc-ok, #4f6b46);
    --cbportes-riel: var(--pc-line-soft, #efe7db);
    --cbportes-texto: var(--pc-espresso, #2b1d14);
    box-sizing: border-box;
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid var(--pc-line, #e4d9c9);
    border-radius: var(--pc-radius-sm, 9px);
    background: var(--pc-surface, #fff);
    font-family: var(--pc-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: var(--cbportes-texto);
}

.cbportes--ok {
    --cbportes-color: var(--cbportes-ok);
    border-color: var(--cbportes-ok);
    background: rgba(79, 107, 70, .07);
}

.cbportes-texto {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
}

.cbportes-frase strong {
    font-weight: 700;
    white-space: nowrap;
}

.cbportes-icono {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--cbportes-color);
}

.cbportes-icono svg {
    display: block;
    fill: currentColor;
}

.cbportes-riel {
    height: 7px;
    margin-top: 10px;
    border-radius: 99px;
    background: var(--cbportes-riel);
    overflow: hidden;
}

.cbportes-avance {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: 99px;
    background: var(--cbportes-color);
    transition: width .45s ease;
}

/* En la ficha va pegada al botón de comprar, así que se ajusta un poco. */
.cbportes--ficha {
    margin: 10px 0 4px;
    padding: 10px 12px;
}

.cbportes--ficha .cbportes-texto {
    font-size: 13.5px;
}

/* Dentro del aviso «añadido al carrito» el ancho lo manda el modal. */
.cbportes--modal {
    margin: 12px 0 0;
}

/* El carrito lateral del tema es estrecho y ya va sobre fondo claro: aquí la
   barra se queda sin caja, sólo el texto y el riel. */
.cbportes--lateral {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: none;
}

.cbportes--lateral.cbportes--ok {
    background: none;
}

.cbportes--lateral .cbportes-texto {
    font-size: 13px;
    gap: 7px;
}

.cbportes--lateral .cbportes-riel {
    height: 6px;
    margin-top: 8px;
}

@media (max-width: 575px) {
    .cbportes {
        padding: 10px 12px;
    }

    .cbportes-texto {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cbportes-avance {
        transition: none;
    }
}