/* =============================================================================
   TestKav · pages/exam-description.css — inner two-column page (luxe white)
   Foundation/tokens come from luxe.css (loaded by base_luxe.html).
   Pattern for all inner pages: breadcrumb → hero → stats → [main + sticky aside].
   Preserves JS hooks: .accordion(.show/.collapsed), .section-tab(.is-active),
   [data-exam-like]/[data-exam-reaction], #examLikeCount, #examLikeMsg.
   ========================================================================== */

.exam-wrap{padding-bottom:30px}

/* ---------- stats band (toned down for this page) ----------
   luxe.css makes .stat .n very large/heavy (good on the home page), but here a
   value can be long text like the organizer name, so we soften size & weight. */
.exam-wrap .stats{border-radius:18px;border:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,#fffdf8,#fff)}
.exam-wrap .stat{padding:26px 18px}
.exam-wrap .stat .n{font-weight:800;font-size: clamp(1.15rem,1.9vw,1rem);line-height:1.3;letter-spacing:0}
.exam-wrap .stat .n.ltr-text{font-size: clamp(1rem,1.2vw,1rem);}
.exam-wrap .stat .l{font-size:.8rem;margin-top:7px}

/* ---------- breadcrumb ---------- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.82rem;color:var(--ink-3);padding:26px 0 6px}
.crumbs a{color:var(--ink-3);transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--gold-deep)}
.crumbs i{font-size:.7rem;color:var(--line-2)}
.crumbs .sep{color:var(--line-2)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- hero ---------- */
.exam-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center;padding:34px 0 56px}
.exam-hero__copy .h1{font-size:clamp(1.95rem,3.4vw,2.7rem);margin-top:16px}
.exam-hero__copy .h1 .gt{direction:ltr;unicode-bidi:isolate}
.exam-hero__copy .lead{margin-top:20px;max-width:52ch}
.exam-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px}
.exam-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold-soft)}
.rating{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--ink-3)}
.rating b{font-family:var(--ff-d);font-weight:800;color:var(--ink);font-size:1rem}
.rating__stars{position:relative;display:inline-block;font-size:.95rem;letter-spacing:1px;color:var(--line-2);line-height:1}
.rating__stars::before{content:"\2605\2605\2605\2605\2605"}
.rating__stars::after{content:"\2605\2605\2605\2605\2605";position:absolute;inset-block:0;inset-inline-start:0;width:var(--r,0%);color:var(--gold);overflow:hidden;white-space:nowrap}
.buyers{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;color:var(--ink-3)}
.buyers i{color:var(--gold-deep)}.buyers b{font-family:var(--ff-d);font-weight:800;color:var(--ink)}

