/*
 * Parvaz layer on top of the Edurock template (assets/css/style.css):
 *   1. Persian font and right-to-left fixes for the template's LTR utilities
 *   2. Small components the template does not ship (messages, badges, chips,
 *      form feedback, pagination, empty states, notification list)
 * Colours follow the template palette; dark mode follows its `.dark` class.
 * No inline styles anywhere: the Content-Security-Policy forbids them.
 */

/* ------------------------------------------------------------ font */

/* Self-hosted Vazirmatn (OFL): static/assets/fonts/Vazirmatn-wght.woff2 (preloaded by base.html).
   Without the file the browser falls back to Tahoma/system fonts. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-wght.f6d31671339d.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- رنگ‌های سازمانی جدید شما --- */
  --pz-primary: #0B4E53;        /* رنگ اول و اصلی سایت */
  --pz-primary-rgb: 11 78 83;   /* نسخه RGB برای مدیریت سایه‌ها و شفافیت‌ها */
  --pz-secondary: #D14A21;      /* رنگ دوم و مکمل سایت */
  --pz-darkdeep: #073336;       /* نسخه تیره‌تر رنگ اصلی برای بخش‌هایی مثل فوتر یا هیرو */
  --pz-sky: #0B4E53;            /* هماهنگ‌سازی رنگ بنرها با رنگ اصلی */
  --pz-primary-text: var(--pz-primary);  /* رنگ متن/لینک اصلی (در حالت تیره روشن‌تر) */
  --pz-primary-ink-rgb: 11 78 83;

  --pz-success: #1ab69d;
  --pz-warning: #ee9d1c;
  --pz-danger: #d93025;
  --pz-muted: #6b7385;
  --pz-border: #eaeaea;
  --pz-soft: color-mix(in srgb, var(--pz-primary) 8%, #fff);
  --pz-radius: 0.5rem;
}

html.dark {
  /* سبزآبی تیره روی پس‌زمینه‌ی تیره خوانا نیست؛ متن‌ها نسخه‌ی روشن‌تر می‌گیرند */
  --pz-primary-text: #7CC4C2;
  --pz-primary-ink-rgb: 124 196 194;
  --pz-muted: #a3acbf;
  --pz-border: #312a57;
  --pz-soft: #1f1a3a;
}

/*
 * Dark mode, text with no colour of its own. Nothing set a colour on <body>, so
 * any text without a colour class (facts like «تخصص / تحصیلات / سابقه», table
 * cells, plain paragraphs, labels...) stayed browser-black on the dark page.
 * Everything here has zero specificity (:where), so any class still wins.
 */
html.dark body {
  color: #d5dae6;
}

:where(html.dark) :where(h1, h2, h3, h4, h5, h6, dd, th, strong, b, legend, summary, label, caption) {
  color: #f4f6fb;
}

:where(html.dark) :where(dt, small, figcaption) {
  color: #a3acbf;
}

:where(html.dark) ::placeholder {
  color: rgb(255 255 255 / 45%);
}

:where(html.dark) :where(select) option {
  color: #fff;
  background: #151a47;
}

html[dir="rtl"] body,
html[dir="rtl"] .font-inter,
html[dir="rtl"] .font-hind,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
  font-family: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
}

/* ------------------------------------------------------------ logo */

/* Header logo: one version for the light theme, one for the dark theme. */
.site-logo {
  display: block;
  inline-size: auto;
  block-size: 3.5rem;
}

@media (min-width: 1024px) {
  .site-logo {
    block-size: 4.25rem;
  }
}

.site-logo--dark,
html.dark .site-logo--light {
  display: none;
}

html.dark .site-logo--dark {
  display: block;
}

/* ------------------------------------------------------------ RTL fixes */

html[dir="rtl"] .text-left {
  text-align: right;
}

html[dir="rtl"] .rounded-l-lg2 {
  border-radius: 0.5rem 0 0 0.5rem;
}

html[dir="rtl"] .mobile-links a {
  display: block;
}

/*
 * Icon-font glyphs are private-use characters, which the Unicode bidi
 * algorithm treats as left-to-right. Next to a number that turned
 * "<icon> ۱۰ سال سابقه" into "۱۰ <icon> سال سابقه". Isolating every icon
 * makes it neutral, so numbers and words keep their right-to-left order.
 */
[class^="icofont-"],
[class*=" icofont-"] {
  unicode-bidi: isolate;
}

/* Inline SVG icons and badges sit in text the same way. */
svg,
.status-chip,
.chip {
  unicode-bidi: isolate;
}

/* The theme switch peeks out of the right edge: its icon must be the visible part. */
html[dir="rtl"] .theme-controller {
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Template utilities that assume left-to-right. */
html[dir="rtl"] .text-right {
  text-align: left;
}

html[dir="rtl"] .ml-auto {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .mr-auto {
  margin-right: 0;
  margin-left: auto;
}

/* Numbers, codes and Latin words inside Persian text. */
bdi,
[dir="ltr"] {
  unicode-bidi: isolate;
}

input[type="tel"],
input[inputmode="tel"],
input[inputmode="numeric"],
input[type="email"],
input[type="url"] {
  direction: ltr;
  text-align: right;
}

input[type="tel"]::placeholder,
input[inputmode="tel"]::placeholder {
  text-align: right;
}

/* Icofont glyphs are direction:ltr, so a logical margin would land on the
   wrong side: the gap is set physically for this right-to-left site. */
.icon-gap {
  margin-inline-end: 0.375rem;
}

html[dir="rtl"] .icon-gap {
  margin-right: 0;
  margin-left: 0.375rem;
}

/* ------------------------------------------------------------ accessibility */

.visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -4rem;
  z-index: 1000;
  padding: 0.5rem 1rem;
  color: #fff;
  background: var(--pz-primary);
  border-radius: var(--pz-radius);
}

.skip-link:focus {
  inset-block-start: 1rem;
}

:focus-visible {
  outline: 3px solid var(--pz-primary);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

/* ------------------------------------------------------------ layout */

.page-narrow {
  max-inline-size: 48rem;
  margin-inline: auto;
}

/* ------------------------------------------------------------ header bits */

.header-badge {
  position: absolute;
  inset-block-start: -0.35rem;
  inset-inline-end: -0.6rem;
  min-inline-size: 1.25rem;
  padding: 0 0.3rem;
  font-size: 0.65rem;
  line-height: 1.25rem;
  text-align: center;
  color: #fff;
  background: var(--pz-secondary);
  border-radius: 999px;
}

.avatar-initials {
  display: inline-grid;
  place-items: center;
  inline-size: 6.75rem;
  block-size: 6.75rem;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  background: rgb(255 255 255 / 15%);
  border: 2px solid rgb(255 255 255 / 60%);
  border-radius: 50%;
}

/* ------------------------------------------------------------ messages */

.messages {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.message {
  padding: 0.75rem 1rem;
  border-radius: var(--pz-radius);
  border-inline-start: 4px solid var(--pz-primary);
  background: var(--pz-soft);
}

.message-success {
  border-color: var(--pz-success);
}

.message-error {
  border-color: var(--pz-danger);
}

.message-warning {
  border-color: var(--pz-warning);
}

/* ------------------------------------------------------------ tabs & chips */

.tab-link {
  border-block-end: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.tab-link:hover,
.tab-link--active {
  border-block-end-color: var(--pz-primary);
  color: var(--pz-primary-text);
}

.status-chip {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  background: var(--pz-muted);
  border-radius: 999px;
}

.relative > .status-chip {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
}

.status-chip--active,
.status-chip--success,
.status-chip--graded {
  background: var(--pz-success);
}

.status-chip--pending,
.status-chip--verifying,
.status-chip--submitted {
  background: var(--pz-warning);
}

.status-chip--completed,
.status-chip--in_progress {
  background: var(--pz-primary);
}

.status-chip--valid {
  background: var(--pz-success);
}

.status-chip--returned {
  background: var(--pz-warning);
}

.status-chip--cancelled,
.status-chip--failed,
.status-chip--revoked,
.status-chip--voided {
  background: var(--pz-danger);
}

.chip {
  padding: 0 0.5rem;
  border: 1px solid var(--pz-border);
  border-radius: 999px;
}

/* ------------------------------------------------------------ forms */

.field {
  display: grid;
  gap: 0.375rem;
  margin-block-end: 1rem;
}

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  padding: 0.625rem 1.25rem;
  font: inherit;
  border: 2px solid var(--pz-border);
  border-radius: 0.375rem;
  background: transparent;
  color: inherit;
}

.field-help {
  margin-block-start: 0.25rem;
  font-size: 0.8125rem;
  color: var(--pz-muted);
}

.field-error {
  margin-block-start: 0.25rem;
  font-size: 0.8125rem;
  color: var(--pz-danger);
}

.card {
  padding: clamp(1rem, 3vw, 2rem);
  background: #fff;
  border-radius: 0.625rem;
  box-shadow: 0 0 30px rgb(0 0 0 / 6%);
}

html.dark .card {
  background: #161132;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-block-size: 2.75rem;
  padding: 0.5rem 1.5rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--pz-primary);
  border: 1px solid var(--pz-primary);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button:hover {
  color: var(--pz-primary-text);
  background: #fff;
}

.button--ghost {
  color: var(--pz-primary-text);
  background: transparent;
}

.link-button {
  padding: 0;
  font: inherit;
  color: var(--pz-primary-text);
  background: none;
  border: 0;
  cursor: pointer;
}

/* ------------------------------------------------------------ lists */

.profile-list dd {
  margin: 0;
}

.inbox__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.inbox__list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice__button {
  display: grid;
  gap: 0.25rem;
  inline-size: 100%;
  padding: 0.875rem 1rem;
  font: inherit;
  color: inherit;
  text-align: start;
  background: transparent;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.notice__button:hover,
.notice--unread .notice__button {
  background: var(--pz-soft);
}

.notice--unread .notice__button {
  border-inline-start: 4px solid var(--pz-primary);
}

.notice--unread .notice__title {
  font-weight: 700;
}

.notice__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--pz-muted);
}

.notice__message {
  color: var(--pz-muted);
  overflow-wrap: anywhere;
}

.notice__action {
  justify-self: end;
  font-size: 0.875rem;
  color: var(--pz-primary-text);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 1.5rem;
}

.pagination a {
  color: var(--pz-primary-text);
  font-weight: 600;
}

.empty-state {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--pz-muted);
}

.empty-state__title {
  font-weight: 700;
  font-size: 1.125rem;
}

.certificate-result {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
  margin-block-start: 1rem;
}

.certificate-result dt {
  color: var(--pz-muted);
}

.certificate-result dd {
  margin: 0;
  font-weight: 600;
}

/* ------------------------------------------------------------ utilities missing from the template build */

.min-w-0 {
  min-inline-size: 0;
}

.items-start {
  align-items: flex-start;
}

.pz-push-end {
  margin-block-start: auto;
}

.pz-cover {
  object-fit: cover;
}

.pz-span-all {
  grid-column: 1 / -1;
}

.pz-file {
  inline-size: 100%;
  padding: 0.5rem;
  border: 1px dashed var(--pz-border);
  border-radius: 0.375rem;
}

/* ------------------------------------------------------------ public pages */

.page-box {
  padding: clamp(1rem, 4vw, 3rem);
}

.page-box h1 {
  margin-block-end: 1rem;
}

.form-errors {
  margin-block-end: 1rem;
  padding: 0.75rem 1rem;
  color: var(--pz-danger);
  border-inline-start: 4px solid var(--pz-danger);
  background: var(--pz-soft);
  border-radius: var(--pz-radius);
}

/* ------------------------------------------------------------ exams */

.exam-question {
  margin-block-end: 2.5rem;
  border: 0;
  padding: 0;
  min-inline-size: 0;
}

.exam-question legend {
  padding: 0;
}

.exam-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1rem;
}

.save-status {
  min-block-size: 1.5rem;
  margin-block-start: 0.5rem;
  font-size: 0.8125rem;
  color: var(--pz-success);
}

.save-status.is-error {
  color: var(--pz-danger);
}

.exam-timer {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pz-primary-text);
}

.exam-timer.is-urgent {
  color: var(--pz-danger);
}

.question-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
  gap: 0.5rem;
  padding-block: 1rem;
  list-style: none;
}

.question-nav__item {
  display: grid;
  place-items: center;
  block-size: 2.5rem;
  font-weight: 600;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
}

.question-nav__item.is-answered {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

/* ---- reviewing a finished exam (panel/attempt.html)
 * The result card (score ring, verdict, counts), a filter (all / right /
 * wrong / blank, pure CSS with :has()) and one card per question.
 * Four choice states that never look alike and never rely on colour alone:
 *   your right answer   green fill, ✓, «پاسخ شما» + «پاسخ صحیح»
 *   your wrong answer   red fill, ✗, «پاسخ شما»
 *   the right answer    green dashed outline, ✓, «پاسخ صحیح» (exam reveals answers)
 *   other choices       plain, numbered
 */
:root {
  --rv-ok: #0f9d7f;
  --rv-ok-ink: #0b6b57;
  --rv-ok-soft: rgb(26 182 157 / 13%);
  --rv-bad: #d93025;
  --rv-bad-ink: #a5221a;
  --rv-bad-soft: rgb(217 48 37 / 11%);
  --rv-warn: #d98a07;
  --rv-warn-ink: #8a5600;
  --rv-warn-soft: rgb(238 157 28 / 15%);
  --rv-card: #fff;
  --rv-line: var(--pz-border);
}

html.dark {
  --rv-ok-ink: #6fe3c9;
  --rv-bad-ink: #ff9a92;
  --rv-warn-ink: #f6c069;
  --rv-ok-soft: rgb(26 182 157 / 18%);
  --rv-bad-soft: rgb(217 48 37 / 20%);
  --rv-warn-soft: rgb(238 157 28 / 18%);
  --rv-card: rgb(12 14 43);
}

/* the result card */
.result-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-block-end: 1.5rem;
  padding: 1.5rem;
  overflow: hidden;
  color: var(--pz-primary-text);
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(var(--pz-primary-rgb) / 12%), transparent 60%),
    var(--rv-card);
  border: 1px solid var(--rv-line);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgb(16 12 48 / 7%);
  --rv-tone: var(--pz-primary);
}

.result-hero--passed,
.result-hero--level {
  --rv-tone: var(--rv-ok);
}

.result-hero--failed,
.result-hero--voided {
  --rv-tone: var(--rv-bad);
}

.result-hero--pending {
  --rv-tone: var(--rv-warn);
}

.result-hero::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 6px;
  background: var(--rv-tone);
}

.result-ring {
  position: relative;
  flex: none;
  inline-size: 8.5rem;
  block-size: 8.5rem;
}

.result-ring svg {
  inline-size: 100%;
  block-size: 100%;
  transform: rotate(-90deg);
}

.result-ring circle {
  fill: none;
  stroke-width: 11;
}

.result-ring__track {
  stroke: var(--rv-line);
}

.result-ring__value {
  stroke: var(--rv-tone);
  stroke-linecap: round;
  animation: rv-ring 1s ease-out both;
}

@keyframes rv-ring {
  from {
    stroke-dasharray: 0 100;
  }
}

.result-ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  color: var(--rv-tone);
}

.result-ring__label strong {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.result-ring__label small {
  font-size: 1rem;
}

.result-ring__label span {
  margin-block-start: 0.3rem;
  font-size: 0.75rem;
  color: var(--pz-muted);
}

.result-hero__body {
  flex: 1 1 18rem;
  min-inline-size: 0;
}

.result-hero__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pz-muted);
}

.result-hero__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--rv-tone);
}

.result-hero__score {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 0 1rem;
  color: var(--pz-muted);
}

.result-hero__time {
  font-size: 0.85rem;
}

.result-hero__score strong {
  color: var(--pz-primary-text);
  font-size: 1.1rem;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-stat {
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.85rem;
  background: var(--pz-soft);
}

.result-stat strong {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.result-stat span {
  font-size: 0.8rem;
  color: var(--pz-muted);
}

.result-stat--correct {
  background: var(--rv-ok-soft);
}

.result-stat--correct strong {
  color: var(--rv-ok-ink);
}

.result-stat--wrong {
  background: var(--rv-bad-soft);
}

.result-stat--wrong strong {
  color: var(--rv-bad-ink);
}

.result-stat--partial,
.result-stat--pending {
  background: var(--rv-warn-soft);
}

.result-stat--blank strong {
  color: var(--pz-muted);
}

.result-stat--partial strong,
.result-stat--pending strong {
  color: var(--rv-warn-ink);
}

.result-actions {
  margin-block-start: 1.5rem;
}

/* toolbar: filter + legend */
.review-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-block: 0.5rem 1rem;
}

.review-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.review-filter__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.review-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pz-muted);
  background: var(--rv-card);
  border: 1.5px solid var(--rv-line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.review-filter__chip span {
  min-inline-size: 1.4rem;
  padding: 0 0.35rem;
  font-size: 0.75rem;
  text-align: center;
  background: var(--pz-soft);
  border-radius: 999px;
}

.review-filter__radio:focus-visible + .review-filter__chip {
  outline: 2px solid var(--pz-primary);
  outline-offset: 2px;
}

.review-filter__radio:checked + .review-filter__chip {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

.review-filter__radio:checked + .review-filter__chip--correct {
  background: var(--rv-ok);
  border-color: var(--rv-ok);
}

.review-filter__radio:checked + .review-filter__chip--wrong {
  background: var(--rv-bad);
  border-color: var(--rv-bad);
}

.review-filter__radio:checked + .review-filter__chip--blank {
  background: var(--pz-muted);
  border-color: var(--pz-muted);
}

.review-filter__radio:checked + .review-filter__chip span {
  background: rgb(255 255 255 / 22%);
}

.review-board:has(#rf-correct:checked) .review-question:not(.review-question--correct),
.review-board:has(#rf-wrong:checked)
  .review-question:not(.review-question--wrong):not(.review-question--partial),
.review-board:has(#rf-blank:checked) .review-question:not(.review-question--blank) {
  display: none;
}

.review-empty-filter {
  display: none;
  padding: 1.5rem;
  text-align: center;
  color: var(--pz-muted);
  border: 1.5px dashed var(--rv-line);
  border-radius: 1rem;
}

.review-board:has(#rf-correct:checked) .review-list-wrap:not(:has(.review-question--correct)) .review-empty-filter,
.review-board:has(#rf-wrong:checked)
  .review-list-wrap:not(:has(.review-question--wrong, .review-question--partial))
  .review-empty-filter,
.review-board:has(#rf-blank:checked) .review-list-wrap:not(:has(.review-question--blank)) .review-empty-filter {
  display: block;
}

.review-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--pz-muted);
  list-style: none;
}

.review-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.review-legend__dot {
  display: inline-block;
  inline-size: 0.85rem;
  block-size: 0.85rem;
  border-radius: 0.3rem;
}

.review-legend__dot--right {
  background: var(--rv-ok);
}

.review-legend__dot--wrong {
  background: var(--rv-bad);
}

.review-legend__dot--key {
  border: 2px dashed var(--rv-ok);
}

.review-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border-radius: 0.75rem;
}

/* one question */
.review-question {
  --rv-tone: var(--rv-line);
  margin-block-end: 1rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--rv-card);
  border: 1px solid var(--rv-line);
  border-inline-start: 5px solid var(--rv-tone);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgb(16 12 48 / 4%);
  scroll-margin-block-start: 6rem;
}

.review-question--correct {
  --rv-tone: var(--rv-ok);
}

.review-question--wrong {
  --rv-tone: var(--rv-bad);
}

.review-question--partial,
.review-question--pending {
  --rv-tone: var(--rv-warn);
}

.review-question--blank {
  --rv-tone: var(--pz-muted);
}

.review-question__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.review-question__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  font-weight: 800;
  color: #fff;
  background: var(--rv-tone);
  border-radius: 0.65rem;
}

.review-question--blank .review-question__num {
  color: var(--pz-muted);
  background: var(--pz-soft);
}

.review-question__title {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.9;
  color: var(--pz-primary-text);
  overflow-wrap: anywhere;
}

html:not(.dark) .review-question__title {
  color: #1b1d2a;
}

.review-question__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.4rem 0 0.9rem;
  padding-inline-start: 2.85rem;
  font-size: 0.82rem;
  color: var(--pz-muted);
}

.review-verdict {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: 999px;
  color: var(--pz-muted);
  background: var(--pz-soft);
}

.review-verdict--correct {
  color: var(--rv-ok-ink);
  background: var(--rv-ok-soft);
}

.review-verdict--wrong {
  color: var(--rv-bad-ink);
  background: var(--rv-bad-soft);
}

.review-verdict--partial,
.review-verdict--pending {
  color: var(--rv-warn-ink);
  background: var(--rv-warn-soft);
}

.review-choices {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  line-height: 1.8;
  color: var(--pz-primary-text);
  background: transparent;
  border: 1.5px solid var(--rv-line);
  border-radius: 0.8rem;
}

html:not(.dark) .review-choice {
  color: #33384d;
}

.review-choice__mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border-radius: 50%;
}

.review-choice__text {
  flex: 1;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.review-choice__tags {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.review-tag {
  padding: 0.1rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  color: #fff;
  border-radius: 999px;
}

.review-tag--mine {
  background: var(--pz-primary);
}

.review-tag--key {
  background: var(--rv-ok);
}

/* your choice (no verdict yet) */
.review-choice.is-selected {
  border-color: var(--pz-primary);
  background: rgb(var(--pz-primary-rgb) / 7%);
}

.review-choice.is-selected .review-choice__mark {
  color: #fff;
  background: var(--pz-primary);
}

/* the right answer you did not choose */
.review-choice.is-key {
  border-style: dashed;
  border-color: var(--rv-ok);
  background: var(--rv-ok-soft);
}

.review-choice.is-key .review-choice__mark {
  color: #fff;
  background: var(--rv-ok);
}

/* your right answer */
.review-choice.is-right {
  border-color: var(--rv-ok);
  background: var(--rv-ok-soft);
  box-shadow: inset 0 0 0 1px var(--rv-ok);
}

.review-choice.is-right .review-choice__mark,
.review-choice.is-right .review-tag--mine {
  color: #fff;
  background: var(--rv-ok);
}

/* your wrong answer */
.review-choice.is-wrong {
  border-color: var(--rv-bad);
  background: var(--rv-bad-soft);
  box-shadow: inset 0 0 0 1px var(--rv-bad);
}

.review-choice.is-wrong .review-choice__mark,
.review-choice.is-wrong .review-tag--mine {
  color: #fff;
  background: var(--rv-bad);
}

.review-choice.is-wrong .review-choice__text {
  text-decoration: line-through;
  text-decoration-color: rgb(217 48 37 / 55%);
}

/* written answers */
.review-written {
  margin-block-start: 0.5rem;
  padding: 0.7rem 0.95rem;
  border: 1.5px solid var(--rv-line);
  border-radius: 0.8rem;
}

.review-written p {
  margin: 0.2rem 0 0;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.review-written__label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--pz-muted);
}

.review-written--correct {
  border-color: var(--rv-ok);
  background: var(--rv-ok-soft);
}

.review-written--wrong {
  border-color: var(--rv-bad);
  background: var(--rv-bad-soft);
}

.review-written--partial,
.review-written--pending {
  border-color: var(--rv-warn);
  background: var(--rv-warn-soft);
}

.review-written--key {
  border-style: dashed;
  border-color: var(--rv-ok);
}

.review-written--key .review-written__label {
  color: var(--rv-ok-ink);
}

.review-feedback,
.review-explain {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.85;
  border-radius: 0.75rem;
}

.review-feedback {
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 7%);
}

.review-explain {
  color: var(--pz-muted);
  background: var(--pz-soft);
}

.review-feedback svg,
.review-explain svg {
  flex: none;
  margin-block-start: 0.3rem;
}

/* the question navigator of a review */
.question-nav__item--correct {
  color: #fff;
  background: var(--pz-success);
  border-color: var(--pz-success);
}

.question-nav__item--wrong {
  color: #fff;
  background: var(--pz-danger);
  border-color: var(--pz-danger);
}

.question-nav__item--partial,
.question-nav__item--pending {
  color: #fff;
  background: var(--pz-warning);
  border-color: var(--pz-warning);
}

@media (max-width: 575px) {
  .result-hero {
    justify-content: center;
    text-align: center;
  }

  .result-hero__title,
  .result-hero__score {
    justify-content: center;
  }

  .review-question {
    padding: 0.95rem;
  }

  .review-question__meta {
    padding-inline-start: 0;
  }

  .review-choice {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* attendance */
.status-chip--present { background: var(--pz-success); }
.status-chip--late { background: var(--pz-warning); }
.status-chip--absent { background: var(--pz-danger); }
.status-chip--excused { background: var(--pz-muted); }

/* ------------------------------------------------------------ public site (Phase 21) */

.course-card__image {
  aspect-ratio: 16 / 10;
}

.course-cover {
  aspect-ratio: 16 / 9;
  max-block-size: 28rem;
}

/* RTL heading accent (the template's version sits on the left) */
.section-heading {
  position: relative;
  padding-inline-start: 0.75rem;
}

.section-heading::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.3em;
  inline-size: 3px;
  border-radius: 2px;
  background: var(--pz-primary);
}

.course-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem 2rem;
  margin: 0;
}

.course-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.4rem;
  border-block-end: 1px solid var(--pz-border);
}

.course-facts dt {
  color: var(--pz-muted);
}

.course-facts dd {
  margin: 0;
  font-weight: 600;
}

.course-description p + p {
  margin-block-start: 1rem;
}

.group-offer__action {
  min-inline-size: 10rem;
  text-align: end;
}

.group-offer__action .button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.filter-option {
  cursor: pointer;
  border-radius: 0.25rem;
}

.filter-option:has(input:checked) {
  border-color: var(--pz-primary);
  color: var(--pz-primary-text);
}

.filter-option input {
  accent-color: var(--pz-primary);
}

.teacher-photo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.teacher-photo--sm {
  inline-size: 6rem;
  block-size: 6rem;
  font-size: 1.75rem;
}

.teacher-photo--md {
  inline-size: 10rem;
  block-size: 10rem;
  font-size: 2.5rem;
}

.teacher-photo--lg {
  inline-size: min(100%, 18rem);
  block-size: auto;
  aspect-ratio: 1;
  font-size: 4rem;
}

.teacher-photo--initials {
  background: var(--pz-soft);
  color: var(--pz-primary-text);
  font-weight: 700;
}

@media (min-width: 1024px) {
  .enroll-box {
    position: sticky;
    inset-block-start: 6rem;
  }
}

.register-steps {
  list-style: persian;
  padding-inline-start: 1.25rem;
}

/* ------------------------------------------------------------ site images */

/* Every brand image lives in images/site/ (replace the files, keep the names).
   This rule overrides the template's registration background. */
.bg-register {
  /* AVIF 13 KB / WebP 20 KB instead of a 1.2 MB PNG (same picture). */
  background-image: url("../images/site/register-bg.91207a861462.webp");
  background-image: image-set(
    url("../images/site/register-bg.08ee6ac7ff60.avif") type("image/avif"),
    url("../images/site/register-bg.91207a861462.webp") type("image/webp")
  );
}

/* ------------------------------------------------------------ contact page */

.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-item__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 999px;
  background: var(--pz-soft);
  color: var(--pz-primary-text);
  font-size: 1.25rem;
}

/* The school on a map: a fixed-ratio frame (no layout shift while the
   lazy iframe loads) beside a panel of routing actions; stacked on phones. */
.contact-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: 3rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pz-border);
  border-radius: 1.25rem;
  box-shadow: 0 18px 50px -28px rgb(var(--pz-primary-rgb) / 0.45);
}

html.dark .contact-map {
  background: var(--pz-soft);
}

@media (min-width: 1024px) {
  .contact-map {
    grid-template-columns: minmax(0, 1fr) 22rem;
    min-block-size: 26rem;
  }
}

.contact-map__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--pz-soft);
}

@media (min-width: 640px) {
  .contact-map__frame {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1024px) {
  .contact-map__frame {
    aspect-ratio: auto;
  }
}

.contact-map__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--pz-muted);
}

.contact-map__placeholder .icon {
  color: var(--pz-primary-text);
  animation: contact-map-bob 1.6s ease-in-out infinite;
}

@keyframes contact-map-bob {
  50% { transform: translateY(-6px); }
}

.contact-map__iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

html.dark .contact-map__iframe {
  filter: brightness(0.86) contrast(1.05);
}

/* Until the visitor taps the map, page scrolling never gets stuck in it. */
.contact-map__frame.is-guarded .contact-map__iframe {
  pointer-events: none;
}

.contact-map__frame.is-active .contact-map__iframe {
  pointer-events: auto;
}

.contact-map__shield {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.contact-map__shield span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
  color: #fff;
  background: rgb(0 0 0 / 0.62);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.contact-map__shield:hover span,
.contact-map__shield:focus-visible span {
  opacity: 1;
  transform: none;
}

@media (pointer: coarse) {
  .contact-map__shield span {
    opacity: 1;
    transform: none;
  }
}

.contact-map__shield:focus-visible {
  outline: 3px solid var(--pz-primary);
  outline-offset: -3px;
}

.contact-map__frame.is-active .contact-map__shield {
  display: none;
}

.contact-map__panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.5rem;
}

@media (min-width: 1024px) {
  .contact-map__panel {
    justify-content: center;
    padding: 2rem;
    border-inline-start: 1px solid var(--pz-border);
  }
}

.contact-map__eyebrow {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pz-secondary);
}

.contact-map__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--pz-primary-text);
}

.contact-map__address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  line-height: 1.9;
  color: inherit;
}

.contact-map__address .icon {
  flex: none;
  margin-block-start: 0.3rem;
  color: var(--pz-secondary);
}

.contact-map__actions {
  display: grid;
  gap: 0.6rem;
  margin-block-start: 0.4rem;
}

.contact-map__btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  min-block-size: 2.875rem;
  padding: 0.55rem 1rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.contact-map__btn:hover,
.contact-map__btn:focus-visible {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

.contact-map__btn--primary {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

.contact-map__btn--primary:hover,
.contact-map__btn--primary:focus-visible {
  background: var(--pz-secondary);
  border-color: var(--pz-secondary);
}

.contact-map__btn.is-done {
  color: #fff;
  background: var(--pz-success);
  border-color: var(--pz-success);
}

.contact-map__hint {
  flex-basis: 100%;
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  opacity: 0.85;
}

/* Phones open the map app (geo: link); desktops get Google directions. */
.contact-map__btn--touch {
  display: none;
}

@media (pointer: coarse) {
  .contact-map__btn--touch {
    display: flex;
  }

  .contact-map__btn--desk {
    color: var(--pz-primary-text);
    background: transparent;
    border-color: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-map__placeholder .icon {
    animation: none;
  }
}

/* Spam trap: off-screen for people (and screen readers), visible to bots
   that fill every field. Not display:none, which many bots skip. */
.pz-trap {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ about page */

.about-card__icon {
  display: inline-block;
  margin-block-end: 1rem;
  font-size: 2.25rem;
  color: var(--pz-primary-text);
}

/* ------------------------------------------------------------ reviews */

.stars {
  display: inline-flex;
  gap: 0.125rem;
  color: var(--pz-border);
  font-size: 1rem;
  line-height: 1;
}

.stars__star {
  display: inline-block;
}

.stars__star--on {
  color: var(--pz-warning);
}

.review-card,
.testimonial-card {
  padding: 1.25rem;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  background: #fff;
}

html.dark .review-card,
html.dark .testimonial-card {
  background: #161132;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

.testimonial-card blockquote {
  flex: 1;
}

.review-card__reply {
  margin-block-start: 1rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border-inline-start: 3px solid var(--pz-primary);
  background: var(--pz-soft);
  border-radius: 0.375rem;
}

/* Course page: summary, per-star bars, review list, "add a review" (Edurock layout) */

.review-score--empty {
  color: var(--pz-border);
}

.stars--big {
  font-size: 1.25rem;
  gap: 0.25rem;
}

.pz-subheading {
  position: relative;
  padding-inline-start: 0.6rem;
}

.pz-subheading::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.25em;
  inline-size: 2px;
  background: var(--pz-secondary);
}

.rating-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
}

.rating-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-inline-size: 2.25rem;
  font-weight: 600;
}

.rating-bar__count {
  min-inline-size: 2rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--pz-muted);
}

/* <progress> fills from the inline start: from the right on this RTL site. */
.rating-bar__track {
  flex: 1;
  block-size: 0.625rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--pz-border);
  appearance: none;
}

