/**
 * DS TotSeguro — Estilos del indicador anidado bajo el producto padre.
 * Namespace `.dstotseguro-*` exclusivo, disjunto de `.dsfastorder-*`.
 */

/* ==========================================================================
   Side-cart + carrito (cart-detailed) — indicador anidado bajo la línea padre
   ========================================================================== */

.dstotseguro-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 0.85em;
    color: #0a5aa8;
    line-height: 1.3;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.dstotseguro-badge .dstotseguro-badge-arrow {
    color: #0a5aa8;
    font-weight: 700;
    flex: 0 0 auto;
}

.dstotseguro-badge .dstotseguro-badge-label {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline;
    font-style: italic;
    font-weight: 500;
    color: #0a5aa8;
}

.dstotseguro-badge .dstotseguro-badge-amount {
    color: #0a5aa8;
    font-weight: 500;
    font-size: 0.95em;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .dstotseguro-badge {
        font-size: 0.8em;
    }
}

/* ==========================================================================
   Checkout summary (/pedido) — "Tu compra actual"
   ========================================================================== */

.cart-summary-products .media-list .dstotseguro-checkout-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0 16px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 0.85em;
    color: #0a5aa8;
    line-height: 1.3;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.cart-summary-products .media-list .dstotseguro-checkout-indicator .dstotseguro-checkout-arrow {
    color: #0a5aa8;
    font-weight: 700;
    flex: 0 0 auto;
}

.cart-summary-products .media-list .dstotseguro-checkout-indicator .dstotseguro-checkout-label {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline;
    font-style: italic;
    font-weight: 500;
    color: #0a5aa8;
}

/* El importe vive DENTRO del indicador, junto al label — nunca en .media-right
   (ahí está el precio del artículo y el theme lo posiciona: el importe se le
   montaba encima). Mismo criterio que en carrito y side-cart. */
.cart-summary-products .media-list .dstotseguro-checkout-indicator .dstotseguro-checkout-amount {
    flex: 0 0 auto;
    color: #0a5aa8;
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .cart-summary-products .media-list .dstotseguro-checkout-indicator {
        font-size: 0.8em;
        margin-left: 8px;
    }
}

/* ==========================================================================
   Confirmación de pedido
   ========================================================================== */

.dstotseguro-confirmation-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 4px 0 8px 0;
    padding: 0;
    background: transparent;
    color: #0a5aa8;
    font-size: 0.95em;
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
}

.dstotseguro-confirmation-indicator .dstotseguro-confirmation-arrow {
    color: #0a5aa8;
    font-weight: 700;
    flex: 0 0 auto;
}

.dstotseguro-confirmation-indicator .dstotseguro-confirmation-label {
    text-decoration: underline;
    color: #0a5aa8;
    flex: 0 1 auto;
}

/* Anti-flash: si por lo que sea el JS tarda en cargar, no queremos un parpadeo
   de la línea suelta del TotSeguro antes de ocultarla. No se puede evitar sin
   JS (no hay marcador server-side de qué línea es TotSeguro en el HTML), así
   que se documenta como limitación conocida en vez de forzar un display:none
   ciego (que ocultaría líneas legítimas antes de resolver el mapa).
*/

/* ==========================================================================
   Upsell — "Añadir TotSeguro" en las líneas que lo admiten y no lo tienen
   ========================================================================== */

.dstotseguro-upsell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0 0;
    padding: 4px 10px;
    background: transparent;
    border: 1px dashed #0a5aa8;
    border-radius: 4px;
    color: #0a5aa8;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1.3;
    /* El drawer es estrecho: sin esto el label se parte en 3 líneas dentro del
       borde punteado. Mejor que desborde a que quede un sello ilegible. */
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.dstotseguro-upsell:hover {
    background: #0a5aa8;
    color: #fff;
}

.dstotseguro-upsell .dstotseguro-upsell-plus {
    font-weight: 700;
    flex: 0 0 auto;
}

.dstotseguro-upsell .dstotseguro-upsell-label {
    flex: 1 1 auto;
}

.dstotseguro-upsell:disabled,
.dstotseguro-upsell.dstotseguro-upsell-loading {
    opacity: .55;
    cursor: default;
}

.dstotseguro-upsell.dstotseguro-upsell-loading:hover {
    background: transparent;
    color: #0a5aa8;
}

/* En el resumen del checkout el botón cuelga de .media-body, que lleva texto
   suelto ("Cantidad:1"). Como inline-flex se queda pegado a ese texto: flex +
   fit-content lo saca a su propia línea sin ocupar todo el ancho. Mismos
   valores que .dstotseguro-checkout-indicator para que badge y botón queden
   alineados entre sí. */
.cart-summary-products .media-list .dstotseguro-upsell {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 8px 0 0 16px;
}

@media (max-width: 767px) {
    .dstotseguro-upsell {
        font-size: 0.8em;
    }
    .cart-summary-products .media-list .dstotseguro-upsell {
        margin-left: 8px;
    }
}