/* Product support countdown meter */

.spm {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem .85rem;
    border-radius: 16px;
    border: 1px solid #e5ebd9;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(127, 201, 69, .12), transparent 50%),
        linear-gradient(180deg, #fcfef9, #f4f9ee);
    box-shadow: 0 8px 20px rgba(30, 40, 20, .04);
    min-width: 0;
}

.spm.is-expired {
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(190, 18, 60, .08), transparent 50%),
        linear-gradient(180deg, #fff8f8, #fff1f2);
    border-color: #fecdd3;
}

.spm.is-compact {
    padding: .55rem .65rem;
    gap: .6rem;
}

.spm-ring {
    position: relative;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
}

.spm.is-compact .spm-ring {
    width: 56px;
    height: 56px;
}

.spm-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.spm-track {
    fill: none;
    stroke: rgba(0, 0, 0, .08);
    stroke-width: 7;
}

.spm-progress {
    fill: none;
    stroke: #62a832;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 188.5;
    stroke-dashoffset: calc(188.5 - (188.5 * var(--spm-pct, 0) / 100));
    transition: stroke-dashoffset .6s ease;
}

.spm.is-expired .spm-progress { stroke: #e11d48; }

.spm-ring-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1.05;
}

.spm-ring-label strong {
    font-size: .95rem;
    font-weight: 800;
    color: #24301c;
    font-variant-numeric: tabular-nums;
}

.spm.is-compact .spm-ring-label strong { font-size: .8rem; }

.spm-ring-label span {
    font-size: .62rem;
    font-weight: 800;
    color: #7a8670;
}

.spm-body { min-width: 0; flex: 1 1 auto; }

.spm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.spm-top strong {
    font-size: .86rem;
    font-weight: 800;
    color: #24301c;
}

.spm-pill {
    display: inline-flex;
    padding: .12rem .45rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
}

.spm-pill.ok { background: #eaf6dc; color: #3f7a18; }
.spm-pill.bad { background: #ffe4e6; color: #be123c; }

.spm-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    overflow: hidden;
    margin-bottom: .4rem;
}

.spm-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8fd84f, #62a832);
    transition: width .6s ease;
}

.spm.is-expired .spm-bar i {
    background: linear-gradient(90deg, #fb7185, #e11d48);
}

.spm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .7rem;
    font-size: .72rem;
    color: #6b7563;
    font-weight: 600;
}

.spm-meta b { color: #24301c; font-weight: 800; }

.spm-hint {
    margin-top: .4rem;
    font-size: .72rem;
    color: #9a3412;
    font-weight: 700;
    line-height: 1.5;
}

.spm-renew { margin-top: .5rem; }

.spm-renew-btn {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .55rem;
    border: 0;
    border-radius: 999px;
    padding: .45rem .9rem;
    background: linear-gradient(180deg, #8fd84f, #62a832);
    color: #fff;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(98, 168, 50, .22);
}

.spm.is-expired .spm-renew-btn {
    background: linear-gradient(180deg, #fb7185, #e11d48);
    box-shadow: 0 8px 16px rgba(225, 29, 72, .18);
}

.spm-renew-btn em {
    font-style: normal;
    background: rgba(255,255,255,.2);
    padding: .1rem .4rem;
    border-radius: 999px;
}

.spm-renew-btn small {
    opacity: .9;
    font-size: .68rem;
    font-weight: 700;
}

.spm-card-list {
    display: grid;
    gap: .55rem;
}

.spm-pick {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .65rem .75rem;
    border: 1px solid #e5ebd9;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: .15s ease;
}

.spm-pick:hover,
.spm-pick.is-on {
    border-color: #7fc945;
    box-shadow: 0 0 0 3px rgba(127, 201, 69, .15);
}

.spm-pick input { accent-color: #62a832; }

.spm-pick-title {
    font-size: .86rem;
    font-weight: 800;
    color: #24301c;
}

.spm-pick-sub {
    margin-top: .15rem;
    font-size: .72rem;
    color: #7a8670;
    font-weight: 600;
}

.tc-context .spm {
    margin-top: .55rem;
    width: 100%;
}

.dl-item .spm { margin-top: .75rem; }

@media (max-width: 640px) {
    .spm { flex-direction: column; align-items: stretch; }
    .spm-ring { margin-inline: auto; }
}