/**
 * QG Subscription Toggle — Phase 2B
 * Matches PurQ UI pattern: radio options, savings badge, frequency dropdown, benefits list.
 * Brand colour: QG deep plum #3d1a2e (adjust to match WoodMart theme vars if needed).
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.qg-subscription-toggle {
    margin: 20px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Purchase option rows ─────────────────────────────────────────────────── */

.qg-purchase-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 50px;           /* pill shape — matches PurQ */
    border: 2px solid #e8dde5;
    background: #fdf7fb;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    user-select: none;
}

.qg-purchase-option:hover {
    border-color: #c4a0b8;
}

.qg-purchase-option.is-selected {
    border-color: #3d1a2e;
    background: #f5edf2;
}

/* ── Hide native radio, show styled circle ────────────────────────────────── */

.qg-purchase-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    border: 2px solid #c4a0b8;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    position: relative;
    flex-shrink: 0;
}

.qg-purchase-option input[type="radio"]:checked {
    border-color: #3d1a2e;
    background: #3d1a2e;
    box-shadow: inset 0 0 0 3px #fff;
}

/* ── Option label layout ──────────────────────────────────────────────────── */

.qg-option-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    flex-wrap: wrap;
    gap: 6px;
}

.qg-option-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.qg-option-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a0d14;
}

.qg-option-price {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a0d14;
    white-space: nowrap;
}

/* ── Savings badge ────────────────────────────────────────────────────────── */

.qg-savings-badge {
    display: inline-block;
    background: #2d8a4e;           /* green — matches PurQ */
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ── Frequency selector block ─────────────────────────────────────────────── */

.qg-frequency-wrap {
    padding: 14px 18px 18px;
    background: #fdf7fb;
    border: 2px solid #3d1a2e;
    border-radius: 18px;
    margin-top: -4px;
    display: none;                 /* shown via JS */
}

.qg-frequency-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #3d1a2e;
    margin-bottom: 8px;
}

.qg-frequency-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1.5px solid #c4a0b8;
    background: #fff;
    font-size: 0.9rem;
    color: #1a0d14;
    cursor: pointer;
    appearance: auto;
    margin-bottom: 14px;
    transition: border-color 0.15s ease;
}

.qg-frequency-select:focus {
    outline: none;
    border-color: #3d1a2e;
}

/* ── Benefits list ────────────────────────────────────────────────────────── */

.qg-subscribe-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.qg-subscribe-benefits li {
    font-size: 0.82rem;
    color: #5a3a4a;
    padding-left: 16px;
    position: relative;
}

.qg-subscribe-benefits li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: #3d1a2e;
}

/* ── Subscribe CTA button ─────────────────────────────────────────────────── */

.qg-subscribe-btn {
    width: 100%;
    margin-top: 4px;
    background-color: #3d1a2e !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 24px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background-color 0.18s ease, opacity 0.18s ease;
}

.qg-subscribe-btn:hover {
    background-color: #5a2643 !important;
}

.qg-subscribe-btn.qg-loading {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
    .qg-purchase-option {
        padding: 12px 14px;
        border-radius: 14px;
    }

    .qg-option-label {
        flex-direction: column;
        align-items: flex-start;
    }

    .qg-subscribe-btn {
        border-radius: 12px !important;
    }
}