/* ===== TP LOGÍSTICA - Frontend Styles (Original Snippet Match) ===== */

/* --- ESTILOS GENERALES --- */
.header-shipping-timer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 5px;
    width: 100%;
}

.ship-icon-box svg {
    /* Usamos variable o fallback a 30px como en el snippet original */
    width: var(--tp-icon-size, 30px) !important;
    height: var(--tp-icon-size, 30px) !important;
    display: block;
    min-width: var(--tp-icon-size, 30px) !important;
    fill: var(--tp-primary-color, #EA542B);
}

.ship-content-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}

.ship-title-main {
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: var(--tp-primary-color, #EA542B);
    text-transform: uppercase;
    white-space: nowrap;
}

.ship-timer-sentence {
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    color: var(--tp-secondary-color, #333);
    display: flex;
    gap: 4px;
    align-items: center;
}

.ship-highlight {
    color: var(--tp-primary-color, #EA542B);
    font-weight: 800;
}

/* --- MÓVIL OPTIMIZADO --- */
@media (max-width: 767px) {
    .header-shipping-timer {
        padding: 2px 0;
    }

    .ship-content-wrapper {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .ship-title-main {
        font-size: 12px;
        margin-right: 5px;
    }

    .ship-timer-sentence {
        font-size: 11px;
    }
}