/**
 * TeachDemy — supplemental components for the new static pages
 * (Terms, Privacy, Refund, FAQ, Affiliate, Become an Instructor,
 * Checkout, Contact, Courses, Mentor Support/Preview, 404).
 *
 * Builds on the existing .td-page design system in
 * teachdemy-shared.css / teachdemy-home.css (same :root tokens,
 * .hero/.section/.card/.grid/.table/.pill/.eyebrow/.title/.lead
 * classes) — this file only adds the pieces those pages need that
 * didn't exist yet.
 */

/* ---------- Page hero (shorter than the homepage hero) ---------- */
.td-page .page-hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 55%,#0c6d93 100%);width:100% !important;max-width:100% !important;margin:0 !important;border-radius:0 !important}
.td-page .page-hero .container{max-width:min(1220px,92%);margin:0 auto}
.td-page .page-hero .container{padding:56px 0 64px}
.td-page .page-hero .crumb{font-size:11px;color:#bfe1dc;margin-bottom:16px}
.td-page .page-hero .crumb a{color:#bfe1dc}
.td-page .page-hero .crumb a:hover{color:#fff}
.td-page .page-hero h1{font-size:44px;line-height:1.08;letter-spacing:-1.5px;margin:14px 0 14px;max-width:820px;color:#fff}
.td-page .page-hero p{font-size:15px;line-height:1.8;color:#dbe8ec;max-width:700px;margin:0}
.td-page .page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.td-page .page-hero .secondary{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.td-page .page-hero .secondary:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}

/* ---------- Box grid (Privacy / Terms / Refund policy boxes) ---------- */
.td-page .policy-note{margin-top:18px;background:var(--mint);border:1px dashed var(--green);color:var(--navy);font-size:12px;line-height:1.7;padding:16px 18px;border-radius:14px}
.td-page .card h3{font-size:15px;margin:0 0 8px;color:var(--ink)}
.td-page .card p{font-size:12.5px;color:var(--muted);line-height:1.75;margin:0}
.td-page .card ul{margin:8px 0 0;padding-left:18px}
.td-page .card li{font-size:12.5px;color:var(--muted);line-height:1.8}

/* ---------- Accordion (FAQ, curriculum-style disclosures) ---------- */
.td-page .accordion{border-top:1px solid var(--line)}
.td-page .accordion details{border-bottom:1px solid var(--line);padding:18px 0}
.td-page .accordion summary{cursor:pointer;list-style:none;font-size:14px;font-weight:800;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
.td-page .accordion summary::-webkit-details-marker{display:none}
.td-page .accordion summary:after{content:"+";font-size:20px;font-weight:400;color:var(--green);flex:none;transition:transform .2s}
.td-page .accordion details[open] summary:after{transform:rotate(45deg)}
.td-page .accordion .accordion-body{font-size:13px;color:var(--muted);line-height:1.85;margin-top:12px}
.td-page .accordion .accordion-body p{margin:0 0 12px}
.td-page .accordion .accordion-body p:last-child{margin-bottom:0}

/* ---------- Tabs (FAQ / Courses filters) ---------- */
.td-page .tabs{display:flex;gap:8px;overflow:auto;padding-bottom:6px;margin:20px 0 28px}
.td-page .tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 15px;font-size:11.5px;font-weight:800;color:#4b6076;white-space:nowrap;cursor:pointer}
.td-page .tabs button.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- Timeline (process steps: refund window, how mentorship works…) ---------- */
.td-page .timeline{position:relative;padding-left:34px}
.td-page .timeline:before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:var(--line)}
.td-page .step{position:relative;margin-bottom:26px}
.td-page .step:last-child{margin-bottom:0}
.td-page .step:before{content:"";position:absolute;left:-30px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px var(--mint)}
.td-page .step h3{margin:0 0 6px;font-size:14px;color:var(--ink)}
.td-page .step p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.75}

/* ---------- Quote / testimonial ---------- */
.td-page .quote{font-size:13px;line-height:1.85;color:#314b55;font-style:normal}
.td-page .avatar{height:44px;width:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;display:grid;place-items:center;font-weight:900;flex:none}

/* ---------- Forms (Contact / Checkout / instructor application) ---------- */
.td-page .form-grid{display:grid;gap:14px}
.td-page .form-grid.g2{grid-template-columns:1fr 1fr}
.td-page .form-grid label{display:block;font-size:11px;font-weight:800;color:var(--ink);margin-bottom:6px}
.td-page .form-grid input,
.td-page .form-grid select,
.td-page .form-grid textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px 14px;outline:0;font-size:12.5px;font-family:inherit;color:var(--ink);background:#fff}
.td-page .form-grid input:focus,
.td-page .form-grid select:focus,
.td-page .form-grid textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--mint)}
.td-page .form-grid textarea{min-height:130px;resize:vertical}
@media (max-width:700px){.td-page .form-grid.g2{grid-template-columns:1fr}}

/* ---------- Sticky bottom bar (Checkout) ---------- */
.td-page .sticky-bar{position:sticky;bottom:0;z-index:45;background:rgba(255,255,255,.98);border-top:1px solid var(--line);box-shadow:0 -14px 34px rgba(7,31,61,.08)}
.td-page .sticky-bar .container{min-height:70px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.td-page .sticky-bar small{font-size:11px;color:var(--muted);margin-right:auto}
.td-page .sticky-bar strong{font-size:21px;color:var(--ink)}
@media (max-width:650px){.td-page .sticky-bar small{display:none}}

/* ---------- Checkout summary card ---------- */
.td-page .summary-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.td-page .summary-card h3{margin:0 0 14px;font-size:15px}
.td-page .summary-line{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--line)}
.td-page .summary-line:last-of-type{border-bottom:0}
.td-page .summary-line.total{font-weight:900;color:var(--ink);font-size:15px;padding-top:14px}
.td-page .summary-line .old{font-size:11px;color:#9aa8ae;text-decoration:line-through;margin-left:6px}

/* ---------- Simple data table (used by FAQ/Privacy data tables) ---------- */
.td-page .table th{background:var(--mint);font-weight:800}
.td-page .table td,.td-page .table th{padding:12px 14px;font-size:12px;text-align:left;border-bottom:1px solid var(--line)}

/* ---------- 404 ---------- */
.td-page .error-hero{text-align:center;padding:110px 0}
.td-page .error-code{font-size:110px;font-weight:950;letter-spacing:-4px;line-height:1;background:linear-gradient(135deg,var(--green),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.td-page .error-hero h1{font-size:34px;margin:14px auto 10px;text-align:center;max-width:720px;font-weight:900}
.td-page .error-hero p{font-size:13px;color:var(--muted);max-width:460px;margin:0 auto 26px}
.td-page .error-hero .page-hero-actions{justify-content:center}

/* 404 inside the dark page-hero background */
.td-page .page-hero.error-hero{background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 55%,#0c6d93 100%);padding:0}
.td-page .page-hero.error-hero .container{padding:90px 0 100px}
.td-page .page-hero.error-hero h1{color:#fff;font-size:44px;line-height:1.2;max-width:720px;margin-left:auto;margin-right:auto;text-align:center;font-weight:900}
.td-page .page-hero.error-hero p{color:#dbe8ec;font-size:14px}
.td-page .page-hero.error-hero .error-code{font-size:120px}
.td-page .page-hero.error-hero .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}

@media (max-width:700px){
        .td-page .page-hero h1{font-size:30px}
        .td-page .page-hero .container{padding:40px 0 46px}
        .td-page .error-code{font-size:70px}
        .td-page .page-hero.error-hero h1, .td-page .error-hero h1{font-size:28px}
}

/* ============================================================
 * Mentor Support — 4-step wizard (preview.html design)
 * ============================================================ */

/* Step indicator bar */
.td-page .wizard-steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px;padding:0;list-style:none}
.td-page .wizard-steps li{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--muted);padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);transition:all .2s}
.td-page .wizard-steps li .num{width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--navy);display:grid;place-items:center;font-size:11px;flex:none}
.td-page .wizard-steps li.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.td-page .wizard-steps li.active .num{background:var(--green);color:#fff}
.td-page .wizard-steps li.done{color:var(--green);border-color:var(--green)}
.td-page .wizard-steps li.done .num{background:var(--green);color:#fff}

/* Wizard step panels (only the active one shows) */
.td-page .wizard-panel{display:none}
.td-page .wizard-panel.is-active{display:block;animation:tdFade .3s ease}
@keyframes tdFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Wizard selection cards (discipline/course/instructor pick) */
.td-page .pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.td-page .pick{cursor:pointer;border:2px solid var(--line);border-radius:16px;padding:18px;background:#fff;transition:all .2s;display:block}
.td-page .pick:hover{border-color:var(--green);box-shadow:0 8px 24px rgba(22,166,115,.10)}
.td-page .pick.selected{border-color:var(--green);background:var(--mint)}
.td-page .pick h3{margin:0 0 5px;font-size:14px;color:var(--ink)}
.td-page .pick p{margin:0;font-size:12px;color:var(--muted);line-height:1.6}
.td-page .pick .pick-num{display:inline-block;width:26px;height:26px;border-radius:8px;background:var(--mint);color:var(--green);font-size:11px;font-weight:900;display:grid;place-items:center;margin-bottom:10px}
.td-page .pick.selected .pick-num{background:var(--green);color:#fff}
@media(max-width:900px){.td-page .pick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.td-page .pick-grid{grid-template-columns:1fr}}

/* Session length options */
.td-page .session-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}
.td-page .session-opt{cursor:pointer;border:2px solid var(--line);border-radius:14px;padding:16px 10px;text-align:center;background:#fff;transition:all .2s}
.td-page .session-opt:hover{border-color:var(--green)}
.td-page .session-opt.selected{border-color:var(--green);background:var(--mint)}
.td-page .session-opt .dur{font-size:12px;font-weight:800;color:var(--ink);display:block;margin-bottom:4px}
.td-page .session-opt .pr{font-size:15px;font-weight:950;color:var(--green)}
@media(max-width:900px){.td-page .session-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.td-page .session-grid{grid-template-columns:1fr 1fr}}

/* Time slot grid */
.td-page .slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.td-page .slot{cursor:pointer;border:2px solid var(--line);border-radius:12px;padding:12px;text-align:center;font-size:12px;font-weight:700;color:var(--ink);background:#fff;transition:all .2s}
.td-page .slot:hover{border-color:var(--green)}
.td-page .slot.selected{border-color:var(--green);background:var(--mint);color:var(--green)}
.td-page .slot .day{display:block;font-size:10px;color:var(--muted);font-weight:600;margin-bottom:3px}
@media(max-width:700px){.td-page .slot-grid{grid-template-columns:1fr 1fr}}

/* Review / summary panel */
.td-page .wizard-review{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.td-page .wizard-review h3{margin:0 0 18px;font-size:16px}
.td-page .review-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.td-page .review-row:last-of-type{border-bottom:0}
.td-page .review-row .label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;flex:none}
.td-page .review-row .value{font-size:13px;color:var(--ink);font-weight:700;text-align:right}
.td-page .review-total{display:flex;justify-content:space-between;align-items:center;padding-top:16px;margin-top:8px;border-top:2px solid var(--ink)}
.td-page .review-total .label{font-size:14px;font-weight:900;color:var(--ink)}
.td-page .review-total .value{font-size:24px;font-weight:950;color:var(--green)}

/* Wizard nav buttons */
.td-page .wizard-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}
.td-page .wizard-nav .btn{min-width:140px}

/* ============================================================
 * Footer domain badge + trust polish
 * ============================================================ */
.td-page .foot-domain{margin-top:10px;font-size:13px}
.td-page .foot-domain b{color:#fff;font-weight:900}
.td-page .foot-contact{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.td-page .foot-contact a{display:block;font-size:10px;margin:8px 0;color:#9eb0c5}

/* ============================================================
 * Pillars grid (FAQ "why TeachDemy" 6-card strip)
 * ============================================================ */
.td-page .pillars .card{text-align:left}
.td-page .pillars .icon{margin-bottom:12px}

/* ============================================================
 * Features strip (Courses — Learn Offline / Practice / Ask / Advance)
 * ============================================================ */
.td-page .features .card{text-align:center}
.td-page .features .icon{margin:0 auto 12px;width:48px;height:48px}

/* ============================================================
 * Course page FAQ + CTA (injected via WooCommerce hooks)
 * ============================================================ */
.td-page .td-course-faq .card{border-left:4px solid var(--green)}
.td-page .td-course-cta .banner{padding:28px 32px}
.td-page .td-course-cta h2{font-size:22px;margin:0 0 6px;color:#fff}
.td-page .td-course-cta p{font-size:13px;color:#cce5df;margin:0}
@media(max-width:600px){.td-page .td-course-cta .banner{flex-direction:column;text-align:center}}

/* ============================================================
 * Toast notification (used by forms across static pages)
 * ============================================================ */
/* Toast notification — now styled in teachdemy-dark-mode.css (stacked queue) */
/* This legacy rule is kept for backwards compat but overridden by the newer one */
#td-toast{z-index:9999}

/* ============================================================
 * Item 43 — Spot Player plugin license notice must render RED.
 * The Spot Player video player prints its "unlicensed / license"
 * notice inside the course content; the client asked for it to be
 * red + bold so it is impossible to miss. Scoped to the known
 * plugin classes/ids only (no global resets).
 * ============================================================ */
.spxplayer-license,
.spot-player-license,
[class*="spotplayer"] .license-text,
[id*="spotplayer"] .license-text { color: #d63638 !important; font-weight: 600; }

/* ============================================================
 * Item 24 — Categories page (/disciplines/). Hero stat numbers
 * sit on the DARK hero, so force them WHITE (plus their labels
 * light) no matter what loads before this file.
 * ============================================================ */
.td-page .hero .stats .stat b,
.td-page .page-hero .stats .stat b { color:#fff !important; }
.td-page .hero .stats .stat span,
.td-page .page-hero .stats .stat span { color:#cfe3de !important; }

/* Category cards — lift + teal border + icon color shift on hover. */
.td-page .td-cat-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.td-page .td-cat-card:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: 0 14px 34px rgba(7, 80, 68, .10); }
.td-page .td-cat-card .td-cat-icon svg { width: 26px; height: 26px; color: var(--green); transition: color .2s ease, transform .2s ease; }
.td-page .td-cat-card:hover .td-cat-icon svg { color: var(--teal, #087d72); transform: scale(1.06); }
.td-page .td-cat-card h3 { margin: 10px 0 0; }

/* A–Z alphabetical filter pills (Categories page). */
.td-page .td-az-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.td-page .td-az-filter .az-pill { border: 1px solid var(--line); background: #fff; color: #4b6076; border-radius: 999px; min-width: 34px; padding: 7px 10px; font-size: 11px; font-weight: 800; cursor: pointer; transition: all .15s ease; }
.td-page .td-az-filter .az-pill:hover { border-color: var(--green); color: var(--green); }
.td-page .td-az-filter .az-pill.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 700px) { .td-page .td-az-filter .az-pill { min-width: 30px; padding: 6px 8px; } }

/* ============================================================
 * Item 25 — Upcoming page: notify form, waitlist pre-order button,
 * PRE-SALE badge and inline messages.
 * ============================================================ */
.td-page .td-upcoming-actions { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.td-page .td-upcoming-actions .btn { padding: 10px 14px; font-size: 11px; }
.td-page .td-presale-wrap { display: inline-flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.td-page .td-presale-badge { display: inline-block; background: var(--gold, #f3b82f); color: #14243b; font-size: 9px; font-weight: 900; letter-spacing: .5px; padding: 4px 8px; border-radius: 6px; }
.td-page .td-upcoming-instructor { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.td-page .td-upcoming-instructor-name { font-weight: 800; color: var(--ink); }
.td-page .td-upcoming-instructor-role::before { content: " · "; color: var(--line); }
.td-page .td-notify-form { display: grid; gap: 8px; margin-top: 12px; padding: 14px; border: 1px dashed var(--green); border-radius: 12px; background: var(--mint); }
.td-page .td-notify-form input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12px; outline: 0; background: #fff; color: var(--ink); }
.td-page .td-notify-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--mint); }
.td-page .td-notify-form-row { display: flex; gap: 8px; }
.td-page .td-notify-form-row .btn { padding: 9px 13px; font-size: 11px; }
.td-page .td-notify-msg { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--green); }
.td-page .td-notify-msg.is-error { color: #d63638; }

/* ============================================================
 * Round 10 — Upcoming page: live waitlist counter chip + pre-sale
 * seats-left urgency meter (green → amber → red as seats fill).
 * ============================================================ */
.td-page .td-wl-social { margin-top: 10px; }
.td-page .td-wl-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #0d7a57; background: var(--mint, #e9fbf4); border: 1px solid rgba(22, 166, 115, .25); border-radius: 999px; padding: 5px 12px; }
.td-page .td-wl-chip svg { width: 13px; height: 13px; flex: none; color: #f0862b; }
.td-page .td-seats { margin-top: 10px; }
.td-page .td-seats__label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .2px; color: var(--muted, #6b7b90); margin-bottom: 5px; text-transform: uppercase; }
.td-page .td-seats__bar { display: block; height: 6px; border-radius: 999px; background: var(--line, #dcebe6); overflow: hidden; }
.td-page .td-seats__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #16a673, #27c58b); transition: width .4s ease; }
.td-page .td-seats.is-warn .td-seats__label { color: #8a6d1a; }
.td-page .td-seats.is-warn .td-seats__bar i { background: linear-gradient(90deg, #e2a52e, #f7bd31); }
.td-page .td-seats.is-urgent .td-seats__label { color: #b3362b; }
.td-page .td-seats.is-urgent .td-seats__bar i { background: linear-gradient(90deg, #cf4a3d, #e2695c); }
.td-page .td-seats.is-full .td-seats__label { color: #b3362b; }
.td-page .td-seats.is-full .td-seats__bar i { background: #b3362b; }
html[data-theme="dark"] .td-page .td-wl-chip { background: #0a3230; border-color: #12443d; color: #9adbc2; }
html[data-theme="dark"] .td-page .td-seats__bar { background: #12443d; }
html[data-theme="dark"] .td-page .td-seats__label { color: #8fb3a8; }

/* ============================================================
 * Item 27 — Affiliate page: centered green highlight box + CTA card.
 * ============================================================ */
.td-page .td-affiliate-highlight { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; margin: 26px auto 0; max-width: 430px; padding: 18px 24px; border-radius: 16px; background: linear-gradient(135deg, #18b47d, #27c58b); color: #fff; box-shadow: 0 14px 34px rgba(24, 180, 125, .25); }
.td-page .td-affiliate-highlight b { font-size: 26px; font-weight: 950; letter-spacing: -.5px; }
.td-page .td-affiliate-highlight span { font-size: 12px; line-height: 1.6; color: #eafff6; }
.td-page .td-affiliate-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ============================================================
 * Item 31 — Courses page: client-side search bar + upcoming strip.
 * ============================================================ */
.td-page .td-catalog-search { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.td-page .td-catalog-search-box { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 260px; max-width: 430px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 14px; color: var(--muted); }
.td-page .td-catalog-search-box:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--mint); }
.td-page .td-catalog-search-box input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 12.5px; color: var(--ink); }
.td-page .td-catalog-search-box input::-webkit-search-cancel-button { display: none; }
.td-page .td-search-clear { border: 0; background: var(--line); color: var(--navy); width: 22px; height: 22px; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; flex: none; display: grid; place-items: center; }
.td-page .td-search-clear:hover { background: var(--green); color: #fff; }
.td-page .td-catalog-count { font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.td-page .td-upcoming-mini .mini-btn { display: inline-block; margin-top: 10px; }

/* ============================================================
 * Item 33 — Instructor Support (mentor-support) overview page:
 * 2-column wizard layout, plan cards, live summary panel and the
 * "Verified Expert" badges (4 spots) with guaranteed contrast —
 * teal on light backgrounds, mint on the dark hero.
 * ============================================================ */
.td-page .td-ms-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.td-page .td-ms-summary { position: sticky; top: 100px; }
.td-page .td-summary-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow, 0 8px 28px rgba(7, 31, 61, .05)); }
.td-page .td-summary-card .summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); padding: 9px 0; border-bottom: 1px solid var(--line); }
.td-page .td-summary-card .summary-line strong { color: var(--ink); text-align: right; }
.td-page .td-summary-card .summary-line.total { font-weight: 900; color: var(--ink); font-size: 15px; padding-top: 12px; border-bottom: 0; }
.td-page .td-summary-card .btn { width: 100%; margin-top: 16px; }
.td-page .td-summary-note { font-size: 11px; color: var(--muted); line-height: 1.7; margin: 12px 0 0; }

/* Plan cards (from $tdp_plans). */
.td-page .td-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.td-page .td-plan-opt { position: relative; cursor: pointer; border: 2px solid var(--line); border-radius: 14px; padding: 18px 12px; text-align: center; background: #fff; transition: all .2s; display: grid; gap: 4px; justify-items: center; }
.td-page .td-plan-opt:hover { border-color: var(--green); }
.td-page .td-plan-opt.selected { border-color: var(--green); background: var(--mint); }
.td-page .td-plan-opt.is-featured { border-color: var(--green); }
.td-page .td-plan-opt .dur { font-size: 12px; font-weight: 800; color: var(--ink); }
.td-page .td-plan-opt .pr { font-size: 20px; font-weight: 950; color: var(--green); }
.td-page .td-plan-opt small { font-size: 10px; color: var(--muted); }
.td-page .td-plan-ribbon { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; font-size: 8px; font-weight: 900; letter-spacing: .5px; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 900px) { .td-page .td-ms-layout { grid-template-columns: 1fr; } .td-page .td-ms-summary { position: static; } .td-page .td-plan-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .td-page .td-plan-grid { grid-template-columns: 1fr; } }

/* "Verified Expert" — 4 spots. Teal #087d72 on LIGHT backgrounds,
   mint #9fe3cf on the DARK hero (visible in both light & dark modes). */
.td-page .td-verified { display: inline-flex; align-items: center; gap: 6px; color: #087d72; font-weight: 800; font-size: 12px; }
.td-page .td-verified--ondark { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #9fe3cf; font-weight: 800; font-size: 11px; }
.td-page .td-verified-note { margin-top: 16px; }
.td-page .td-summary-verified { margin-top: 14px; font-size: 11.5px; }
html[data-theme="dark"] .td-page .td-verified { color: #9fe3cf; }
html[data-theme="dark"] .td-page .td-verified--ondark { color: #9fe3cf; }

/* ============================================================
 * Item 30 — Contact page: inline status line under the form.
 * ============================================================ */
.td-page .td-contact-status { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--green); }
.td-page .td-contact-status.is-error { color: #d63638; }

/* ============================================================
 * Item 39 — "Organizations our team worked with" logo wall
 * (grayscale by default, full color on hover) + team logo chips.
 * ============================================================ */
.td-page .td-org-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.td-page .td-org-cell { display: flex; align-items: center; justify-content: center; min-height: 92px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.td-page .td-org-cell img { max-width: 100%; height: auto; max-height: 56px; filter: grayscale(1); opacity: .82; transition: filter .2s ease, opacity .2s ease; }
.td-page .td-org-cell:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(7, 80, 68, .08); border-color: #b9ded2; }
.td-page .td-org-cell:hover img { filter: grayscale(0); opacity: 1; }
@media (max-width: 1050px) { .td-page .td-org-wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .td-page .td-org-wall { grid-template-columns: repeat(2, 1fr); } }

/* University / company logo chip next to a team member's name. */
.td-page .td-org-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--mint); max-width: 100%; }
.td-page .td-org-chip img { height: 26px; width: auto; display: block; }
.td-page .td-org-chip span { font-size: 10px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
 * Item 26/32 — reviewer avatar circles (initials on brand colors).
 * ============================================================ */
.td-page .reviewpic .td-avatar-circle,
.td-page .td-avatar-circle { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 42px; min-height: 42px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .5px; }
.td-page .reviewpic .td-avatar-img { width: 42px; height: 42px; border-radius: 50%; display: block; }
.td-page .td-review-card .reviewer { display: flex; gap: 10px; align-items: center; }
.td-page .td-review-card .reviewer b { font-size: 11px; display: block; color: var(--ink); }
.td-page .td-review-card .reviewer span { font-size: 9.5px; color: var(--muted); }

/* ============================================================
 * Dark-mode support for the new components above (same visual
 * pattern teachdemy-dark-mode.css applies to .card/.pick).
 * ============================================================ */
html[data-theme="dark"] .td-page .td-summary-card,
html[data-theme="dark"] .td-page .td-plan-opt,
html[data-theme="dark"] .td-page .td-org-cell { background:#0d2222 !important; border-color:#1a3030 !important; box-shadow:0 8px 28px rgba(0,0,0,.25) !important; }
html[data-theme="dark"] .td-page .td-plan-opt.is-featured,
html[data-theme="dark"] .td-page .td-plan-opt.selected { border-color:#27c58b !important; background:rgba(39,197,139,.12) !important; }
html[data-theme="dark"] .td-page .td-az-filter .az-pill { background:#0d2222 !important; border-color:#1a3030 !important; color:#c6d8d5 !important; }
html[data-theme="dark"] .td-page .td-az-filter .az-pill.is-active { background:#123434 !important; border-color:#27c58b !important; color:#fff !important; }
html[data-theme="dark"] .td-page .td-catalog-search-box { background:#0a1f1f !important; border-color:#1a3030 !important; }
html[data-theme="dark"] .td-page .td-catalog-search-box input { color:#e8f0ee !important; }
html[data-theme="dark"] .td-page .td-search-clear { background:#1a3030 !important; color:#e8f0ee !important; }
html[data-theme="dark"] .td-page .td-notify-form { background:rgba(39,197,139,.08) !important; }
html[data-theme="dark"] .td-page .td-org-chip { background:rgba(39,197,139,.10) !important; border-color:#1a3030 !important; }
html[data-theme="dark"] .td-page .td-org-cell img { opacity:.9; }




/* ============================================================
 * ROUND 13 — Disciplines (Category) page redesign.
 * Real site categories only · "Engineering" titles · گرایش chips ·
 * search + level filter + sort toolbar · split hero.
 * ============================================================ */

/* --- Split hero --- */
.td-page .td-cat-hero{background:linear-gradient(125deg,#062b2b 0%,#07504b 62%,#0c6d93 135%);color:#fff;padding:56px 0 64px}
.td-page .td-cat-hero .crumb a{color:#9ed8c4}
.td-page .td-cat-hero .crumb{color:#7fbfa9}
.td-page .td-cat-hero__grid{display:grid;grid-template-columns:1.5fr .9fr;gap:40px;align-items:center}
.td-page .td-cat-hero .eyebrow{color:#27c58b}
.td-page .td-cat-hero h1{color:#fff;font-size:clamp(30px,4.4vw,46px);letter-spacing:-1.2px;margin:14px 0 12px;line-height:1.08}
.td-page .td-cat-hero__lead{color:#d3ece6;font-size:15px;line-height:1.85;max-width:520px;margin:0 0 24px}
.td-page .td-cat-hero__stats{display:flex;gap:14px;flex-wrap:wrap}
.td-page .td-cat-hero__stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:15px;padding:14px 22px;min-width:110px}
.td-page .td-cat-hero__stat b{display:block;font-size:26px;font-weight:900;color:#fff;letter-spacing:-.5px}
.td-page .td-cat-hero__stat span{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9ed8c4}
/* Popular quick-links card */
.td-page .td-cat-quick{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:18px;backdrop-filter:blur(4px)}
.td-page .td-cat-quick__eyebrow{display:block;font-size:10px;font-weight:900;letter-spacing:.16em;color:#27c58b;margin:2px 4px 10px}
.td-page .td-cat-quick__row{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;text-decoration:none;transition:background .15s}
.td-page .td-cat-quick__row:hover{background:rgba(255,255,255,.09)}
.td-page .td-cat-quick__icon{width:34px;height:34px;flex:none;border-radius:10px;background:rgba(39,197,139,.16);display:grid;place-items:center;color:#3fe0a4}
.td-page .td-cat-quick__icon svg{width:17px;height:17px}
.td-page .td-cat-quick__name{flex:1;font-size:12.5px;font-weight:800;color:#eaf6f1;letter-spacing:-.1px}
.td-page .td-cat-quick__count{font-size:11px;font-weight:900;color:#9ed8c4;background:rgba(255,255,255,.1);border-radius:8px;padding:3px 9px}
@media (max-width:880px){
	.td-page .td-cat-hero__grid{grid-template-columns:1fr;gap:26px}
	.td-page .td-cat-hero{padding:40px 0 48px}
}

/* --- Toolbar: search + level pills + sort --- */
.td-page .td-cat-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 22px}
.td-page .td-cat-tools__search{flex:1 1 240px;min-width:220px;border:1.5px solid var(--line);border-radius:12px;padding:12px 16px;font-size:13px;background:#fff;color:var(--ink);font-family:inherit}
.td-page .td-cat-tools__search:focus{outline:none;border-color:#16a673;box-shadow:0 0 0 4px #e9fbf4}
.td-page .td-cat-pills{display:flex;gap:7px;flex-wrap:wrap}
.td-page .td-cat-pill{border:1.5px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:9px 16px;font-size:11.5px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s}
.td-page .td-cat-pill:hover{border-color:#9fd8bd;color:#0d7a57}
.td-page .td-cat-pill.is-active{background:linear-gradient(135deg,#16a673,#27c58b);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(22,166,115,.28)}
.td-page .td-cat-sort select{border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;font-size:12px;font-weight:800;color:var(--ink);background:#fff;cursor:pointer;font-family:inherit}
.td-page .td-cat-sort select:focus{outline:none;border-color:#16a673}
.td-page .td-cat-sort .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- Category cards with گرایش chips --- */
.td-page .td-cat-card h3{font-size:15.5px;letter-spacing:-.2px;line-height:1.35}
.td-page .td-cat-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.td-page .td-spec-chip{font-size:10px;font-weight:750;color:#0d7a57;background:#e9fbf4;border:1px solid #bfe8d8;border-radius:999px;padding:3.5px 10px;line-height:1.4}
.td-page .td-spec-chip--more{color:var(--muted);background:#f4f8f6;border-color:var(--line)}
.td-page .td-cat-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
.td-page .td-cat-updated{font-size:10.5px;color:var(--muted);font-weight:650;white-space:nowrap}
@media (max-width:640px){
	.td-page .td-cat-tools__search{flex-basis:100%}
	.td-page .td-cat-sort{margin-left:auto}
}

/* --- Dark mode (Round 13) --- */
html[data-theme="dark"] .td-page .td-cat-hero{background:linear-gradient(125deg,#031816 0%,#04211e 62%,#07333f 135%)}
html[data-theme="dark"] .td-page .td-cat-tools__search,
html[data-theme="dark"] .td-page .td-cat-pill,
html[data-theme="dark"] .td-page .td-cat-sort select{background:#0d2222 !important;border-color:#1a3030 !important;color:#dcebe7 !important}
html[data-theme="dark"] .td-page .td-cat-pill.is-active{background:linear-gradient(135deg,#0d7a57,#16a673) !important;color:#fff !important;border-color:transparent !important}
html[data-theme="dark"] .td-page .td-spec-chip{background:rgba(39,197,139,.10) !important;border-color:#1a3a33 !important;color:#7fd8b8 !important}
html[data-theme="dark"] .td-page .td-spec-chip--more{background:#0d2222 !important;color:#8aa39e !important}
html[data-theme="dark"] .td-page .td-cat-tools__search:focus{box-shadow:0 0 0 4px rgba(39,197,139,.15)}