.rating-bar__track::-webkit-progress-bar {
  background: var(--pz-border);
  border-radius: 999px;
}

.rating-bar__track::-webkit-progress-value {
  background: var(--pz-secondary);
  border-radius: 999px;
  transition: inline-size 0.6s ease;
}

.rating-bar__track::-moz-progress-bar {
  background: var(--pz-secondary);
  border-radius: 999px;
}

.review-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-item {
  display: flex;
  gap: 1.25rem;
  padding-block: 1.75rem;
  border-block-start: 1px solid var(--pz-border);
}

.review-item__avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 4rem;
  block-size: 4rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: var(--pz-soft);
  border-radius: 50%;
}

.review-item__date {
  padding: 0.15rem 1rem;
  color: var(--pz-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  border: 2px solid var(--pz-border);
  border-radius: 999px;
}

.review-item__text {
  font-size: 0.9375rem;
  line-height: 1.9;
  overflow-wrap: anywhere;
  white-space: normal;
}

.review-empty {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  border: 1px dashed var(--pz-border);
  border-radius: var(--pz-radius);
}

.review-compose {
  padding: clamp(1.25rem, 4vw, 3rem);
  margin-block-end: 3rem;
  background: #f7f5fe;
  border-radius: 0.625rem;
}

html.dark .review-compose {
  background: transparent;
  box-shadow: 0 0 0 1px var(--pz-border);
}

.review-form fieldset {
  border: 0;
  padding: 0;
  margin-inline: 0;
  min-inline-size: 0;
}

.review-form__text {
  display: block;
  inline-size: 100%;
  min-block-size: 9rem;
  padding: 1rem 1.25rem;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: inherit;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html.dark .review-form__text {
  background: #161132;
  border-color: var(--pz-border);
}

.review-form__text:focus {
  outline: none;
  border-color: var(--pz-primary);
  box-shadow: 0 0 0 4px rgb(11 78 83 / 12%);
}

.review-form__text[aria-invalid="true"] {
  border-color: var(--pz-danger);
}

.review-form__count {
  font-variant-numeric: tabular-nums;
  margin-block-start: 0.25rem;
}

.review-form__count.is-short {
  color: var(--pz-warning);
}

.review-form__alert {
  margin-block-start: 1rem;
  padding: 0.75rem 1rem;
  color: var(--pz-danger);
  background: rgb(217 48 37 / 8%);
  border-inline-start: 4px solid var(--pz-danger);
  border-radius: var(--pz-radius);
}

[hidden] {
  display: none !important;
}

/* Star picker: radios 1..5 in source order (1 is on the right in RTL). */
.star-input {
  display: inline-flex;
  gap: 0.25rem;
}

.star-input__radio {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
  pointer-events: none;
}

.star-input__star {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  font-size: 1.75rem;
  color: #d4d4dc;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

html.dark .star-input__star {
  color: #3d3566;
}

/* Every star up to the checked one is lit... */
.star-input:has(.star-input__radio:checked) .star-input__star {
  color: var(--pz-warning);
}

.star-input__radio:checked + .star-input__star ~ .star-input__star {
  color: #d4d4dc;
}

/* ...and hovering previews a value (overrides the checked state). */
.star-input.star-input:hover .star-input__star {
  color: var(--pz-warning);
}

.star-input.star-input .star-input__star:hover ~ .star-input__star {
  color: #d4d4dc;
}

html.dark .star-input__radio:checked + .star-input__star ~ .star-input__star,
html.dark .star-input.star-input .star-input__star:hover ~ .star-input__star {
  color: #3d3566;
}

.star-input__star:hover {
  transform: scale(1.12);
}

.star-input__radio:focus-visible + .star-input__star {
  outline: 3px solid var(--pz-primary);
  outline-offset: 1px;
}

.star-input__radio[aria-invalid="true"] + .star-input__star {
  color: rgb(217 48 37 / 35%);
}

.star-input__hint {
  min-inline-size: 7rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pz-muted);
}

.review-done {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid rgb(26 182 157 / 35%);
  border-radius: 0.625rem;
}

html.dark .review-done {
  background: #161132;
}

.review-done__icon {
  flex: none;
  font-size: 2.25rem;
  color: var(--pz-success);
}

.review-done--fresh {
  animation: pz-pop 0.45s ease-out;
}

@keyframes pz-pop {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Submit buttons: a spinner while the request runs (any form: see parvaz.js). */
.pz-spinner {
  display: none;
  inline-size: 1.1em;
  block-size: 1.1em;
  border: 2px solid currentcolor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: pz-spin 0.7s linear infinite;
}

.is-loading .pz-spinner {
  display: inline-block;
}

.button:disabled,
.button.is-loading {
  cursor: progress;
  opacity: 0.85;
}

.button.is-loading:hover {
  color: #fff;
  background: var(--pz-primary);
}

@keyframes pz-spin {
  to {
    transform: rotate(360deg);
  }
}

/* In-page targets land below the sticky header. */
html {
  scroll-behavior: smooth;
}

.pz-anchor,
[id] {
  scroll-margin-block-start: 6.5rem;
}

/* ------------------------------------------------------------ «کلاس شما» */

.your-class-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  padding: 0.15rem 0.75rem;
  box-shadow: 0 4px 14px rgb(26 182 157 / 30%);
}

a.your-class-chip:hover {
  color: #fff;
  filter: brightness(1.05);
}

.relative > .your-class-chip--card {
  position: absolute;
  inset-block-start: auto;
  inset-block-end: 0.5rem;
  inset-inline-start: 0.5rem;
}

.your-class-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  inline-size: 100%;
  padding: 0.65rem 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--pz-success);
  border-radius: 0.375rem;
}

.your-class-banner:hover {
  color: #fff;
  filter: brightness(1.05);
}

/* ------------------------------------------------------------ teachers (instructor cards) */

/* Cards stay centred when a row is not full (2 teachers do not hug one side). */
.pz-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pz-card-grid > li {
  flex: 0 1 100%;
  min-inline-size: 0;
}

@media (min-width: 768px) {
  .pz-card-grid > li {
    flex-basis: calc((100% - 1.875rem) / 2);
  }
}

@media (min-width: 1024px) {
  .pz-card-grid > li {
    flex-basis: calc((100% - 2 * 1.875rem) / 3);
  }

  .pz-card-grid--4 > li {
    flex-basis: calc((100% - 3 * 1.875rem) / 4);
  }
}

.teacher-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.teacher-card:hover {
  transform: translateY(-4px);
}

/* The template's ring around the photo (its SVG ring, drawn with CSS). */
.teacher-card__photo {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  padding: 0.5rem;
  border-radius: 50%;
}

.teacher-card__photo:has(.teacher-photo--lg) {
  inline-size: min(100%, 19rem);
}

.teacher-card__photo .teacher-photo--lg {
  inline-size: 100%;
}

.teacher-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed rgb(11 78 83 / 45%);
  border-radius: 50%;
  transition: transform 0.6s ease;
}

.teacher-card:hover .teacher-card__photo::after {
  transform: rotate(45deg);
}

.teacher-social__pill {
  display: inline-grid;
  place-items: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.teacher-social__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
}

/* "۱۰ سال سابقه": icon and text are separate boxes, so the number never
   lands between the icon and its words in a right-to-left line. */
.teacher-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teacher-stats li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border-radius: 999px;
}

.teacher-stats i {
  color: var(--pz-secondary);
}

/* ------------------------------------------------------------ sign-in flow (template's login page) */

.auth-section {
  overflow: hidden;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgb(209 74 33 / 6%), transparent 60%),
    radial-gradient(50rem 30rem at 10% 110%, rgb(11 78 83 / 7%), transparent 60%);
}

.auth-box {
  max-inline-size: 44rem;
  position: relative;
  z-index: 1;
}

.auth-tab {
  position: relative;
  display: block;
  padding-block: 1.1rem;
  text-align: center;
  background: #f3f0fc;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

html.dark .auth-tab {
  color: #fff;
  background: #1f1a3a;
}

.auth-tab::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 4px;
  background: var(--pz-primary);
  transition: inline-size 0.3s ease;
}

.auth-tab:hover,
.auth-tab--active {
  color: var(--pz-primary-text);
  background: #fff;
  box-shadow: 0 10px 30px rgb(11 78 83 / 10%);
}

html.dark .auth-tab:hover,
html.dark .auth-tab--active {
  background: #161132;
}

.auth-tab:hover::before,
.auth-tab--active::before {
  inline-size: 100%;
}

.auth-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.auth-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--pz-muted);
  text-align: center;
}

.auth-steps li + li::before {
  content: "";
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: calc(50% + 1.4rem);
  inline-size: calc(100% - 2.8rem);
  block-size: 2px;
  background: var(--pz-border);
}

.auth-steps li.is-done + li::before,
.auth-steps li.is-current::before {
  background: var(--pz-primary);
}

.auth-steps span {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  font-weight: 700;
  border: 2px solid var(--pz-border);
  border-radius: 50%;
  background: #fff;
}

html.dark .auth-steps span {
  background: #161132;
}

.auth-steps .is-current {
  color: var(--pz-primary-text);
  font-weight: 700;
}

.auth-steps .is-current span {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
  box-shadow: 0 0 0 5px rgb(11 78 83 / 15%);
}

.auth-steps .is-done span {
  color: var(--pz-success);
  border-color: var(--pz-success);
}

.auth-input {
  display: block;
  inline-size: 100%;
  block-size: 3.25rem;
  padding-inline: 1.25rem;
  font: inherit;
  font-size: 1rem;
  color: inherit;
  background: transparent;
  border: 1px solid var(--pz-border);
  border-radius: 0.375rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input:focus {
  outline: none;
  border-color: var(--pz-primary);
  box-shadow: 0 0 0 4px rgb(11 78 83 / 12%);
}

.auth-input[aria-invalid="true"] {
  border-color: var(--pz-danger);
}

.auth-input::placeholder {
  color: #a6a6b8;
}

.auth-input.auth-input--code {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.6em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding: 0.6rem 1.5rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--pz-primary);
  border: 1px solid var(--pz-primary);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.auth-submit:hover {
  color: var(--pz-primary-text);
  background: #fff;
}

.auth-submit:disabled,
.auth-submit.is-loading {
  cursor: progress;
  color: #fff;
  background: var(--pz-primary);
  opacity: 0.85;
}

.auth-link {
  color: var(--pz-primary-text);
  font-weight: 600;
  background-image: linear-gradient(currentcolor, currentcolor);
  background-size: 0 2px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}

.auth-link:hover {
  background-size: 100% 2px;
}

.auth-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.auth-decor {
  position: absolute;
}

.auth-decor--a {
  inset-inline-end: 3%;
  inset-block-start: 50%;
}

.auth-decor--b {
  inset-inline-start: 6%;
  inset-block-start: 9rem;
}

/* ------------------------------------------------------------ rating line (teacher reviews) */

.staff-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ------------------------------------------------------------ 404 */

.error-art {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-block-end: 2rem;
  font-size: clamp(6rem, 22vw, 12rem);
  font-weight: 900;
  line-height: 1;
  color: var(--pz-primary-text);
}

.error-art__zero {
  color: var(--pz-secondary);
  animation: pz-float 3s ease-in-out infinite;
}

@keyframes pz-float {
  50% {
    transform: translateY(-0.6rem);
  }
}

.error-search {
  display: flex;
  gap: 0.5rem;
  max-inline-size: 32rem;
  margin-inline: auto;
}

/* ------------------------------------------------------------ panel menu (folds on phones) */

.panel-nav__toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.5rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.panel-nav__toggle::-webkit-details-marker {
  display: none;
}

.panel-nav__toggle::after {
  content: "";
  margin-inline-start: auto;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-inline-end: 2px solid currentcolor;
  border-block-end: 2px solid currentcolor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.panel-nav[open] > .panel-nav__toggle::after {
  transform: rotate(-135deg);
}

@media (min-width: 1024px) {
  .panel-nav__toggle {
    display: none;
  }
}

@media (max-width: 1023px) {
  .staff-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .staff-kpi {
    padding: 1.1rem 1rem;
  }

  .staff-kpi__value {
    font-size: 1.6rem;
  }
}

/* ------------------------------------------------------------ course page: action bar on phones */

.mobile-cta {
  display: none;
}

@media (max-width: 1023px) {
  .mobile-cta {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -8px 30px rgb(0 0 0 / 10%);
  }

  html.dark .mobile-cta {
    background: #161132;
  }

  .has-mobile-cta {
    padding-block-end: 5rem;
  }

  .has-mobile-cta .scroll-up {
    inset-block-end: 6rem;
  }
}

.mobile-cta__price {
  font-weight: 800;
  color: var(--pz-primary-text);
}

/* ============================================================ Phase 27 */

/* ------------------------------------------------------------ phones: no zoom on focus */

/*
 * iOS Safari zooms the whole page into any focused input or select whose
 * text is smaller than 16px, and does not zoom back out. On the course
 * catalogue that made the filter column "jump" and the page lose its layout
 * the moment the search box or a select was touched. Form controls are
 * therefore never below 16px on touch screens.
 */
@media (max-width: 1023px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

html.pz-no-scroll,
html.pz-no-scroll body {
  overflow: hidden;
}

/* ------------------------------------------------------------ catalogue layout */

.catalogue-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.875rem;
  margin-block-start: 1.5rem;
}

@media (min-width: 1024px) {
  .catalogue-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 1280px) {
  .catalogue-layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

.catalogue-main {
  min-inline-size: 0;
  transition: opacity 0.2s ease;
}

.catalogue.is-loading .catalogue-main {
  opacity: 0.55;
  pointer-events: none;
}

.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalogue-grid > li {
  min-inline-size: 0;
}

/* ------------------------------------------------------------ filter panel */

.catalogue-filters {
  min-inline-size: 0;
}

.catalogue-filters__sheet {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pz-border);
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgb(11 78 83 / 6%);
}

html.dark .catalogue-filters__sheet {
  background: #161132;
}

@media (min-width: 1024px) {
  .catalogue-filters__sheet {
    position: sticky;
    inset-block-start: 6.5rem;
    max-block-size: calc(100vh - 8rem);
  }

  .catalogue-filters__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.catalogue-filters__backdrop {
  display: none;
}

.catalogue-filters__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-block-end: 1px solid var(--pz-border);
}

.catalogue-filters__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0 auto;
  font-size: 1.15rem;
  font-weight: 800;
}

.catalogue-filters__title i {
  color: var(--pz-primary-text);
}

.catalogue-filters__reset {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pz-secondary);
}

.catalogue-filters__reset:hover {
  text-decoration: underline;
}

.catalogue-filters__close {
  display: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: inherit;
  background: var(--pz-soft);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.catalogue-filters__body {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1.25rem 1rem;
}

.catalogue-filters__foot {
  padding: 1rem 1.25rem 1.25rem;
  border-block-start: 1px solid var(--pz-border);
}

.catalogue-apply {
  inline-size: 100%;
  min-block-size: 3rem;
  border-radius: 0.75rem;
}

/* With JavaScript, desktop results follow every change: no apply button. */
@media (min-width: 1024px) {
  .catalogue.is-enhanced .catalogue-filters__foot {
    display: none;
  }
}

.filter-group {
  min-inline-size: 0;
  margin: 0;
  padding: 1rem 0;
  border: 0;
  border-block-end: 1px dashed var(--pz-border);
}

.filter-group:last-child {
  border-block-end: 0;
}

.filter-group__title {
  display: block;
  float: inline-start; /* a floated legend sits inside the fieldset, not on its border */
  inline-size: 100%;
  margin-block-end: 0.75rem;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: inherit;
}

.filter-group__title + * {
  clear: both;
}

.filter-group__title small {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pz-muted);
}

/* search */

.filter-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.9rem;
  background: var(--pz-soft);
  border: 2px solid transparent;
  border-radius: 0.75rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.filter-search:focus-within {
  background: transparent;
  border-color: var(--pz-primary);
}

.filter-search i {
  color: var(--pz-muted);
}

.filter-search input {
  flex: 1;
  min-inline-size: 0;
  padding: 0.7rem 0;
  font: inherit;
  font-size: 0.95rem;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}

/* chips */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-chips--level {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filter-chips--billing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--pz-soft);
  border-radius: 0.75rem;
}

.filter-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-block-size: 2.5rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
  background: transparent;
  border: 1.5px solid var(--pz-border);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.filter-chips--level .filter-chip,
.filter-chips--billing .filter-chip {
  border-radius: 0.6rem;
  padding-inline: 0.4rem;
}

.filter-chips--billing .filter-chip {
  border-color: transparent;
}

.filter-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.filter-chip:hover {
  border-color: var(--pz-primary);
}

.filter-chip:has(input:checked) {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
  box-shadow: 0 6px 16px rgb(11 78 83 / 25%);
}

.filter-chip:has(input:focus-visible) {
  outline: 3px solid rgb(11 78 83 / 35%);
  outline-offset: 2px;
}

.filter-chip.is-empty {
  opacity: 0.45;
}

.filter-chip__count {
  min-inline-size: 1.4rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4rem;
  text-align: center;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border-radius: 999px;
}

.filter-chip:has(input:checked) .filter-chip__count {
  color: var(--pz-primary-text);
  background: #fff;
}

/* level shortcut */

.filter-mylevel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: var(--pz-soft);
  border: 1.5px dashed var(--pz-primary);
  border-radius: 0.75rem;
}

.filter-mylevel.is-active {
  color: #fff;
  background: var(--pz-primary);
  border-style: solid;
}

/* price */

.filter-price {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.filter-price__field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-inline-size: 0;
  padding: 0 0.7rem;
  border: 1.5px solid var(--pz-border);
  border-radius: 0.6rem;
}

.filter-price__field:focus-within {
  border-color: var(--pz-primary);
}

.filter-price__field span {
  font-size: 0.8rem;
  color: var(--pz-muted);
}

.filter-price__field input {
  flex: 1;
  min-inline-size: 0;
  padding: 0.55rem 0;
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
  direction: ltr;
  text-align: right;
  appearance: textfield;
}

.filter-price__field input::-webkit-outer-spin-button,
.filter-price__field input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.filter-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: 0.6rem;
}

.filter-preset {
  padding: 0.25rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.filter-preset:hover {
  color: var(--pz-primary-text);
}

/* switch */

.filter-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.filter-switch input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.filter-switch__track {
  position: relative;
  flex: none;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  background: var(--pz-border);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.filter-switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 0.2rem;
  inset-inline-start: 0.2rem;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
  transition: transform 0.2s ease;
}

.filter-switch input:checked + .filter-switch__track {
  background: var(--pz-success);
}

/* RTL: the knob starts on the right and moves left. */
.filter-switch input:checked + .filter-switch__track::after {
  transform: translateX(-1.25rem);
}

html[dir="ltr"] .filter-switch input:checked + .filter-switch__track::after {
  transform: translateX(1.25rem);
}

.filter-switch input:focus-visible + .filter-switch__track {
  outline: 3px solid rgb(11 78 83 / 35%);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ results toolbar */

.catalogue-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 1rem;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border: 1px solid var(--pz-border);
  border-radius: 0.9rem;
}

html.dark .catalogue-toolbar {
  background: #161132;
}

.catalogue-toolbar__filters {
  display: none;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 2.5rem;
  padding: 0 1rem;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--pz-primary);
  border: 0;
  border-radius: 0.6rem;
  cursor: pointer;
}

.catalogue-toolbar__badge {
  min-inline-size: 1.3rem;
  padding: 0 0.3rem;
  font-size: 0.75rem;
  line-height: 1.3rem;
  text-align: center;
  color: var(--pz-primary-text);
  background: #fff;
  border-radius: 999px;
}

.catalogue-toolbar__count {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
}

.catalogue-toolbar__count strong {
  color: var(--pz-primary-text);
  font-size: 1.1rem;
}

.catalogue-toolbar__range {
  font-size: 0.85rem;
  color: var(--pz-muted);
}

/* Native selects ignore most styling (and on iOS render as grey buttons
   with their own size): this one is drawn by us, with a CSS arrow. */
.catalogue-sort {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  max-inline-size: 100%;
}

.catalogue-sort select {
  min-block-size: 2.5rem;
  max-inline-size: 100%;
  padding-block: 0.4rem;
  padding-inline: 1rem 2.25rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: inherit;
  background: var(--pz-soft);
  border: 0;
  border-radius: 0.6rem;
  appearance: none;
  cursor: pointer;
}

/* active filter chips */

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.active-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem 0.3rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pz-primary-text);
  background: var(--pz-soft);
  border: 1px solid rgb(11 78 83 / 20%);
  border-radius: 999px;
}

html[dir="rtl"] .active-filter {
  padding: 0.3rem 0.8rem 0.3rem 0.5rem;
}

.active-filter i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  font-size: 0.65rem;
  color: #fff;
  background: var(--pz-primary);
  border-radius: 50%;
}

.active-filter:hover {
  color: #fff;
  background: var(--pz-primary);
}

.active-filters__clear {
  font-size: 0.85rem;
  color: var(--pz-secondary);
}

/* empty result */

.catalogue-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  text-align: center;
  border: 2px dashed var(--pz-border);
  border-radius: 1rem;
}

.catalogue-empty__icon {
  font-size: 2.5rem;
  color: var(--pz-primary-text);
}

.catalogue-empty__title {
  font-size: 1.15rem;
  font-weight: 800;
}

.catalogue-empty__text {
  color: var(--pz-muted);
  margin-block-end: 0.75rem;
}

/* ------------------------------------------------------------ phones: bottom sheet */

@media (max-width: 1023px) {
  .catalogue.is-enhanced .catalogue-toolbar {
    position: sticky;
    inset-block-start: 4.75rem;
    z-index: 20;
    box-shadow: 0 8px 24px rgb(0 0 0 / 6%);
  }

  .catalogue.is-enhanced .catalogue-toolbar__filters {
    display: inline-flex;
  }

  .catalogue.is-enhanced .catalogue-toolbar__count {
    order: 3;
    flex-basis: 100%;
    font-size: 0.9rem;
  }

  .catalogue.is-enhanced .catalogue-sort {
    margin-inline-start: auto;
  }

  .catalogue.is-enhanced .catalogue-filters {
    position: fixed;
    inset: 0;
    z-index: 100000; /* above the template's theme switch and scroll-up button */
    visibility: hidden;
    pointer-events: none;
  }

  .catalogue.is-enhanced .catalogue-filters.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  .catalogue.is-enhanced .catalogue-filters__backdrop {
    position: absolute;
    inset: 0;
    display: block;
    background: rgb(12 8 30 / 55%);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .catalogue.is-enhanced .catalogue-filters.is-open .catalogue-filters__backdrop {
    opacity: 1;
  }

  .catalogue.is-enhanced .catalogue-filters__sheet {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    max-block-size: 88vh;
    max-block-size: 88dvh;
    border: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -10px 40px rgb(0 0 0 / 20%);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .catalogue.is-enhanced .catalogue-filters.is-open .catalogue-filters__sheet {
    transform: none;
  }

  .catalogue.is-enhanced .catalogue-filters__head::before {
    content: "";
    position: absolute;
    inset-block-start: 0.45rem;
    inset-inline-start: 50%;
    inline-size: 2.5rem;
    block-size: 0.25rem;
    background: var(--pz-border);
    border-radius: 999px;
    transform: translateX(-50%);
  }

  html[dir="rtl"] .catalogue.is-enhanced .catalogue-filters__head::before {
    transform: translateX(50%);
  }

  .catalogue.is-enhanced .catalogue-filters__head {
    position: relative;
    padding-block-start: 1.4rem;
  }

  .catalogue.is-enhanced .catalogue-filters__close {
    display: inline-flex;
  }

  .catalogue.is-enhanced .catalogue-filters__body {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .catalogue.is-enhanced .catalogue-filters__foot {
    padding-block-end: calc(1rem + env(safe-area-inset-bottom));
  }

  .filter-chip {
    min-block-size: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalogue-filters__sheet,
  .catalogue-filters__backdrop,
  .catalogue-main {
    transition: none;
  }
}
/* ------------------------------------------------------------
   Placement Test — Brand Identity
   Primary Color:   #0B4E53
   Secondary Color: #D14A21
------------------------------------------------------------ */


/* ------------------------------------------------------------
   1. Placement CTA
------------------------------------------------------------ */

.placement-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  padding: 1.1rem 1.25rem;
  color: #fff;
  background: linear-gradient(
    120deg,
    #0B4E53 0%,
    #0B4E53 70%,
    #12666A 100%
  );
  border: 1px solid rgb(255 255 255 / 12%);
  border-inline-start: 3px solid #D14A21;
  border-radius: 1rem;
  box-shadow: 0 14px 36px rgb(11 78 83 / 22%);
}

.placement-cta__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  font-size: 1.5rem;
  color: #fff;
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 0.9rem;
}

.placement-cta__body {
  flex: 1 1 16rem;
  min-inline-size: 0;
}

.placement-cta__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.7;
  color: #fff;
}

.placement-cta__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgb(255 255 255 / 86%);
}

.placement-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  font-weight: 800;
  color: #0B4E53;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 0.7rem;
  white-space: nowrap;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.placement-cta__button:hover {
  color: #fff;
  background: #D14A21;
  border-color: #D14A21;
  box-shadow: 0 6px 16px rgb(209 74 33 / 24%);
  transform: translateY(-2px);
}

.placement-cta__button:active {
  transform: translateY(0);
}

.placement-cta__button:focus-visible {
  outline: 3px solid #D14A21;
  outline-offset: 4px;
}

.catalogue .placement-cta {
  margin-block-end: 0.5rem;
}


/* ------------------------------------------------------------
   2. Header Placement
------------------------------------------------------------ */

.header-placement {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-inline-end: 0.6rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #D14A21;
  background: rgb(209 74 33 / 7%);
  border: 1px solid rgb(209 74 33 / 30%);
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.header-placement:hover,
.header-placement[aria-current="page"] {
  color: #fff;
  background: #D14A21;
  border-color: #D14A21;
}

.header-placement:focus-visible {
  outline: 3px solid #D14A21;
  outline-offset: 3px;
}


/* ------------------------------------------------------------
   3. Mobile Placement
------------------------------------------------------------ */

.mobile-placement {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
  padding: 0.9rem 1rem;
  color: #fff;
  background: linear-gradient(
    120deg,
    #0B4E53 0%,
    #0B4E53 75%,
    #12666A 100%
  );
  border: 1px solid rgb(255 255 255 / 12%);
  border-inline-start: 3px solid #D14A21;
  border-radius: 0.9rem;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.mobile-placement i {
  flex: none;
  font-size: 1.5rem;
  color: #fff;
}

.mobile-placement span {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.mobile-placement small {
  font-size: 0.75rem;
  line-height: 1.8;
  color: rgb(255 255 255 / 85%);
}

.mobile-placement:hover {
  color: #fff;
  box-shadow: 0 8px 22px rgb(11 78 83 / 20%);
}

.mobile-placement:focus-visible {
  outline: 3px solid #D14A21;
  outline-offset: 3px;
}


/* ------------------------------------------------------------
   4. Hero Placement
------------------------------------------------------------ */

.hero-placement {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 0.4rem;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.hero-placement:hover {
  color: #0B4E53;
  background: #fff;
  border-color: #D14A21;
}

.hero-placement:active {
  transform: translateY(1px);
}

.hero-placement:focus-visible {
  outline: 3px solid #D14A21;
  outline-offset: 4px;
}


/* ------------------------------------------------------------
   5. Placement Hint
------------------------------------------------------------ */

.placement-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.9;
  color: #0B4E53;
  background: rgb(11 78 83 / 7%);
  border: 1px solid rgb(11 78 83 / 12%);
  border-radius: 0.6rem;
}

.placement-hint i {
  flex: none;
  font-size: 1.25rem;
  color: #D14A21;
}


/* ------------------------------------------------------------
   6. Placement Layout
------------------------------------------------------------ */

.placement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.875rem;
}

@media (min-width: 1024px) {
  .placement-layout {
    grid-template-columns:
      minmax(0, 1.6fr)
      minmax(0, 1fr);
    align-items: start;
  }
}


/* ------------------------------------------------------------
   7. Placement Card and Steps
------------------------------------------------------------ */

.placement-card,
.placement-steps {
  min-inline-size: 0;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  color: #183638;
  background: #fff;
  border: 1px solid rgb(11 78 83 / 10%);
  border-radius: 1.25rem;
  box-shadow: 0 10px 40px rgb(11 78 83 / 7%);
}


/* ------------------------------------------------------------
   8. Placement Card Eyebrow
------------------------------------------------------------ */

.placement-card__eyebrow {
  display: inline-block;
  margin-block-end: 0.75rem;
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.7;
  color: #0B4E53;
  background: rgb(11 78 83 / 7%);
  border: 1px solid rgb(11 78 83 / 12%);
  border-radius: 999px;
}


/* ------------------------------------------------------------
   9. Placement Card Content
------------------------------------------------------------ */

.placement-card__title {
  margin-block-end: 0.5rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
  color: #0B4E53;
}

.placement-card__text {
  color: #607578;
  line-height: 1.9;
}

.placement-card__hint {
  margin-block-start: 1rem;
  font-size: 0.85rem;
  line-height: 1.9;
  color: #607578;
}


/* ------------------------------------------------------------
   10. Placement Actions
------------------------------------------------------------ */

.placement-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
}


/* ------------------------------------------------------------
   11. Placement Level
------------------------------------------------------------ */

.placement-level {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-block: 0.5rem 1.5rem;
}

.placement-level__badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 5rem;
  block-size: 5rem;
  font-size: 1.9rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(
    135deg,
    #0B4E53 0%,
    #12666A 100%
  );
  border: 2px solid rgb(209 74 33 / 45%);
  border-radius: 1.25rem;
  box-shadow: 0 12px 30px rgb(11 78 83 / 23%);
}


/* ------------------------------------------------------------
   12. Placement Subtitle
------------------------------------------------------------ */

.placement-subtitle {
  margin-block: 1rem 0.75rem;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.7;
  color: #0B4E53;
}


/* ------------------------------------------------------------
   13. Placement Exams and Courses
------------------------------------------------------------ */

.placement-exams,
.placement-courses {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}


/* ------------------------------------------------------------
   14. Placement Exam
------------------------------------------------------------ */

.placement-exam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  color: #183638;
  background: #fff;
  border: 1.5px solid rgb(11 78 83 / 16%);
  border-radius: 0.9rem;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.placement-exams--compact .placement-exam {
  padding: 0.7rem 1rem;
}

.placement-exam__title,
.placement-course__title {
  font-weight: 800;
  color: #0B4E53;
}

