/*
 * ava-ds.css — Avatarium Design System (AVA-244)
 * Reusable premium components: gradient H1, VS-hero, feature-grid, gradient callout,
 * decision cards, accordion FAQ. Dark theme + brand gradients. Presentation only.
 * First adopter: /astroline-alternative/. Add classes to any page; do not inline-duplicate.
 */

.ava-cmp{--ds-pnl:#171722;--ds-ln:#2a2a38;--ds-mut:#9a9ab0;--ds-pur:#c39bff;--ds-blu:#6a7bff;--ds-pnk:#e879a6;--ds-gold:#e8c96a;max-width:920px;margin:22px auto;padding:0 16px;line-height:1.6;color:#e8e8f0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* Gradient H1 */
.ava-cmp h1{font-size:clamp(24px,3.6vw,38px);text-align:center;font-weight:800;line-height:1.18;margin:0 0 8px;background:linear-gradient(120deg,#fff,#c39bff 58%,#6a7bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ava-cmp .ava-sub{text-align:center;color:var(--ds-mut);max-width:660px;margin:0 auto 30px;font-size:15px}
.ava-cmp h2{font-size:22px;font-weight:750;margin:36px 0 14px;text-align:center}

/* VS hero */
.ava-vs{display:flex;margin:0 auto 38px;max-width:780px;position:relative}
.ava-vs__side{flex:1;background:var(--ds-pnl);border:1px solid var(--ds-ln);padding:24px 18px;text-align:center}
.ava-vs__side.l{border-radius:18px 0 0 18px}
.ava-vs__side.r{border-radius:0 18px 18px 0;border-left:none;background:linear-gradient(160deg,rgba(106,123,255,.16),rgba(195,155,255,.07));border-color:rgba(195,155,255,.38)}
.ava-vs__ic{font-size:30px;line-height:1;margin-bottom:8px}
.ava-vs__name{font-weight:800;font-size:21px;margin:0 0 4px}
.ava-vs__side.r .ava-vs__name{background:linear-gradient(120deg,#6a7bff,#c39bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ava-vs__tag{color:var(--ds-mut);font-size:13px;margin:0}
.ava-vs__badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#6a7bff,#c39bff);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;box-shadow:0 8px 28px rgba(120,110,255,.55);border:3px solid #14141b;z-index:2}

/* Feature grid */
.ava-ft{border:1px solid var(--ds-ln);border-radius:16px;overflow:hidden;background:var(--ds-pnl)}
.ava-ft__row{display:grid;grid-template-columns:1.35fr 1fr 1fr;align-items:center;border-bottom:1px solid var(--ds-ln)}
.ava-ft__row:last-child{border-bottom:none}
.ava-ft__row.head{background:#1c1c28;font-weight:700;font-size:12px;color:var(--ds-mut);text-transform:uppercase;letter-spacing:.04em}
.ava-ft__row.head .av{color:var(--ds-pur)}
.ava-ft__c{padding:12px 14px;font-size:13.5px}
.ava-ft__c.dir{font-weight:600}
.ava-ft__c.av{background:linear-gradient(180deg,rgba(106,123,255,.08),rgba(195,155,255,.04))}
.ava-ft__c .y{color:#7ee0a6;font-weight:700}.ava-ft__c .n{color:#e0696e;font-weight:700}.ava-ft__c .s{color:var(--ds-gold)}

/* Gradient callout */
.ava-hl{margin:32px 0;padding:24px 22px;border-radius:18px;background:linear-gradient(150deg,rgba(106,123,255,.17),rgba(195,155,255,.10));border:1px solid rgba(195,155,255,.4)}
.ava-hl h2{text-align:left;margin:0 0 10px;background:linear-gradient(120deg,#c39bff,#6a7bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ava-hl p{margin:0}

/* Fair / neutral card */
.ava-fair{border:1px solid var(--ds-ln);border-radius:16px;background:var(--ds-pnl);padding:18px 20px;margin:24px 0}
.ava-fair ul{margin:8px 0 0;padding-left:20px}.ava-fair li{margin:0 0 7px}

/* Decision cards */
.ava-pick{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0}
.ava-pick__c{flex:1 1 260px;background:var(--ds-pnl);border:1px solid var(--ds-ln);border-radius:16px;padding:20px}
.ava-pick__c.win{border-color:rgba(195,155,255,.42);background:linear-gradient(160deg,rgba(106,123,255,.12),transparent)}
.ava-pick__c h3{margin:0 0 8px;font-size:16px}
.ava-cta{display:inline-block;margin-top:12px;padding:11px 22px;border-radius:999px;background:linear-gradient(135deg,#6a7bff,#c39bff);color:#fff;font-weight:600;text-decoration:none}

/* Accordion FAQ */
.ava-faq details{border:1px solid var(--ds-ln);border-radius:12px;background:var(--ds-pnl);padding:13px 16px;margin:8px 0}
.ava-faq summary{cursor:pointer;font-weight:600;list-style:none;position:relative}
.ava-faq summary::-webkit-details-marker{display:none}
.ava-faq summary::after{content:"+";position:absolute;right:2px;color:var(--ds-pur);font-size:20px;line-height:1}
.ava-faq details[open] summary::after{content:"–"}
.ava-faq p{color:var(--ds-mut);margin:11px 0 0;font-size:14px}

.ava-note{color:var(--ds-mut);font-size:13px;margin-top:26px;text-align:center;font-style:italic}

@media(max-width:560px){.ava-ft__c{padding:10px 9px;font-size:12px}.ava-vs__side{padding:18px 12px}}

/* ── Rates page — compact, mobile-first DS restyle (AVA-244; presentation only,
      CSS-only → HTML/checkout/data-attrs/SEO byte-identical). .rates-list layout
      (slick carousel) intentionally NOT touched. ── */
.rates-ai-explainer{max-width:760px!important;margin:14px auto 22px!important;padding:16px 18px!important;border-radius:16px!important;background:linear-gradient(150deg,rgba(106,123,255,.12),rgba(195,155,255,.06))!important;border-color:rgba(195,155,255,.30)!important}
.rates-ai-explainer h2{font-size:clamp(19px,2.4vw,26px)!important;margin:0 0 8px!important}
.rates-ai-explainer p{font-size:14px!important;margin:0 0 10px!important;color:#c7c7dd}
.all-rates{margin-bottom:40px!important}
.all-rates__title{margin-bottom:16px!important}
.rate-package{padding:16px 15px!important;border-radius:18px!important;background:#171722!important;border:1px solid #2a2a38!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;position:relative;overflow:hidden}
.rate-package::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6a7bff,#c39bff)}
.rate-package--popular{border-color:rgba(195,155,255,.55)!important;box-shadow:0 10px 40px rgba(120,110,255,.22)!important;background:linear-gradient(180deg,rgba(106,123,255,.10),#171722)!important}
.rate-package__title{font-size:19px!important;margin-bottom:8px!important}
.rate-package__ai,.rate-package__companion{margin:8px 0!important;padding:9px 12px!important;border-radius:12px!important}
.rate-package__includes-title{margin:10px 0 6px!important;font-size:13px!important}
.rate-package__includes li{margin-bottom:5px!important;font-size:13.5px!important}
.rate-package__gift{margin:6px 0!important}
.rate-package__includes-additional{font-size:14px!important;margin:8px 0!important}
.rate-package__price{font-size:26px!important;margin-bottom:2px!important;line-height:1.15}
.rate-package__price + .rate-package__perweek{margin-top:4px!important}
.rate-package__perweek{font-size:13px!important;margin:0 0 10px!important}
.rate-package__renewal{font-size:12.5px!important;margin-bottom:10px!important}
.rate-package__footer{margin-top:auto}
.rate-package__footer>*{margin-bottom:10px!important}
.rate-package__footer .button-gradient{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;border-radius:999px;transition:transform .15s,filter .15s}
.rate-package__footer .button-gradient:hover{transform:translateY(-1px);filter:brightness(1.08)}
/* конфетка: gradient section title, hover-lift (desktop only), thicker popular accent */
.all-rates__title{background:linear-gradient(120deg,#fff,#c39bff 70%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.rate-package--popular::before{height:4px}
@media(min-width:641px){
  .rate-package{transition:transform .18s ease,box-shadow .18s ease}
  .rate-package:hover{transform:translateY(-4px);box-shadow:0 16px 46px rgba(120,110,255,.20)}
}
@media(max-width:640px){
  .rates-ai-explainer{padding:14px 14px!important;margin:10px auto 16px!important}
  .rate-package{padding:14px!important;border-radius:16px!important}
  .rate-package__title{font-size:18px!important}
  .rate-package__price{font-size:24px!important}
  .all-rates{margin-bottom:26px!important}
}

/* ── Checkout — DS restyle (AVA-244; CSS-only → HTML/Stripe/express/crypto/consent/place-order untouched;
      no overflow:hidden / no display:none on functional cols, so nothing gets clipped or hidden) ── */
.checkout-page__title{background:linear-gradient(120deg,#fff,#c39bff 70%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.checkout-grid__col{background:#171722!important;border:1px solid #2a2a38!important;border-radius:18px!important;position:relative}
.checkout-grid__col::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:18px 18px 0 0;background:linear-gradient(90deg,#6a7bff,#c39bff)}
.checkout-grid__col h3{font-size:19px!important;font-weight:750!important}
.checkout-grid__col.payment h3,.checkout-grid__col.billing h3,.checkout-grid__col.details h3{background:linear-gradient(120deg,#fff,#c39bff);-webkit-background-clip:text;background-clip:text;color:transparent}
/* order total accent */
.woocommerce-checkout-review-order-table_container{color:#e8e8f0}
@media(max-width:640px){
  .checkout-page__title{font-size:26px!important}
  .checkout-grid__col{border-radius:16px!important}
  .checkout-grid__col h3{font-size:18px!important}
}

/* Hide the orphaned bottom "OR PAY BY CARD" divider label on the empty grid express
   block — the working express buttons render in .checkout-express-top (a different
   element), so this only removes a dangling ::after label, never a payment button. */
.checkout-grid .checkout-express::after{display:none!important}

/* ── Calculator (flagship) — DS accents, CSS-only. Form (#matrix-single), JS engine,
      octagram render, matrix-root NOT touched — only H1 + the SEO article headings. ── */
.single-matrix-caption{background:linear-gradient(120deg,#fff,#c39bff 62%,#6a7bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc-aeo-en--article h2,.calc-aeo-ru--article h2,.calc-aeo-es--article h2,.calc-aeo-ptbr--article h2,.calc-aeo-tr--article h2{background:linear-gradient(120deg,#fff,#c39bff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Calculator — unify major section-title headings to DS gradient (CSS-only, text only) */
.energy-result-caption,.ava-df__title,.calc-ai-consult__title,.couple-matrix-caption,.avshare-head,.calc-aeo-ru--article h2,.calc-aeo-en--article h2{background:linear-gradient(120deg,#fff,#c39bff 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}