/*
 * Solverra - MAD Subscriptions (subscribe-and-save)
 * Consumes the design-system token sheet only (var(--sol-*) / var(--color-*)).
 * No hardcoded brand colors. Falls back to neutral values where a token is
 * absent so the plugin still renders without the design-system mu-plugin.
 * ASCII-only per STANDARDS Section 19.1.
 */

/* ---------------------------------------------------------------------------
 * PDP subscribe-and-save selector
 * ------------------------------------------------------------------------- */

.solverra-subs-selector {
    margin: var(--s-5, 24px) 0;
    padding: var(--s-4, 16px);
    border: 1px solid var(--color-border, rgba(31, 44, 23, 0.12));
    border-radius: var(--r-md, 12px);
    background: var(--color-bg-soft, #fbfaf4);
}

.solverra-subs-selector__title {
    margin: 0 0 var(--s-3, 12px);
    font-family: var(--ff-display, inherit);
    font-size: var(--fs-lg, 18px);
    letter-spacing: var(--ls-caps, 0.04em);
    text-transform: uppercase;
    color: var(--color-text, #1f2c17);
}

.solverra-subs-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "radio label price"
        "radio note  note";
    align-items: center;
    gap: 2px var(--s-3, 12px);
    padding: var(--s-3, 12px) var(--s-4, 16px);
    margin-bottom: var(--s-2, 8px);
    border: 1px solid var(--color-border, rgba(31, 44, 23, 0.12));
    border-radius: var(--r-sm, 8px);
    background: var(--color-bg-elev, #ffffff);
    cursor: pointer;
    transition: border-color var(--dur-2, 220ms) var(--ease-out, ease),
                box-shadow var(--dur-2, 220ms) var(--ease-out, ease);
}

.solverra-subs-option:last-child {
    margin-bottom: 0;
}

.solverra-subs-option:hover {
    border-color: var(--color-primary, #8cc63f);
}

.solverra-subs-option input[type="radio"] {
    grid-area: radio;
    margin: 0;
    accent-color: var(--color-primary, #8cc63f);
}

.solverra-subs-option__label {
    grid-area: label;
    font-weight: 600;
    color: var(--color-text, #1f2c17);
}

.solverra-subs-option__price {
    grid-area: price;
    font-family: var(--ff-display, inherit);
    font-weight: 700;
    color: var(--color-text, #1f2c17);
    white-space: nowrap;
}

.solverra-subs-option__note {
    grid-area: note;
    font-size: var(--fs-xs, 12px);
    color: var(--color-text-muted, #606061);
}

/* Highlight the radio the customer has actually chosen. */
.solverra-subs-option input[type="radio"]:checked ~ .solverra-subs-option__label {
    color: var(--color-primary-dark, #6fa82a);
}

.solverra-subs-option.is-selected {
    border-color: var(--color-primary, #8cc63f);
    box-shadow: 0 0 0 1px var(--color-primary, #8cc63f);
}

.solverra-subs-badge {
    display: inline-block;
    padding: 1px 8px;
    margin-left: var(--s-1, 4px);
    border-radius: var(--r-pill, 999px);
    background: var(--color-primary, #8cc63f);
    color: var(--sol-forest-deep, #1f2c17);
    font-size: var(--fs-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * My Account -> Subscriptions panel
 * ------------------------------------------------------------------------- */

.solverra-subs-panel__title {
    font-family: var(--ff-display, inherit);
    color: var(--color-text, #1f2c17);
}

.solverra-subs-empty {
    padding: var(--s-5, 24px);
    border: 1px dashed var(--color-border-strong, rgba(31, 44, 23, 0.22));
    border-radius: var(--r-md, 12px);
    color: var(--color-text-muted, #606061);
    text-align: center;
}

.solverra-subs-card {
    margin-bottom: var(--s-5, 24px);
    padding: var(--s-5, 24px);
    border: 1px solid var(--color-border, rgba(31, 44, 23, 0.12));
    border-radius: var(--r-lg, 20px);
    background: var(--color-bg-elev, #ffffff);
    box-shadow: var(--shadow-1, 0 1px 2px rgba(31, 44, 23, 0.06));
}

.solverra-subs-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3, 12px);
    margin-bottom: var(--s-4, 16px);
}

.solverra-subs-card__title {
    font-family: var(--ff-display, inherit);
    font-size: var(--fs-xl, 22px);
    color: var(--color-text, #1f2c17);
}

.solverra-subs-qty {
    font-size: var(--fs-sm, 14px);
    color: var(--color-text-muted, #606061);
}

.solverra-subs-badge--active {
    background: var(--color-success, #6fa82a);
    color: #fff;
    /* Animated pulse per MAD-SUBSCRIPTIONS.md section 8 (ACTIVE badge). */
    animation: solverra-subs-pulse 2.4s var(--ease-in-out, ease-in-out) infinite;
}

.solverra-subs-badge--paused {
    background: var(--color-warning, #d9a441);
    color: #1f2c17;
}

.solverra-subs-badge--cancelled {
    background: var(--color-text-muted, #606061);
    color: #fff;
}

.solverra-subs-card__head .solverra-subs-badge {
    margin-left: 0;
    padding: 3px 12px;
    font-size: var(--fs-xs, 12px);
}

@keyframes solverra-subs-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(111, 168, 42, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(111, 168, 42, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .solverra-subs-badge--active { animation: none; }
}

.solverra-subs-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5, 24px);
    margin: 0 0 var(--s-4, 16px);
    padding: var(--s-3, 12px) 0;
    border-top: 1px solid var(--color-border, rgba(31, 44, 23, 0.12));
    border-bottom: 1px solid var(--color-border, rgba(31, 44, 23, 0.12));
}

.solverra-subs-card__meta div { min-width: 120px; }

.solverra-subs-card__meta dt {
    margin: 0 0 2px;
    font-size: var(--fs-2xs, 11px);
    letter-spacing: var(--ls-eyebrow, 0.12em);
    text-transform: uppercase;
    color: var(--color-text-muted, #606061);
}

.solverra-subs-card__meta dd {
    margin: 0;
    font-weight: 600;
    color: var(--color-text, #1f2c17);
}

.solverra-subs-save {
    color: var(--color-primary-dark, #6fa82a);
    font-weight: 700;
}

.solverra-subs-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3, 12px);
}

.solverra-subs-form { margin: 0; }

.solverra-subs-form--inline {
    display: flex;
    align-items: center;
    gap: var(--s-2, 8px);
}

.solverra-subs-inline-label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2, 8px);
    font-size: var(--fs-sm, 14px);
    color: var(--color-text-muted, #606061);
}

.solverra-subs-inline-label select,
.solverra-subs-cancel__form select {
    padding: 4px 8px;
    border: 1px solid var(--color-border-strong, rgba(31, 44, 23, 0.22));
    border-radius: var(--r-xs, 4px);
    background: var(--color-bg-elev, #ffffff);
    color: var(--color-text, #1f2c17);
}

.solverra-subs-btn {
    cursor: pointer;
}

.solverra-subs-btn--primary {
    background: var(--color-primary, #8cc63f);
    border-color: var(--color-primary, #8cc63f);
    color: var(--sol-forest-deep, #1f2c17);
}

.solverra-subs-btn--ghost {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--color-border-strong, rgba(31, 44, 23, 0.22));
    border-radius: var(--r-sm, 8px);
    background: transparent;
    color: var(--color-text-muted, #606061);
    list-style: none;
}

.solverra-subs-btn--ghost::-webkit-details-marker { display: none; }

.solverra-subs-btn--danger {
    background: var(--color-error, #b0432a);
    border-color: var(--color-error, #b0432a);
    color: #fff;
}

.solverra-subs-cancel {
    margin-left: auto;
}

.solverra-subs-cancel__form {
    margin-top: var(--s-3, 12px);
    padding: var(--s-4, 16px);
    border: 1px solid var(--color-border, rgba(31, 44, 23, 0.12));
    border-radius: var(--r-sm, 8px);
    background: var(--color-bg-soft, #fbfaf4);
}

.solverra-subs-cancel__form p {
    margin-top: 0;
    color: var(--color-text-muted, #606061);
}

.solverra-subs-cancelled-note {
    color: var(--color-text-muted, #606061);
    font-style: italic;
}