/* reactions (preserve hooks: .reaction-btn/.cta-icon-btn/.is-active/.is-saved) */
.reactions{display:inline-flex;align-items:center;gap:8px}
.reaction-btn,.cta-icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:11px;background:#fff;color:var(--ink-2);font-size:1rem;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.reaction-btn:hover,.cta-icon-btn:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-2px);box-shadow:0 10px 22px -12px var(--gold-soft)}
.reaction-btn:active,.cta-icon-btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.reaction-btn:focus-visible,.cta-icon-btn:focus-visible{outline:0;border-color:var(--gold);box-shadow:var(--ring)}
.reaction-btn.is-active{background:var(--gold);border-color:transparent;color:#1c1402}
.reaction-btn--dislike.is-active{background:#33302B;color:#fff}
.cta-icon-btn.is-saved{background:var(--gold);border-color:transparent;color:#1c1402}
.reactions__divider,.reactions-group__divider{width:1px;height:22px;background:var(--line-2);margin:0 2px}

/* hero visual: reuse .cred from luxe.css; nudge size */
.exam-hero__visual{display:flex;justify-content: center;}
.exam-hero__visual .cred{width:min(310px,100%)}

/* ---------- two-column layout ---------- */
.exam-layout{display:grid;grid-template-columns:1fr;gap:30px;align-items:start;padding-top:25px}
.exam-main{min-width:0;display:flex;flex-direction:column;gap:30px}

/* sticky section tabs */
.section-tabs{position:sticky;top:0;z-index:20;display:flex;gap:8px;flex-wrap:wrap;padding:14px 0;margin-bottom:2px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.section-tab{font-size:.85rem;font-weight:600;color:var(--ink-3);padding:8px 14px;border-radius:999px;border:1px solid transparent;transition:.3s var(--ease)}
.section-tab:hover{color:var(--ink);background:var(--paper-2)}
.section-tab.is-active{color:#1c1402;background:var(--gold-faint);border-color:var(--gold-soft)}

/* panels (section cards — hairline framed, not heavy boxes) */
.panel{position:relative;border:1px solid var(--line);border-radius:20px;padding: 30px 30px 8px 30px;scroll-margin-top:78px;background:#fff}
.panel-head{margin-bottom:22px}
.panel-head .eyebrow{margin-bottom:10px}
.panel-title{font-family:var(--ff-d);font-weight:900;font-size:1.35rem;color:var(--ink);line-height:1.5}
.panel-title .gt{color:var(--gold-text)}

/* info grid (hairline rows) */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.info-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.info-row:nth-child(1),.info-row:nth-child(2){border-top:0}
.info-row .k{font-size:.86rem;color:var(--ink-3);margin-left: 10px;}
.info-row .v{/* font-family:var(--ff-d); */font-weight:600;font-size:.92rem;color:var(--ink);text-align: left;}
.info-row .v.ltr{direction:ltr;unicode-bidi:isolate}
.info-row .v a{color:var(--gold-deep);word-break:break-all}

/* features grid (why testkav) */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.feat-grid .feat{cursor:default}
.feat-grid .feat:hover{background:var(--paper-2)}

/* ---------- accordion (preserve hooks: .accordion-collapse.show / .accordion-button.collapsed) ---------- */
.accordion{display:flex;flex-direction:column}
.accordion-item{border-top:1px solid var(--line)}
.accordion-item:first-child{border-top:0}
.accordion-header{margin:0}
.accordion-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;background:none;border:0;cursor:pointer;text-align:start;padding:20px 4px;font-family:var(--ff-d);font-weight:700;font-size:1rem;color:var(--ink);transition:color .3s var(--ease)}
.accordion-button span:first-child{display:inline-flex;align-items:center;gap:11px}
.accordion-button span:first-child i{color:var(--gold-deep);font-size:1.05rem;transition:color .3s}
.accordion-button:hover{color:var(--gold-deep)}
.acc-icons{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-2);border-radius:50%;color:var(--ink-3);flex:none;transition:.35s var(--ease)}
.accordion-button:hover .acc-icons{border-color:var(--gold);color:var(--gold-deep)}
.accordion-button:not(.collapsed) .acc-icons{background:var(--gold);border-color:transparent;color:#1c1402}
.accordion-button .acc-up{display:none}
.accordion-button:not(.collapsed) .acc-down{display:none}
.accordion-button:not(.collapsed) .acc-up{display:inline}
.accordion-collapse{display:none}
.accordion-collapse.show{display:block;animation:accIn .35s var(--ease)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.accordion-body{padding:2px 4px 24px;color:var(--ink-2);font-size:.93rem;line-height:2}
.accordion-body :is(h1,h2,h3,h4){font-family:var(--ff-d);color:var(--ink);margin:18px 0 10px;line-height:1.6}
.accordion-body p{margin:0 0 12px}
.accordion-body ul,.accordion-body ol{margin:0 12px 14px;padding-inline-start:20px}
.accordion-body li{margin-bottom:7px}
.accordion-body a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
.accordion-body strong{color:var(--ink);font-weight:700}


/* ============================================================
   FIX — mixed Persian/English bidi in rich-text accordion bodies.
   Prevents English terms and punctuation such as Security+, AWS, DNS, VPN,
   and Direct Connect from jumping to the wrong side inside Persian text.
   ============================================================ */
.bidi-richtext,
.accordion-body{
  direction:rtl;
  text-align:right;
  unicode-bidi:isolate;
}

.bidi-richtext .ltr-term,
.accordion-body .ltr-term,
.bidi-richtext .ltr-seq,
.accordion-body .ltr-seq{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline;
}

.bidi-richtext .ltr-seq,
.accordion-body .ltr-seq{
  white-space:nowrap;
}

/* ---------- sticky buy box (sidebar) ---------- */

/* like/reaction toast */
.exam-like-msg{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:60;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:11px 18px;font-size:.86rem;font-weight:600;box-shadow:0 18px 40px -16px rgba(20,17,13,.3)}

.comments-wrap{padding-bottom:34px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .exam-hero{grid-template-columns:1fr;gap:40px;padding:26px 0 40px}
  .exam-hero__visual{order:-1}
  .exam-layout{gap:26px}
}
@media (max-width:620px){
  .info-grid{grid-template-columns:1fr}
  .info-row:nth-child(2){border-top:1px solid var(--line)}
  .feat-grid{grid-template-columns:1fr}
  .panel{padding:24px 20px}
  .section-tabs{gap:6px;overflow-x:auto;flex-wrap:nowrap}
  .section-tab{white-space:nowrap}
}

/* ============================================================
   FIX 1 — buy box dropped to the bottom on mobile.
   (the buybox is *inside* it). Move the column itself instead.
   ============================================================ */
@media (max-width:980px){
}

/* ============================================================
   FIX 2 — "اطلاعاتِ پایه" (section-basic): ragged 2-col rows left
   empty space. Turn each key/value into a filled field card; cards
   in the same row stretch to equal height, so no empty gaps.
   ============================================================ */
#section-basic .info-grid{ grid-template-columns:1fr 1fr; gap:12px; }
#section-basic .info-row{
    display:flex; flex-direction:column; align-items:flex-start; gap:5px;
    padding:13px 15px;
    border:1px solid var(--line); border-radius:13px;
    background:#faf9f6;
}
#section-basic .info-row:nth-child(1),
#section-basic .info-row:nth-child(2){ border-top:1px solid var(--line); }
#section-basic .info-row .k{ font-size:.78rem; color:var(--ink-3); margin:0; }
#section-basic .info-row .v{ font-weight:700; font-size:.92rem; text-align:right; width:100%; }
#section-basic .info-row .v.ltr{ text-align:right; }
#section-basic.panel{ padding-bottom:26px; }
@media (max-width:620px){
    #section-basic .info-grid{ grid-template-columns:1fr; }
}

/* =============================================================================
   HERO CTA (v2) — the page's single purchase point, replacing the old sticky
   buy box and the 3/6/12-month plan list. Buy targets the 6-month plan.
   Typography follows the global policy (AzarMehr; Pinar is headings-only).
   ========================================================================== */
.hero-cta{margin-top:22px}
.hero-cta__row{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.hero-cta__buy{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:14px;text-decoration:none;font-weight:800;font-size:.95rem;
  color:var(--btn-ink);background:var(--btn-grad);
  box-shadow:var(--btn-shadow),0 0 26px -8px rgba(255,194,24,.4);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.hero-cta__buy:hover{background:var(--btn-grad-hover);transform:translateY(-2px);
  box-shadow:var(--btn-shadow-hover),0 0 34px -6px rgba(255,194,24,.5)}
.hero-cta__buy:active{transform:translateY(0);box-shadow:var(--btn-shadow-active)}
.hero-cta__buy:focus-visible{outline:0;box-shadow:var(--ring),var(--btn-shadow)}
/* moving gloss to draw the eye */
.hero-cta__buy::after{content:"";position:absolute;top:-4px;bottom:-4px;width:44px;left:-66px;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);
  transform:skewX(-18deg);animation:heroCtaShine 3.6s ease-in-out infinite;pointer-events:none}
@keyframes heroCtaShine{0%,60%{left:-66px}84%,100%{left:calc(100% + 36px)}}
.hero-cta__free{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:14px;font-weight:600;font-size:.9rem;text-decoration:none;
  color:var(--ink);background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.hero-cta__free i{color:var(--gold-deep)}
.hero-cta__free:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--paper-2);
  transform:translateY(-2px);box-shadow:0 12px 26px -12px var(--gold-soft)}
.hero-cta__free:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.hero-cta__free:focus-visible{outline:0;border-color:var(--gold);box-shadow:var(--ring)}
.hero-cta__hint{display:flex;align-items:center;gap:7px;margin:11px 2px 0;
  font-size:.76rem;color:var(--ink-3);line-height:1.7}
.hero-cta__hint i{color:var(--gold-deep)}
@media(max-width:560px){
  .hero-cta__row{flex-direction:column}
  .hero-cta__buy{width:100%}
  .hero-cta__free{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .hero-cta__buy::after{animation:none;display:none}
  .hero-cta__buy:hover{transform:none}
}