.placement-exam__meta,
.placement-course__meta {
  font-size: 0.85rem;
  line-height: 1.8;
  color: #607578;
}


/* ------------------------------------------------------------
   15. Placement Course
------------------------------------------------------------ */

.placement-course {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 1rem;
  color: #183638;
  background: #fff;
  border: 1.5px solid rgb(11 78 83 / 16%);
  border-radius: 0.9rem;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.placement-course:hover {
  background: rgb(11 78 83 / 3%);
  border-color: #0B4E53;
  box-shadow: 0 5px 16px rgb(11 78 83 / 7%);
}


/* ------------------------------------------------------------
   16. Placement Steps
------------------------------------------------------------ */

.placement-steps ol {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.placement-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.placement-steps p {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  line-height: 1.9;
  color: #607578;
}

.placement-steps__num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  font-weight: 800;
  color: #0B4E53;
  background: rgb(11 78 83 / 8%);
  border: 1px solid rgb(11 78 83 / 13%);
  border-radius: 50%;
}


/* ------------------------------------------------------------
   17. Placement FAQ
------------------------------------------------------------ */

.placement-faq {
  margin: 0;
}

.placement-steps ol + .placement-subtitle {
  margin-block-start: 1.75rem;
}

.placement-faq dt {
  margin-block-start: 0.9rem;
  font-weight: 700;
  line-height: 1.8;
  color: #0B4E53;
}

.placement-faq dd {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.9;
  color: #607578;
}


/* ------------------------------------------------------------
   18. Dark Mode
------------------------------------------------------------ */

html.dark .placement-card,
html.dark .placement-steps {
  color: #EAF3F2;
  background: #10292B;
  border-color: rgb(255 255 255 / 10%);
  box-shadow: 0 10px 40px rgb(0 0 0 / 18%);
}

html.dark .placement-card__eyebrow {
  color: #C7E2E0;
  background: rgb(11 78 83 / 30%);
  border-color: rgb(96 175 177 / 22%);
}

html.dark .placement-card__title,
html.dark .placement-subtitle,
html.dark .placement-exam__title,
html.dark .placement-course__title,
html.dark .placement-faq dt {
  color: #EAF3F2;
}

html.dark .placement-card__text,
html.dark .placement-card__hint,
html.dark .placement-exam__meta,
html.dark .placement-course__meta,
html.dark .placement-steps p,
html.dark .placement-faq dd {
  color: #B8CCCC;
}

html.dark .placement-hint {
  color: #D3E7E5;
  background: rgb(11 78 83 / 22%);
  border-color: rgb(96 175 177 / 22%);
}

html.dark .placement-hint i {
  color: #F07A52;
}

html.dark .placement-exam,
html.dark .placement-course {
  color: #EAF3F2;
  background: #142F31;
  border-color: rgb(255 255 255 / 12%);
}

html.dark .placement-course:hover {
  background: #19383A;
  border-color: #4A999B;
  box-shadow: 0 5px 16px rgb(0 0 0 / 16%);
}

html.dark .placement-steps__num {
  color: #C7E2E0;
  background: rgb(11 78 83 / 35%);
  border-color: rgb(96 175 177 / 25%);
}

html.dark .placement-level__badge {
  color: #fff;
  border-color: #D14A21;
}

html.dark .header-placement {
  color: #F07A52;
  background: rgb(209 74 33 / 10%);
  border-color: rgb(209 74 33 / 35%);
}

html.dark .header-placement:hover,
html.dark .header-placement[aria-current="page"] {
  color: #fff;
  background: #D14A21;
  border-color: #D14A21;
}


/* ------------------------------------------------------------
   19. Responsive — Mobile
------------------------------------------------------------ */

@media (max-width: 639px) {
  /* phones: one compact strip (icon, one line of text, a small button) instead of a tall card */
  .placement-cta {
    flex-wrap: nowrap;
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.9rem;
  }

  .placement-cta__icon {
    inline-size: 2.4rem;
    block-size: 2.4rem;
    font-size: 1.15rem;
    border-radius: 0.7rem;
  }

  .placement-cta__body {
    flex: 1 1 auto;
  }

  .placement-cta__title {
    font-size: 0.92rem;
    line-height: 1.6;
  }

  .placement-cta__text {
    display: none; /* the title and the button say enough on a phone */
  }

  .placement-cta__button {
    flex: none;
    gap: 0.3rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
    border-radius: 0.65rem;
  }

  .placement-cta__button i { display: none; }

  .hero-placement {
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
  }

  .mobile-placement {
    gap: 0.6rem;
    margin-block-start: 1rem;
    padding: 0.6rem 0.8rem;
  }

  .mobile-placement i { font-size: 1.2rem; }
  .mobile-placement strong { font-size: 0.9rem; }
  .mobile-placement small { display: none; }

  .placement-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .placement-level {
    gap: 1rem;
  }

  .placement-level__badge {
    inline-size: 4.25rem;
    block-size: 4.25rem;
    font-size: 1.6rem;
    border-radius: 1rem;
  }

  .placement-exam {
    align-items: flex-start;
  }

  .header-placement {
    margin-inline-end: 0.25rem;
  }
}


/* ------------------------------------------------------------
   20. Accessibility — Reduced Motion
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .placement-cta__button,
  .header-placement,
  .mobile-placement,
  .hero-placement,
  .placement-exam,
  .placement-course {
    scroll-behavior: auto;
    transition: none;
  }

  .placement-cta__button:hover,
  .placement-cta__button:active,
  .hero-placement:active {
    transform: none;
  }
}
/* ------------------------------------------------------------ my courses (student panel) */

/* One card per row: every card is exactly as tall as its own content (a
   one-time course is never stretched to match a monthly one). The card
   lays itself out by its own width (container query), not the screen's. */
.enroll-list {
  display: grid;
  gap: 1.25rem;
  container-type: inline-size;
}

.enroll-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-block-end: 1.25rem;
  padding: 0.9rem 1.1rem;
  color: var(--pz-danger);
  background: rgb(217 48 37 / 0.08);
  border: 1px solid rgb(217 48 37 / 0.25);
  border-radius: 0.9rem;
}

.enroll-alert p {
  margin: 0;
  line-height: 1.9;
}

.enroll-alert .icon {
  flex: none;
  margin-block-start: 0.2rem;
}

.enroll-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pz-border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

html.dark .enroll-card {
  background: var(--pz-soft);
}

.enroll-card:hover {
  border-color: rgb(var(--pz-primary-ink-rgb) / 0.35);
  box-shadow: 0 16px 40px -24px rgb(var(--pz-primary-rgb) / 0.5);
}

.enroll-card--overdue {
  border-color: rgb(217 48 37 / 0.45);
  border-inline-start: 4px solid var(--pz-danger);
}

.enroll-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--pz-soft);
}

.enroll-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.enroll-card:hover .enroll-card__media img {
  transform: scale(1.04);
}

.enroll-card--cancelled .enroll-card__media img {
  filter: grayscale(1);
  opacity: 0.6;
}

@container (min-width: 40rem) {
  .enroll-card {
    grid-template-columns: 15rem minmax(0, 1fr);
  }

  .enroll-card__media {
    align-self: start;
    aspect-ratio: 4 / 3;
    margin: 1rem;
    margin-inline-end: 0;
    border-radius: 0.75rem;
  }
}

.enroll-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-inline-size: 0;
  padding: 1.1rem 1.25rem 1.25rem;
}

.enroll-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.enroll-card__kind {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--pz-primary-text);
  background: var(--pz-soft);
  border-radius: 999px;
}

html.dark .enroll-card__kind {
  background: rgb(255 255 255 / 0.06);
}

.enroll-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.6;
}

.enroll-card__title a {
  color: inherit;
  transition: color 0.2s ease;
}

.enroll-card__title a:hover,
.enroll-card__title a:focus-visible {
  color: var(--pz-primary-text);
}

.enroll-card__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem 1.5rem;
  margin: 0;
  font-size: 0.875rem;
}

@container (min-width: 30rem) {
  .enroll-card__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.enroll-card__facts > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-inline-size: 0;
}

.enroll-card__facts dt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--pz-muted);
}

.enroll-card__facts dt .icon {
  color: var(--pz-primary-text);
}

.enroll-card__facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.enroll-card__muted {
  margin: 0;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--pz-muted);
}

.enroll-card__paid,
.enroll-card__deadline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.6rem 0.8rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0.6rem;
}

.enroll-card__paid {
  color: var(--pz-success);
  background: rgb(26 182 157 / 0.1);
}

.enroll-card__deadline {
  color: #b26b00;
  background: rgb(238 157 28 / 0.12);
}

html.dark .enroll-card__deadline {
  color: var(--pz-warning);
}

.enroll-card .tuition-meter {
  margin: 0;
}

.enroll-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px dashed var(--pz-border);
}

.enroll-card__actions:not(:has(*)) {
  display: none;
}

.enroll-card__actions form {
  display: contents;
}

.enroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-block-size: 2.625rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--pz-primary-text);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0.65rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@container (max-width: 30rem) {
  .enroll-btn {
    flex: 1 1 100%;
  }
}

.enroll-btn:hover,
.enroll-btn:focus-visible {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

.enroll-btn--primary {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

.enroll-btn--primary:hover,
.enroll-btn--primary:focus-visible {
  background: var(--pz-secondary);
  border-color: var(--pz-secondary);
}

.enroll-btn--accent {
  color: #fff;
  background: var(--pz-secondary);
  border-color: var(--pz-secondary);
}

.enroll-btn--accent:hover,
.enroll-btn--accent:focus-visible {
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

.enroll-btn--danger {
  color: var(--pz-danger);
}

.enroll-btn--danger:hover,
.enroll-btn--danger:focus-visible {
  color: #fff;
  background: var(--pz-danger);
  border-color: var(--pz-danger);
}

.enroll-btn--ghost {
  border-color: transparent;
}

.enroll-btn--ghost:hover,
.enroll-btn--ghost:focus-visible {
  color: var(--pz-primary-text);
  background: var(--pz-soft);
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .enroll-card,
  .enroll-card__media img {
    transition: none;
  }

  .enroll-card:hover .enroll-card__media img {
    transform: none;
  }
}

/* ------------------------------------------------------------ tuition (one-time / monthly) */

.price-months {
  display: inline-block;
  margin-inline-start: 0.25rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border-radius: 999px;
}

.billing-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--pz-warning);
  border-radius: 999px;
}

.relative > .billing-badge--card {
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-end: 0.5rem;
}

.billing-note {
  padding: 0.8rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.9;
  background: rgb(238 157 28 / 10%);
  border-inline-start: 3px solid var(--pz-warning);
  border-radius: 0.4rem;
}

.tuition-meter {
  margin-block-end: 1rem;
  padding: 0.75rem;
  font-size: 0.8125rem;
  background: var(--pz-soft);
  border-radius: 0.6rem;
}

.tuition-meter--overdue {
  background: rgb(217 48 37 / 8%);
}

.tuition-meter__head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 700;
}

.tuition-meter__bar,
.grade-bar {
  inline-size: 100%;
  block-size: 0.45rem;
  margin-block: 0.5rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--pz-border);
  appearance: none;
}

.tuition-meter__bar::-webkit-progress-bar,
.grade-bar::-webkit-progress-bar {
  background: var(--pz-border);
}

.tuition-meter__bar::-webkit-progress-value,
.grade-bar::-webkit-progress-value {
  background: var(--pz-success);
  border-radius: 999px;
}

.tuition-meter__bar::-moz-progress-bar,
.grade-bar::-moz-progress-bar {
  background: var(--pz-success);
}

.tuition-meter__months {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tuition-month {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--pz-muted);
  background: #fff;
  border: 1px solid var(--pz-border);
  border-radius: 0.4rem;
}

html.dark .tuition-month {
  background: transparent;
}

.tuition-month.is-paid {
  color: #fff;
  background: var(--pz-success);
  border-color: var(--pz-success);
}

.tuition-month.is-next {
  color: var(--pz-primary-text);
  border-color: var(--pz-primary);
}

.tuition-month.is-overdue {
  color: #fff;
  background: var(--pz-danger);
  border-color: var(--pz-danger);
}

.tuition-meter__due {
  margin: 0.5rem 0 0;
}

.tuition-meter--overdue .tuition-meter__due strong {
  color: var(--pz-danger);
}

/* ------------------------------------------------------------ my exams / my grades */

.grade-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .grade-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grade-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem;
  background: var(--pz-soft);
  border-radius: 0.9rem;
}

.grade-stat__value {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--pz-primary-text);
}

.grade-stat__label {
  font-size: 0.8rem;
  color: var(--pz-muted);
}

.grade-stat--accent {
  color: #fff;
  background: linear-gradient(135deg, #0B4E53, #12666A);
}

.grade-stat--accent .grade-stat__value,
.grade-stat--accent .grade-stat__label,
.grade-stat--accent a {
  color: #fff;
}

.grade-stat--accent a {
  text-decoration: underline;
}

.grade-note {
  margin-block-end: 1rem;
  font-size: 0.875rem;
  color: var(--pz-warning);
}

.attempt-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.attempt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0;
  border-block-end: 1px solid var(--pz-border);
}

.attempt-row:last-child {
  border-block-end: 0;
}

.attempt-row__main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.attempt-row__title {
  font-weight: 700;
}

.attempt-row__title:hover {
  color: var(--pz-primary-text);
}

.attempt-row__meta {
  font-size: 0.8rem;
  color: var(--pz-muted);
}

.attempt-row__score {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
}

.score-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--pz-primary-text);
  border: 3px solid var(--pz-primary);
  border-radius: 50%;
}

.score-ring--pass {
  color: var(--pz-success);
  border-color: var(--pz-success);
}

.score-ring--fail {
  color: var(--pz-danger);
  border-color: var(--pz-danger);
}

.grade-courses {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.grade-course {
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--pz-border);
  border-radius: 0.9rem;
}

.grade-course__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.grade-course__title {
  font-size: 1.05rem;
  font-weight: 800;
}

.grade-course__meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--pz-muted);
}

.grade-course__overall {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-inline-size: 8rem;
}

.grade-course__percent {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--pz-success);
}

.grade-course__empty {
  font-size: 0.8rem;
  color: var(--pz-muted);
}

.grade-table {
  inline-size: 100%;
  margin-block-start: 0.75rem;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.grade-table th,
.grade-table td {
  padding: 0.55rem 0.4rem;
  text-align: start;
  border-block-start: 1px solid var(--pz-border);
  vertical-align: top;
}

.grade-table thead th {
  font-size: 0.75rem;
  color: var(--pz-muted);
  border-block-start: 0;
}

.grade-table tbody th {
  font-weight: 700;
}

.grade-table__kind,
.grade-table__feedback {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--pz-muted);
}

.grade-table__feedback {
  font-style: italic;
}

.catalogue-sort__label {
  margin-inline-end: 0.5rem;
  font-size: 0.85rem;
  color: var(--pz-muted);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .catalogue-sort__label {
    display: none;
  }
}

/* The sort arrow: drawn on the label (no background image, CSP-safe). */
.catalogue-sort::after {
  content: "";
  position: absolute;
  inset-inline-end: 1rem;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-20%) rotate(45deg);
  pointer-events: none;
  opacity: 0.6;
}

.filter-chip i {
  margin-inline-end: 0.3rem;
}

html[dir="rtl"] .filter-chip i {
  margin-right: 0;
  margin-left: 0.3rem;
}

.filter-chips--billing .filter-chip {
  font-size: 0.8125rem;
  white-space: nowrap;
}

.filter-chips--billing .filter-chip__count {
  display: none;
}

.placement-exam--blocked {
  background: var(--pz-soft);
  border-style: dashed;
}

.placement-exam__reason {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: var(--pz-warning);
}

/* ------------------------------------------------------------ site footer */
/*
 * templates/partials/footer.html: the Edurock footer layout (newsletter
 * band, four columns, bottom bar), right-to-left, with logical properties
 * so nothing depends on the template's left/right utilities. Always dark,
 * in light and dark mode alike, like the template's footer.
 */

.site-footer {
  /* The footer is always dark: teal text uses the light tint there. */
  --pz-primary-text: #7CC4C2;
  --pz-primary-ink-rgb: 124 196 194;
  --sf-bg: #0c0e2b;
  --sf-surface: rgb(32 41 66);
  --sf-line: rgb(38 53 70);
  --sf-text: rgb(159 162 206);
  --sf-soft-text: rgb(255 255 255 / 0.65);
  --sf-glow: rgb(11 78 83 / 0.35);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--sf-text);
}

/* A soft brand glow and a gradient hairline on top: depth without images. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--pz-primary), var(--pz-secondary), transparent);
  opacity: 0.8;
}

.site-footer::after {
  content: "";
  position: absolute;
  inset-block-start: -220px;
  inset-inline-end: -160px;
  inline-size: 520px;
  block-size: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sf-glow), transparent 65%);
  z-index: -1;
  pointer-events: none;
}

/* ---- newsletter band */

.site-footer__cta-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
  line-height: 1.45;
}

.site-footer__cta-text {
  margin: 0;
  color: var(--sf-soft-text);
}

.site-footer__newsletter {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.375rem;
  inline-size: 100%;
  max-inline-size: 34rem;
  margin-inline-start: auto;
  padding: 0.375rem;
  background: var(--sf-surface);
  border: 1px solid transparent;
  border-radius: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-footer__newsletter:focus-within {
  border-color: rgb(11 78 83 / 0.7);
  box-shadow: 0 0 0 4px rgb(11 78 83 / 0.18);
}

.site-footer__newsletter-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 3.25rem;
  padding-inline: 1rem;
  color: #fff;
  background: transparent;
  border: 0;
  outline: none;
  text-align: start;
}

.site-footer__newsletter-input::placeholder {
  color: rgb(255 255 255 / 0.45);
  direction: rtl;
  text-align: right;
}

.site-footer__newsletter-button,
.site-footer__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--pz-primary), #12666A);
  border: 0;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.site-footer__cta-button {
  block-size: 3.5rem;
  padding-inline: 2rem;
  margin-inline-start: auto;
  display: flex;
  inline-size: max-content;
}

.site-footer__newsletter-button:hover,
.site-footer__cta-button:hover {
  box-shadow: 0 10px 24px -8px var(--sf-glow);
  filter: brightness(1.08);
}

.site-footer__newsletter-button:active {
  transform: translateY(1px);
}

.site-footer__newsletter-button[disabled] {
  opacity: 0.7;
  cursor: progress;
}

html[dir="rtl"] .site-footer__newsletter-button i,
html[dir="rtl"] .site-footer__cta-button i {
  transform: scaleX(-1);
}

.site-footer__newsletter-status {
  min-block-size: 1.5rem;
  max-inline-size: 34rem;
  margin: 0.5rem 0 0;
  margin-inline-start: auto;
  font-size: 0.875rem;
}

.site-footer__newsletter-status.is-ok {
  color: #4fd1b5;
}

.site-footer__newsletter-status.is-error {
  color: #ff8a80;
}

.site-footer__trap {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- columns */

.site-footer__heading {
  position: relative;
  margin: 0 0 1.5rem;
  padding-block-end: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.site-footer__heading::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 2.25rem;
  block-size: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pz-primary), var(--pz-secondary));
}

.site-footer__about {
  margin: 0 0 1.5rem;
  line-height: 1.9;
}

/* Address card: one hand-drawn pin in a glowing gradient tile. */
.site-footer__contact {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0 0 1.75rem;
  padding: 1rem;
  font-style: normal;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.02));
  border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: 1rem;
}

.site-footer__contact-icon {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  color: #fff;
  background: linear-gradient(140deg, var(--pz-primary) 0%, #12666A 55%, var(--pz-secondary) 100%);
  border-radius: 1rem;
  box-shadow: 0 12px 28px -10px var(--sf-glow), inset 0 1px 0 rgb(255 255 255 / 0.35);
}

.site-footer__contact-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgb(209 74 33 / 0.45);
  border-radius: 1.25rem;
  animation: site-footer-ring 2.8s ease-out infinite;
}

.site-footer__contact-icon svg {
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.25));
}

@keyframes site-footer-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.92);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

.site-footer__contact-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-inline-size: 0;
  padding-block-start: 0.15rem;
}

.site-footer__contact-address {
  color: #fff;
  line-height: 1.8;
  transition: color 0.2s ease;
}

a.site-footer__contact-address:hover {
  color: #7CC4C2;
}

.site-footer__contact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.875rem;
}

.site-footer__contact-lines a {
  color: var(--sf-text);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

.site-footer__contact-lines a:hover {
  color: #fff;
}

/* Opening hours (the last column): the template's clock tile beside the list. */
.site-footer__hours {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
}

.site-footer__hours-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  font-size: 1.625rem;
  color: #fff;
  background: var(--pz-primary);
  border-radius: 0.5rem;
}

.site-footer__hours-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-inline-size: 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--sf-soft-text);
}

.site-footer__hours-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  line-height: 1.9;
}

.site-footer__hours-row dt::after {
  content: ":";
}

.site-footer__hours-row dt:last-child::after {
  content: none;
}

.site-footer__hours-row dd {
  margin: 0;
  color: #fff;
}

/* Links: the template's sliding underline, from the right in RTL. */
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  position: relative;
  color: var(--sf-text);
  transition: color 0.3s ease;
}

.site-footer__link::after {
  content: "";
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 2px;
  background: var(--pz-primary);
  transition: inline-size 0.3s ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: #fff;
}

.site-footer__link:hover::after,
.site-footer__link:focus-visible::after {
  inline-size: 100%;
}

/* ---- bottom bar: logo | copyright + developer | social icons */

.site-footer__bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
  padding-block-start: 2.5rem;
  border-block-start: 1px solid var(--sf-line);
  text-align: center;
}

@media (min-width: 1024px) {
  .site-footer__bottom {
    grid-template-columns: 3fr 6fr 3fr;
    gap: 30px;
    text-align: start;
  }
}

.site-footer__logo {
  justify-self: center;
}

@media (min-width: 1024px) {
  .site-footer__logo {
    justify-self: start;
  }
}

.site-footer__logo img {
  max-block-size: 4.25rem;
  block-size: 4.25rem;
  inline-size: auto;
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

@media (min-width: 1024px) {
  .site-footer__legal {
    align-items: center;
    text-align: center;
  }
}

.site-footer__copyright {
  margin: 0;
  color: #fff;
}

/* A hairline between the copyright and the developer credit. */
.site-footer__divider {
  inline-size: min(100%, 22rem);
  block-size: 0;
  margin: 0.4rem auto;
  border: 0;
  border-block-start: 1px solid rgb(255 255 255 / 0.14);
}

.site-footer__developer {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sf-text);
}

.site-footer__developer a,
.site-footer__developer strong {
  margin-inline-start: 0.25rem;
  font-weight: 600;
  color: #fff;
  background-image: linear-gradient(90deg, var(--pz-primary), var(--pz-secondary));
  background-size: 0 2px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease, color 0.3s ease;
}

.site-footer__developer a:hover {
  color: #7CC4C2;
  background-size: 100% 2px;
}

.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .site-footer__socials {
    justify-content: flex-end;
  }
}

.site-footer__social {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  font-size: 1.05rem;
  color: #fff;
  background: rgb(255 255 255 / 0.1);
  border-radius: 0.625rem;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
  background: var(--pz-primary);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -8px var(--sf-glow);
}

/* Each network's own colour on hover. */
.site-footer__social--instagram:hover,
.site-footer__social--instagram:focus-visible {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.site-footer__social--telegram:hover,
.site-footer__social--telegram:focus-visible {
  background: #229ed9;
}

.site-footer__social--whatsapp:hover,
.site-footer__social--whatsapp:focus-visible {
  background: #25d366;
}

.site-footer__social--linkedin:hover,
.site-footer__social--linkedin:focus-visible {
  background: #0a66c2;
}

.site-footer__social--twitter:hover,
.site-footer__social--twitter:focus-visible {
  background: #000;
}

.site-footer__social--youtube:hover,
.site-footer__social--youtube:focus-visible {
  background: #ff0000;
}

.site-footer__social--facebook:hover,
.site-footer__social--facebook:focus-visible {
  background: #1877f2;
}

.site-footer__social--skype:hover,
.site-footer__social--skype:focus-visible {
  background: #00aff0;
}

.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline: 2px solid #7CC4C2;
  outline-offset: 3px;
}

@media (max-width: 479px) {
  .site-footer__newsletter {
    flex-direction: column;
  }

  .site-footer__newsletter-button {
    block-size: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .site-footer *::before,
  .site-footer *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- online class join button (teacher and student panels) ---- */

.join-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  background: var(--pz-primary);
  border: 1px solid var(--pz-primary);
  border-radius: 0.5rem;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.join-btn:hover {
  box-shadow: 0 6px 18px rgb(11 78 83 / 25%);
}

.join-btn--soon {
  color: var(--pz-primary);
  background: transparent;
  border-style: dashed;
}

.join-btn--soon:hover {
  box-shadow: none;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: 0.4rem;
  padding: 0.05rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: #d32f2f;
  border-radius: 999px;
}

.live-badge::before {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  content: "";
  background: #fff;
  border-radius: 50%;
  animation: pz-live 1.4s infinite;
}

@keyframes pz-live {
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .live-badge::before { animation: none; }
}

.session-row--live {
  padding-inline: 0.75rem;
  background: color-mix(in srgb, var(--pz-primary) 8%, transparent);
  border-radius: 0.5rem;
}

.session-row {
  transition: background-color 0.15s;
}

/* icons reused from a page sprite (apps.core.icons.use) */
svg.icon-use {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* ---------------------------------------------------------------- payment page (panel/pay.html) */

.pay-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.pay-summary > div {
  padding: 0.85rem 1rem;
  background: var(--pz-soft);
  border-radius: 0.8rem;
}

.pay-summary dt {
  font-size: 0.8rem;
  color: var(--pz-muted);
}

.pay-summary dd {
  margin: 0.2rem 0 0;
  font-weight: 700;
}

.pay-summary__amount {
  font-size: 1.35rem;
  color: var(--pz-primary-text);
}

.pay-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-block-end: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: rgb(238 157 28 / 0.1);
  border: 1px solid rgb(238 157 28 / 0.35);
  border-radius: 0.9rem;
}

.pay-note--wait {
  background: rgb(26 182 157 / 0.1);
  border-color: rgb(26 182 157 / 0.35);
}

.pay-note p {
  margin: 0;
  line-height: 1.9;
}

.pay-note .icon {
  flex: none;
  margin-block-start: 0.2rem;
}

.pay-method {
  margin-block-end: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--pz-border);
  border-radius: 1rem;
}

.pay-method__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.pay-method__text {
  margin: 0 0 1rem;
  line-height: 1.9;
  color: var(--pz-muted);
}

.pay-steps {
  margin: 0 0 1rem;
  padding-inline-start: 1.25rem;
  list-style: decimal;
  line-height: 2;
}

.pay-card {
  margin-block-end: 1rem;
  padding: 1.1rem 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, var(--pz-primary), var(--pz-darkdeep));
  border-radius: 1rem;
}

.pay-card p {
  margin: 0;
}

.pay-card__label {
  font-size: 0.8rem;
  opacity: 0.8;
}

.pay-card__number {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.35rem 0 0.6rem !important;
  font-size: clamp(1.15rem, 4.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pay-card__sheba {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.5rem !important;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.pay-card .pay-card__copy {
  min-block-size: 2rem;
  padding: 0.2rem 0.75rem;
  color: #fff;
  border-color: rgb(255 255 255 / 0.45);
  letter-spacing: normal;
}

.pay-card .pay-card__copy:hover,
.pay-card .pay-card__copy:focus-visible {
  color: var(--pz-primary);
  background: #fff;
}

.pay-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.pay-form__field--wide {
  grid-column: 1 / -1;
}

.pay-form__label {
  display: block;
  margin-block-end: 0.35rem;
  font-weight: 700;
}

.enroll-card__window {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--pz-muted);
}

.enroll-card__wait {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pz-success);
}

.pay-card__owner {
  font-size: 0.95rem;
}

.pay-form__field {
  min-inline-size: 0;
}

/* ---------------------------------------------------------------- attendance sheet (teaching) */

.att-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-end: 1.25rem;
  padding-block-end: 1.25rem;
  border-block-end: 2px solid var(--pz-border);
}

.att-head p {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
}

.att-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pz-primary-text);
}

/* ---- the deadline card on a session sheet (teaching/attendance_sheet.html) */
.att-clock {
  --att-tone: var(--pz-primary);
  --att-tone-rgb: var(--pz-primary-rgb);
  display: grid;
  gap: 0.6rem;
  margin-block-end: 1.1rem;
  padding: 1rem 1.1rem;
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(var(--att-tone-rgb) / 12%), transparent 60%),
    var(--pz-soft);
  border: 1px solid rgb(var(--att-tone-rgb) / 18%);
  border-radius: 1.1rem;
}

.att-clock.is-urgent {
  --att-tone: #c2410c;
  --att-tone-rgb: 194 65 12;
}

.att-clock--locked {
  --att-tone: #9a5b00;
  --att-tone-rgb: 238 157 28;
}

.att-clock--upcoming {
  --att-tone: #3a5bd9;
  --att-tone-rgb: 58 91 217;
}

html.dark .att-clock.is-urgent { --att-tone: #fb923c; }
html.dark .att-clock--locked { --att-tone: #f6c069; }
html.dark .att-clock--upcoming { --att-tone: #8fa6ff; }

.att-clock__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--att-tone);
}

.att-clock__chip {
  padding: 0.05rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  background: var(--att-tone);
  border-radius: 999px;
}

.att-clock__time {
  display: flex; /* days, hours, minutes, seconds from the right */
  gap: 0.45rem;
}

.att-clock__time span {
  display: grid;
  justify-items: center;
  min-inline-size: 3.6rem;
  padding: 0.35rem 0.4rem;
  background: rgb(255 255 255 / 75%);
  border: 1px solid rgb(var(--att-tone-rgb) / 15%);
  border-radius: 0.8rem;
}

html.dark .att-clock__time span {
  background: rgb(255 255 255 / 5%);
}

.att-clock__time b {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--att-tone);
  font-variant-numeric: tabular-nums;
}

.att-clock__time small {
  font-size: 0.7rem;
  color: var(--pz-muted);
}

.att-clock.is-urgent .att-clock__time b {
  animation: att-blink 1s steps(2, jump-none) infinite;
}

@keyframes att-blink {
  50% { opacity: 0.55; }
}

.att-clock.is-done .att-clock__time b {
  animation: none;
}

.att-clock__track {
  block-size: 0.4rem;
  overflow: hidden;
  background: rgb(var(--att-tone-rgb) / 14%);
  border-radius: 999px;
}

.att-clock__bar {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(90deg, rgb(var(--att-tone-rgb) / 70%), var(--att-tone));
  border-radius: inherit;
  transition: inline-size 0.9s linear;
}

.att-clock__note,
.att-clock__status {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.9;
}

.att-clock__status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--att-tone);
}

.att-clock__status--bad {
  color: var(--pz-danger);
}

.att-extend {
  display: grid;
  gap: 0.45rem;
}

.att-extend__label {
  font-size: 0.85rem;
  font-weight: 700;
}

.att-extend textarea {
  inline-size: 100%;
  padding: 0.6rem 0.8rem;
  font-size: max(1rem, 16px);
  background: var(--pz-surface, #fff);
  border: 1px solid rgb(var(--att-tone-rgb) / 30%);
  border-radius: 0.8rem;
}

html.dark .att-extend textarea {
  background: rgb(255 255 255 / 5%);
}

.att-extend__btn {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-weight: 800;
  color: #fff;
  background: var(--att-tone);
  border-radius: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .att-clock.is-urgent .att-clock__time b { animation: none; }
  .att-clock__bar { transition: none; }
}

.att-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.att-summary__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border-radius: 999px;
}

