/* =====================================================
   TranslateXYZ — Pricing Components
   Three contexts:
     .pricing-bundle  — dark compact (homepage)
     .pricing-single  — dark 2-card (product pages)
     .pricing-full    — light full (pricing page)
   ===================================================== */

/* ===========================================
   SHARED: SITE TABS (1 / 5 / 25 sites)
   =========================================== */
.pricing-sites {
    display: inline-flex;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--r-pill);
    padding: 3px;
    gap: 2px;
    margin: var(--sp-5) 0;
}
.pricing-sites__btn {
    padding: 7px 18px;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: rgba(255,255,255,0.65);
    background: transparent;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
    white-space: nowrap;
}
.pricing-sites__btn.is-active {
    background: var(--green-500);
    color: #fff;
    box-shadow: 0 2px 8px rgba(48,178,48,0.4);
}
.pricing-sites__btn:hover:not(.is-active) {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

/* Light surface variant (pricing-full cards) */
.pricing-card--full .pricing-sites,
.pricing-full .pricing-bundle__card--light .pricing-sites {
    background: var(--bg-light-subtle);
    border-color: var(--border-light);
}
.pricing-card--full .pricing-sites__btn,
.pricing-full .pricing-bundle__card--light .pricing-sites__btn {
    color: var(--text-on-light-muted);
}
.pricing-card--full .pricing-sites__btn.is-active,
.pricing-full .pricing-bundle__card--light .pricing-sites__btn.is-active {
    background: var(--green-500);
    color: #fff;
}
.pricing-card--full .pricing-sites__btn:hover:not(.is-active),
.pricing-full .pricing-bundle__card--light .pricing-sites__btn:hover:not(.is-active) {
    background: var(--green-100);
    color: var(--green-700);
}

/* ===========================================
   SHARED: PRICE DISPLAY
   =========================================== */
.pricing-price {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-2);
}
.pricing-price__regular {
    font-size: var(--fs-md);
    color: var(--text-on-dark-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(255,255,255,0.3);
}
.pricing-price__main {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.pricing-price__current {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-extra);
    color: #fff;
    line-height: 1;
    letter-spacing: var(--ls-tighter);
}
.pricing-price__period {
    font-size: var(--fs-md);
    color: var(--text-on-dark-muted);
    font-weight: var(--fw-medium);
}

/* Light surface price overrides */
.pricing-card--full .pricing-price__regular,
.pricing-bundle__card--light .pricing-price__regular {
    color: var(--text-on-light-muted);
    text-decoration-color: var(--neutral-300);
}
.pricing-card--full .pricing-price__current,
.pricing-bundle__card--light .pricing-price__current {
    color: var(--green-700);
}
.pricing-card--full .pricing-price__period,
.pricing-bundle__card--light .pricing-price__period {
    color: var(--text-on-light-muted);
}

/* ===========================================
   SHARED: SAVE BADGE
   =========================================== */
.pricing-save {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}
.pricing-save__badge {
    display: inline-flex;
    align-items: center;
    background: rgba(48,178,48,0.2);
    color: var(--green-300);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(48,178,48,0.35);
    letter-spacing: 0.02em;
}
.pricing-save__renew {
    font-size: var(--fs-xs);
    color: var(--text-on-dark-muted);
}

/* Light surface save badge */
.pricing-card--full .pricing-save__badge,
.pricing-bundle__card--light .pricing-save__badge {
    background: var(--green-50);
    color: var(--green-700);
    border-color: var(--green-200);
}
.pricing-card--full .pricing-save__renew,
.pricing-bundle__card--light .pricing-save__renew {
    color: var(--text-on-light-muted);
}

/* ===========================================
   SHARED: FEATURE LIST
   =========================================== */
.pricing-card__features {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: var(--sp-6) 0;
    font-size: var(--fs-sm);
    color: var(--text-on-dark);
}
.pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    line-height: var(--lh-snug);
}
.pricing-card__features li svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--green-400);
}

/* Light surface features */
.pricing-card--full .pricing-card__features,
.pricing-bundle__card--light .pricing-card__features {
    color: var(--text-on-light);
}
.pricing-card--full .pricing-card__features li svg,
.pricing-bundle__card--light .pricing-card__features li svg {
    color: var(--green-600);
}

/* ===========================================
   SHARED: TRUST LINE BELOW CTA
   =========================================== */
.pricing-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-on-dark-muted);
    margin-top: var(--sp-3);
    text-align: center;
}
.pricing-card--full .pricing-trust,
.pricing-bundle__card--light .pricing-trust {
    color: var(--text-on-light-muted);
}


/* ===========================================
   RESPONSIVE — shared selectors
   =========================================== */
@media (max-width: 768px) {
    .pricing-price__current { font-size: var(--fs-4xl); }
}

@media (max-width: 640px) {
    .pricing-sites__btn { padding: 6px 12px; }
}