/* Day count for the fixed DGX Spark. Layout comes from order.css. */

.spark-days {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.spark-rate {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.spark-rate b {
    color: var(--price);
    font-weight: 650;
}

.spark-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
    margin: 8px 0 0;
}

.spark-facts div {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.spark-facts dt {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.spark-facts dd {
    margin: 2px 0 0;
    color: var(--ink-strong);
}

.spark-checks label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0;
    cursor: pointer;
}

.spark-checks input {
    margin-top: 4px;
    accent-color: var(--teal-ink);
}

.spark-checks.is-attention {
    border-radius: 16px;
    background: #fff7ed;
    box-shadow: inset 0 0 0 1.5px #c2410c;
}

.spark-ack-note {
    margin: 4px 0 0;
    color: #9a3412;
    font-size: 14px;
    font-weight: 550;
}

.spark-due strong {
    display: inline-block;
    transition: opacity 180ms ease, transform 180ms ease;
}

.spark-due.is-tick strong {
    opacity: 0.35;
    transform: translateY(4px);
}

.spark-faq {
    padding: 12px 0 72px;
}

.spark-faq h2 {
    margin: 28px 0 8px;
    font-size: 1.15rem;
}

@media (max-width: 720px) {
    .spark-days { align-items: flex-start; flex-direction: column; }
    .spark-facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .spark-due strong { transition: none; }
    .spark-due.is-tick strong { opacity: 1; transform: none; }
}