.att-summary__item strong {
  font-size: 1rem;
  color: var(--pz-primary-text);
}

.att-summary__item--present strong { color: var(--pz-success); }
.att-summary__item--late strong { color: var(--pz-warning); }
.att-summary__item--absent strong { color: var(--pz-danger); }
.att-summary__item--excused strong { color: var(--pz-primary-text); }

.att-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-block-end: 0.75rem;
}

.att-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0.6rem;
  cursor: pointer;
}

.att-tool:hover,
.att-tool:focus-visible {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

.att-tools__hint {
  font-size: 0.8rem;
  color: var(--pz-muted);
}

.att-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.att-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--pz-border);
  border-radius: 0.8rem;
}

.att-row--warn {
  border-inline-start: 4px solid var(--pz-danger);
}

.att-row__who {
  display: grid;
  min-inline-size: 10rem;
}

.att-row__name {
  font-weight: 700;
}

.att-row__meta {
  font-size: 0.78rem;
  color: var(--pz-muted);
}

.att-row__absences {
  color: var(--pz-danger);
  font-weight: 700;
}

.att-choices {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.att-choice {
  position: relative;
  cursor: pointer;
}

.att-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.att-choice span {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pz-muted);
  border: 1.5px solid var(--pz-border);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.att-choice input:focus-visible + span {
  outline: 2px solid var(--pz-primary);
  outline-offset: 2px;
}

.att-choice--present input:checked + span { color: #fff; background: var(--pz-success); border-color: var(--pz-success); }
.att-choice--late input:checked + span { color: #fff; background: var(--pz-warning); border-color: var(--pz-warning); }
.att-choice--absent input:checked + span { color: #fff; background: var(--pz-danger); border-color: var(--pz-danger); }
.att-choice--excused input:checked + span { color: #fff; background: var(--pz-primary); border-color: var(--pz-primary); }

.att-choices:disabled .att-choice {
  cursor: default;
}

.att-choices:disabled .att-choice input:not(:checked) + span {
  opacity: 0.45;
}

.att-when {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.75rem;
  color: var(--pz-muted);
  text-align: center;
}

.att-when--todo {
  color: var(--pz-danger);
  font-weight: 700;
}

.att-when svg {
  display: inline;
  margin-inline-end: 0.2rem;
  vertical-align: -0.1em;
}

.att-when--urgent {
  color: #c2410c;
  font-weight: 800;
}

@media (max-width: 40rem) {
  .att-choices {
    inline-size: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .att-choice span {
    display: block;
    text-align: center;
  }
}

/* ---------------------------------------------------------------- managed pictures (admin «بنرها») */

/* An uploaded picture may not have the bundled one's exact shape: keep the
   layout and fit it inside the same box. */
.hero-picture {
  block-size: auto;
  max-block-size: 100%;
  object-fit: contain;
}

.home-about-picture {
  aspect-ratio: 1;
  inline-size: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.register-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.register-strip--custom {
  background-image: none;
}

.register-strip__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pz-border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

html.dark .promo-card {
  background: var(--pz-soft);
}

.promo-card:hover {
  box-shadow: 0 12px 28px rgb(16 24 40 / 0.1);
  transform: translateY(-2px);
}

.promo-card__image {
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  object-fit: cover;
}

.promo-grid--1 .promo-card {
  flex-direction: row;
}

.promo-grid--1 .promo-card__image {
  inline-size: 55%;
  aspect-ratio: 21 / 9;
}

@media (max-width: 48rem) {
  .promo-grid--1 .promo-card {
    flex-direction: column;
  }

  .promo-grid--1 .promo-card__image {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
  }
}

.promo-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem 1.3rem;
}

.promo-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6;
}

.promo-card__text {
  margin: 0;
  line-height: 1.9;
  color: var(--pz-muted);
}

.promo-card__link {
  align-self: flex-start;
  margin-block-start: 0.35rem;
  font-weight: 700;
  color: var(--pz-primary-text);
}

.promo-card__link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.promo-card__link:hover,
.promo-card__link:focus-visible {
  color: var(--pz-secondary);
}

/* ------------------------------------------------------------ one-time code countdown
 * accounts/_otp_timer.html + assets/js/otp.js (also on the management sign-in). */
.otp-timer {
  --otp-tone: var(--pz-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 auto 1.5rem;
  padding: 0.7rem 1.1rem;
  inline-size: fit-content;
  max-inline-size: 100%;
  background: rgb(var(--pz-primary-rgb) / 6%);
  border: 1px solid rgb(var(--pz-primary-rgb) / 14%);
  border-radius: 999px;
  transition: background-color 0.3s, border-color 0.3s;
}

html.dark .otp-timer {
  --otp-tone: var(--pz-primary-text);
  background: rgb(var(--pz-primary-ink-rgb) / 10%);
  border-color: rgb(var(--pz-primary-ink-rgb) / 22%);
}

.otp-timer.is-urgent {
  --otp-tone: var(--pz-warning);
  background: rgb(238 157 28 / 10%);
  border-color: rgb(238 157 28 / 35%);
}

.otp-timer.is-expired {
  --otp-tone: var(--pz-danger);
  background: rgb(217 48 37 / 8%);
  border-color: rgb(217 48 37 / 30%);
}

.otp-timer__ring {
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  transform: rotate(-90deg) scaleY(-1); /* drains clockwise */
}

.otp-timer__ring circle {
  fill: none;
  stroke-width: 4.5;
}

.otp-timer__track {
  stroke: rgb(var(--pz-primary-rgb) / 12%);
}

.otp-timer__value {
  stroke: var(--otp-tone);
  stroke-linecap: round;
  transition: stroke-dasharray 0.95s linear, stroke 0.3s;
}

.otp-timer__text {
  display: grid;
  margin: 0;
  line-height: 1.35;
  text-align: start;
}

.otp-timer__label {
  font-size: 0.8rem;
  color: var(--pz-muted);
}

.otp-timer__clock {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--otp-tone);
}

.otp-timer.is-urgent .otp-timer__clock {
  animation: otp-pulse 1s ease-in-out infinite;
}

@keyframes otp-pulse {
  50% {
    opacity: 0.55;
  }
}

.otp-resend {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin-block-start: 1.1rem;
  text-align: center;
}

.otp-resend__wait {
  margin: 0;
  font-size: 0.85rem;
  color: var(--pz-muted);
}

.otp-resend__button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.3rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: transparent;
  border: 1.5px solid currentcolor;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}

.otp-resend__button:hover,
.otp-resend__button:focus-visible {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

.otp-resend.is-open .otp-resend__button {
  animation: otp-in 0.35s ease-out both;
}

@keyframes otp-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.otp-resend [hidden] {
  display: none;
}

.auth-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .otp-timer__value,
  .otp-timer.is-urgent .otp-timer__clock,
  .otp-resend.is-open .otp-resend__button {
    transition: none;
    animation: none;
  }
}

/* ------------------------------------------------------------ reviews: anonymous + verified */
.review-item__avatar--anonymous {
  font-size: 1.35rem;
  color: var(--pz-muted);
  background: repeating-linear-gradient(-45deg, var(--pz-soft) 0 6px, transparent 6px 12px), var(--pz-soft);
}

.review-item__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}

.review-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0b6b57;
  background: rgb(26 182 157 / 12%);
  border-radius: 999px;
}

html.dark .review-verified {
  color: #6fe3c9;
}

.review-anon-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border-radius: 999px;
}

/* «نظرم ناشناس ثبت شود»: a switch, keyboard and screen-reader friendly */
.review-anon {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--pz-soft);
  border: 1.5px solid transparent;
  border-radius: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.review-anon:has(.review-anon__input:checked) {
  background: rgb(var(--pz-primary-rgb) / 8%);
  border-color: rgb(var(--pz-primary-rgb) / 35%);
}

.review-anon__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.review-anon__switch {
  position: relative;
  flex: none;
  inline-size: 2.6rem;
  block-size: 1.45rem;
  margin-block-start: 0.15rem;
  background: var(--pz-border);
  border-radius: 999px;
  transition: background-color 0.2s;
}

html.dark .review-anon__switch {
  background: #3a3566;
}

.review-anon__switch::after {
  content: "";
  position: absolute;
  inset-block-start: 0.18rem;
  inset-inline-start: 0.18rem;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
  transition: inset-inline-start 0.2s;
}

.review-anon__input:checked + .review-anon__switch {
  background: var(--pz-primary);
}

.review-anon__input:checked + .review-anon__switch::after {
  inset-inline-start: 1.32rem;
}

.review-anon__input:focus-visible + .review-anon__switch {
  outline: 2px solid var(--pz-primary);
  outline-offset: 2px;
}

.review-anon__text {
  display: grid;
  gap: 0.15rem;
  line-height: 1.7;
}

.review-anon__text strong {
  color: var(--pz-primary-text);
}

.review-anon__text span {
  font-size: 0.82rem;
  color: var(--pz-muted);
}

/* the honeypot: off-screen, never focusable */
.review-trap {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .review-anon,
  .review-anon__switch,
  .review-anon__switch::after {
    transition: none;
  }
}

/* ============================================================ help centre (/faq/, /questions/, /rules/) */
.help-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 5rem) 0;
  background:
    radial-gradient(70% 90% at 100% 0%, rgb(var(--pz-primary-rgb) / 16%), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgb(209 74 33 / 10%), transparent 60%),
    var(--pz-soft);
}

.help-hero--compact {
  padding-block-start: clamp(1.75rem, 5vw, 3.25rem);
}

.help-hero__inner {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
}

.help-hero__eyebrow {
  margin: 0;
  padding: 0.25rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 10%);
  border-radius: 999px;
}

.help-hero__title {
  margin: 0;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.35;
  text-wrap: balance;
  color: var(--pz-primary-text);
}

html:not(.dark) .help-hero__title {
  color: #12202b;
}

.help-hero__lead {
  max-inline-size: 40rem;
  margin: 0;
  color: var(--pz-muted);
  text-wrap: pretty;
}

.help-search {
  display: flex;
  align-items: center;
  inline-size: min(100%, 40rem);
  margin-block-start: 0.75rem;
  padding: 0.35rem;
  padding-inline-start: 1rem;
  background: #fff;
  border: 1.5px solid var(--pz-border);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgb(16 12 48 / 8%);
  transition: border-color 0.2s, box-shadow 0.2s;
}

html.dark .help-search {
  background: rgb(12 14 43);
}

.help-search:focus-within {
  border-color: var(--pz-primary);
  box-shadow: 0 0 0 4px rgb(var(--pz-primary-rgb) / 14%), 0 12px 30px rgb(16 12 48 / 8%);
}

.help-search__icon {
  display: inline-flex;
  color: var(--pz-muted);
}

.help-search__input {
  flex: 1;
  min-inline-size: 0;
  padding: 0.6rem 0.6rem;
  font-size: 1rem; /* 16px: no zoom on iOS */
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}

.help-search__button {
  flex: none;
  padding: 0.6rem 1.3rem;
  font-weight: 700;
  color: #fff;
  background: var(--pz-primary);
  border-radius: 999px;
  transition: filter 0.2s;
}

.help-search__button:hover {
  filter: brightness(1.12);
}

.help-tabs {
  display: flex;
  gap: 0.25rem;
  max-inline-size: 100%;
  margin-block-start: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.help-tabs::-webkit-scrollbar {
  display: none;
}

.help-tabs__link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 1.1rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--pz-muted);
  border-block-end: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.help-tabs__link:hover,
.help-tabs__link.is-active {
  color: var(--pz-primary-text);
  border-block-end-color: var(--pz-primary);
}

.help-layout {
  padding-block: 2rem 4rem;
}

.help-layout--split {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .help-layout--split {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }

  .help-side {
    position: sticky;
    inset-block-start: 6.5rem;
  }
}

.help-main {
  min-inline-size: 0;
}

.help-side {
  display: grid;
  gap: 1.25rem;
}

/* topic cards */
.help-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.85rem;
  margin-block-end: 2rem;
}

.help-topic {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1rem;
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.help-topic:hover {
  border-color: rgb(var(--pz-primary-rgb) / 35%);
  box-shadow: 0 10px 24px rgb(16 12 48 / 8%);
  transform: translateY(-2px);
}

.help-topic__icon {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 10%);
  border-radius: 0.8rem;
}

.help-topic__text {
  display: grid;
  flex: 1;
  min-inline-size: 0;
  line-height: 1.6;
}

.help-topic__text strong {
  color: var(--pz-primary-text);
}

.help-topic__text small {
  overflow: hidden;
  font-size: 0.78rem;
  color: var(--pz-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.help-topic__count {
  flex: none;
  min-inline-size: 1.8rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border-radius: 999px;
}

.help-section-title,
.help-subtitle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  font-weight: 800;
  color: var(--pz-primary-text);
}

.help-section-title {
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
}

.help-subtitle {
  font-size: 1.05rem;
}

.help-section-title__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  color: #fff;
  background: var(--pz-primary);
  border-radius: 0.65rem;
}

.help-group {
  margin-block-end: 2.25rem;
}

.help-results {
  margin-block-end: 2.5rem;
  padding: 1.25rem;
  background: rgb(var(--pz-primary-rgb) / 5%);
  border-radius: 1.25rem;
}

/* accordion */
.help-accordion {
  display: grid;
  gap: 0.7rem;
}

.help-item {
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.help-item[open] {
  border-color: rgb(var(--pz-primary-rgb) / 35%);
  box-shadow: 0 10px 26px rgb(16 12 48 / 7%);
}

.help-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 3.25rem;
  padding: 0.9rem 1.15rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--pz-primary-text);
  list-style: none;
  cursor: pointer;
}

html:not(.dark) .help-item__question {
  color: #1b1d2a;
}

.help-item__question::-webkit-details-marker {
  display: none;
}

.help-item__question:focus-visible {
  outline: 2px solid var(--pz-primary);
  outline-offset: -2px;
  border-radius: 1rem;
}

.help-item__chevron {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 8%);
  border-radius: 50%;
  transition: transform 0.25s;
}

.help-item[open] .help-item__chevron {
  transform: rotate(180deg);
}

.help-item__answer {
  padding: 0 1.15rem 1rem;
  animation: help-open 0.25s ease-out;
}

@keyframes help-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.help-item__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-start: 0.85rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px dashed var(--pz-border);
}

.help-item__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--pz-muted);
}

.help-item__link:hover {
  color: var(--pz-primary-text);
}

/* formatted text (apps.help.text) */
.help-prose {
  line-height: 2;
  color: var(--pz-muted);
  overflow-wrap: anywhere;
}

html:not(.dark) .help-prose {
  color: #3d4459;
}

.help-prose p,
.help-prose ul,
.help-prose ol {
  margin-block: 0 0.75rem;
}

.help-prose ul,
.help-prose ol {
  padding-inline-start: 1.4rem;
}

.help-prose ul {
  list-style: disc;
}

.help-prose ol {
  list-style: persian;
}

.help-prose li {
  margin-block-end: 0.3rem;
}

.help-prose li::marker {
  color: var(--pz-primary-text);
  font-weight: 700;
}

.help-prose a {
  font-weight: 700;
  color: var(--pz-primary-text);
  text-decoration: underline;
  text-decoration-color: rgb(var(--pz-primary-rgb) / 35%);
  text-underline-offset: 4px;
}

.help-prose strong {
  color: var(--pz-primary-text);
}

html:not(.dark) .help-prose strong {
  color: #1b1d2a;
}

.help-prose > :last-child {
  margin-block-end: 0;
}

/* «was this helpful?» */
.help-vote {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--pz-muted);
}

.help-vote__button {
  min-inline-size: 3rem;
  padding: 0.3rem 0.9rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: transparent;
  border: 1.5px solid var(--pz-border);
  border-radius: 999px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.help-vote__button:hover {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

.help-vote__thanks {
  font-weight: 700;
  color: var(--pz-success);
}

.help-vote [hidden] {
  display: none;
}

/* buttons and boxes */
.help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-block-size: 2.9rem;
  padding: 0.6rem 1.35rem;
  font-weight: 700;
  color: #fff;
  background: var(--pz-primary);
  border: 1.5px solid var(--pz-primary);
  border-radius: 0.8rem;
  transition: filter 0.2s, background-color 0.2s, color 0.2s;
}

.help-button:hover {
  filter: brightness(1.12);
}

.help-button--ghost {
  color: var(--pz-primary-text);
  background: transparent;
  border-color: rgb(var(--pz-primary-rgb) / 35%);
}

.help-button--ghost:hover {
  color: #fff;
  background: var(--pz-primary);
  filter: none;
}

.help-button--block {
  inline-size: 100%;
}

.help-empty,
.help-filter-empty {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--pz-muted);
  border: 1.5px dashed var(--pz-border);
  border-radius: 1rem;
}

.help-filter-empty[hidden],
.help-group[hidden],
.help-item[hidden],
.help-results[hidden],
.help-suggest[hidden] {
  display: none;
}

.help-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-block-start: 3rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  color: #fff;
  background:
    radial-gradient(80% 120% at 0% 0%, rgb(255 255 255 / 12%), transparent 60%),
    linear-gradient(135deg, var(--pz-primary), var(--pz-darkdeep));
  border-radius: 1.5rem;
}

.help-cta h2 {
  margin: 0 0 0.35rem;
  font-size: 1.3rem;
  font-weight: 800;
}

.help-cta p {
  margin: 0;
  opacity: 0.85;
}

.help-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.help-cta .help-button {
  color: var(--pz-primary);
  background: #fff;
  border-color: #fff;
}

.help-cta .help-button--ghost {
  color: #fff;
  background: transparent;
  border-color: rgb(255 255 255 / 45%);
}

/* Q&A list */
.help-chips {
  display: flex;
  gap: 0.45rem;
  margin-block-end: 1.25rem;
  padding-block-end: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.help-chips::-webkit-scrollbar {
  display: none;
}

.help-chip {
  flex: none;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--pz-muted);
  background: var(--rv-card);
  border: 1.5px solid var(--pz-border);
  border-radius: 999px;
}

.help-chip.is-active,
.help-chip:hover {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

.help-faq-hits {
  margin-block-end: 1.25rem;
  padding: 1rem 1.15rem;
  background: rgb(var(--pz-primary-rgb) / 6%);
  border-radius: 1rem;
}

.help-faq-hits ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-inline-start: 1.2rem;
  list-style: disc;
}

.help-faq-hits a {
  font-weight: 700;
  color: var(--pz-primary-text);
}

.qa-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qa-card__link {
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.qa-card__link:hover {
  border-color: rgb(var(--pz-primary-rgb) / 35%);
  box-shadow: 0 10px 24px rgb(16 12 48 / 7%);
  transform: translateY(-1px);
}

.qa-card__badge {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 2.3rem;
  block-size: 2.3rem;
  color: var(--pz-success);
  background: rgb(26 182 157 / 12%);
  border-radius: 50%;
}

.qa-card__body {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.qa-card__title {
  font-weight: 800;
  line-height: 1.8;
  color: var(--pz-primary-text);
}

html:not(.dark) .qa-card__title {
  color: #1b1d2a;
}

.qa-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--pz-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.qa-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
  font-size: 0.78rem;
  color: var(--pz-muted);
}

.qa-card__tag {
  padding: 0 0.55rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 9%);
  border-radius: 999px;
}

.help-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 1.5rem;
  font-size: 0.9rem;
  color: var(--pz-muted);
}

.help-pager a {
  padding: 0.45rem 1.1rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  border: 1.5px solid var(--pz-border);
  border-radius: 999px;
}

/* ask form and side boxes */
.help-ask,
.help-mine {
  padding: 1.25rem;
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgb(16 12 48 / 5%);
}

.help-ask__form {
  display: grid;
  gap: 0.9rem;
}

.help-field {
  display: grid;
  gap: 0.35rem;
}

.help-field label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pz-primary-text);
}

.help-input {
  inline-size: 100%;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  line-height: 1.8;
  color: inherit;
  background: var(--pz-soft);
  border: 1.5px solid transparent;
  border-radius: 0.75rem;
  transition: border-color 0.2s, background-color 0.2s;
}

.help-input:focus {
  background: transparent;
  border-color: var(--pz-primary);
  outline: 0;
}

.help-field.has-error .help-input {
  border-color: var(--pz-danger);
}

.help-suggest {
  padding: 0.75rem;
  background: rgb(26 182 157 / 9%);
  border: 1px solid rgb(26 182 157 / 30%);
  border-radius: 0.8rem;
}

.help-suggest__title {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: #0b6b57;
}

html.dark .help-suggest__title {
  color: #6fe3c9;
}

.help-suggest ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-suggest a {
  display: grid;
  gap: 0.1rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.875rem;
  background: var(--rv-card);
  border-radius: 0.6rem;
}

.help-suggest small {
  font-size: 0.75rem;
  color: var(--pz-muted);
}

.help-note {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--pz-muted);
}

.help-note svg {
  flex: none;
  margin-block-start: 0.35rem;
}

.help-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 1rem;
  padding: 0.75rem 1rem;
  color: var(--pz-danger);
  background: rgb(217 48 37 / 9%);
  border-radius: 0.8rem;
}

.help-alert p {
  margin: 0;
}

.help-alert--info {
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 8%);
}

.help-alert--wait {
  color: #8a5600;
  background: rgb(238 157 28 / 13%);
}

html.dark .help-alert--wait {
  color: #f6c069;
}

.help-mine ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-mine li {
  display: grid;
  gap: 0.2rem;
}

.help-mine a {
  font-weight: 700;
  line-height: 1.7;
  color: var(--pz-primary-text);
}

.help-status {
  justify-self: start;
  padding: 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 999px;
  color: var(--pz-muted);
  background: var(--pz-soft);
}

.help-status--published,
.help-status--private {
  color: #0b6b57;
  background: rgb(26 182 157 / 13%);
}

.help-status--pending {
  color: #8a5600;
  background: rgb(238 157 28 / 15%);
}

.help-status--rejected {
  color: var(--pz-danger);
  background: rgb(217 48 37 / 10%);
}

/* one question */
.help-crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  list-style: none;
  color: var(--pz-muted);
}

.help-crumbs li + li::before {
  content: "‹";
  margin-inline-end: 0.3rem;
}

.help-crumbs a:hover {
  color: var(--pz-primary-text);
}

.qa-article__head {
  margin-block-end: 1rem;
}

.qa-article__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 3.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.55;
  text-wrap: balance;
  color: var(--pz-primary-text);
}

html:not(.dark) .qa-article__title {
  color: #12202b;
}

.qa-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  font-size: 0.82rem;
  color: var(--pz-muted);
}

.qa-article__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.qa-article__question {
  padding: 1.15rem 1.25rem;
  background: var(--pz-soft);
  border-radius: 1rem;
}

.qa-answer {
  margin-block-start: 1.5rem;
  padding: 1.25rem;
  background: var(--rv-card);
  border: 1px solid rgb(26 182 157 / 35%);
  border-inline-start: 5px solid var(--pz-success);
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgb(16 12 48 / 6%);
}

.qa-answer__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.85rem;
  font-size: 1rem;
}

.qa-answer__head span:last-child {
  display: grid;
  line-height: 1.5;
}

.qa-answer__head strong {
  color: var(--pz-primary-text);
}

.qa-answer__head small {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--pz-muted);
}

.qa-answer__badge {
  display: inline-grid;
  place-items: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  color: #fff;
  background: var(--pz-success);
  border-radius: 50%;
}

.qa-answer .help-vote {
  margin-block-start: 1rem;
}

.qa-article__back {
  margin-block-start: 2rem;
}

/* rules */
.policy-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--pz-muted);
}

.policy-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .policy-layout {
    grid-template-columns: 18rem minmax(0, 1fr);
    align-items: start;
  }

  .policy-side {
    position: sticky;
    inset-block-start: 6.5rem;
  }
}

.policy-side {
  display: grid;
  gap: 1rem;
}

.policy-pages {
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem;
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1rem;
}

.policy-pages__link {
  padding: 0.55rem 0.8rem;
  font-weight: 700;
  color: var(--pz-muted);
  border-radius: 0.7rem;
}

.policy-pages__link.is-active,
.policy-pages__link:hover {
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 9%);
}

.policy-toc {
  padding: 0.85rem 1rem;
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1rem;
}

.policy-toc summary {
  font-weight: 800;
  color: var(--pz-primary-text);
  cursor: pointer;
}

.policy-toc ol {
  display: grid;
  gap: 0.2rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.policy-toc a {
  display: flex;
  gap: 0.5rem;
  padding: 0.35rem 0.4rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--pz-muted);
  border-radius: 0.5rem;
}

.policy-toc a:hover {
  color: var(--pz-primary-text);
  background: var(--pz-soft);
}

.policy-toc a span {
  font-weight: 800;
  color: var(--pz-primary-text);
}

.policy-body {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
}

.policy-section {
  padding: 1.25rem 1.35rem;
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1.15rem;
}

.policy-section__title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--pz-primary-text);
}

.policy-section__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  font-size: 0.9rem;
  color: #fff;
  background: var(--pz-primary);
  border-radius: 0.6rem;
}

.policy-foot {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--pz-muted);
}

.policy-foot a {
  font-weight: 700;
  color: var(--pz-primary-text);
}

@media print {
  .help-hero,
  .policy-side,
  .help-tabs,
  #site-footer,
  header {
    display: none !important;
  }

  .policy-section {
    break-inside: avoid;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .help-item__answer,
  .help-item__chevron,
  .help-topic,
  .qa-card__link {
    animation: none;
    transition: none;
  }
}

/* ============================================================ home campaigns: «تخفیف» and «به‌زودی» */
.campaigns {
  padding-block: clamp(2rem, 6vw, 3.5rem);
}

.campaigns__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.25rem;
}

.campaigns__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
  padding: 0.2rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--pz-secondary);
  background: rgb(209 74 33 / 10%);
  border-radius: 999px;
}

.campaigns--coming .campaigns__eyebrow,
.home-faq .campaigns__eyebrow {
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 10%);
}

.campaigns__title {
  margin: 0;
  font-size: clamp(1.4rem, 3.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.4;
  text-wrap: balance;
  color: var(--pz-primary-text);
}

html:not(.dark) .campaigns__title {
  color: #12202b;
}

.campaigns__nav {
  display: none;
  gap: 0.4rem;
}

@media (min-width: 768px) {
  .campaigns__nav {
    display: flex;
  }
}

.campaigns__arrow {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--pz-primary-text);
  background: var(--rv-card);
  border: 1.5px solid var(--pz-border);
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s;
}

.campaigns__arrow:hover {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

/* a swipeable row everywhere; cards share the width when there is room */
.campaigns__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 24rem);
  gap: 1rem;
  margin: 0 calc(var(--rail-bleed, 0px) * -1);
  padding: 0.25rem var(--rail-bleed, 0px) 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-bleed, 0px);
  scrollbar-width: none;
  list-style: none;
}

.campaigns__rail::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  .campaigns__rail {
    --rail-bleed: 15px;
  }
}

@media (min-width: 1024px) {
  .campaigns__rail {
    grid-auto-columns: calc((100% - 2rem) / 3);
  }

  .campaigns__rail--1 {
    grid-auto-columns: 100%;
  }

  .campaigns__rail--2 {
    grid-auto-columns: calc(50% - 0.5rem);
  }
}

/* the cards: see «home campaigns: compact ticket cards» further down */

/* home FAQ */
.home-faq {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}

@media (min-width: 1024px) {
  .home-faq {
    grid-template-columns: 22rem minmax(0, 1fr);
    align-items: start;
    gap: 3rem;
  }

  .home-faq__intro {
    position: sticky;
    inset-block-start: 7rem;
  }
}

.home-faq__lead {
  margin: 0.5rem 0 1rem;
  color: var(--pz-muted);
  line-height: 1.9;
}

.home-faq__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .countdown.is-urgent .countdown__unit b {
    animation: none;
  }
}

.qa-card,
.qa-article {
  min-inline-size: 0;
}

.help-vote__label {
  font-weight: 700;
}

/* ============================================================ mobile experience
 * Phones and tablets get an app-like layout instead of one long column:
 *   - a bottom bar within thumb reach and a <dialog> side menu
 *   - swipeable rows (scroll-snap) for cards instead of a pile
 *   - compact 2- and 3-column figures, side-by-side buttons
 *   - fluid headings, 16px inputs (no zoom on iOS), safe areas
 */
h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* ---- the header's menu button */
.header-menu-button {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 8%);
  border-radius: 0.9rem;
  transition: background-color 0.2s;
}

.header-menu-button:hover {
  background: rgb(var(--pz-primary-rgb) / 15%);
}

/* ---- bottom bar (apps.sitecontent.mobile_nav) */
.bottom-nav {
  display: none;
}

@media (max-width: 1023px) {
  .bottom-nav {
    --bn-hide: calc(100% + 1.2rem + env(safe-area-inset-bottom));
    position: fixed;
    inset-inline: max(0.6rem, env(safe-area-inset-left));
    inset-block-end: calc(0.55rem + env(safe-area-inset-bottom));
    z-index: 900;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    max-inline-size: 34rem;
    margin-inline: auto;
    padding: 0.3rem 0.25rem 0.35rem;
    background: color-mix(in srgb, #fff 84%, transparent);
    border: 1px solid rgb(16 12 48 / 8%);
    border-radius: 1.5rem;
    box-shadow:
      0 1px 0 rgb(255 255 255 / 60%) inset,
      0 14px 36px rgb(16 12 48 / 16%);
    backdrop-filter: saturate(170%) blur(18px);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s;
  }

  .bottom-nav--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bottom-nav--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bottom-nav--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  html.dark .bottom-nav {
    background: color-mix(in srgb, rgb(12 14 43) 88%, transparent);
    border-color: rgb(255 255 255 / 8%);
    box-shadow: 0 14px 36px rgb(0 0 0 / 40%);
  }

  /* room for the bar only on pages that have it (not during an exam) */
  body.has-bottom-nav:has(.bottom-nav) {
    padding-block-end: calc(5.6rem + env(safe-area-inset-bottom));
  }

  /* out of the way while reading down the page (script), and while typing:
   * the on-screen keyboard would otherwise push the bar over the field */
  .bottom-nav.is-tucked,
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="file"]), textarea, [contenteditable="true"]):focus) .bottom-nav {
    transform: translateY(var(--bn-hide));
    opacity: 0;
    pointer-events: none;
  }

  /* the floating theme tab moves into the menu on phones */
  .theme-switch {
    display: none;
  }

  .scroll-up {
    bottom: calc(6.2rem + env(safe-area-inset-bottom)) !important;
    transition: bottom 0.28s;
  }

  body:has(.bottom-nav.is-tucked) .scroll-up {
    bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }
}

.bottom-nav__item {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 0.15rem;
  min-inline-size: 0;
  min-block-size: 3.3rem;
  padding: 0.25rem 0.1rem 0.1rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pz-muted);
  background: none;
  border: 0;
  border-radius: 1rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}

