/* Pagina Garanții (Pages/Account/Garantii.cshtml) — conținutul din dreapta sidebar-ului comun.
   Cardul de garanție reutilizează .account-order-card/-top/-title/-title-extra (account-shared.css) pentru
   zona de sus (imagine+titlu) — doar zona de jos (date+progres+certificat) e specifică acestei pagini. */

/* Pastile de filtrare status — scrollabile orizontal + fade la margine, același tipar ca .comenzi-filters/.notificari-filters */
.garantii-filters {
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}

.garantii-filters::-webkit-scrollbar {
    display: none;
}

.warranty-meta {
    font-size: var(--text-s-size);
    color: var(--color-content-tertiary);
}

.warranty-status {
    font-size: var(--text-s-size);
    font-weight: var(--font-weight-medium);
}

.warranty-status-active {
    color: var(--color-content-positive-secondary);
}

.warranty-status-expira-curand {
    color: var(--color-content-warning-primary);
}

.warranty-status-expirate {
    color: var(--color-content-tertiary);
}

/* Zona de jos a cardului (date + bară de progres + certificat) — separată de zona gri de sus */
.warranty-body {
    border-color: var(--color-border-primary) !important;
    font-size: var(--text-s-size);
    color: var(--color-content-tertiary);
}

.warranty-progress-track.progress {
    --bs-progress-height: 0.25rem;
    --bs-progress-bg: var(--color-bg-secondary);
    --bs-progress-border-radius: var(--radius-pill);
}

/* Activă — progres discret, gri închis */
.warranty-progress-bar-active {
    background-color: var(--color-content-secondary);
}

/* Expiră curând — accentuat, portocaliu (același ton ca statusul) */
.warranty-progress-bar-expira-curand {
    background-color: var(--color-content-warning-primary);
}

/* Expirată — estompat, aproape invizibil */
.warranty-progress-bar-expirate {
    background-color: var(--color-border-primary);
}

.warranty-certificate-link {
    color: var(--color-content-brand);
    font-weight: var(--font-weight-medium);
}