/* =====================================================
   TranslateXYZ — Pricing Bundle Compact
   Loaded by: homepage + /pricing/ (embedded inside pricing-full)
   Depends on pricing-shared.css being loaded too.
   ===================================================== */

/* ===========================================
   BUNDLE COMPACT — Dark homepage section
   =========================================== */
.pricing-bundle {
    background: radial-gradient(1000px 500px at 50% 110%, rgba(48,178,48,0.22), transparent 65%),
                linear-gradient(180deg, #0A1A0A 0%, #051005 100%);
    color: var(--text-on-dark);
    padding: var(--sp-12) 0;
    position: relative;
    overflow: hidden;
}

.pricing-bundle__header {
    max-width: 680px;
    margin: 0 auto var(--sp-10);
}
.pricing-bundle__header .eyebrow { margin-bottom: var(--sp-3); }
.pricing-bundle__title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extra);
    color: var(--text-on-dark-strong);
    letter-spacing: var(--ls-tighter);
    margin-bottom: var(--sp-3);
}
.pricing-bundle__desc {
    font-size: var(--fs-md);
    color: var(--text-on-dark-muted);
}

.pricing-bundle__cols {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: var(--sp-7);
    align-items: start;
}

/* Left: individual list */
.pricing-bundle__list {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-dark);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
}
.pricing-bundle__list-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--text-on-dark-muted);
    margin-bottom: var(--sp-4);
}
.pricing-bundle__list-items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.pricing-bundle__list-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-dark);
}
.pricing-bundle__list-row:last-child { border-bottom: none; }
.pricing-bundle__list-num {
    width: 22px;
    height: 22px;
    background: rgba(48,178,48,0.15);
    color: var(--green-400);
    border-radius: 50%;
    font-size: 11px;
    font-weight: var(--fw-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pricing-bundle__list-icon {
    width: 28px; height: 28px;
    flex-shrink: 0;
}
.pricing-bundle__list-name {
    flex: 1;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-on-dark);
}
.pricing-bundle__list-price {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-on-dark-strong);
    white-space: nowrap;
}
.pricing-bundle__list-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-dark-strong);
    font-size: var(--fs-sm);
    color: var(--text-on-dark-muted);
}
.pricing-bundle__list-total strong {
    color: var(--text-on-dark-strong);
    font-weight: var(--fw-semibold);
}

/* Light surface list (inside pricing-full) */
.pricing-full .pricing-bundle__list {
    background: var(--green-100);
    border-color: #00000015;
}
.pricing-full .pricing-bundle__list-label { color: var(--text-on-light-muted); }
.pricing-full .pricing-bundle__list-row { border-bottom-color: #00000015; }
.pricing-full .pricing-bundle__list-num { background: var(--green-300); color: var(--green-700); }
.pricing-full .pricing-bundle__list-name { color: var(--text-on-light); }
.pricing-full .pricing-bundle__list-price { color: var(--text-on-light-strong); }
.pricing-full .pricing-bundle__list-total { border-top-color: #00000015; color: var(--text-on-light-muted); }
.pricing-full .pricing-bundle__list-total strong { color: var(--text-on-light-strong); }

/* Right: bundle card (DARK elevated, green accent) */
.pricing-bundle__card {
    background: linear-gradient(165deg, #1F3A24 0%, #16291A 60%, #0F2614 100%);
    border-radius: var(--r-xl);
    padding: var(--sp-7);
    border: 2px solid var(--green-500);
    box-shadow:
        0 0 0 1px rgba(48,178,48,0.25),
        0 24px 56px rgba(0,0,0,0.5),
        0 0 80px rgba(48,178,48,0.18),
        inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    color: var(--text-on-dark);
    overflow: hidden;
}
.pricing-bundle__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 220px at 50% -30%, rgba(48,178,48,0.22), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.pricing-bundle__card > * { position: relative; z-index: 1; }

.pricing-bundle__card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--green-500);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    padding: 5px 14px;
    border-radius: var(--r-pill);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
    box-shadow: 0 4px 14px rgba(48,178,48,0.45);
}
.pricing-bundle__card-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--green-300);
    margin-bottom: var(--sp-2);
}
.pricing-bundle__card-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--text-on-dark-strong);
    margin-bottom: var(--sp-2);
    letter-spacing: var(--ls-tighter);
}
.pricing-bundle__card-desc {
    font-size: var(--fs-sm);
    color: var(--text-on-dark-muted);
    margin-bottom: 0;
}