/* one line, never wrapped under the icon: long words end with «…» */
.bottom-nav__label {
  display: block;
  max-inline-size: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Material-style indicator: the icon sits in a pill that fills when active */
.bottom-nav__icon {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  max-inline-size: 100%;
  block-size: 1.95rem;
  border-radius: 999px;
  transition: background-color 0.2s, transform 0.15s;
}

.bottom-nav__item:active .bottom-nav__icon,
.bottom-nav__item:active .bottom-nav__fab {
  transform: scale(0.92);
}

.bottom-nav__item:focus-visible {
  outline: 2px solid var(--pz-primary);
  outline-offset: -2px;
}

.bottom-nav__item.is-active {
  color: var(--pz-primary-text);
}

.bottom-nav__item.is-active .bottom-nav__icon {
  background: rgb(var(--pz-primary-rgb) / 14%);
}

.bottom-nav__item.is-active .bottom-nav__label {
  font-weight: 800;
}

.bottom-nav__badge {
  position: absolute;
  inset-block-start: -0.35rem;
  inset-inline-start: calc(50% + 0.3rem); /* just past the icon's corner */
  min-inline-size: 1.15rem;
  block-size: 1.15rem;
  padding-inline: 0.28rem;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.15rem;
  text-align: center;
  color: #fff;
  background: #e5484d;
  border: 2px solid #fff;
  border-radius: 999px;
  box-sizing: content-box;
}

.bottom-nav__dot {
  position: absolute;
  inset-block-start: 0.15rem;
  inset-inline-end: 0.85rem;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  background: #e5484d;
  border: 2px solid #fff;
  border-radius: 50%;
}

html.dark .bottom-nav__badge,
html.dark .bottom-nav__dot {
  border-color: rgb(12 14 43);
}

/* the main button, raised out of the bar */
.bottom-nav__item--main {
  color: var(--pz-primary-text);
}

.bottom-nav__fab {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 3.3rem;
  block-size: 3.3rem;
  margin-block-start: -1.7rem;
  color: #fff;
  background: linear-gradient(140deg, #13858a, var(--pz-primary));
  border: 4px solid var(--pz-soft);
  border-radius: 50%;
  box-shadow: 0 10px 22px rgb(var(--pz-primary-rgb) / 40%);
  transition: transform 0.15s, box-shadow 0.2s;
}

html.dark .bottom-nav__fab {
  border-color: rgb(12 14 43);
}

.bottom-nav__item--main.is-active .bottom-nav__fab {
  box-shadow:
    0 0 0 3px rgb(var(--pz-primary-rgb) / 25%),
    0 10px 22px rgb(var(--pz-primary-rgb) / 40%);
}

/* «ورود به کلاس»: a session of this person can be joined right now */
.bottom-nav__item.is-live {
  color: #d62f5b;
}

.bottom-nav__item.is-live .bottom-nav__fab {
  background: linear-gradient(140deg, #ff5f6d, #d62f5b);
  box-shadow: 0 10px 22px rgb(214 47 91 / 45%);
}

.bottom-nav__item.is-live .bottom-nav__fab::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgb(214 47 91 / 60%);
  border-radius: 50%;
  animation: bottom-nav-pulse 1.8s ease-out infinite;
}

.bottom-nav__item.is-live:not(.bottom-nav__item--main) .bottom-nav__icon {
  color: #fff;
  background: #d62f5b;
}

@keyframes bottom-nav-pulse {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav,
  .bottom-nav__icon,
  .bottom-nav__fab {
    transition: none;
  }

  .bottom-nav__item.is-live .bottom-nav__fab::after {
    animation: none;
  }
}

/* narrow phones (iPhone SE, small Androids) */
@media (max-width: 359px) {
  .bottom-nav {
    inset-inline: 0.35rem;
  }

  .bottom-nav__item {
    font-size: 0.62rem;
  }

  .bottom-nav__icon {
    inline-size: 2.6rem;
  }
}

/* phones on their side: a slimmer bar */
@media (max-width: 1023px) and (max-height: 480px) {
  .bottom-nav__item {
    min-block-size: 2.7rem;
  }

  .bottom-nav__fab {
    inline-size: 2.7rem;
    block-size: 2.7rem;
    margin-block-start: -0.9rem;
  }
}

/* menu: the person's own pages, two to a row */
.m-drawer__label--first {
  margin-block-start: 0;
}

.m-drawer__links--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  margin-block-end: 0.6rem;
}

.m-drawer__links--grid a {
  gap: 0.5rem;
  min-block-size: 2.9rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
  background: rgb(var(--pz-primary-rgb) / 5%);
}

/* ---- drawer (dialog) */
.m-drawer {
  position: fixed;
  inset: 0 0 0 auto; /* right edge in a right-to-left page */
  inline-size: min(88vw, 23rem);
  max-inline-size: none;
  block-size: 100dvh;
  max-block-size: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: #fff;
  border: 0;
  border-start-start-radius: 1.5rem;
  border-end-start-radius: 1.5rem;
  box-shadow: -20px 0 50px rgb(16 12 48 / 22%);
}

html.dark .m-drawer {
  background: rgb(12 14 43);
}

.m-drawer[open] {
  animation: drawer-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m-drawer.is-closing {
  animation: drawer-out 0.18s ease-in forwards;
}

/* following the finger while it is swiped away (parvazDrawer) */
.m-drawer {
  transform: translateX(var(--drawer-drag, 0));
  touch-action: pan-y;
}

.m-drawer.is-dragging {
  transition: none;
  user-select: none;
}

.m-drawer.is-settling {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* browsers without <dialog>: the same sheet over a dimmed page */
.m-drawer.is-fallback {
  z-index: 10000;
  display: block;
  box-shadow:
    -20px 0 50px rgb(16 12 48 / 22%),
    0 0 0 100vmax rgb(7 15 25 / 45%);
}

.m-drawer:not([open]) {
  display: none;
}

.m-drawer::backdrop {
  background: rgb(7 15 25 / 45%);
  backdrop-filter: blur(3px);
}

@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
}

@keyframes drawer-out {
  to {
    transform: translateX(100%);
  }
}

html.drawer-open {
  overflow: hidden;
}

.m-drawer__panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  block-size: 100%;
  padding: calc(0.9rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.m-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.m-drawer__brand .site-logo {
  block-size: 2.75rem;
}

.m-drawer__close {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border-radius: 50%;
}

.m-drawer__account,
.m-drawer__login {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--pz-primary), var(--pz-darkdeep));
  border-radius: 1.1rem;
}

.m-drawer__account > span:nth-child(2),
.m-drawer__login > span {
  display: grid;
  flex: 1;
  line-height: 1.5;
}

.m-drawer__account small,
.m-drawer__login small {
  font-size: 0.75rem;
  opacity: 0.8;
}

.m-drawer__account svg:last-child {
  transform: rotate(-90deg);
  opacity: 0.8;
}

.m-drawer__avatar {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  font-weight: 800;
  background: rgb(255 255 255 / 18%);
  border-radius: 50%;
}

.m-drawer__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.9rem;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border: 1.5px solid transparent;
  border-radius: 0.9rem;
}

.m-drawer__search:focus-within {
  border-color: var(--pz-primary);
}

.m-drawer__search input {
  flex: 1;
  min-inline-size: 0;
  padding: 0.75rem 0;
  font-size: 1rem;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}

.m-drawer__label {
  margin: 0.4rem 0 0.2rem;
  padding-inline: 0.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--pz-muted);
}

.m-drawer__links {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-drawer__links a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 3rem;
  padding: 0.45rem 0.6rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  border-radius: 0.8rem;
  transition: background-color 0.15s;
}

html:not(.dark) .m-drawer__links a {
  color: #1b1d2a;
}

.m-drawer__links a svg {
  flex: none;
  color: var(--pz-primary-text);
}

.m-drawer__links a:hover,
.m-drawer__links a:focus-visible,
.m-drawer__links a[aria-current="page"] {
  background: rgb(var(--pz-primary-rgb) / 8%);
}

.m-drawer__badge {
  margin-inline-start: auto;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  color: #fff;
  background: var(--pz-secondary);
  border-radius: 999px;
}

.m-drawer__foot {
  display: grid;
  gap: 0.5rem;
  margin-block-start: auto;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--pz-border);
}

.m-drawer__theme,
.m-drawer__call,
.m-drawer__logout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  inline-size: 100%;
  min-block-size: 2.9rem;
  padding: 0.5rem 0.8rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: var(--pz-soft);
  border-radius: 0.8rem;
}

.m-drawer__theme span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.m-drawer__theme-light,
html.dark .m-drawer__theme-dark {
  display: none !important;
}

html.dark .m-drawer__theme-light {
  display: inline-flex !important;
}

.m-drawer__logout {
  color: var(--pz-danger);
}

@media (min-width: 1024px) {
  .m-drawer {
    display: none;
  }
}

/* ---- swipeable rows of cards */
@media (max-width: 639px) {
  .m-rail {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none !important;
    gap: 1rem !important;
    margin-inline: -15px;
    padding: 0.25rem 15px 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    scrollbar-width: none;
  }

  .m-rail::-webkit-scrollbar {
    display: none;
  }

  .m-rail > li {
    min-inline-size: 0;
    scroll-snap-align: start;
  }

  .m-rail.pz-card-grid > li {
    flex: none;
  }

  /* two compact columns instead of one long list */
  .m-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .m-grid-2 a {
    padding: 1.1rem !important;
  }

  .m-grid-2 span.text-2xl {
    font-size: 1.15rem;
  }
}

/* ---- hero: tighter, buttons side by side */
@media (max-width: 639px) {
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem !important;
  }

  .hero-actions > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding-block: 0.5rem !important;
    padding-inline: 0.6rem !important;
    font-size: 0.85rem !important;
    white-space: nowrap;
    text-align: center;
  }

  .hero-actions > .hero-placement > i:first-child { display: none; } /* one line on a phone */

  .container2-xl.bg-darkdeep1 {
    padding-block: 2.25rem 2.75rem !important;
    border-radius: 1.5rem;
  }

  .container2-xl.bg-darkdeep1 h1 {
    font-size: clamp(1.7rem, 8vw, 2.1rem);
    line-height: 1.4;
  }

  .container2-xl.bg-darkdeep1 p.text-size-15 {
    margin-block-end: 1.5rem;
  }
}

/* ---- panels: the summary as compact tiles */
@media (max-width: 1023px) {
  .m-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem !important;
  }

  .m-stats > a {
    flex-direction: column;
    gap: 0.35rem !important;
    padding: 0.85rem 0.5rem !important;
    text-align: center;
    border-radius: 1rem;
  }

  .m-stats img {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }

  .m-stats .text-size-34 {
    font-size: 1.45rem;
  }

  .m-stats > a > span > span:last-child {
    display: block;
    font-size: 0.72rem;
    line-height: 1.5;
  }
}

/* ---- footer: link columns side by side, tighter spacing */
@media (max-width: 767px) {
  .site-footer .site-footer__col--links {
    grid-column: span 6 / span 6;
  }

  .site-footer section.grid {
    row-gap: 2rem;
    padding-block: 2.5rem 1.5rem;
  }

  .site-footer__links {
    font-size: 0.92rem;
  }
}

/* ---- forms and tables on small screens */
@media (max-width: 767px) {
  input:not([type="checkbox"], [type="radio"], [type="range"]),
  select,
  textarea {
    font-size: max(1rem, 16px);
  }

  .overflow-auto > table {
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-drawer[open],
  .m-drawer.is-closing {
    animation: none;
  }
}

@media (max-width: 639px) {
  .help-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .help-topic {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.8rem;
  }

  .help-topic__text small {
    display: none;
  }

  .help-topic__count {
    position: absolute;
    inset-block-start: 0.7rem;
    inset-inline-end: 0.7rem;
  }

  .help-topic {
    position: relative;
  }

  .help-search {
    padding-inline-start: 0.75rem;
  }

  .help-search__button {
    padding-inline: 1rem;
  }
}

.site-footer__col {
  min-inline-size: 0;
}

/* ---- «سؤالات رایج درباره‌ی این دوره» (course page; FAQPage data matches it) */
.course-faq {
  scroll-margin-block-start: 6rem;
}

.course-faq__list {
  display: grid;
  gap: 0.6rem;
}

.course-faq__item {
  background: var(--pz-soft);
  border: 1px solid rgb(var(--pz-primary-rgb) / 10%);
  border-radius: 0.9rem;
  transition: background-color 0.2s;
}

.course-faq__item[open] {
  background: color-mix(in srgb, var(--pz-primary) 6%, transparent);
}

.course-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  font-weight: 800;
  line-height: 1.8;
  cursor: pointer;
  list-style: none;
}

.course-faq__q::-webkit-details-marker {
  display: none;
}

.course-faq__q::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.7rem;
  block-size: 1.7rem;
  font-size: 1.1rem;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 10%);
  border-radius: 50%;
  transition: transform 0.2s;
}

.course-faq__item[open] .course-faq__q::after {
  transform: rotate(45deg);
}

.course-faq__a {
  margin: 0;
  padding: 0 1rem 0.95rem;
  line-height: 2;
  color: var(--pz-muted);
}

.course-faq__more {
  margin-block-start: 0.9rem;
  font-size: 0.9rem;
  color: var(--pz-muted);
}

.course-faq__more a {
  font-weight: 700;
  color: var(--pz-primary-text);
}

/* Below-the-fold blocks render only when they come near the screen
 * (faster first paint and better INP on long pages). */
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ================================================================
 * «مسیر یادگیری»: student list, teacher workspace, booklet toolbar
 * (templates/journeys/*.html; the booklet sheets are in journey.css)
 * ================================================================ */
.jw-lead {
  margin: 0 0 1.2rem;
  color: var(--pz-muted);
  line-height: 1.9;
}

.jw-note {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  background: rgb(238 157 28 / 12%);
  border-radius: 0.8rem;
}

.jw-note a {
  font-weight: 700;
  color: var(--pz-primary-text);
}

.jw-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 2.6rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 8%);
  border: 1px solid rgb(var(--pz-primary-rgb) / 18%);
  border-radius: 0.8rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.jw-btn:hover {
  background: rgb(var(--pz-primary-rgb) / 14%);
}

.jw-btn--primary {
  color: #fff;
  background: var(--pz-primary);
  border-color: var(--pz-primary);
}

.jw-btn--primary:hover {
  background: var(--pz-darkdeep);
}

.jw-btn--accent {
  color: #fff;
  background: var(--pz-secondary);
  border-color: var(--pz-secondary);
}

.jw-btn--ghost {
  background: transparent;
}

.jw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 10%);
  border-radius: 999px;
  direction: ltr;
}

.jw-chip--ok {
  color: #0f7a66;
  background: rgb(26 182 157 / 14%);
  direction: rtl;
}

.jw-chip--warn {
  color: #9a5b00;
  background: rgb(238 157 28 / 16%);
  direction: rtl;
}

/* ---- student: journeys */
.jw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jw-tile {
  position: relative;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 1.2rem;
  background: var(--pz-soft);
  border: 1px solid rgb(var(--pz-primary-rgb) / 12%);
  border-radius: 1.1rem;
}

.jw-tile__badge {
  justify-self: start;
  padding: 0.1rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  background: var(--pz-secondary);
  border-radius: 999px;
}

.jw-tile__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pz-primary-text);
}

.jw-tile__book,
.jw-tile__meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--pz-muted);
  text-align: right;
}

.jw-tile__stage {
  margin: 0;
  font-size: 0.9rem;
}

.jw-tile .jw-btn {
  justify-self: start;
  margin-block-start: 0.5rem;
}

/* ---- booklet toolbar */
.jw-toolbar {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 1rem;
  padding: 0.6rem 0.8rem;
  background: color-mix(in srgb, #fff 90%, transparent);
  border: 1px solid rgb(var(--pz-primary-rgb) / 12%);
  border-radius: 1rem;
  backdrop-filter: blur(10px);
}

html.dark .jw-toolbar {
  background: color-mix(in srgb, rgb(12 14 43) 90%, transparent);
}

.jw-toolbar__pages {
  display: flex;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.jw-toolbar__pages a {
  display: block;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 7%);
  border-radius: 999px;
}

.jw-toolbar__actions {
  display: flex;
  gap: 0.4rem;
}

.jw-menu {
  position: relative;
}

.jw-menu > summary {
  list-style: none;
}

.jw-menu > summary::-webkit-details-marker {
  display: none;
}

.jw-menu__list {
  position: absolute;
  inset-inline-end: 0;
  z-index: 6;
  min-inline-size: 12rem;
  margin: 0.3rem 0 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--pz-border);
  border-radius: 0.8rem;
  box-shadow: 0 12px 28px rgb(16 12 48 / 14%);
}

html.dark .jw-menu__list {
  background: rgb(22 24 56);
}

.jw-menu__list a {
  display: block;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  border-radius: 0.5rem;
}

.jw-menu__list a:hover {
  background: rgb(var(--pz-primary-rgb) / 8%);
}

.jw-printbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.8rem;
  font-family: "Vazirmatn", sans-serif;
  font-size: 0.9rem;
  background: #fff4e5;
}

/* ---- teacher: list and assignment */
.jw-assign {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: flex-end;
  margin-block-end: 1.4rem;
  padding: 1rem;
  background: var(--pz-soft);
  border-radius: 1rem;
}

.jw-assign__title {
  display: flex;
  flex-basis: 100%;
  gap: 0.4rem;
  align-items: center;
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--pz-primary-text);
}

.jw-field {
  display: grid;
  flex: 1 1 14rem;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.jw-field select,
.jw-field input,
.jw-field textarea {
  inline-size: 100%;
  min-block-size: 2.6rem;
  padding: 0.45rem 0.7rem;
  font-size: max(1rem, 16px);
  font-weight: 400;
  background: #fff;
  border: 1px solid var(--pz-border);
  border-radius: 0.7rem;
}

html.dark .jw-field select,
html.dark .jw-field input,
html.dark .jw-field textarea {
  background: rgb(255 255 255 / 5%);
}

.jw-field--wide {
  flex-basis: 100%;
}

.jw-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jw-list__item {
  min-inline-size: 0;
}

.jw-list__link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border: 1px solid var(--pz-border);
  border-radius: 0.9rem;
  transition: background-color 0.15s;
}

.jw-list__link:hover {
  background: rgb(var(--pz-primary-rgb) / 5%);
}

.jw-list__name {
  font-weight: 800;
}

.jw-list__meta {
  flex: 1 1 auto;
  font-size: 0.85rem;
  color: var(--pz-muted);
}

/* ---- teacher: one journey */
.jw-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-block-end: 1rem;
}

.jw-head__kicker {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pz-secondary);
}

.jw-head__title {
  margin: 0.1rem 0;
  font-size: 1.5rem;
  font-weight: 800;
}

.jw-head__meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--pz-muted);
}

.jw-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.jw-stages {
  display: flex;
  gap: 0.5rem;
  margin-block-end: 0.8rem;
  padding-block-end: 0.3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.jw-stage {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  min-inline-size: 8.5rem;
  padding: 0.55rem 0.8rem;
  scroll-snap-align: start;
  background: var(--pz-soft);
  border: 2px solid transparent;
  border-radius: 0.9rem;
}

.jw-stage.is-active {
  color: #fff;
  background: var(--pz-primary);
}

.jw-stage.is-current::after {
  content: "فعلی";
  position: absolute;
  top: -0.55rem;
  inset-inline-start: 0.6rem;
  padding: 0 0.45rem;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  background: var(--pz-secondary);
  border-radius: 999px;
}

.jw-stage__code {
  font-size: 0.75rem;
  font-weight: 800;
  text-align: right;
  opacity: 0.85;
}

.jw-stage__title {
  font-size: 0.9rem;
  font-weight: 700;
}

.jw-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-end: 1rem;
}

.jw-inline {
  display: inline-flex;
  margin: 0;
}

.jw-card {
  margin-block-end: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--pz-border);
  border-radius: 1.1rem;
}

.jw-card--report {
  border-inline-start: 5px solid var(--pz-secondary);
}

.jw-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
}

.jw-card__title {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--pz-primary-text);
}

.jw-hint {
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
  color: var(--pz-muted);
}

.jw-table-wrap {
  margin-block-end: 0.9rem;
  overflow-x: auto;
}

.jw-table {
  inline-size: 100%;
  font-size: 0.85rem;
  border-collapse: separate;
  border-spacing: 0 0.3rem;
}

.jw-table thead th {
  padding: 0.3rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--pz-muted);
  text-align: start;
}

.jw-table td,
.jw-table tbody th {
  padding: 0.2rem 0.25rem;
  vertical-align: middle;
}

.jw-table tbody th {
  inline-size: 2.5rem;
  font-weight: 800;
  color: var(--pz-primary-text);
  text-align: center;
}

.jw-table input,
.jw-table select {
  inline-size: 100%;
  min-block-size: 2.4rem;
  padding: 0.35rem 0.5rem;
  font-size: max(0.95rem, 16px);
  background: #fff;
  border: 1px solid var(--pz-border);
  border-radius: 0.6rem;
}

html.dark .jw-table input,
html.dark .jw-table select {
  background: rgb(255 255 255 / 5%);
}

.jw-table td:nth-child(2) {
  inline-size: 8.5rem;
}

.jw-table td:nth-child(3),
.jw-table td:nth-child(4) {
  inline-size: 7.5rem;
}

.jw-private {
  background: #fff8ec !important;
}

html.dark .jw-private {
  color: #ffe2a8;
  background: rgb(255 194 61 / 10%) !important;
}

html.dark .jw-score__input input {
  color: #fff;
  background: #151a47;
}

/* goals */
.jw-goals {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
  counter-reset: goal;
}

.jw-goal {
  display: grid;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem;
  background: var(--pz-soft);
  border-radius: 0.9rem;
}

.jw-goal__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.8;
}

.jw-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.jw-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.jw-choice span {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--pz-border);
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
}

html.dark .jw-choice span {
  background: transparent;
}

.jw-choice input:focus-visible + span {
  outline: 2px solid var(--pz-primary);
  outline-offset: 2px;
}

.jw-choice input:checked + span {
  color: #fff;
  background: var(--pz-muted);
  border-color: transparent;
}

.jw-choice--achieved input:checked + span {
  background: #1a9b83;
}

.jw-choice--in_progress input:checked + span {
  background: #3a5bd9;
}

.jw-choice--needs_practice input:checked + span {
  background: #d9822b;
}

/* report card */
.jw-scores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.6rem;
  margin-block-end: 1rem;
}

.jw-score {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0.6rem 0.7rem;
  background: var(--pz-soft);
  border-radius: 0.8rem;
}

.jw-score__title {
  font-size: 0.85rem;
  font-weight: 800;
}

.jw-score__title small {
  font-weight: 400;
  color: var(--pz-muted);
}

.jw-score__input {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--pz-muted);
}

.jw-score__input input {
  inline-size: 4.5rem;
  min-block-size: 2.4rem;
  padding: 0.3rem 0.5rem;
  font-size: max(1rem, 16px);
  font-weight: 800;
  text-align: center;
  background: #fff;
  border: 1px solid var(--pz-border);
  border-radius: 0.6rem;
}

.jw-score--total {
  color: #fff;
  background: var(--pz-primary);
}

.jw-score--total .jw-score__input,
.jw-score--total .jw-score__title {
  color: #fff;
}

.jw-score--total strong {
  font-size: 1.3rem;
}

.jw-checks {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--pz-border);
  border-radius: 0.9rem;
}

.jw-checks legend {
  padding: 0 0.4rem;
  font-weight: 800;
  color: var(--pz-primary-text);
}

.jw-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.8;
}

.jw-check input {
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.3rem;
  accent-color: var(--pz-primary);
}

.jw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1rem;
}

/* phones: each session row becomes a small card */
@media (max-width: 767px) {
  .jw-table thead {
    display: none;
  }

  .jw-table,
  .jw-table tbody,
  .jw-table tr,
  .jw-table td,
  .jw-table tbody th {
    display: block;
    inline-size: auto !important;
  }

  .jw-table tr {
    margin-block-end: 0.6rem;
    padding: 0.6rem;
    background: var(--pz-soft);
    border-radius: 0.9rem;
  }

  .jw-table tbody th {
    text-align: start;
  }

  .jw-table td {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.5rem;
    align-items: center;
  }

  .jw-table td::before {
    content: attr(data-label);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pz-muted);
  }
}

/* ============================================================ home page sections («طراحی صفحه‌ی اول»)
 * templates/home/sections/*.html (apps.sitecontent.home). Every section is
 * `.home-section` + its kind, spacing and background; colours come from the
 * section's background (no inline styles: the CSP forbids them).
 */
.home-section {
  --hs-bg: rgb(251 251 251);
  --hs-ink: #12202b;
  padding-block: clamp(2.75rem, 7vw, 5rem);
}

html.dark .home-section {
  --hs-bg: rgb(12 14 43);
  --hs-ink: #fff;
}

.home-section--compact {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.home-section--roomy {
  padding-block: clamp(4rem, 10vw, 7.5rem);
}

.home-section--bg-soft {
  --hs-bg: rgb(245 245 254);
  background: var(--hs-bg);
}

html.dark .home-section--bg-soft {
  --hs-bg: rgb(7 51 54);
}

.home-section--bg-brand { --hs-from: #13777b; --hs-to: #073336; --hs-accent: #ffc27a; }
.home-section--bg-night { --hs-from: #253047; --hs-to: #0b1020; --hs-accent: #7cc4c2; }
.home-section--bg-ocean { --hs-from: #3b82f6; --hs-to: #1e3a8a; --hs-accent: #fde68a; }
.home-section--bg-violet { --hs-from: #8b5cf6; --hs-to: #4c1d95; --hs-accent: #fbcfe8; }
.home-section--bg-sunset { --hs-from: #f97316; --hs-to: #b4361a; --hs-accent: #fff1c2; }

/* blocks that keep their own outer spacing */
.home-section--hero {
  padding-block: 1.875rem 0;
}

.home-section--register {
  padding-block: 0;
}

.home-section--placement {
  padding-block: clamp(1.75rem, 5vw, 3rem) 0;
}

.home-section .home-faq {
  padding-block: 0;
}

/* only on phones / only on wider screens */
@media (min-width: 768px) {
  .home-section--only-mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .home-section--only-desktop {
    display: none !important;
  }
}

/* ---- headings */
.hs-head {
  margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
}

.hs-head--center {
  text-align: center;
}

.hs-head__text {
  min-inline-size: 0;
}

.hs-head--center .hs-lead {
  margin-inline: auto;
}

.hs-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.hs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
  padding: 0.25rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.8;
  color: var(--pz-secondary);
  background: rgb(209 74 33 / 9%);
  border-radius: 999px;
}

html.dark .hs-eyebrow {
  color: #ff9f7f;
  background: rgb(209 74 33 / 18%);
}

.hs-title {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.5;
  color: var(--hs-ink);
  text-wrap: balance;
}

.hs-title__mark {
  color: var(--pz-primary-text);
  background: linear-gradient(transparent 64%, rgb(209 74 33 / 18%) 64%);
  border-radius: 0.2em;
}

.hs-lead {
  max-inline-size: 46rem;
  margin: 0.75rem 0 0;
  font-size: 1rem;
  line-height: 2;
  color: var(--pz-muted);
}

.hs-head__link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.15rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-ink-rgb) / 8%);
  border: 1px solid rgb(var(--pz-primary-ink-rgb) / 18%);
  border-radius: 999px;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.hs-head__link:hover {
  color: #fff;
  background: var(--pz-primary);
  transform: translateX(-2px);
}

/* ---- buttons */
.hs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}

.hs-actions--center {
  justify-content: center;
}

.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-block-size: 3rem;
  padding: 0.7rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
  border: 1.5px solid transparent;
  border-radius: 0.95rem;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s;
}

.hs-btn:hover {
  transform: translateY(-2px);
}

.hs-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--pz-primary), var(--pz-darkdeep));
  box-shadow: 0 12px 24px -14px rgb(var(--pz-primary-rgb) / 90%);
}

.hs-btn--primary:hover {
  color: #fff;
  box-shadow: 0 16px 30px -14px rgb(var(--pz-primary-rgb) / 95%);
}

.hs-btn--ghost {
  color: var(--pz-primary-text);
  border-color: rgb(var(--pz-primary-ink-rgb) / 30%);
}

.hs-btn--ghost:hover {
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-ink-rgb) / 8%);
}

.hs-btn--light {
  color: var(--hs-to, var(--pz-primary));
  background: #fff;
  box-shadow: 0 14px 28px -16px rgb(0 0 0 / 55%);
}

.hs-btn--light:hover {
  color: var(--hs-to, var(--pz-primary));
}

.hs-btn--outline {
  color: #fff;
  border-color: rgb(255 255 255 / 55%);
}

.hs-btn--outline:hover {
  color: #fff;
  background: rgb(255 255 255 / 12%);
}

.hs-btn .icofont-long-arrow-left {
  transition: transform 0.2s;
}

.hs-btn:hover .icofont-long-arrow-left {
  transform: translateX(-3px);
}

/* ---- coloured panel (any custom section on a coloured background) */
.home-section--colored .hs-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  color: #fff;
  background:
    radial-gradient(55% 75% at 100% 0%, rgb(255 255 255 / 14%), transparent 60%),
    linear-gradient(135deg, var(--hs-from), var(--hs-to));
  border-radius: 1.75rem;
  box-shadow: 0 30px 60px -38px var(--hs-to);
}

.home-section--colored .hs-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-end: -6rem;
  inset-inline-start: -4rem;
  inline-size: 16rem;
  block-size: 16rem;
  background: radial-gradient(circle, rgb(255 255 255 / 12%), transparent 70%);
  border-radius: 50%;
}

.home-section--colored .hs-title,
.home-section--colored .hs-feature__title,
.home-section--colored .hs-step__title,
.home-section--colored .hs-counter__value,
.home-section--colored .hs-checklist p {
  color: #fff;
}

.home-section--colored .hs-title__mark {
  color: var(--hs-accent);
  background: none;
}

.home-section--colored .hs-eyebrow {
  color: #fff;
  background: rgb(255 255 255 / 16%);
}

.home-section--colored .hs-lead,
.home-section--colored .hs-feature__text,
.home-section--colored .hs-step__text,
.home-section--colored .hs-counter__label {
  color: rgb(255 255 255 / 84%);
}

.home-section--colored .hs-btn--primary {
  color: var(--hs-to);
  background: #fff;
}

.home-section--colored .hs-btn--ghost,
.home-section--colored .hs-head__link {
  color: #fff;
  background: transparent;
  border-color: rgb(255 255 255 / 50%);
}

.home-section--colored .hs-checklist a {
  color: var(--hs-accent);
}

/* ---- feature cards */
.hs-features,
.hs-counters {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .hs-features,
  .hs-counters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .hs-cols-1 { grid-template-columns: minmax(0, 1fr); }
  .hs-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hs-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hs-feature {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.5rem 1.5rem;
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1.35rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hs-feature::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--pz-secondary), var(--pz-primary));
  opacity: 0;
  transition: opacity 0.3s;
}

.hs-feature:hover {
  border-color: rgb(var(--pz-primary-ink-rgb) / 35%);
  box-shadow: 0 22px 44px -28px rgb(var(--pz-primary-rgb) / 55%);
  transform: translateY(-4px);
}

.hs-feature:hover::before {
  opacity: 1;
}

.hs-feature__icon {
  display: grid;
  place-items: center;
  inline-size: 3.3rem;
  block-size: 3.3rem;
  margin-block-end: 1.1rem;
  color: var(--pz-primary-text);
  background: linear-gradient(135deg, rgb(var(--pz-primary-ink-rgb) / 14%), rgb(var(--pz-primary-ink-rgb) / 4%));
  border-radius: 1rem;
  transition: transform 0.3s;
}

.hs-feature:hover .hs-feature__icon {
  transform: rotate(-6deg) scale(1.05);
}

.hs-feature__title {
  margin: 0 0 0.4rem;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.6;
  color: var(--hs-ink);
}

