/* Reference-style finish for the inner pages (loaded last, after each page stylesheet).
   Keeps every page's layout and behaviour; only the visual language changes. */

:root {
  --field: #F4F3F7;
}
html[data-theme=dark] {
  --field: #24232E;
}

/* ---------- page hero: the same navy band as the home hero ---------- */
.hero.phero {
  padding: clamp(46px,5.6vw,74px) 0 clamp(42px,5vw,64px);
  background: var(--navy);
}
html[data-theme=dark] .hero.phero {
  background: var(--navy-deep);
}
.hero.phero .wrap {
  text-align: center;
}
.phero h1 {
  color: #fff;
  font-size: clamp(2.1rem,4.4vw,3.3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  margin: 14px auto 12px;
  max-width: 860px;
  text-wrap: balance;
}
html[data-theme=dark] .hero.phero h1 {
  color: #fff;
}
html[lang=ar] .phero h1 {
  letter-spacing: 0;
  line-height: 1.16;
}
.phero p {
  margin: 0 auto;
  color: rgba(255,255,255,.82);
  font-size: clamp(.98rem,1.25vw,1.12rem);
  line-height: 1.6;
  max-width: 660px;
}
html[data-theme=dark] .phero p {
  color: #C7D0E8;
}
.phero .badge {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  font-weight: 600;
  margin-bottom: 0;
}
.phero .badge b,
.phero .badge span {
  color: inherit;
}

/* post hero: readable meta on the navy band */
.ah .au {
  color: rgba(255,255,255,.78);
}
.ah .au .pa i {
  color: #fff;
}
.ah .au .btn {
  background: #fff;
  color: var(--ink);
  border: 2px solid #fff;
}
.ah .au .btn:hover {
  background: transparent;
  color: #fff;
}
h1 {
  letter-spacing: -.03em;
}
html[lang=ar] h1 {
  letter-spacing: 0;
}

/* ---------- chips, badges, tags ---------- */
.badge,
.chip,
.tg,
.rt,
.sts b,
.lg2 span {
  border-radius: var(--pill);
}
.badge,
.chip,
.tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.rt {
  padding: 4px 10px;
  background: var(--field);
  border: 1px solid var(--border);
  font: 700 14px var(--hf);
}
.rt i {
  color: var(--gold);
}

/* ---------- buttons ---------- */
.fbt,
.fbtn {
  border-radius: var(--r-sm);
  font-weight: 600;
}
.fbt {
  border: 2px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: 14px 20px;
  font-size: 16px;
}
.fbt:hover {
  background: color-mix(in srgb, var(--btn-bg) 88%, #000);
  color: var(--btn-fg);
  border-color: color-mix(in srgb, var(--btn-bg) 88%, #000);
}
html[data-theme=dark] .fbt:hover {
  background: color-mix(in srgb, var(--btn-bg) 88%, #fff);
  border-color: color-mix(in srgb, var(--btn-bg) 88%, #fff);
}
.fbtn {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.fbtn:hover {
  border-color: var(--text);
}
.btn.red {
  background: #D92D20;
  border-color: #D92D20;
  color: #fff;
}
.btn.red:hover {
  background: transparent;
  color: #D92D20;
}

/* ---------- filters sidebar ---------- */
.aside {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.fld>b,
.fld>label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.fld input[type=text],
.fld input[type=email],
.fld input[type=password],
.fld input[type=number],
.fld input[type=date],
.fld select,
.pf input:not([type=checkbox]):not([type=file]),
.pf select,
.pf textarea,
.cp textarea,
.wd select,
.bar select {
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
}
.fld input:focus,
.fld select:focus,
.pf input:focus,
.pf select:focus,
.pf textarea:focus,
.cp textarea:focus,
.bar select:focus {
  outline: 0;
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent);
}
.rad {
  padding: 7px 0;
}
.fld .rad {
  font-weight: 500;
}

/* ---------- search boxes ---------- */
.sr,
.wd .sr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.sr input {
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 14px 0;
}
.sr:focus-within {
  outline: 0;
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent);
}

/* ---------- listing rows ---------- */
.li {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.li:hover {
  border-color: var(--text);
  box-shadow: var(--shadow);
}
.lb h3 {
  font-weight: 700;
}
.lr {
  background: var(--panel);
}
.lm2 i.fa-solid {
  color: var(--green);
}
.send,
.go {
  border-radius: 50% !important;
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.mc:hover .mf .send,
.bc:hover .go {
  background: var(--yellow);
  color: var(--ink);
}

/* ---------- mentor cards ---------- */
.mc {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 20px 22px 0;
}
.mc:hover {
  border-color: var(--text);
  box-shadow: var(--shadow);
}
.mav {
  width: 88px;
  height: 88px;
  font-size: 2rem;
}
.mm i {
  border-radius: 10px;
  background: color-mix(in srgb, var(--mint) 35%, transparent);
  color: var(--text);
}
html[data-theme=dark] .mm i {
  background: color-mix(in srgb, var(--mint) 18%, transparent);
}
.mc .since {
  font-size: 14px;
}
.hp-vendor__verified-badge {
  color: var(--ok);
}

/* ---------- forum / community ---------- */
.note {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: #FFF6C9;
  color: var(--ink);
}
html[data-theme=dark] .note {
  background: #2C2614;
  color: var(--text);
}
.note a {
  color: var(--ink);
}
html[data-theme=dark] .note a {
  color: var(--yellow);
}
.box {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.bh {
  background: var(--ink);
  color: #fff;
  padding: 14px 20px;
}
html[data-theme=dark] .bh {
  color: #fff;
}
.fic {
  border-radius: 12px;
  background: color-mix(in srgb, var(--mint) 35%, transparent);
  color: var(--text);
}
html[data-theme=dark] .fic {
  background: color-mix(in srgb, var(--mint) 16%, transparent);
}
.lav {
  background: var(--green);
}
.sf {
  background: var(--panel);
}
.ft {
  font-weight: 700;
  letter-spacing: -.02em;
}
html[lang=ar] .ft {
  letter-spacing: 0;
}

/* ---------- blog ---------- */
.bc {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.bc:hover {
  border-color: var(--text);
  box-shadow: var(--shadow);
}
.bth {
  background: linear-gradient(135deg, color-mix(in srgb, var(--mint) 50%, #fff), color-mix(in srgb, var(--yellow) 45%, #fff));
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.dt {
  border-radius: 10px;
}
.bb h3 {
  font-weight: 700;
}
.wd {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.tg {
  background: var(--field);
  border-color: transparent;
}
.bf {
  background: var(--panel);
}

/* ---------- auth ---------- */
.ac {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px,4vw,36px);
}
.ac h1 {
  font-size: clamp(1.8rem,4vw,2.3rem);
  font-weight: 700;
}
.ac .sbtn {
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-weight: 600;
}
.ac .sbtn:hover {
  border-color: var(--text);
  background: var(--field);
}
.ac .demo {
  border-radius: var(--r-sm);
}
.ac .alt a {
  color: var(--green);
}

/* ---------- lesson / post detail ---------- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.ph {
  background: var(--field);
}
.msg {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel);
}
.tc {
  padding: 22px;
}
.tc .top i.fa-star {
  color: var(--gold);
}
.st i {
  border-radius: 9px;
  background: color-mix(in srgb, var(--mint) 35%, transparent);
  color: var(--text);
}
html[data-theme=dark] .st i {
  background: color-mix(in srgb, var(--mint) 16%, transparent);
}
/* Tabs were kept here as a quick override; listing pages define the final styles. */
.tabs .tab {
  cursor: pointer;
}
.desc {
  color: var(--muted);
  line-height: 1.95;
}
.desc [dir=rtl] {
  font-size: 16px;
  line-height: 2;
}
.rel h2 {
  font-weight: 700;
}
.rt {
  color: var(--text);
}

/* ---------- booking slots ---------- */
.slots .slot {
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 9px 14px;
}
.slots .slot:hover {
  border-color: var(--text);
  color: var(--text);
}
.slots .slot.on,
.slots .slot.on:hover {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}

/* ---------- pagination ---------- */
.pgn button,
.pgn .page-numbers {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  font: 600 15px var(--bf);
  transition: background .15s, color .15s;
}
.pgn button.on,
.pgn .page-numbers.current {
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.pgn button:hover,
.pgn a.page-numbers:hover {
  background: var(--field);
  color: var(--text);
}
.pgn button.on:hover,
.pgn .page-numbers.current:hover {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

/* ---------- misc ---------- */
.none {
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
}
.crumb {
  font-size: 14px;
}
.lg2 a,
.lt2 a,
.fi h3 a {
  color: var(--green);
}
.lg2 a:hover,
.lt2 a:hover,
.fi h3 a:hover {
  color: var(--green);
}
.pf label small {
  font-size: 13px;
}
.chips label {
  border-radius: var(--pill);
  padding: 7px 14px;
}
.chips label:has(input:checked) {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}
html[data-theme=dark] .chips label:has(input:checked) {
  color: var(--btn-fg);
}
.ring span {
  font-weight: 700;
}

/* ---------- one surface language for every section (matches the home cards) ---------- */
.mc,
.li,
.bc,
.box,
.card,
.aside,
.wd,
.msg,
.note,
.ac,
.lg2,
.tc {
  border-radius: 12px;
}
.ac {
  border-radius: 16px;
}
.mc:hover,
.li:hover,
.bc:hover {
  box-shadow: var(--shadow-sm);
}
.pg {
  padding-block: clamp(40px,4.6vw,60px) clamp(72px,7vw,100px);
}
.pg > section > h2,
.rel h2,
.box > h2 {
  font-size: clamp(1.3rem,2.2vw,1.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: 18px;
}
html[lang=ar] .pg > section > h2,
html[lang=ar] .rel h2,
html[lang=ar] .box > h2 {
  letter-spacing: 0;
}

/* ---------- blog thumbnails: flat pastel tiles like the home page ---------- */
.bth {
  background: color-mix(in srgb, var(--mint) 40%, #fff);
  border-bottom: 1px solid var(--border);
}
#posts .bc:nth-child(3n+2) .bth {
  background: color-mix(in srgb, var(--yellow) 55%, #fff);
}
#posts .bc:nth-child(3n) .bth {
  background: color-mix(in srgb, var(--blue) 20%, #fff);
}
html[data-theme=dark] .bth {
  background: color-mix(in srgb, var(--mint) 14%, var(--surface));
}
html[data-theme=dark] #posts .bc:nth-child(3n+2) .bth {
  background: color-mix(in srgb, var(--yellow) 16%, var(--surface));
}
html[data-theme=dark] #posts .bc:nth-child(3n) .bth {
  background: color-mix(in srgb, var(--blue) 16%, var(--surface));
}

/* card corners rounded like the home cards */
.pc {
  border-radius: 12px;
}

/* ---------- lesson reviews (grid used on lesson pages) ---------- */
.rgrid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media(min-width:900px) {
  .rgrid {
    grid-template-columns: 1fr 1fr;
  }
}
.rcard {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 20px;
}
.rvstars {
  display: flex;
  gap: 3px;
  color: var(--gold);
  margin-bottom: 10px;
  font-size: 14px;
}
.rvstars .off {
  color: var(--border);
}
.rcard p {
  margin: 0 0 14px;
  line-height: 1.65;
  color: var(--text);
}
.rcard .who {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}
.rreply {
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-inline-start: 3px solid var(--green);
  background: var(--green-soft);
  border-radius: 10px;
}
.rreply-i {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
}
.rreply-i .av {
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel);
  flex: none;
}
.rreply-i .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rreply-i b {
  display: block;
  color: var(--text);
  font-size: 13px;
}
.rreply-i p {
  margin: 2px 0 0;
  color: var(--text);
}
.rcard .who .av {
  border-radius: 50%;
  overflow: hidden;
  background: var(--green-soft);
  flex: none;
}
.rcard .who img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rcard .who b {
  display: block;
  color: var(--text);
  font-weight: 700;
}

.verified-badge {
  vertical-align: -0.18em;
  display: inline-block;
  margin-inline-start: 0.2em;
  flex: 0 0 auto;
}
/* ---------- lesson stat badge (rating + review count on lesson cards) ---------- */
.lst {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.lst i.fa-solid {
  color: var(--gold);
}
.lst sup {
  color: var(--muted);
  font-weight: 600;
  margin-inline-start: 3px;
}
.lst-none {
  color: var(--muted);
  font-weight: 500;
}

/* ===== Theme-aware artwork: swap between light/dark SVG pairs ===== */
.only-light { display: inline-block; }
.only-dark  { display: none; }
html[data-theme=dark] .only-light { display: none; }
html[data-theme=dark] .only-dark  { display: inline-block; }