/* Save badge inside dark featured card — softer green accent */
.pricing-bundle__card .pricing-save__badge {
    background: rgba(48,178,48,0.18);
    color: var(--green-300);
    border-color: rgba(48,178,48,0.4);
}

/* Bundle card — LIGHT context variant (used on /pricing/ light page) */
.pricing-bundle__card--light {
    background: var(--bg-light);
    box-shadow: 0 0 0 2px var(--green-500), var(--sh-lg);
    border: none;
    border-radius: var(--r-xl);
    padding: var(--sp-7);
    position: relative;
    color: var(--text-on-light);
    overflow: visible;
}
.pricing-bundle__card--light::before { display: none; }
.pricing-bundle__card--light .pricing-bundle__card-label { color: var(--text-on-light-muted); }
.pricing-bundle__card--light .pricing-bundle__card-title { color: var(--text-on-light-strong); }
.pricing-bundle__card--light .pricing-bundle__card-desc  { color: var(--text-on-light-muted); }

/* Light-card child overrides */
.pricing-bundle__card--light .pricing-price__regular { color: var(--text-on-light-muted); text-decoration-color: var(--neutral-300); }
.pricing-bundle__card--light .pricing-price__current { color: var(--green-700); }
.pricing-bundle__card--light .pricing-price__period  { color: var(--text-on-light-muted); }
.pricing-bundle__card--light .pricing-save__badge    { background: var(--green-50); color: var(--green-700); border-color: var(--green-200); }
.pricing-bundle__card--light .pricing-save__renew    { color: var(--text-on-light-muted); }
.pricing-bundle__card--light .pricing-card__features { color: var(--text-on-light); }
.pricing-bundle__card--light .pricing-card__features li svg { color: var(--green-600); }
.pricing-bundle__card--light .pricing-trust          { color: var(--text-on-light-muted); }
.pricing-bundle__card--light .pricing-sites          { background: var(--bg-light-subtle); border-color: var(--border-light); }
.pricing-bundle__card--light .pricing-sites__btn     { color: var(--text-on-light-muted); }
.pricing-bundle__card--light .pricing-sites__btn.is-active { background: var(--green-500); color: #fff; }
.pricing-bundle__card--light .pricing-sites__btn:hover:not(.is-active) { background: var(--green-100); color: var(--green-700); }


/* ===========================================
   RESPONSIVE — bundle
   Note: .pricing-full__bundle-inner responsive override lives in
   pricing-full.css so it correctly cascades over the default rule there
   (same specificity → later source-order wins). Do not duplicate here.
   =========================================== */
@media (max-width: 1024px) {
    .pricing-bundle__cols {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
}

@media (max-width: 768px) {
    .pricing-bundle { padding: var(--sp-9) 0; }
    .pricing-bundle__title { font-size: var(--fs-3xl); }
    .pricing-full__bundle { padding: var(--sp-6); }
    /* Tighten the list inside the bundle on tablet width */
    .pricing-bundle__list { padding: var(--sp-5); }
    .pricing-bundle__card-title { font-size: var(--fs-xl); }
}

@media (max-width: 640px) {
    .pricing-bundle__card,
    .pricing-bundle__card--light { padding: var(--sp-5); }
    .pricing-full__bundle { padding: var(--sp-5); }
    /* Bundle list row: bring icon + name closer, let price wrap below name on phones */
    .pricing-bundle__list-row { gap: var(--sp-2); }
    .pricing-bundle__list-icon { width: 22px; height: 22px; }
    .pricing-bundle__list-num   { width: 20px; height: 20px; font-size: 10px; }
    /* Sites toggle (1 / 5 / 25): each button takes equal share, no horizontal overflow */
    .pricing-sites { display: flex; width: 100%; }
    .pricing-sites__btn { flex: 1; padding: 7px 8px; font-size: var(--fs-xs); }
}

@media (max-width: 480px) {
    /* Phone-specific tightening so the bundle reads cleanly on small viewports */
    .pricing-bundle { padding: var(--sp-7) 0; }
    .pricing-bundle__title { font-size: var(--fs-2xl); }
    .pricing-full__bundle { padding: var(--sp-4); }
    .pricing-bundle__card,
    .pricing-bundle__card--light { padding: var(--sp-4); }
    .pricing-bundle__list { padding: var(--sp-4); }
    .pricing-bundle__card-title { font-size: var(--fs-lg); }
    /* Stack the total row vertically on very narrow screens */
    .pricing-bundle__list-total {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}