.hs-feature__title a {
  color: inherit;
}

.hs-feature__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hs-feature__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.95;
  color: var(--pz-muted);
}

.hs-feature__more {
  position: absolute;
  inset-block-end: 1.1rem;
  inset-inline-end: 1.25rem;
  color: var(--pz-primary-text);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s, transform 0.3s;
}

.hs-feature:hover .hs-feature__more {
  opacity: 1;
  transform: none;
}

.home-section--colored .hs-feature,
.home-section--colored .hs-step,
.home-section--colored .hs-counter {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 16%);
  backdrop-filter: blur(6px);
}

.home-section--colored .hs-feature__icon,
.home-section--colored .hs-counter__icon {
  color: #fff;
  background: rgb(255 255 255 / 14%);
}

.home-section--colored .hs-feature__more {
  color: #fff;
}

/* ---- steps */
.hs-steps {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .hs-steps {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
}

.hs-step {
  position: relative;
  padding: 1.6rem 1.4rem 1.5rem;
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1.35rem;
}

.hs-step__num {
  display: inline-grid;
  place-items: center;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  margin-block-end: 1rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--pz-primary), var(--pz-darkdeep));
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgb(var(--pz-primary-rgb) / 10%);
}

.home-section--colored .hs-step__num {
  color: var(--hs-to);
  background: #fff;
  box-shadow: 0 0 0 6px rgb(255 255 255 / 14%);
}

.hs-step__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--hs-ink);
}

.hs-step__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--pz-muted);
}

/* ---- counters */
.hs-counter {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 1.6rem 1rem 1.4rem;
  text-align: center;
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1.35rem;
}

.hs-counter__icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-block-end: 0.4rem;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-ink-rgb) / 10%);
  border-radius: 0.85rem;
}

.hs-counter__value {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--pz-primary-text);
  font-variant-numeric: tabular-nums;
}

.hs-counter__label {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pz-muted);
}

/* ---- call to action */
.hs-cta {
  position: relative;
  display: grid;
  gap: 1.75rem;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.75rem, 5vw, 3.25rem);
  color: #fff;
  background:
    radial-gradient(50% 90% at 0% 100%, rgb(255 255 255 / 12%), transparent 65%),
    radial-gradient(40% 70% at 100% 0%, rgb(255 255 255 / 16%), transparent 60%),
    linear-gradient(135deg, var(--hs-from, var(--pz-primary)), var(--hs-to, var(--pz-darkdeep)));
  border-radius: 1.75rem;
  box-shadow: 0 30px 60px -36px var(--hs-to, var(--pz-darkdeep));
}

.hs-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -5rem;
  inset-inline-end: -5rem;
  inline-size: 14rem;
  block-size: 14rem;
  border: 2.5rem solid rgb(255 255 255 / 7%);
  border-radius: 50%;
}

@media (min-width: 900px) {
  .hs-cta--with-image {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
  }
}

.hs-cta__body {
  position: relative;
  min-inline-size: 0;
}

.hs-cta__title {
  margin: 0;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
  text-wrap: balance;
}

.hs-cta .hs-title__mark {
  color: var(--hs-accent, #ffc27a);
  background: none;
}

.hs-cta .hs-eyebrow {
  color: #fff;
  background: rgb(255 255 255 / 16%);
}

.hs-cta__text {
  max-inline-size: 40rem;
  margin: 0.65rem 0 0;
  line-height: 2;
  color: rgb(255 255 255 / 86%);
}

.hs-cta__image {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 24px 40px -22px rgb(0 0 0 / 60%);
  rotate: -2deg;
}

/* ---- text and picture */
.hs-split {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hs-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem;
  }

  .hs-split--no-image {
    grid-template-columns: minmax(0, 1fr);
  }

  .hs-split--end .hs-split__media {
    order: 2;
  }
}

.hs-split__media {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.hs-split__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  background: linear-gradient(135deg, rgb(209 74 33 / 14%), rgb(var(--pz-primary-ink-rgb) / 14%));
  border-radius: 1.75rem;
}

.hs-split__media img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1.5rem;
  box-shadow: 0 26px 50px -30px rgb(0 0 0 / 45%);
}

.hs-split__body {
  min-inline-size: 0;
}

.hs-split .hs-head {
  margin-block-end: 1.25rem;
}

/* ---- checklist (about, text and picture) */
.hs-checklist {
  display: grid;
  gap: 0.9rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.hs-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.hs-checklist i {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 1.85rem;
  block-size: 1.85rem;
  font-size: 0.9rem;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-ink-rgb) / 10%);
  border-radius: 0.55rem;
}

.home-section--colored .hs-checklist i {
  color: #fff;
  background: rgb(255 255 255 / 16%);
}

.hs-checklist p {
  margin: 0;
  padding-block-start: 0.1rem;
  font-weight: 600;
  line-height: 1.85;
  color: var(--hs-ink);
}

.hs-checklist a {
  color: var(--pz-primary-text);
  text-decoration: underline;
  text-decoration-color: rgb(var(--pz-primary-ink-rgb) / 35%);
  text-underline-offset: 0.3em;
}

/* ---- free text */
.hs-prose {
  max-inline-size: 52rem;
}

.hs-prose .hs-lead {
  font-size: 1.02rem;
  line-height: 2.15;
  color: var(--hs-ink);
  opacity: 0.85;
}

.hs-prose--center {
  margin-inline: auto;
  text-align: center;
}

.hs-prose--center .hs-lead {
  margin-inline: auto;
}

.home-section--colored .hs-prose {
  max-inline-size: none;
}

.home-section--colored .hs-prose .hs-lead {
  color: rgb(255 255 255 / 88%);
  opacity: 1;
}

/* ---- the school in numbers */
.home-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .home-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.home-stat {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1.25rem;
  transition: transform 0.25s, box-shadow 0.25s;
}

.home-stat:hover {
  box-shadow: 0 18px 36px -26px rgb(var(--pz-primary-rgb) / 55%);
  transform: translateY(-3px);
}

.home-stat img {
  flex: none;
  inline-size: clamp(2.6rem, 5vw, 4rem);
  block-size: auto;
}

.home-stat__value {
  margin: 0;
  font-size: clamp(1.45rem, 3.4vw, 2.1rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--hs-ink);
  font-variant-numeric: tabular-nums;
}

.home-stat__label {
  margin: 0.15rem 0 0;
  font-size: clamp(0.78rem, 1.6vw, 0.95rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--pz-muted);
}

/* ---- hero background variants (the default is the template's dark teal) */
.hs-hero.hs-hero--night { background-color: #0b1020; background-image: linear-gradient(135deg, #253047, #0b1020); }
.hs-hero.hs-hero--ocean { background-color: #1e3a8a; background-image: linear-gradient(135deg, #2563eb, #1e3a8a); }
.hs-hero.hs-hero--violet { background-color: #4c1d95; background-image: linear-gradient(135deg, #7c3aed, #4c1d95); }
.hs-hero.hs-hero--sunset { background-color: #b4361a; background-image: linear-gradient(135deg, #f97316, #b4361a); }

.hs-hero--sunset .hs-hero__eyebrow {
  color: #fff1c2;
}

.hs-hero__mark {
  color: #ffc27a;
}

.hs-hero__custom {
  object-fit: contain;
}

/* ---- staff preview (/?preview=1) */
.home-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: #7a4a00;
  background: #fff6e0;
  border: 1px solid #f6c069;
  border-radius: 1rem;
}

.home-preview-bar a {
  margin-inline-start: auto;
  font-weight: 800;
  color: #7a4a00;
  text-decoration: underline;
}

html.dark .home-preview-bar {
  color: #f6c069;
  background: rgb(238 157 28 / 12%);
}

html.dark .home-preview-bar a {
  color: #f6c069;
}

.home-hidden {
  position: relative;
  opacity: 0.6;
  outline: 2px dashed #d98a07;
  outline-offset: -6px;
}

.home-hidden::before {
  content: attr(data-label);
  position: absolute;
  z-index: 5;
  inset-block-start: 0.6rem;
  inset-inline-start: 0.9rem;
  padding: 0.15rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: #d98a07;
  border-radius: 999px;
}

/* ============================================================ home campaigns: compact ticket cards
 * «تخفیف‌ها» and «به‌زودی» (templates/partials/home_campaigns.html): a coloured
 * stub (percent, picture or icon) joined to a light body by a perforated edge.
 */
.campaigns__head {
  margin-block-end: 1rem;
}

.campaigns__title {
  font-size: clamp(1.25rem, 3vw, 1.7rem);
}

.campaigns__rail {
  grid-auto-columns: min(88%, 23rem);
  gap: 0.9rem;
}

@media (min-width: 768px) {
  .campaigns__rail {
    grid-auto-columns: calc((100% - 0.9rem) / 2);
  }
}

@media (min-width: 1024px) {
  .campaigns__rail {
    grid-auto-columns: calc((100% - 1.8rem) / 3);
  }

  .campaigns__rail--1 {
    grid-auto-columns: min(100%, 36rem);
  }

  .campaigns__rail--2 {
    grid-auto-columns: calc((100% - 0.9rem) / 2);
  }
}

.offer {
  --cp-from: #f97316;
  --cp-to: #c2410c;
  --stub: 5.6rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--stub) minmax(0, 1fr);
  min-block-size: 9.25rem;
  background: var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1.15rem;
  box-shadow: 0 12px 30px -22px color-mix(in srgb, var(--cp-to) 70%, transparent);
  scroll-snap-align: start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.offer:hover {
  box-shadow: 0 20px 36px -22px color-mix(in srgb, var(--cp-to) 80%, transparent);
  transform: translateY(-3px);
}

/* the two half-circle notches where the stub meets the body */
.offer::before,
.offer::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset-inline-start: calc(var(--stub) - 0.55rem);
  inline-size: 1.1rem;
  block-size: 1.1rem;
  background: var(--hs-bg, rgb(251 251 251));
  border: 1px solid var(--pz-border);
  border-radius: 50%;
}

.offer::before {
  inset-block-start: -0.56rem;
  clip-path: inset(50% 0 0 0);
}

.offer::after {
  inset-block-end: -0.56rem;
  clip-path: inset(0 0 50% 0);
}

.offer--teal { --cp-from: #13858a; --cp-to: #0b4e53; }
.offer--ocean { --cp-from: #3b82f6; --cp-to: #1e40af; }
.offer--violet { --cp-from: #8b5cf6; --cp-to: #5b21b6; }
.offer--night { --cp-from: #374151; --cp-to: #0b1020; }

.offer__stub {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(120% 70% at 100% 0%, rgb(255 255 255 / 24%), transparent 60%),
    linear-gradient(165deg, var(--cp-from), var(--cp-to));
  border-start-start-radius: 1.1rem;
  border-end-start-radius: 1.1rem;
}

/* perforation: a column of dots in the card's colour */
.offer__stub::after {
  content: "";
  position: absolute;
  inset-block: 0.75rem;
  inset-inline-end: -2px;
  inline-size: 4px;
  background-image: radial-gradient(circle, var(--rv-card) 1.6px, transparent 2px);
  background-size: 4px 9px;
}

.offer__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.offer--with-image .offer__stub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--cp-to) 88%, transparent));
}

.offer__percent {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  max-inline-size: 100%;
  line-height: 1;
  text-shadow: 0 2px 10px rgb(0 0 0 / 18%);
}

.offer__percent b {
  font-size: 1.95rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.offer__percent small {
  font-size: 0.95rem;
  font-weight: 800;
}

.offer__percent em {
  flex-basis: 100%;
  margin-block-start: 0.35rem;
  text-align: center;
  padding: 0.12rem 0.5rem;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
  background: rgb(255 255 255 / 20%);
  border-radius: 999px;
}

.offer__glyph {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  background: rgb(255 255 255 / 16%);
  border-radius: 0.9rem;
}

.offer__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-inline-size: 0;
  padding: 0.75rem 1rem 0.8rem;
}

.offer__badge {
  align-self: flex-start;
  max-inline-size: 100%;
  overflow: hidden;
  padding: 0.05rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.9;
  color: var(--cp-to);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: color-mix(in srgb, var(--cp-from) 13%, transparent);
  border-radius: 999px;
}

html.dark .offer__badge {
  color: color-mix(in srgb, var(--cp-from) 55%, #fff);
}

.offer__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.97rem;
  font-weight: 800;
  line-height: 1.65;
  color: var(--hs-ink, #12202b);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.offer__title a {
  color: inherit;
}

/* the whole card opens the offer; the form and button stay on top */
.offer__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.offer__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--pz-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.offer__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
}

.offer__price del {
  font-size: 0.76rem;
  color: var(--pz-muted);
}

.offer__price strong {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--cp-to);
}

html.dark .offer__price strong {
  color: color-mix(in srgb, var(--cp-from) 60%, #fff);
}

.offer__price small {
  font-size: 0.72rem;
  color: var(--pz-muted);
}

.offer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-block-start: auto;
  padding-block-start: 0.2rem;
}

.offer__when {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--cp-to);
}

html.dark .offer__when {
  color: color-mix(in srgb, var(--cp-from) 60%, #fff);
}

.offer__button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-block-size: 2rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--cp-from), var(--cp-to));
  border-radius: 0.7rem;
  box-shadow: 0 8px 16px -10px var(--cp-to);
  transition: transform 0.2s;
}

.offer__button:hover {
  color: #fff;
  transform: translateX(-2px);
}

/* one slim countdown pill: ۰۲ روز | ۱۴ ساعت | ۰۵ دقیقه | ۳۰ ثانیه */
.countdown.countdown--mini {
  display: inline-flex;
  gap: 0;
  padding: 0.15rem 0.2rem;
  background: color-mix(in srgb, var(--cp-from) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cp-from) 22%, transparent);
  border-radius: 0.65rem;
}

.countdown--mini .countdown__unit {
  display: grid;
  justify-items: center;
  min-inline-size: 1.85rem;
  padding: 0.05rem 0.3rem;
  background: none;
  border: 0;
  border-radius: 0;
}

.countdown--mini .countdown__unit + .countdown__unit {
  border-inline-start: 1px solid color-mix(in srgb, var(--cp-from) 25%, transparent);
}

.countdown--mini .countdown__unit b {
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--cp-to);
}

html.dark .countdown--mini .countdown__unit b {
  color: color-mix(in srgb, var(--cp-from) 55%, #fff);
}

.countdown--mini .countdown__unit small {
  font-size: 0.56rem;
  line-height: 1.3;
  color: var(--pz-muted);
  opacity: 1;
}

/* «خبرم کن» in one slim row */
.offer__notify {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem;
  margin-block-start: 0.35rem;
  padding: 0.2rem;
  background: color-mix(in srgb, var(--cp-from) 6%, transparent);
  border: 1px solid var(--pz-border);
  border-radius: 0.75rem;
}

.offer__notify input[name="contact"] {
  min-inline-size: 0;
  padding: 0.3rem 0.5rem;
  font-size: 16px; /* no zoom on focus (iOS) */
  color: var(--hs-ink, #12202b);
  background: transparent;
  border: 0;
  outline: 0;
}

.offer__notify input[name="contact"]::placeholder {
  font-size: 0.8rem;
  color: var(--pz-muted);
}

.offer__notify:focus-within {
  border-color: var(--cp-from);
}

.offer__notify button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--cp-from), var(--cp-to));
  border-radius: 0.55rem;
}

.offer__notify button:disabled {
  opacity: 0.6;
}

.offer__notify-status {
  grid-column: 1 / -1;
  margin: 0;
  padding-inline: 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--cp-to);
}

html.dark .offer__notify-status {
  color: color-mix(in srgb, var(--cp-from) 60%, #fff);
}

.offer__notify-status:empty {
  display: none;
}

.offer__notify.is-done input[name="contact"],
.offer__notify.is-done button {
  display: none;
}

@media (max-width: 380px) {
  .offer {
    --stub: 4.6rem;
  }

  .offer__percent b {
    font-size: 1.55rem;
  }

  .countdown--mini .countdown__unit {
    min-inline-size: 1.6rem;
    padding-inline: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer,
  .offer__button,
  .hs-feature,
  .hs-feature__icon,
  .hs-feature__more,
  .home-stat,
  .hs-btn,
  .hs-head__link {
    transition: none;
  }

  .offer:hover,
  .hs-feature:hover,
  .home-stat:hover,
  .hs-btn:hover {
    transform: none;
  }
}

/* ============================================================ course groups (Telegram / Bale)
 * templates/courses/_community.html: only on the pages of the course's own
 * people (apps.courses.community). Each network keeps its own colour.
 */
.course-community {
  --tg: #229ed9;
  --bale: #1db37f;
  position: relative;
  display: grid;
  gap: 1rem;
  overflow: hidden;
  isolation: isolate;
  padding: 1.25rem 1.35rem;
  background:
    radial-gradient(70% 120% at 100% 0%, rgb(34 158 217 / 10%), transparent 60%),
    radial-gradient(60% 120% at 0% 100%, rgb(29 179 127 / 10%), transparent 60%),
    var(--rv-card);
  border: 1px solid var(--pz-border);
  border-radius: 1.25rem;
  box-shadow: 0 18px 40px -32px rgb(var(--pz-primary-rgb) / 60%);
}

.course-community__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.course-community__badge {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--tg), var(--bale));
  border-radius: 0.95rem;
  box-shadow: 0 10px 20px -12px var(--tg);
}

.course-community__intro {
  min-inline-size: 0;
}

.course-community__title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--hs-ink, #12202b);
}

html.dark .course-community__title {
  color: #fff;
}

.course-community__text {
  margin: 0.15rem 0 0;
  font-size: 0.86rem;
  line-height: 1.85;
  color: var(--pz-muted);
}

.course-community__links {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .course-community__links {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.community-link {
  --net: var(--tg);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.85rem;
  color: var(--hs-ink, #12202b);
  background: color-mix(in srgb, var(--net) 7%, var(--rv-card));
  border: 1.5px solid color-mix(in srgb, var(--net) 28%, transparent);
  border-radius: 1rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background-color 0.2s;
}

.community-link--bale {
  --net: var(--bale);
}

html.dark .community-link {
  color: #fff;
}

.community-link:hover,
.community-link:focus-visible {
  color: var(--hs-ink, #12202b);
  background: color-mix(in srgb, var(--net) 12%, var(--rv-card));
  border-color: var(--net);
  box-shadow: 0 14px 26px -18px var(--net);
  transform: translateY(-2px);
}

html.dark .community-link:hover,
html.dark .community-link:focus-visible {
  color: #fff;
}

.community-link__logo {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  font-size: 1.35rem;
  color: #fff;
  background: var(--net);
  border-radius: 50%;
}

.community-link__text {
  display: grid;
  flex: 1;
  min-inline-size: 0;
}

.community-link__text strong {
  font-size: 0.95rem;
  font-weight: 800;
}

.community-link__text small {
  font-size: 0.76rem;
  color: var(--pz-muted);
}

.community-link__go {
  color: var(--net);
}

.course-community__note {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #8a5600;
}

html.dark .course-community__note {
  color: #f6c069;
}

/* an unpaid enrollment: the groups unlock after the payment */
.course-community--locked {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  background: var(--rv-card);
  border-style: dashed;
}

.course-community--locked .course-community__badge {
  color: var(--pz-muted);
  background: var(--pz-soft);
  box-shadow: none;
}

.course-community__pay {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-self: start;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: var(--pz-primary);
  border-radius: 0.75rem;
}

.course-community__pay:hover {
  color: #fff;
  background: var(--pz-darkdeep);
}

@media (min-width: 640px) {
  .course-community--locked {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .course-community__pay {
    grid-column: auto;
  }
}

/* «دوره‌های من» (student panel): one button per group */
.enroll-btn.community-chip {
  color: #fff;
  border-color: transparent;
}

.enroll-btn.community-chip--telegram,
.enroll-btn.community-chip--telegram:hover,
.enroll-btn.community-chip--telegram:focus-visible {
  background: #229ed9;
}

.enroll-btn.community-chip--bale,
.enroll-btn.community-chip--bale:hover,
.enroll-btn.community-chip--bale:focus-visible {
  background: #1db37f;
}

.enroll-btn.community-chip:hover,
.enroll-btn.community-chip:focus-visible {
  color: #fff;
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .community-link {
    transition: none;
  }

  .community-link:hover {
    transform: none;
  }
}

/* ============================================================ site header (partials/header.html)
 * One bar: brand, the main pages (the rest under «بیشتر»), then round icon
 * buttons (search, theme, alerts), the placement call to action and the
 * account / sign-in button. `.site-wide` shows only from 1024px, `.site-narrow`
 * only below it. The sticky behaviour stays in parvaz.js (`.sticky-header`).
 */
.site-topbar p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
}

.site-topbar i { color: #ffb48f; }

.site-bar {
  /*
   * Positioned, with its own layer above the page: a static bar's z-index is
   * ignored, so the banner (positioned, later in the page) used to paint over
   * the «بیشتر» menu and the search card and swallow their clicks.
   */
  position: relative;
  z-index: 1000;
  background: rgb(255 255 255 / 92%);
  border-block-end: 1px solid rgb(var(--pz-primary-rgb) / 8%);
  backdrop-filter: saturate(1.4) blur(12px);
}

html.dark .site-bar {
  background: rgb(12 14 43 / 92%);
  border-color: rgb(255 255 255 / 8%);
}

.site-bar.active {
  box-shadow: 0 14px 34px -22px rgb(var(--pz-primary-rgb) / 55%);
}

html.dark .site-bar.active { background: rgb(12 14 43 / 96%); }

.site-bar__inner {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  min-block-size: 4.25rem;
  padding-block: 0.45rem;
}

.site-bar__brand {
  display: block;
  flex: none;
}

.site-bar__brand img {
  inline-size: auto;
  block-size: 2.9rem;
}

.site-nav {
  display: none;
  gap: 0.1rem;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .site-nav { display: flex; }
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  color: #24323d;
  cursor: pointer;
  border-radius: 0.85rem;
  transition: color 0.2s, background-color 0.2s;
}

html.dark .site-nav__link { color: rgb(255 255 255 / 86%); }

.site-nav__link svg {
  flex: none;
  opacity: 0.65;
  transition: opacity 0.2s;
}

.site-nav__link:hover,
.site-menu[open] > .site-nav__link {
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-ink-rgb) / 8%);
}

.site-nav__link:hover svg { opacity: 1; }

.site-nav__link[aria-current="page"] { color: var(--pz-primary-text); }

.site-nav__link[aria-current="page"]::after {
  position: absolute;
  inset-block-end: 0.15rem;
  inset-inline: 0.85rem;
  block-size: 3px;
  content: "";
  background: linear-gradient(90deg, var(--pz-secondary), var(--pz-primary-text));
  border-radius: 999px;
}

.site-nav__link:focus-visible,
.site-icon-btn:focus-visible,
.site-cta:focus-visible,
.site-account:focus-visible {
  outline: 3px solid var(--pz-secondary);
  outline-offset: 2px;
}

.site-nav__new {
  padding: 0 0.4rem;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.6;
  color: #fff;
  background: var(--pz-secondary);
  border-radius: 999px;
}

/* laptops: words only, so the whole menu fits on one line */
@media (min-width: 1024px) and (max-width: 1365px) {
  .site-nav__link { padding-inline: 0.55rem; font-size: 0.86rem; }
  .site-nav__link > svg:first-child { display: none; }
  .site-nav__new { display: none; }
}

/* «بیشتر» and the search: small pop-over cards */
.site-menu,
.site-search { position: relative; }

.site-menu > summary,
.site-search > summary { list-style: none; }

.site-menu > summary::-webkit-details-marker,
.site-search > summary::-webkit-details-marker { display: none; }

.site-menu__toggle svg { transform: rotate(-90deg); transition: transform 0.2s; }
.site-menu[open] .site-menu__toggle svg { transform: rotate(90deg); }

.site-menu__list,
.site-search__form {
  position: absolute;
  inset-block-start: calc(100% + 0.6rem);
  z-index: 60;
  padding: 0.45rem;
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 10%);
  border-radius: 1.1rem;
  box-shadow: 0 24px 50px -24px rgb(16 12 48 / 35%);
  animation: site-pop 0.18s ease-out;
}

html.dark .site-menu__list,
html.dark .site-search__form {
  background: #151a47;
  border-color: rgb(255 255 255 / 10%);
}

@keyframes site-pop { from { opacity: 0; transform: translateY(-6px); } }

.site-menu__list {
  inset-inline-end: 0;
  display: grid;
  gap: 0.15rem;
  min-inline-size: 17rem;
  margin: 0;
  list-style: none;
}

.site-menu__list a {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.6rem 0.7rem;
  color: #24323d;
  border-radius: 0.8rem;
}

html.dark .site-menu__list a { color: #fff; }

.site-menu__list a > svg {
  flex: none;
  box-sizing: content-box;
  padding: 0.45rem;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-ink-rgb) / 9%);
  border-radius: 0.7rem;
}

.site-menu__list a:hover,
.site-menu__list a[aria-current="page"] { background: rgb(var(--pz-primary-ink-rgb) / 7%); }

.site-menu__list span { display: grid; line-height: 1.5; }
.site-menu__list strong { font-size: 0.88rem; }
.site-menu__list small { font-size: 0.74rem; color: var(--pz-muted); }

.site-search__form {
  inset-inline-end: -4rem;
  display: flex;
  gap: 0.4rem;
  inline-size: min(24rem, 90vw);
}

.site-search__form input {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: #12202b;
  caret-color: var(--pz-secondary);
  background: rgb(var(--pz-primary-ink-rgb) / 6%);
  border: 1.5px solid transparent;
  border-radius: 0.8rem;
}

.site-search__form input::placeholder { color: #7a8794; opacity: 1; }

html.dark .site-search__form input {
  color: #fff;
  background: rgb(255 255 255 / 8%);
}

html.dark .site-search__form input::placeholder { color: rgb(255 255 255 / 55%); }

.site-search__form input:focus {
  border-color: var(--pz-primary-text);
  outline: none;
}

.site-search__go {
  flex: none;
  padding: 0.5rem 1rem;
  font-weight: 800;
  color: #fff;
  background: var(--pz-primary);
  border-radius: 0.8rem;
}

/* the right-hand group */
.site-actions {
  display: flex;
  flex: none;
  gap: 0.45rem;
  align-items: center;
  margin-inline-start: auto;
}

@media (min-width: 1024px) {
  .site-actions { margin-inline-start: 0; }
}

.site-wide { display: none; }
.site-narrow { display: inline-grid; }

@media (min-width: 1024px) {
  .site-wide { display: inline-flex; }
  .site-narrow { display: none; }
}

.site-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--pz-primary-text);
  cursor: pointer;
  background: rgb(var(--pz-primary-ink-rgb) / 8%);
  border: 0;
  border-radius: 0.9rem;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.site-icon-btn:hover,
.site-search[open] > .site-icon-btn {
  color: #fff;
  background: var(--pz-primary);
}

html.dark .site-icon-btn:hover,
html.dark .site-search[open] > .site-icon-btn { color: #073336; background: #7cc4c2; }

.site-icon-btn .header-badge {
  inset-block-start: -0.3rem;
  inset-inline-end: -0.3rem;
  box-shadow: 0 0 0 2px #fff;
}

.site-theme__sun { display: none; }
html.dark .site-theme__sun { display: inline; }
html.dark .site-theme__moon { display: none; }

.site-cta {
  align-items: center;
  gap: 0.45rem;
  min-block-size: 2.75rem;
  padding: 0.45rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, var(--pz-primary), var(--pz-darkdeep));
  border-radius: 0.95rem;
  box-shadow: 0 12px 22px -14px rgb(var(--pz-primary-rgb) / 90%);
  transition: transform 0.2s, box-shadow 0.2s;
}

.site-cta:hover {
  color: #fff;
  box-shadow: 0 16px 28px -14px rgb(var(--pz-primary-rgb) / 95%);
  transform: translateY(-1px);
}

.site-account {
  align-items: center;
  gap: 0.55rem;
  min-block-size: 2.75rem;
  padding: 0.25rem 0.3rem 0.25rem 0.9rem;
  color: #24323d;
  background: rgb(var(--pz-primary-ink-rgb) / 7%);
  border: 1px solid rgb(var(--pz-primary-ink-rgb) / 12%);
  border-radius: 999px;
  transition: background-color 0.2s, border-color 0.2s;
}

html.dark .site-account { color: #fff; }

.site-account:hover { color: inherit; border-color: var(--pz-primary-text); }

.site-account__avatar {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--pz-secondary), #f08a5d);
  border-radius: 50%;
}

.site-account__avatar img,
.site-avatar-btn img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.site-account__avatar:has(img) { background: #fff; box-shadow: 0 0 0 2px var(--pz-secondary); }

/* phones: the account as a round avatar beside the alerts */
.site-avatar-btn {
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  overflow: hidden;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--pz-secondary), #f08a5d);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(209 74 33 / 45%);
}

html.dark .site-avatar-btn { border-color: #0c0e2b; }

.site-account__text { display: grid; line-height: 1.35; }
.site-account__text strong { font-size: 0.85rem; }
.site-account__text small { font-size: 0.7rem; color: var(--pz-muted); }

.site-bar .header-placement { margin-inline-end: 0; min-block-size: 2.75rem; padding-inline: 1rem; }

/* laptops: the account shows its name only on wide screens */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-actions [data-theme-toggle] { display: none; } /* the floating switch and the drawer still have it */
  .site-account__text small { display: none; }
  .site-bar .header-placement { padding-inline: 0.75rem; }
}

/* visibility wins over the buttons' own display (declared above and elsewhere) */
.site-actions > .site-wide { display: none; }

@media (min-width: 1024px) {
  .site-actions > .site-wide { display: inline-flex; }
  .site-actions > .site-icon-btn.site-wide { display: inline-grid; }
  .site-actions > .site-narrow { display: none; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .site-actions > [data-theme-toggle].site-wide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu__list,
  .site-search__form { animation: none; }
  .site-cta:hover { transform: none; }
}

/* ---- a one-line notice above a form (teaching/settings.html) */
.pz-notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  line-height: 1.9;
  color: #6b4500;
  background: #fff6e0;
  border: 1px solid #f5d48a;
  border-radius: 0.9rem;
}

.pz-notice p { margin: 0; }
.pz-notice i { flex: none; margin-block-start: 0.2rem; font-size: 1.3rem; }
.pz-notice--warn i { color: #c27a00; }

html.dark .pz-notice {
  color: #ffe2a8;
  background: rgb(255 194 61 / 10%);
  border-color: rgb(255 194 61 / 30%);
}

/* ============================================================ teacher card (teachers/_teacher_card.html)
 * Phones: a compact row; from 640px: a card with a cover band and the photo
 * over it. The name's link stretches over the whole card (::after), the
 * social icons sit above that layer and stay clickable.
 */
.tcard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.25rem 0.9rem;
  align-items: center;
  block-size: 100%;
  padding: 0.8rem;
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 9%);
  border-radius: 1.1rem;
  box-shadow: 0 14px 30px -24px rgb(11 30 48 / 45%);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

html.dark .tcard {
  background: #151a47;
  border-color: rgb(255 255 255 / 8%);
}

.tcard:hover {
  border-color: rgb(var(--pz-primary-ink-rgb) / 35%);
  box-shadow: 0 22px 40px -26px rgb(11 30 48 / 55%);
}

.tcard:focus-within { outline: 3px solid var(--pz-secondary); outline-offset: 3px; }
.tcard__link:focus-visible { outline: none; }

.tcard__cover { display: none; }

.tcard__photo {
  grid-row: 1 / span 2;
  display: block;
  padding: 3px;
  background: linear-gradient(135deg, var(--pz-secondary), var(--pz-primary));
  border-radius: 50%;
}

.tcard__photo .teacher-photo {
  inline-size: 4.25rem;
  block-size: 4.25rem;
  font-size: 1.35rem;
  border: 3px solid #fff;
}

html.dark .tcard__photo .teacher-photo { border-color: #151a47; }

.tcard__body { display: grid; gap: 0.1rem; min-inline-size: 0; }

.tcard__name {
  margin: 0;
  overflow: hidden;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcard__link { color: #12202b; }
html.dark .tcard__link { color: #fff; }
.tcard__link:hover { color: var(--pz-primary-text); }

/* the whole card is the link */
.tcard__link::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  border-radius: inherit;
}

.tcard__role {
  margin: 0;
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pz-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .tcard__role { color: #ff9a76; }

.tcard__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
}

.tcard__facts li {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.1rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--pz-muted);
  background: var(--pz-soft);
  border-radius: 999px;
}

.tcard__facts i { color: var(--pz-secondary); }

.tcard__social { display: none; }

.tcard__more {
  grid-row: 1 / span 2;
  grid-column: 3;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-ink-rgb) / 9%);
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.tcard__more-text { display: none; }

.tcard:hover .tcard__more {
  color: #fff;
  background: var(--pz-primary);
  transform: translateX(-3px);
}

/* phones: on the home page's sideways rail the rows stay short */
@media (max-width: 639px) {
  .m-rail:has(.tcard) { grid-auto-columns: 88%; }
}

/* from 640px: the full card */
@media (min-width: 640px) {
  .tcard {
    grid-template-columns: none;
    justify-items: center;
    align-content: start;
    gap: 0;
    overflow: hidden;
    padding: 0 1.25rem 1.25rem;
    text-align: center;
    border-radius: 1.5rem;
  }

  .tcard:hover { transform: translateY(-4px); }

  .tcard__cover {
    display: block;
    inline-size: calc(100% + 2.5rem);
    block-size: 5.5rem;
    margin-inline: -1.25rem;
    background:
      radial-gradient(circle at 20% 30%, rgb(255 255 255 / 18%), transparent 45%),
      linear-gradient(135deg, var(--pz-primary), var(--pz-darkdeep));
  }

  .tcard__photo {
    grid-row: auto;
    margin-block-start: -3.5rem;
    margin-block-end: 0.75rem;
    padding: 4px;
  }

  .tcard__photo .teacher-photo {
    inline-size: 7.5rem;
    block-size: 7.5rem;
    font-size: 2.2rem;
    border-width: 4px;
  }

  .tcard__body { justify-items: center; }
  .tcard__name { font-size: 1.2rem; white-space: normal; }
  .tcard__role { white-space: normal; }
  .tcard__facts { justify-content: center; margin-block-start: 0.6rem; }

  .tcard__social {
    position: relative;
    z-index: 2; /* above the card-wide link */
    display: block;
    margin-block-start: 0.85rem;
  }

  .tcard__more {
    grid-row: auto;
    grid-column: auto;
    display: inline-flex;
    gap: 0.4rem;
    inline-size: auto;
    block-size: auto;
    margin-block-start: 1rem;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 800;
    border-radius: 999px;
  }

  .tcard__more-text { display: inline; }
  .tcard:hover .tcard__more { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tcard,
  .tcard__more { transition: none; }
  .tcard:hover { transform: none; }
}

/* ============================================================ the welcome card (partials/greeting.html)
 * One sky per part of the day: dawn, morning, noon, afternoon, evening, night.
 * The sun/moon, clouds and stars are drawn in CSS (no images); greeting.js
 * swaps the period class when the visitor's own clock says otherwise.
 */
.greet {
  --g1: #4fb3ff;
  --g2: #1f6fd1;
  --orb: #ffd65c;
  --orb-glow: rgb(255 214 92 / 55%);
  --orb-x: 12%;
  --orb-y: 18%;
  position: relative;
  display: grid;
  gap: 1rem 1.5rem;
  overflow: hidden;
  isolation: isolate;
  margin-block-end: 1.875rem;
  padding: clamp(1.1rem, 3.5vw, 2rem);
  color: #fff;
  background:
    radial-gradient(70% 120% at 100% 0%, rgb(255 255 255 / 18%), transparent 60%),
    linear-gradient(135deg, var(--g1), var(--g2));
  border-radius: 1.5rem;
  box-shadow: 0 26px 50px -36px var(--g2);
  transition: background 0.8s ease;
}

@media (min-width: 900px) {
  .greet:not(.greet--compact) { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); align-items: center; }
}

.greet--dawn { --g1: #ffb38a; --g2: #6f5fc7; --orb: #ffcf7a; --orb-y: 70%; }
.greet--morning { --g1: #57b8ff; --g2: #2a7fdc; --orb: #ffd65c; --orb-y: 26%; }
.greet--noon { --g1: #38a6f2; --g2: #0f72c9; --orb: #fff1a8; --orb-glow: rgb(255 245 180 / 65%); --orb-x: 18%; --orb-y: 8%; }
.greet--afternoon { --g1: #f9b24a; --g2: #e1572e; --orb: #ffe08a; --orb-y: 45%; }
.greet--evening { --g1: #5d47b5; --g2: #1e2a6e; --orb: #f3f0ff; --orb-glow: rgb(220 214 255 / 45%); }
.greet--night { --g1: #141c4f; --g2: #070b2a; --orb: #eef0ff; --orb-glow: rgb(214 220 255 / 35%); --orb-y: 14%; }

.greet__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.greet__orb {
  position: absolute;
  inset-block-start: var(--orb-y);
  inset-inline-end: var(--orb-x);
  inline-size: 4.5rem;
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 35%, #fff, var(--orb) 60%);
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgb(255 255 255 / 8%), 0 0 60px 12px var(--orb-glow);
  transition: inset 0.8s ease, background 0.8s ease;
}

/* the moon: a crescent cut by the sky's own colour */
.greet--evening .greet__orb,
.greet--night .greet__orb {
  inline-size: 3.6rem;
  box-shadow: inset -14px -6px 0 0 #dfe3ff, 0 0 40px 6px var(--orb-glow);
  background: transparent;
}

.greet__star {
  position: absolute;
  display: none;
  inline-size: 3px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgb(255 255 255 / 80%);
}

.greet--evening .greet__star,
.greet--night .greet__star,
.greet--dawn .greet__star--1 { display: block; }

.greet__star--1 { inset-block-start: 20%; inset-inline-end: 34%; }
.greet__star--2 { inset-block-start: 62%; inset-inline-end: 22%; }
.greet__star--3 { inset-block-start: 35%; inset-inline-start: 18%; }

.greet__cloud {
  position: absolute;
  display: block;
  block-size: 1.4rem;
  background: rgb(255 255 255 / 30%);
  border-radius: 999px;
}

.greet__cloud::before {
  position: absolute;
  inset-block-start: -0.8rem;
  inset-inline-start: 0.9rem;
  inline-size: 2rem;
  aspect-ratio: 1;
  content: "";
  background: inherit;
  border-radius: 50%;
}

.greet__cloud--1 { inset-block-end: 16%; inset-inline-end: 6%; inline-size: 6rem; }
.greet__cloud--2 { inset-block-start: 22%; inset-inline-start: 30%; inline-size: 4rem; opacity: 0.6; }
.greet--evening .greet__cloud,
.greet--night .greet__cloud { opacity: 0.12; }

@keyframes greet-drift { to { transform: translateX(-1.25rem); } }
@keyframes greet-twinkle { 50% { opacity: 0.25; } }
@keyframes greet-wave { 0%, 60%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(18deg); } 30% { transform: rotate(-10deg); } }

.greet__cloud { animation: greet-drift 9s ease-in-out infinite alternate; }
.greet__star { animation: greet-twinkle 2.8s ease-in-out infinite; }
.greet__star--2 { animation-delay: 0.9s; }
.greet__star--3 { animation-delay: 1.7s; }

.greet__main { display: grid; gap: 0.45rem; min-inline-size: 0; }

.greet__date {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  justify-self: start;
  margin: 0;
  padding: 0.15rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgb(0 0 0 / 14%);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.greet__hello {
  margin: 0;
  font-size: clamp(1.35rem, 4.6vw, 2.1rem);
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 2px 14px rgb(0 0 0 / 18%);
}

.greet__wave { display: inline-block; transform-origin: 70% 70%; animation: greet-wave 2.4s ease-in-out 0.4s 2; }

.greet__line { max-inline-size: 38rem; margin: 0; font-size: 0.95rem; line-height: 2; opacity: 0.95; }

.greet__next {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin: 0.35rem 0 0;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 1rem;
  backdrop-filter: blur(8px);
}

.greet__next strong { font-weight: 900; }

.greet__live {
  padding: 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.8;
  color: #fff;
  background: #e0483c;
  border-radius: 999px;
  animation: greet-twinkle 1.6s ease-in-out infinite;
}

.greet__btn {
  margin-inline-start: auto;
  padding: 0.3rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--g2);
  background: #fff;
  border-radius: 999px;
  transition: transform 0.2s;
}

.greet__btn:hover { color: var(--g2); transform: translateY(-1px); }

.greet__word {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  background: rgb(255 255 255 / 16%);
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 1.2rem;
  backdrop-filter: blur(10px);
}

.greet__word p { margin: 0; }

.greet__word-head {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  opacity: 0.9;
}

.greet__word-en { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: flex-end; }
.greet__word-en strong { font-size: 1.45rem; font-weight: 900; letter-spacing: 0.01em; }
.greet__word-ipa { font-size: 0.85rem; opacity: 0.85; }
.greet__word-fa { font-size: 0.95rem; font-weight: 800; color: #fff3c4; }
.greet__word-example { font-size: 0.85rem; font-style: italic; line-height: 1.7; text-align: end; opacity: 0.95; }

.greet__say {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  color: #fff;
  cursor: pointer;
  background: rgb(255 255 255 / 20%);
  border: 0;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.greet__say[hidden] { display: none; }
.greet__say--small { inline-size: 1.6rem; block-size: 1.6rem; vertical-align: middle; }
.greet__say:hover,
.greet__say.is-speaking { color: var(--g2); background: #fff; }

.greet__say:focus-visible,
.greet__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* a single line on profile pages */
.greet--compact { padding: 0.9rem 1.1rem; border-radius: 1.1rem; }
.greet--compact .greet__main { grid-template-columns: auto 1fr; align-items: center; gap: 0.75rem; }
.greet--compact .greet__hello { font-size: clamp(1.05rem, 3.5vw, 1.35rem); }
.greet--compact .greet__orb { inline-size: 2.6rem; }

/* phones: the sun/moon small in the corner, one cloud at the bottom, never behind the words */
@media (max-width: 899px) {
  .greet__orb {
    inset-block-start: 0.7rem;
    inset-inline-end: 0.8rem;
    inline-size: 2.4rem;
    opacity: 0.9;
  }

  .greet--evening .greet__orb,
  .greet--night .greet__orb { inline-size: 2.1rem; box-shadow: inset -9px -4px 0 0 #dfe3ff, 0 0 26px 4px var(--orb-glow); }
  .greet__cloud--2 { display: none; }
  .greet__date { margin-inline-end: 3rem; }
}

/* wide: the sun/moon between the words and the word card */
@media (min-width: 900px) {
  /* just past the word card (22rem + padding + gap), up on the date's line */
  .greet:not(.greet--compact) { --orb-x: 26.5rem; --orb-y: 0.9rem; }
  .greet:not(.greet--compact) .greet__orb { inline-size: 3.6rem; }
  .greet__cloud--2 { inset-block-start: auto; inset-block-end: 10%; inset-inline-start: 42%; }
}

.greet__next > svg,
.greet__next > .greet__live { flex: none; }
.greet__next > span:not(.greet__live) { flex: 1 1 12rem; }

@media (max-width: 599px) {
  .greet--compact .greet__main { grid-template-columns: 1fr; }
  .greet__btn { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .greet,
  .greet__orb { transition: none; }
  .greet__cloud,
  .greet__star,
  .greet__wave,
  .greet__live { animation: none; }
}

/* ============================================================ swipe attendance (.att-deck) */
.att-deck[hidden],
.att-deck__done[hidden],
[data-att-list][hidden],
[data-att-submit][hidden],
.att-tool[hidden],
.att-tools__hint[hidden] { display: none !important; }

.att-tool--deck { border-style: dashed; }

.att-deck {
  --att-ok: var(--pz-success);
  --att-bad: var(--pz-danger);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-inline-size: 26rem;
  margin: 0 auto 1rem;
  overflow-x: clip; /* a card flying out never widens the page */
}

.att-deck__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--pz-muted);
}

.att-deck__count b { font-size: 1.15rem; color: var(--pz-primary-text); }

.att-deck__link,
.att-deck__undo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: var(--pz-soft);
  border: 0;
  border-radius: 0.6rem;
  cursor: pointer;
}

.att-deck__undo { align-self: center; }
.att-deck__undo:disabled { opacity: 0.45; cursor: default; }

.att-deck__track {
  block-size: 0.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--pz-soft);
}

.att-deck__bar {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: linear-gradient(90deg, var(--pz-success), var(--pz-primary));
  border-radius: inherit;
  transition: inline-size 0.25s ease;
}

.att-deck__stack {
  position: relative;
  display: grid;
  min-block-size: 15.5rem;
  border-radius: 1.4rem;
  outline: none;
}

.att-deck__stack:focus-visible { box-shadow: 0 0 0 3px rgb(var(--pz-primary-rgb) / 35%); }

.att-card {
  grid-area: 1 / 1;
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.75rem 1.25rem 1.25rem;
  text-align: center;
  color: var(--pz-darkdeep);
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 12%);
  border-radius: 1.4rem;
  box-shadow: 0 20px 40px -28px rgb(17 24 39 / 55%);
  touch-action: pan-y;
  user-select: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

html.dark .att-card { color: #eef1f8; background: #1d2353; border-color: rgb(255 255 255 / 10%); }

.att-card.is-top,
.att-card.is-next,
.att-card.is-after,
.att-card.is-leaving { display: flex; }

.att-card.is-top { z-index: 3; cursor: grab; }
.att-card.is-next { z-index: 2; transform: translateY(0.7rem) scale(0.95); opacity: 0.85; }
.att-card.is-after { z-index: 1; transform: translateY(1.4rem) scale(0.9); opacity: 0.6; }
.att-card.is-leaving { z-index: 4; opacity: 0; }
.att-card.is-dragging { cursor: grabbing; transition: none; }
.att-card--warn { border-color: rgb(217 48 37 / 35%); }

.att-card__avatar {
  display: grid;
  place-items: center;
  inline-size: 4.25rem;
  aspect-ratio: 1;
  margin-block-end: 0.35rem;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(140deg, var(--pz-primary), var(--pz-secondary));
  border-radius: 50%;
}

.att-card__name { font-size: 1.25rem; font-weight: 800; line-height: 1.6; }
.att-card__meta { font-size: 0.85rem; color: var(--pz-muted); }

.att-card__warn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pz-danger);
  background: rgb(217 48 37 / 9%);
  border-radius: 999px;
}

.att-card__state { min-block-size: 1.2rem; font-size: 0.8rem; color: var(--pz-muted); }

.att-card__stamp {
  position: absolute;
  inset-block-start: 1rem;
  padding: 0.15rem 0.7rem;
  font-size: 1.05rem;
  font-weight: 900;
  border: 3px solid currentColor;
  border-radius: 0.5rem;
  opacity: 0;
  pointer-events: none;
}

/* --drag goes from -1 (left, «غایب») to 1 (right, «حاضر») while dragging */
.att-card__stamp--present {
  inset-inline-end: 1rem;
  color: var(--att-ok);
  transform: rotate(-14deg);
  opacity: clamp(0, var(--drag, 0), 1);
}

.att-card__stamp--absent {
  inset-inline-start: 1rem;
  color: var(--att-bad);
  transform: rotate(14deg);
  opacity: clamp(0, calc(var(--drag, 0) * -1), 1);
}

.att-deck__done {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--pz-success);
  background: var(--pz-soft);
  border-radius: 1.4rem;
}

.att-deck__done strong { color: var(--pz-darkdeep); }
html.dark .att-deck__done strong { color: #eef1f8; }
.att-deck__summary { justify-content: center; margin: 0; }

.att-deck__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-block-size: 3rem;
  padding: 0 1.5rem;
  font-weight: 800;
  color: #fff;
  background: var(--pz-primary);
  border: 0;
  border-radius: 0.8rem;
  cursor: pointer;
}

.att-deck__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--pz-muted);
}

.att-deck__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.att-deck__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-block-size: 3.6rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--att-btn);
  background: color-mix(in srgb, var(--att-btn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--att-btn) 30%, transparent);
  border-radius: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.att-deck__btn:active { transform: scale(0.94); }
.att-deck__btn:disabled { opacity: 0.4; cursor: default; }
.att-deck__btn--present { --att-btn: var(--pz-success); }
.att-deck__btn--late { --att-btn: var(--pz-warning); }
.att-deck__btn--excused { --att-btn: var(--pz-primary-text); }
.att-deck__btn--absent { --att-btn: var(--pz-danger); }

@media (prefers-reduced-motion: reduce) {
  .att-card,
  .att-deck__bar,
  .att-deck__btn { transition: none; }
}

/* ============================================================ «خلاصه‌ی بعد از جلسه» (.recap*) */
.empty-state__text { margin-block-start: 0.35rem; font-size: 0.9rem; line-height: 1.9; }

.recap-list {
  display: grid;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.recap {
  --recap-accent: var(--pz-primary);
  position: relative;
  padding: 1rem 1.1rem;
  color: var(--pz-darkdeep);
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 12%);
  border-inline-start: 4px solid var(--recap-accent);
  border-radius: 1rem;
  box-shadow: 0 14px 30px -26px rgb(17 24 39 / 60%);
}

html.dark .recap { color: #e9edf7; background: #1b2150; border-color: rgb(255 255 255 / 9%); border-inline-start-color: #7cc4c2; }

.recap__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin-block-end: 0.75rem;
  font-size: 0.82rem;
  color: var(--pz-muted);
}

.recap__head > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.recap__date,
.recap__by { white-space: nowrap; }
.recap__course { font-weight: 800; color: var(--pz-primary-text); }
html.dark .recap__course { color: #9fd8d6; }

.recap__lines { display: grid; gap: 0.6rem; margin: 0; }

.recap__line {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.25rem 0.75rem;
  align-items: start;
}

.recap__line dt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pz-muted);
}

.recap__line dd { margin: 0; line-height: 1.9; color: inherit; }
.recap__line--lesson dt { color: var(--pz-primary-text); }
.recap__line--homework dt { color: var(--pz-secondary); }
.recap__line--words dd { padding-block-start: 0.1rem; }
html.dark .recap__line--lesson dt { color: #9fd8d6; }
html.dark .recap__line--homework dt { color: #f59a7a; }

.recap__words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recap__word {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem 0.35rem 0.15rem 0.7rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 8%);
  border-radius: 999px;
}

html.dark .recap__word { color: #d7f0ef; background: rgb(255 255 255 / 8%); }

.recap__say {
  display: inline-grid;
  place-items: center;
  inline-size: 1.7rem;
  block-size: 1.7rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.recap__say:hover,
.recap__say:focus-visible { background: rgb(var(--pz-primary-rgb) / 14%); }

@media (max-width: 575px) {
  .recap__line { grid-template-columns: 1fr; }
}

/* dashboard: the latest recap */
.recap-latest { margin-block-end: 30px; }

.recap-latest__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 0.75rem;
}

.recap-latest__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pz-darkdeep);
}

html.dark .recap-latest__title { color: #eef1f8; }

.recap-latest__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pz-primary-text);
}

html.dark .recap-latest__link { color: #9fd8d6; }

/* teacher: the form under the attendance sheet */
.recap-box { scroll-margin-block-start: 6rem; }

.recap-box__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}

.recap-box__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--pz-darkdeep);
}

html.dark .recap-box__title { color: #eef1f8; }

.recap-box__sent {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pz-success);
  background: color-mix(in srgb, var(--pz-success) 12%, transparent);
  border-radius: 999px;
}

.recap-box__intro { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.9; color: var(--pz-muted); }

.recap-form { display: grid; gap: 0.9rem; }
.recap-form__field { display: grid; gap: 0.35rem; }

.recap-form__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--pz-darkdeep);
}

html.dark .recap-form__label { color: #e3e8f4; }
.recap-form__label small { font-weight: 400; color: var(--pz-muted); }

.recap-form input,
.recap-form textarea {
  inline-size: 100%;
  padding: 0.65rem 0.85rem;
  font: inherit;
  color: var(--pz-darkdeep);
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 20%);
  border-radius: 0.75rem;
}

.recap-form textarea { resize: vertical; min-block-size: 5.5rem; }

.recap-form input:focus,
.recap-form textarea:focus {
  outline: none;
  border-color: var(--pz-primary);
  box-shadow: 0 0 0 3px rgb(var(--pz-primary-rgb) / 18%);
}

html.dark .recap-form input,
html.dark .recap-form textarea { color: #eef1f8; background: #12173d; border-color: rgb(255 255 255 / 14%); }

.recap-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  justify-self: start;
  min-block-size: 2.9rem;
  padding: 0 1.4rem;
  font-weight: 800;
  color: #fff;
  background: var(--pz-primary);
  border: 0;
  border-radius: 0.75rem;
  cursor: pointer;
}

.recap-form__btn:hover,
.recap-form__btn:focus-visible { background: var(--pz-secondary); }

@media (max-width: 575px) {
  .recap-form__btn { justify-self: stretch; }
}

.recap-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-inline-start: 0.35rem;
  padding: 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pz-success);
  background: color-mix(in srgb, var(--pz-success) 12%, transparent);
  border-radius: 999px;
}

/* ============================================================ «پنل والدین» (.gd*) */
.gd { margin-block-end: 30px; }
.gd__head { margin-block-end: 1rem; }

.gd__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--pz-darkdeep);
}

html.dark .gd__title { color: #eef1f8; }
.gd__lead { margin: 0.35rem 0 0; line-height: 1.9; color: var(--pz-muted); }

.gd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gd-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem;
  color: var(--pz-darkdeep);
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 10%);
  border-radius: 1.25rem;
  box-shadow: 0 18px 40px -30px rgb(11 30 48 / 50%);
}

html.dark .gd-card { color: #e9edf7; background: #1b2150; border-color: rgb(255 255 255 / 9%); }

.gd-card__head { display: flex; align-items: center; gap: 0.8rem; }

.gd-card__avatar {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 3.25rem;
  aspect-ratio: 1;
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(140deg, var(--pz-primary), var(--pz-secondary));
  border-radius: 50%;
}

.gd-card__who { display: grid; min-inline-size: 0; }
.gd-card__name { font-size: 1.1rem; font-weight: 800; }
.gd-card__meta { font-size: 0.82rem; color: var(--pz-muted); }

.gd-card__stats { display: grid; gap: 0.6rem; }

.gd-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  background: var(--pz-soft);
  border-radius: 0.9rem;
}

html.dark .gd-stat { background: rgb(255 255 255 / 5%); }
.gd-stat__text { display: grid; min-inline-size: 0; }
.gd-stat__text b { font-size: 0.92rem; }
.gd-stat__text small { font-size: 0.8rem; color: var(--pz-muted); }

.gd-card__recap {
  padding: 0.6rem 0.8rem;
  border-inline-start: 3px solid var(--pz-primary);
  background: rgb(var(--pz-primary-rgb) / 5%);
  border-radius: 0.6rem;
}

.gd-card__label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pz-primary-text);
}

html.dark .gd-card__label { color: #9fd8d6; }
.gd-card__lesson { margin: 0.2rem 0 0; line-height: 1.8; }

.gd-card__hw {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--pz-secondary);
}

.gd-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: auto; }

.gd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-block-size: 2.6rem;
  padding: 0 1rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  background: var(--pz-primary);
  border: 1px solid var(--pz-primary);
  border-radius: 0.75rem;
}

.gd-btn:hover,
.gd-btn:focus-visible { color: #fff; background: var(--pz-secondary); border-color: var(--pz-secondary); }

.gd-btn--ghost { color: var(--pz-primary-text); background: transparent; }
html.dark .gd-btn--ghost { color: #9fd8d6; border-color: rgb(255 255 255 / 20%); }

.gd-empty {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
  line-height: 2;
  color: var(--pz-muted);
  background: #fff;
  border-radius: 1.25rem;
}

html.dark .gd-empty { background: #1b2150; }
.gd-empty__title { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--pz-darkdeep); }
html.dark .gd-empty__title { color: #eef1f8; }

.gd-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-block-end: 1rem;
  font-size: 0.88rem;
  color: var(--pz-muted);
}

.gd-crumbs a { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; color: var(--pz-primary-text); }
html.dark .gd-crumbs a { color: #9fd8d6; }

.gd-months {
  margin-block-end: 1.25rem;
  padding: 1rem;
  background: #fff;
  border-radius: 1.25rem;
}

html.dark .gd-months { background: #1b2150; }

.gd-months__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pz-darkdeep);
}

html.dark .gd-months__title { color: #eef1f8; }

.gd-months__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gd-chip {
  display: inline-block;
  padding: 0.25rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: var(--pz-soft);
  border-radius: 999px;
}

html.dark .gd-chip { color: #d7f0ef; background: rgb(255 255 255 / 8%); }
.gd-chip--now,
html.dark .gd-chip--now { color: #fff; background: var(--pz-primary); }

.gd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 1rem;
}

.gd-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  margin-block: 1.25rem 30px;
}

.gd-box {
  padding: 1rem;
  background: #fff;
  border-radius: 1.25rem;
}

html.dark .gd-box { background: #151a47; }

.gd-box__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pz-darkdeep);
}

html.dark .gd-box__title { color: #eef1f8; }
.gd-box__empty { margin: 0; color: var(--pz-muted); }

.gd-notes { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.gd-note {
  padding: 0.7rem 0.85rem;
  border: 1px solid rgb(var(--pz-primary-rgb) / 12%);
  border-radius: 0.9rem;
}

html.dark .gd-note { border-color: rgb(255 255 255 / 10%); }
.gd-note__meta { margin: 0; font-size: 0.78rem; color: var(--pz-muted); }
.gd-note__title { margin: 0.15rem 0; font-weight: 800; color: var(--pz-darkdeep); }
html.dark .gd-note__title { color: #eef1f8; }
.gd-note__text { margin: 0; font-size: 0.9rem; line-height: 1.9; }

/* ============================================================ «دوره‌یاب» (.finder) */
.finder {
  display: grid;
  gap: 1rem;
  margin-block-end: 1.75rem;
  padding: 1.25rem;
  background:
    radial-gradient(120% 120% at 100% 0%, rgb(var(--pz-primary-rgb) / 10%), transparent 60%),
    #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 12%);
  border-radius: 1.25rem;
}

html.dark .finder { background: #1b2150; border-color: rgb(255 255 255 / 10%); }

.finder__head { display: grid; gap: 0.15rem; }

.finder__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--pz-darkdeep);
}

html.dark .finder__title { color: #eef1f8; }
.finder__title i { color: var(--pz-secondary); }
.finder__lead { margin: 0.25rem 0 0; color: var(--pz-muted); }
.finder__q { margin: 0; padding: 0; border: 0; }
.finder__q legend { margin-block-end: 0.5rem; font-weight: 800; color: var(--pz-darkdeep); }
html.dark .finder__q legend { color: #e3e8f4; }
.finder__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.finder-chip { position: relative; cursor: pointer; }

.finder-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.finder-chip span {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: var(--pz-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

html.dark .finder-chip span { color: #d7f0ef; background: rgb(255 255 255 / 7%); }
.finder-chip input:checked + span { color: #fff; background: var(--pz-primary); }
.finder-chip input:focus-visible + span { outline: 3px solid rgb(var(--pz-primary-rgb) / 40%); outline-offset: 2px; }
.finder__go { justify-self: start; }

/* course cards: who and what for */
.course-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: -0.35rem 0 0.75rem; }

.course-tag {
  padding: 0.05rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 8%);
  border-radius: 999px;
}

.course-tag--audience { color: var(--pz-secondary); background: rgb(209 74 33 / 9%); }
html.dark .course-tag { color: #d7f0ef; background: rgb(255 255 255 / 8%); }

/* ============================================================ «مقایسه‌ی دوره‌ها» */
.compare-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: 0.6rem;
  font-size: 0.85rem;
  color: var(--pz-muted);
  cursor: pointer;
}

.compare-pick input { inline-size: 1.05rem; block-size: 1.05rem; accent-color: var(--pz-primary); }
.compare-pick input:disabled + span { opacity: 0.5; }

.compare-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px dashed rgb(var(--pz-primary-rgb) / 25%);
  border-radius: 1rem;
}

html.dark .compare-bar { background: #1b2150; border-color: rgb(255 255 255 / 15%); }
.compare-bar__go { flex: none; }
.compare-bar__text { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--pz-muted); }

/* with script: a floating bar that appears once something is picked */
.compare-bar.is-enhanced {
  position: fixed;
  inset-inline: 1rem;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom));
  z-index: 900;
  max-inline-size: 40rem;
  margin: 0 auto;
  border-style: solid;
  box-shadow: 0 20px 40px -20px rgb(0 0 0 / 45%);
  transform: translateY(150%);
  transition: transform 0.25s ease;
}

.compare-bar.is-enhanced.is-on { transform: none; }

@media (prefers-reduced-motion: reduce) { .compare-bar.is-enhanced { transition: none; } }

.compare-scroll { overflow-x: auto; border-radius: 1rem; }

.compare-table {
  inline-size: 100%;
  min-inline-size: 40rem;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 12%);
  border-radius: 1rem;
}

html.dark .compare-table { background: #1b2150; border-color: rgb(255 255 255 / 10%); }

.compare-table th,
.compare-table td {
  padding: 0.8rem 1rem;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid rgb(var(--pz-primary-rgb) / 9%);
}

html.dark .compare-table th,
html.dark .compare-table td { border-color: rgb(255 255 255 / 8%); }

.compare-table tbody th {
  position: sticky;
  inset-inline-start: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pz-muted);
  white-space: nowrap;
  background: inherit;
}

.compare-table__corner { font-size: 0.85rem; color: var(--pz-muted); }
.compare-table__course a { font-size: 1.05rem; font-weight: 800; color: var(--pz-primary-text); }
html.dark .compare-table__course a { color: #9fd8d6; }
.compare-table__price td { font-weight: 800; color: var(--pz-primary-text); }
.compare-groups { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.compare-groups li { display: grid; }
.compare-seats { font-weight: 700; color: var(--pz-success); }
.compare-seats--full { color: var(--pz-danger); }
.compare-muted { color: var(--pz-muted); }
.compare-cta { white-space: nowrap; }
.compare-note { margin-block-start: 0.8rem; font-size: 0.85rem; color: var(--pz-muted); }

/* ============================================================ placement result card (.pl-*) */
.pl-result { display: grid; gap: 1rem; }

.pl-result__hero {
  position: relative;
  overflow: hidden;
  padding: 1.4rem;
  color: #fff;
  background: linear-gradient(135deg, #13777b, #062f33);
  border-radius: 1.4rem;
}

.pl-result__glow {
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -10%;
  inline-size: 16rem;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(255 194 61 / 45%), transparent 65%);
  pointer-events: none;
}

.pl-result__eyebrow { position: relative; margin: 0 0 0.6rem; font-size: 0.85rem; opacity: 0.9; }
.pl-result__main { position: relative; display: flex; align-items: center; gap: 1rem; }

.pl-result__badge {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 5.5rem;
  aspect-ratio: 1;
  font-size: 2rem;
  font-weight: 900;
  color: #062f33;
  background: linear-gradient(145deg, #ffd56b, #ffb02e);
  border: 0.3rem solid rgb(255 255 255 / 85%);
  border-radius: 50%;
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / 50%);
}

.pl-result__title { margin: 0; font-size: 1.4rem; font-weight: 900; color: #fff; }
.pl-result__text { margin: 0.3rem 0 0; line-height: 1.9; }
.pl-result__meta { margin: 0.3rem 0 0; font-size: 0.8rem; opacity: 0.8; }

.pl-ladder {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.35rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  direction: ltr;
}

.pl-ladder__step {
  display: grid;
  place-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.2rem;
  font-weight: 800;
  background: rgb(255 255 255 / 12%);
  border-radius: 0.7rem;
}

.pl-ladder__step--done { background: rgb(255 255 255 / 30%); }
.pl-ladder__step--here { color: #062f33; background: #ffc23d; transform: translateY(-4px); }
.pl-ladder__step small { font-size: 0.65rem; color: inherit; direction: rtl; }
.pl-classes { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.pl-class {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 12%);
  border-radius: 1rem;
}

html.dark .pl-class { background: #1b2150; border-color: rgb(255 255 255 / 10%); }
.pl-class__text { min-inline-size: 0; }
.pl-class__title { font-weight: 800; color: var(--pz-primary-text); }
html.dark .pl-class__title { color: #9fd8d6; }
.pl-class__meta,
.pl-class__seats { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--pz-muted); }
.pl-class__seats { color: var(--pz-success); font-weight: 700; }

@media (max-width: 575px) {
  .pl-result__main { flex-direction: column; text-align: center; }
  .pl-class__go,
  .pl-class form { inline-size: 100%; }
}

/* ============================================================ «جلسه‌ی آزمایشی رایگان» (.trial*) */
.trial { display: grid; gap: 1.5rem; max-inline-size: 60rem; margin-inline: auto; }

.trial__intro {
  padding: 1.4rem;
  color: #fff;
  background: linear-gradient(135deg, #13777b, #062f33);
  border-radius: 1.4rem;
}

.trial__eyebrow { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.85rem; color: #ffd56b; }
.trial__title { margin: 0.3rem 0 0.8rem; font-size: 1.5rem; font-weight: 900; color: #fff; }
.trial__perks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.trial__perks li { display: inline-flex; align-items: center; gap: 0.35rem; }
.trial-form { display: grid; gap: 1.25rem; }

.trial-step {
  margin: 0;
  padding: 1.2rem;
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 10%);
  border-radius: 1.25rem;
}

html.dark .trial-step { background: #1b2150; border-color: rgb(255 255 255 / 10%); }

.trial-step__title {
  display: flex;
  float: inline-start; /* keeps the legend inside the card instead of on its border */
  align-items: center;
  gap: 0.5rem;
  inline-size: 100%;
  margin-block-end: 0.9rem;
  padding: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--pz-darkdeep);
}

html.dark .trial-step__title { color: #eef1f8; }

.trial-step__num {
  display: grid;
  place-items: center;
  inline-size: 1.8rem;
  aspect-ratio: 1;
  font-size: 0.95rem;
  color: #fff;
  background: var(--pz-secondary);
  border-radius: 50%;
}

.trial-step__title ~ * { clear: both; }
.trial-days { display: grid; gap: 0.9rem; }
.trial-day { min-inline-size: 0; }
.trial-submit { min-inline-size: 12rem; }
.filter-chips--time { flex-wrap: wrap; }
.trial-day__name { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--pz-muted); }
.trial-day__name strong { color: var(--pz-darkdeep); }
html.dark .trial-day__name strong { color: #eef1f8; }
.trial-day__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }

.trial-time {
  position: relative;
  display: grid;
  gap: 0.05rem;
  padding: 0.6rem 0.75rem;
  background: var(--pz-soft);
  border: 2px solid transparent;
  border-radius: 0.9rem;
  cursor: pointer;
}

html.dark .trial-time { background: rgb(255 255 255 / 6%); }
.trial-time input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.trial-time__clock { font-size: 1.2rem; font-weight: 900; color: var(--pz-primary-text); }
html.dark .trial-time__clock { color: #9fd8d6; }
.trial-time__meta,
.trial-time__note { font-size: 0.78rem; color: var(--pz-muted); }
.trial-time:has(input:checked) { background: rgb(var(--pz-primary-rgb) / 10%); border-color: var(--pz-primary); }
.trial-time:has(input:focus-visible) { outline: 3px solid rgb(var(--pz-primary-rgb) / 35%); outline-offset: 2px; }
.trial-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.9rem; }
.trial-field { display: grid; gap: 0.3rem; }
.trial-field--wide { grid-column: 1 / -1; }
.trial-field label { font-weight: 700; color: var(--pz-darkdeep); }
html.dark .trial-field label { color: #e3e8f4; }

.trial-field input,
.trial-field select,
.trial-field textarea {
  inline-size: 100%;
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--pz-darkdeep);
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 20%);
  border-radius: 0.75rem;
}

html.dark .trial-field input,
html.dark .trial-field select,
html.dark .trial-field textarea { color: #eef1f8; background: #12173d; border-color: rgb(255 255 255 / 14%); }

.trial-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.trial-error { margin: 0; font-size: 0.85rem; color: var(--pz-danger); }

.trial-alert {
  padding: 0.75rem 1rem;
  color: var(--pz-danger);
  background: rgb(217 48 37 / 8%);
  border-radius: 0.9rem;
}

.trial-alert p { margin: 0; }
.trial-privacy { display: flex; align-items: center; gap: 0.35rem; margin: 0.9rem 0; font-size: 0.85rem; color: var(--pz-muted); }
.trial-none { display: grid; justify-items: start; gap: 0.6rem; color: var(--pz-muted); }

.trial-done {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  max-inline-size: 36rem;
  margin-inline: auto;
  padding: 2rem 1.25rem;
  text-align: center;
  background: #fff;
  border-radius: 1.4rem;
}

html.dark .trial-done { background: #1b2150; }
.trial-done__icon { color: var(--pz-success); }
.trial-done__title { margin: 0; font-size: 1.5rem; font-weight: 900; color: var(--pz-darkdeep); }
html.dark .trial-done__title { color: #eef1f8; }
.trial-done__when { margin: 0; font-weight: 800; color: var(--pz-primary-text); }
.trial-done__text { margin: 0; line-height: 1.9; color: var(--pz-muted); }
.trial-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-block-start: 0.75rem; }

/* ============================================================ blog & success stories */
.blog { min-block-size: 50vh; }
.blog-filters__row--topics { opacity: 0.95; }
.blog-filters { display: grid; gap: 0.6rem; margin-block-end: 1.75rem; }
.blog-filters__row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

.blog-chip {
  display: inline-block;
  padding: 0.35rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  background: rgb(var(--pz-primary-rgb) / 9%);
  border-radius: 999px;
}

.blog-chip--soft { font-weight: 600; background: var(--pz-soft); }
.blog-chip.is-active { color: #fff; background: var(--pz-primary); }
html.dark .blog-chip:not(.is-active) { color: #d7f0ef; background: rgb(255 255 255 / 8%); }

.blog-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 1rem;
}

.blog-section-head__title { margin: 0; font-size: 1.35rem; font-weight: 900; color: var(--pz-darkdeep); }
html.dark .blog-section-head__title { color: #eef1f8; }
.blog-section-head__link { font-weight: 700; color: var(--pz-primary-text); }
.blog-section-head__lead { inline-size: 100%; margin: 0; color: var(--pz-muted); }
.blog-stories { margin-block-end: 2rem; }

.post-grid,
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.post-grid--stack,
.story-grid--stack { grid-template-columns: 1fr; }

.post-card,
.story-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  block-size: 100%;
  padding: 1.1rem;
  color: var(--pz-darkdeep);
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 10%);
  border-radius: 1.2rem;
  box-shadow: 0 16px 34px -30px rgb(11 30 48 / 55%);
}

html.dark .post-card,
html.dark .story-card { color: #e9edf7; background: #1b2150; border-color: rgb(255 255 255 / 9%); }

.post-card--tip { border-inline-start: 4px solid var(--pz-secondary); }
.post-card__cover { display: block; margin: -1.1rem -1.1rem 0.4rem; overflow: hidden; border-radius: 1.2rem 1.2rem 0 0; }
.post-card__cover img { display: block; inline-size: 100%; aspect-ratio: 16 / 9; }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.8rem; color: var(--pz-muted); }

.post-card__kind {
  padding: 0 0.5rem;
  font-weight: 700;
  color: var(--pz-secondary);
  background: rgb(209 74 33 / 9%);
  border-radius: 999px;
}

.post-card__title { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.7; }
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--pz-primary-text); }
.post-card__summary { margin: 0; font-size: 0.92rem; line-height: 1.9; color: var(--pz-muted); }

.post-card__example {
  margin: auto 0 0;
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  color: var(--pz-primary-text);
  text-align: left;
  background: var(--pz-soft);
  border-radius: 0.7rem;
}

html.dark .post-card__example { color: #d7f0ef; background: rgb(255 255 255 / 6%); }

.story-card__head { display: flex; align-items: center; gap: 0.6rem; }

.story-card__avatar {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2.8rem;
  aspect-ratio: 1;
  font-size: 1.2rem;
  font-weight: 900;
  color: #062f33;
  background: linear-gradient(145deg, #ffd56b, #ffb02e);
  border-radius: 50%;
}

.story-card__avatar--lg { inline-size: 4rem; font-size: 1.6rem; }
.story-card__name { display: block; font-weight: 800; }
.story-card__course { display: block; font-size: 0.8rem; color: var(--pz-muted); }
.story-card__title { margin: 0.2rem 0 0; font-size: 1.05rem; font-weight: 800; line-height: 1.7; }
.story-card__title a { color: inherit; }

.story-card__quote,
.story__quote {
  margin: 0;
  padding-inline-start: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--pz-muted);
  border-inline-start: 3px solid #ffc23d;
}

.story__quote { margin-block: 1rem; font-size: 1.1rem; color: inherit; }
.story__head { display: flex; align-items: center; gap: 1rem; }

.story-chart {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
  padding: 0.8rem 0.9rem;
  background: var(--pz-soft);
  border-radius: 0.9rem;
}

html.dark .story-chart { background: rgb(255 255 255 / 5%); }
.story-chart__pair { display: grid; gap: 0.3rem; }
.story-chart__title { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--pz-muted); }
.story-chart__row { display: grid; grid-template-columns: 2rem 1fr 2.6rem; gap: 0.5rem; align-items: center; font-size: 0.85rem; }
.story-chart__row b { text-align: end; }
.story-chart__label { color: var(--pz-muted); }
.story-chart__row--after b { color: var(--pz-success); }
.story-chart__time { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--pz-primary-text); }
.story-chart .ch-bar { display: block; inline-size: 100%; block-size: 0.6rem; overflow: hidden; border-radius: 999px; }
.story-chart .ch-bar__track { fill: rgb(var(--pz-primary-rgb) / 12%); }
html.dark .story-chart .ch-bar__track { fill: rgb(255 255 255 / 12%); }
.story-chart .ch-bar--muted .ch-bar__value { fill: #9aa7ad; }
.story-chart .ch-bar--ok .ch-bar__value { fill: var(--pz-success); }
.story-chart .ch-bar--accent .ch-bar__value { fill: var(--pz-secondary); }

.story-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
  padding: 1.25rem;
  font-weight: 800;
  text-align: center;
  background: var(--pz-soft);
  border-radius: 1.2rem;
}

.story-cta p { margin: 0; }
html.dark .story-cta { background: rgb(255 255 255 / 6%); }

.article-layout { display: grid; gap: 2rem; }

@media (min-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}

.article {
  padding: 1.5rem;
  color: var(--pz-darkdeep);
  background: #fff;
  border-radius: 1.4rem;
}

html.dark .article { color: #e3e8f4; background: #1b2150; }
.article--tip { border-inline-start: 4px solid var(--pz-secondary); }
.article__head { margin-block-end: 0.5rem; }
.story { position: relative; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--pz-muted); }
.article__meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.article__title { margin: 0; font-size: 1.6rem; font-weight: 900; line-height: 1.6; color: inherit; }
.article__summary { margin: 0.5rem 0 1rem; font-size: 1.05rem; line-height: 2; color: var(--pz-muted); }
.article__cover { display: block; inline-size: 100%; aspect-ratio: 1200 / 630; margin-block-end: 1.25rem; border-radius: 1rem; }

.article__example {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-end: 1.25rem;
  padding: 0.75rem 1rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pz-primary-text);
  background: var(--pz-soft);
  border-radius: 0.9rem;
}

html.dark .article__example { color: #d7f0ef; background: rgb(255 255 255 / 6%); }

.article__toc {
  margin-block-end: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--pz-soft);
  border-radius: 0.9rem;
}

html.dark .article__toc { background: rgb(255 255 255 / 5%); }
.article__toc-title { margin: 0 0 0.3rem; font-weight: 800; }
.article__toc ol { margin: 0; padding-inline-start: 1.25rem; line-height: 2; }
.article__toc a { color: var(--pz-primary-text); }
html.dark .article__toc a { color: #9fd8d6; }
.article__body { font-size: 1.02rem; line-height: 2.1; }
.article__body h2 { margin: 1.75rem 0 0.6rem; font-size: 1.25rem; font-weight: 900; color: inherit; scroll-margin-block-start: 6rem; }
.article__body p { margin: 0 0 1rem; }
.article__body ul,
.article__body ol { margin: 0 0 1rem; padding-inline-start: 1.5rem; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body a { font-weight: 700; color: var(--pz-primary-text); text-decoration: underline; text-underline-offset: 0.2em; }
html.dark .article__body a { color: #9fd8d6; }

.article__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: 2rem;
  padding: 1.1rem;
  background: rgb(var(--pz-primary-rgb) / 6%);
  border-radius: 1rem;
}

.article__cta p { flex: 1 1 100%; margin: 0; font-weight: 700; }
html.dark .article__cta { background: rgb(255 255 255 / 5%); }
.article-related { display: grid; gap: 1rem; }

/* ============================================================ installable app (PWA) */
[data-pwa-install][hidden],
.is-app [data-pwa-install] { display: none !important; }

.pwa-toasts {
  position: fixed;
  inset-inline: 0.75rem;
  inset-block-end: calc(5.5rem + env(safe-area-inset-bottom));
  z-index: 3000;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

@media (min-width: 992px) { .pwa-toasts { inset-block-end: 1.25rem; } }

.pwa-toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-inline-size: 32rem;
  padding: 0.6rem 0.6rem 0.6rem 0.9rem;
  font-size: 0.9rem;
  color: #fff;
  background: #10242a;
  border-radius: 0.9rem;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 55%);
  pointer-events: auto;
  animation: pwa-toast-in 0.25s ease both;
}

.pwa-toast__btn {
  flex: none;
  padding: 0.35rem 0.8rem;
  font-weight: 800;
  color: #10242a;
  background: #ffc23d;
  border: 0;
  border-radius: 0.6rem;
  cursor: pointer;
}

.pwa-toast__close {
  flex: none;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  font-size: 1.2rem;
  line-height: 1;
  color: rgb(255 255 255 / 75%);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

@keyframes pwa-toast-in { from { opacity: 0; transform: translateY(0.75rem); } }
@media (prefers-reduced-motion: reduce) { .pwa-toast { animation: none; } }

/* installed app: respect the notch and the title bar area */
.is-app body { padding-block-start: env(titlebar-area-height, 0); }

/* the offline page (templates/pwa/offline.html) */
.offline-page {
  display: grid;
  place-items: center;
  min-block-size: 100dvh;
  margin: 0;
  padding: 1.5rem;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  color: #12202b;
  background: radial-gradient(120% 80% at 50% 0%, #e8f3f3, #fff 60%);
}

html.dark .offline-page { color: #eef1f8; background: radial-gradient(120% 80% at 50% 0%, #1b2a4f, #0f1430 60%); }
.offline { display: grid; justify-items: center; gap: 0.75rem; max-inline-size: 28rem; text-align: center; }
.offline__logo { border-radius: 1.5rem; box-shadow: 0 18px 40px -22px rgb(11 78 83 / 70%); }
.offline__title { margin: 0.5rem 0 0; font-size: 1.5rem; font-weight: 900; }
.offline__text { margin: 0; line-height: 2; color: #5d6e75; }
html.dark .offline__text { color: #a3acbf; }
.offline__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-block-start: 0.5rem; }

.offline__btn {
  padding: 0.6rem 1.2rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  background: #0b4e53;
  border: 1px solid #0b4e53;
  border-radius: 0.8rem;
}

.offline__btn--ghost { color: #0b4e53; background: transparent; }
html.dark .offline__btn--ghost { color: #9fd8d6; border-color: #9fd8d6; }
.offline__status { min-block-size: 1.5rem; margin: 0; font-size: 0.85rem; color: #e39b12; }

/* ============================================================ «جستجوی سریع» (Ctrl+K) */
.palette {
  inline-size: min(40rem, calc(100% - 1.5rem));
  max-inline-size: none;
  max-block-size: min(36rem, calc(100dvh - 3rem));
  margin: 8vh auto auto;
  padding: 0;
  color: #12202b;
  background: transparent;
  border: 0;
  overflow: visible;
}

.palette::backdrop { background: rgb(8 16 28 / 55%); backdrop-filter: blur(3px); }

.palette__box {
  display: flex;
  flex-direction: column;
  max-block-size: inherit;
  overflow: hidden;
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 30px 70px -25px rgb(0 0 0 / 55%);
}

html.dark .palette { color: #eef1f8; }
html.dark .palette__box { background: #171c45; }

.palette__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  color: #5d6e75;
  border-block-end: 1px solid rgb(11 78 83 / 12%);
}

html.dark .palette__bar { border-color: rgb(255 255 255 / 10%); }

.palette__input {
  flex: 1;
  min-inline-size: 0;
  padding: 0.3rem 0;
  font: inherit;
  font-size: 1.05rem;
  color: inherit;
  background: transparent;
  border: 0;
  outline: none;
}

html.dark .palette__input { color: #eef1f8; }
.palette__input::-webkit-search-cancel-button { display: none; }
.palette.is-loading .palette__bar svg { animation: palette-pulse 0.8s ease-in-out infinite alternate; }

@keyframes palette-pulse { to { opacity: 0.35; } }

.palette kbd,
.palette__kbd {
  padding: 0.05rem 0.4rem;
  font-family: inherit;
  font-size: 0.72rem;
  color: #5d6e75;
  background: rgb(11 78 83 / 7%);
  border: 1px solid rgb(11 78 83 / 15%);
  border-radius: 0.35rem;
}

html.dark .palette kbd { color: #a3acbf; background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 12%); }
.palette__list { flex: 1; margin: 0; padding: 0.4rem; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.palette__group { padding: 0.6rem 0.6rem 0.25rem; font-size: 0.75rem; font-weight: 800; color: #5d6e75; }
html.dark .palette__group { color: #a3acbf; }

.palette__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  color: inherit;
  border-radius: 0.7rem;
}

.palette__item[aria-selected="true"],
.palette__item[aria-selected="true"] .palette__title { color: #fff; background: #0b4e53; }
.palette__title { min-inline-size: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.palette__meta { flex: none; font-size: 0.78rem; opacity: 0.75; }
.palette__empty { margin: 0; padding: 1.25rem; text-align: center; color: #5d6e75; }

.palette__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0.6rem 1rem;
  font-size: 0.75rem;
  color: #5d6e75;
  border-block-start: 1px solid rgb(11 78 83 / 10%);
}

html.dark .palette__foot { color: #a3acbf; border-color: rgb(255 255 255 / 8%); }

@media (max-width: 575px) {
  .palette { margin-block-start: 0.75rem; }
  .palette__foot { display: none; }
}

@media (prefers-reduced-motion: reduce) { .palette.is-loading .palette__bar svg { animation: none; } }

/* ============================================================ live quiz & question bank (.qz*) */
.quiz-input {
  inline-size: 100%;
  padding: 0.55rem 0.8rem;
  font: inherit;
  color: var(--pz-darkdeep);
  background: #fff;
  border: 1px solid rgb(var(--pz-primary-rgb) / 20%);
  border-radius: 0.7rem;
}

html.dark .quiz-input { color: #eef1f8; background: #12173d; border-color: rgb(255 255 255 / 14%); }

.qz-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.25rem;
  padding: 1.4rem;
  color: #fff;
  background: linear-gradient(135deg, #5f2ded, #13777b);
  border-radius: 1.4rem;
}

.qz-hero__title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.5rem; font-weight: 900; color: #fff; }
.qz-hero__text { margin: 0.35rem 0 0; max-inline-size: 36rem; line-height: 1.9; opacity: 0.92; }

.qz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-block-size: 2.6rem;
  padding: 0 1.1rem;
  font-weight: 800;
  color: #fff;
  background: var(--pz-primary);
  border: 1px solid var(--pz-primary);
  border-radius: 0.8rem;
  cursor: pointer;
}

.qz-btn--big { min-block-size: 3.2rem; padding: 0 1.5rem; font-size: 1.05rem; color: #10242a; background: #ffc23d; border-color: #ffc23d; }
.qz-btn--ghost { color: var(--pz-primary-text); background: transparent; }
html.dark .qz-btn--ghost { color: #9fd8d6; border-color: rgb(255 255 255 / 25%); }

.qz-box {
  margin-block-end: 1.25rem;
  padding: 1.2rem;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 16px 34px -30px rgb(11 30 48 / 55%);
}

html.dark .qz-box { color: #e3e8f4; background: #1b2150; }
.qz-box__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.qz-box__title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.9rem; font-size: 1.15rem; font-weight: 900; color: var(--pz-darkdeep); }
html.dark .qz-box__title { color: #eef1f8; }
.qz-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; }
.qz-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.8rem; align-items: end; }
.qz-form > button { justify-self: start; }
.qz-field { display: grid; gap: 0.3rem; margin: 0; padding: 0; border: 0; }
.qz-field--wide { grid-column: 1 / -1; }
.qz-field--check { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.5rem; }
.qz-field label,
.qz-field legend { font-size: 0.88rem; font-weight: 700; color: var(--pz-darkdeep); }
html.dark .qz-field label,
html.dark .qz-field legend { color: #e3e8f4; }
.qz-error { margin: 0; font-size: 0.82rem; color: var(--pz-danger); }
.qz-hint { margin: 0 0 0.75rem; font-size: 0.88rem; line-height: 1.9; color: var(--pz-muted); }
.qz-hint code { padding: 0.1rem 0.4rem; background: var(--pz-soft); border-radius: 0.4rem; }
.qz-search { display: flex; gap: 0.4rem; }
.qz-recent { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.qz-recent a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.8rem;
  padding: 0.6rem 0.8rem;
  color: inherit;
  background: var(--pz-soft);
  border-radius: 0.8rem;
}

html.dark .qz-recent a { background: rgb(255 255 255 / 5%); }
.qz-recent span { font-size: 0.82rem; color: var(--pz-muted); }
.qz-status { margin-inline-start: auto; font-weight: 700; }
.qz-status--finished { color: var(--pz-muted); }
.qz-status--lobby,
.qz-status--question,
.qz-status--reveal { color: var(--pz-success); }
.qz-questions { display: grid; gap: 0.6rem; margin: 0 0 1rem; padding: 0; list-style: none; }

.qz-q {
  position: relative;
  padding: 0.8rem 1rem;
  border: 1px solid rgb(var(--pz-primary-rgb) / 12%);
  border-radius: 0.9rem;
}

html.dark .qz-q { border-color: rgb(255 255 255 / 10%); }
.qz-q__text { margin: 0 0 0.4rem; font-weight: 800; }
.qz-q__options { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.4rem; padding: 0; list-style: none; }
.qz-q__options li { padding: 0.1rem 0.6rem; font-size: 0.85rem; background: var(--pz-soft); border-radius: 999px; }
html.dark .qz-q__options li { background: rgb(255 255 255 / 7%); }
.qz-q__options li.is-correct { font-weight: 800; color: #fff; background: var(--pz-success); }
.qz-q__meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; font-size: 0.78rem; color: var(--pz-muted); }
.qz-q__delete { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.75rem; }
.qz-link { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.8rem; color: var(--pz-danger); background: none; border: 0; cursor: pointer; }
.qz-new { display: grid; }
.qz-pick { min-inline-size: 0; }
.qz-pick__list { display: grid; gap: 0.4rem; max-block-size: 26rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; }

.qz-pick__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  font-weight: 600 !important;
  background: var(--pz-soft);
  border-radius: 0.7rem;
  cursor: pointer;
}

html.dark .qz-pick__item { background: rgb(255 255 255 / 5%); }
.qz-pick__item input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--pz-primary); }
.qz-pick__item small { color: var(--pz-muted); }

/* ---------------------------------------------- the class screen */
.qz-screen .site-footer { display: none; }

.qzh {
  --qz-1: #e5532d;
  --qz-2: #2f7fe0;
  --qz-3: #e39b12;
  --qz-4: #12a383;
  display: grid;
  gap: 1.25rem;
  min-block-size: 80vh;
  padding: 1.25rem;
  color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #2b1f6e, #0f1235 70%);
}

.qzh:fullscreen { padding: 2rem; }
.qzh__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.qzh__back { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 700; color: #cfd6ff; }
.qzh__title { flex: 1; margin: 0; font-size: 1.3rem; font-weight: 900; color: #fff; }
.qzh__title small { font-size: 0.8rem; font-weight: 600; opacity: 0.7; }

.qzh__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  font-weight: 700;
  color: #fff;
  background: rgb(255 255 255 / 12%);
  border: 0;
  border-radius: 999px;
}

.qzh__chip--btn { cursor: pointer; }
.qzh__stage { display: grid; align-content: center; gap: 1.25rem; min-block-size: 50vh; }
.qzh-lobby { display: grid; justify-items: center; gap: 0.6rem; text-align: center; font-size: 1.2rem; }

.qzh-lobby__big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 900;
  text-align: center;
}

.qzh-lobby__path { padding: 0.4rem 1rem; font-weight: 800; color: #ffc23d; background: rgb(0 0 0 / 25%); border-radius: 0.8rem; }
.qzh-lobby__count { font-size: 1.4rem; font-weight: 800; color: #ffc23d; }
.qzh-qhead { display: flex; align-items: center; gap: 1rem; }
.qzh-q { flex: 1; margin: 0; font-size: clamp(1.4rem, 3.6vw, 2.6rem); font-weight: 900; line-height: 1.5; }

.qzh-timer {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: clamp(4rem, 9vw, 6rem);
  aspect-ratio: 1;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 900;
  color: #10242a;
  background: #ffc23d;
  border-radius: 50%;
}

.qzh-timer.is-low { color: #fff; background: #e0483c; }
.qzh-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }

.qzh-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-block-size: 4.5rem;
  padding: 0.8rem 1.1rem;
  overflow: hidden;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 800;
  background: var(--qz-c);
  border-radius: 1rem;
}

.qzh-option--1 { --qz-c: var(--qz-1); }
.qzh-option--2 { --qz-c: var(--qz-2); }
.qzh-option--3 { --qz-c: var(--qz-3); }
.qzh-option--4 { --qz-c: var(--qz-4); }
.qzh-option.is-wrong { opacity: 0.35; }
.qzh-option.is-correct { outline: 4px solid #fff; }
.qzh-option__shape,
.qzh-option__text,
.qzh-option__count { position: relative; z-index: 1; }
.qzh-option__text { flex: 1; }

.qzh-option__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: rgb(0 0 0 / 22%);
  transition: inline-size 0.5s ease;
}

.qzh-answered,
.qzh-explain { margin: 0; font-size: 1.15rem; font-weight: 700; text-align: center; opacity: 0.9; }
.qzh-explain { padding: 0.6rem 1rem; color: #10242a; background: #ffe7a8; border-radius: 0.8rem; opacity: 1; }
.qzh-leaders { display: grid; gap: 0.4rem; max-inline-size: 34rem; margin: 0 auto; padding: 0; inline-size: 100%; list-style: none; }

.qzh-leader {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  font-size: 1.1rem;
  background: rgb(255 255 255 / 10%);
  border-radius: 0.8rem;
}

.qzh-leaders--big .qzh-leader { padding: 0.8rem 1.1rem; font-size: 1.35rem; }
.qzh-leader--1 { color: #10242a; background: #ffc23d; }
.qzh-leader--2 { background: rgb(255 255 255 / 22%); }
.qzh-leader__rank { font-weight: 900; text-align: center; }
.qzh-leader__name { font-weight: 800; }
.qzh__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.qzh .qz-btn--ghost { color: #fff; border-color: rgb(255 255 255 / 35%); }

/* ---------------------------------------------- the phone */
.qzp {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #2b1f6e, #0f1235 75%);
  border-radius: 1.4rem;
}

.qzp__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.qzp__title { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 1.1rem; font-weight: 900; color: #fff; }
.qzp__score { padding: 0.25rem 0.8rem; font-weight: 800; color: #10242a; background: #ffc23d; border-radius: 999px; }
.qzp__stage { display: grid; gap: 0.9rem; min-block-size: 22rem; align-content: start; }
.qzp__wait,
.qzp__big { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 3rem 0; font-size: 1.2rem; font-weight: 800; text-align: center; }
.qzp__big { font-size: 1.8rem; }
.qzp__result { margin: 0; font-size: 1.1rem; text-align: center; }
.qzp__qhead { display: flex; align-items: center; justify-content: space-between; }
.qzp__count { font-size: 0.9rem; opacity: 0.8; }

.qzp__timer {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  aspect-ratio: 1;
  font-size: 1.3rem;
  font-weight: 900;
  color: #10242a;
  background: #ffc23d;
  border-radius: 50%;
}

.qzp__timer.is-low { color: #fff; background: #e0483c; }
.qzp__q { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.7; }
.qzp__options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.qzp__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-block-size: 6.5rem;
  padding: 0.6rem;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  color: #fff;
  background: var(--qz-c);
  border: 3px solid transparent;
  border-radius: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, opacity 0.2s ease;
}

.qzp__opt:active { transform: scale(0.96); }
.qzp__opt--1 { --qz-c: #e5532d; }
.qzp__opt--2 { --qz-c: #2f7fe0; }
.qzp__opt--3 { --qz-c: #e39b12; }
.qzp__opt--4 { --qz-c: #12a383; }
.qzp__opt:disabled { cursor: default; opacity: 0.55; }
.qzp__opt.is-picked,
.qzp__opt.is-correct { border-color: #fff; opacity: 1; }
.qzp__opt.is-wrong { opacity: 0.35; }
.qzp__shape { font-size: 1.4rem; }
.qzp__note { margin: 0; text-align: center; opacity: 0.85; }
.qzp__note--bad { color: #ffb4ab; }
.qzp__verdict { margin: 0; padding: 0.7rem; font-size: 1.25rem; font-weight: 900; text-align: center; border-radius: 0.9rem; }
.qzp__verdict.is-right { color: #062f33; background: #7ee2b8; }
.qzp__verdict.is-bad { background: rgb(224 72 60 / 85%); }
.qzp__explain { margin: 0; padding: 0.6rem 0.8rem; color: #10242a; background: #ffe7a8; border-radius: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  .qzh-option__bar,
  .qzp__opt { transition: none; }
}