@font-face {
  font-family: "Peyda";
  src: url("/static/fonts/peyda/fanum/PeydaFaNumWeb-Regular.834c1f672281.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Peyda";
  src: url("/static/fonts/peyda/fanum/PeydaFaNumWeb-Medium.3af15ffc5aed.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Peyda";
  src: url("/static/fonts/peyda/fanum/PeydaFaNumWeb-SemiBold.c1535164616f.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Peyda";
  src: url("/static/fonts/peyda/fanum/PeydaFaNumWeb-Bold.d098c9ee6202.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f5f1eb;
  --surface: #f8f8f8;
  --text: #1e1e1e;
  --muted: rgba(30, 30, 30, 0.66);
  --accent: #DE3F82;
  --accent-strong: #259193;
  --accent-soft: rgba(222, 63, 130, 0.15);
  --border: rgba(37, 145, 147, 0.12);
  --danger: #b42828;
  --content-width: 1320px;
}

* {
  box-sizing: border-box;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

html {
  direction: rtl;
}

body {
  margin: 0;
  font-family: "Peyda", Tahoma, Arial, sans-serif;
  background:
    radial-gradient(circle at top right, rgba(222, 63, 130, 0.1), transparent 28%),
    radial-gradient(circle at bottom left, rgba(37, 145, 147, 0.07), transparent 28%),
    linear-gradient(180deg, #f8f8f8 0%, var(--bg) 100%);
  color: var(--text);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: absolute;
  right: 1rem;
  top: -3rem;
  z-index: 1000;
  padding: 0.65rem 1.1rem;
  border-radius: 0.6rem;
  background: var(--accent-strong);
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  transition: top 0.15s ease;
}

.skip-link:focus-visible {
  top: 0.75rem;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  margin-top: 0;
  text-wrap: pretty;
}

.container {
  width: min(var(--content-width), calc(100% - 2rem));
  margin: 0 auto;
}

.site-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-footer {
  margin-top: 4rem;
  background: linear-gradient(180deg, #259193 0%, #1e1e1e 100%);
  color: rgba(255, 255, 255, 0.92);
}

.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.brand-mark {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  background: var(--accent-strong);
  color: var(--accent);
  font-size: 0.85rem;
}

.brand-text {
  font-size: 1.2rem;
  font-weight: 1000;
  letter-spacing: 0.2em;
  line-height: 1;
  margin-right: -5px;
}

.brand-logo {
  height: 3.6rem;
  overflow: hidden;
  width: auto;
  display: block;
}

.menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--muted);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  color: var(--accent-strong);
  background: rgba(37, 145, 147, 0.08);
  transition: background 0.15s ease;
}

.nav-toggle:hover {
  background: rgba(37, 145, 147, 0.14);
}

.nav-toggle svg {
  width: 1.35rem;
  height: 1.35rem;
}

.nav-toggle-icon-close {
  display: none;
}

.nav-toggle.open .nav-toggle-icon-menu {
  display: none;
}

.nav-toggle.open .nav-toggle-icon-close {
  display: block;
}

.menu > a,
.menu-item > a {
  position: relative;
  padding: 0.35rem 0.15rem;
  color: var(--muted);
  font-weight: 400;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.menu > a::after,
.menu-item > a::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0.05rem;
  height: 1px;
  background: var(--accent-strong);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.22s ease;
  opacity: 0.75;
}

.menu > a:hover,
.menu > a.nav-active,
.menu-item > a:hover,
.menu-item > a.nav-active {
  color: #259193;
  text-shadow: 0 0 0.01px currentColor;
}

.menu > a:hover::after,
.menu > a.nav-active::after,
.menu-item > a:hover::after,
.menu-item > a.nav-active::after {
  transform: scaleX(1);
}

.menu > a.nav-active::after,
.menu-item > a.nav-active::after {
  height: 2px;
  opacity: 1;
}

/* ── Mega menu (hover waterfall dropdown) ─────────────────────────────────── */

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* Invisible hit-box: touches the trigger link with zero gap (top: 100%) so the
   cursor never leaves hoverable territory while travelling down to the card.
   The visual spacing before the card is padding-top, which is still inside
   this box and still hoverable. */
.mega-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 22rem;
  padding-top: 0.7rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  z-index: 110;
}

.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0s linear;
}

.mega-menu-card {
  padding: 1rem 0.9rem 0.85rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(222, 63, 130, 0.08), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(37, 145, 147, 0.07), transparent 50%),
    rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  box-shadow: 0 24px 50px rgba(30, 30, 30, 0.16);
  transform: translateY(0.4rem);
  transition: transform 0.25s ease;
}

.has-mega:hover .mega-menu-card,
.has-mega:focus-within .mega-menu-card {
  transform: translateY(0);
}

.mega-menu-group + .mega-menu-group {
  margin-top: 0.75rem;
}

.mega-menu-category {
  display: block;
  width: fit-content;
  padding: 0 0.6rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

.mega-menu-category:hover,
.mega-menu-category:focus-visible {
  color: var(--accent);
}

.mega-menu-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* dashed waterfall line threading through every bullet */
.mega-menu-list::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  bottom: 1.35rem;
  right: 0.94rem;
  border-right: 1.5px dashed var(--accent);
  opacity: 0.35;
}

.mega-menu-row {
  position: relative;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
  transition-delay: 0s;
}

.has-mega:hover .mega-menu-row,
.has-mega:focus-within .mega-menu-row {
  opacity: 1;
  transform: translateY(0);
}

.has-mega:hover .mega-menu-row:nth-child(1),
.has-mega:focus-within .mega-menu-row:nth-child(1) { transition-delay: 0.03s; }
.has-mega:hover .mega-menu-row:nth-child(2),
.has-mega:focus-within .mega-menu-row:nth-child(2) { transition-delay: 0.07s; }
.has-mega:hover .mega-menu-row:nth-child(3),
.has-mega:focus-within .mega-menu-row:nth-child(3) { transition-delay: 0.11s; }
.has-mega:hover .mega-menu-row:nth-child(4),
.has-mega:focus-within .mega-menu-row:nth-child(4) { transition-delay: 0.15s; }
.has-mega:hover .mega-menu-row:nth-child(5),
.has-mega:focus-within .mega-menu-row:nth-child(5) { transition-delay: 0.19s; }
.has-mega:hover .mega-menu-row:nth-child(6),
.has-mega:focus-within .mega-menu-row:nth-child(6) { transition-delay: 0.23s; }

.mega-menu-marker {
  position: absolute;
  top: 1.15rem;
  right: 0.72rem;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 1;
}

.mega-menu-row:hover .mega-menu-marker {
  transform: scale(1.25);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.mega-menu-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 1.55rem 0.55rem 0.6rem;
  border-radius: 0.6rem;
  transition: background-color 0.15s ease;
}

.mega-menu-row:hover .mega-menu-item,
.mega-menu-item:focus-visible {
  background: var(--accent-soft);
}

.mega-menu-item-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent-strong);
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mega-menu-row:hover .mega-menu-item-title,
.mega-menu-item:focus-visible .mega-menu-item-title {
  color: var(--accent);
}

.mega-menu-item-desc {
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mega-menu-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateY(-0.35rem);
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.15s ease;
  transition-delay: 0s;
}

.has-mega:hover .mega-menu-viewall,
.has-mega:focus-within .mega-menu-viewall {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.27s;
}

.mega-menu-viewall:hover,
.mega-menu-viewall:focus-visible {
  color: var(--accent-strong);
}

@media (max-width: 768px) {
  .mega-menu {
    display: none;
  }
}

/* ── End mega menu ─────────────────────────────────────────────────────────── */

.button-small {
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
}

.page {
  padding: 0 0 3rem;
  overflow-x: clip;
}

/* ── Challenge ticker ── */
.challenge-ticker {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  height: 3.25rem;
  background: rgba(37, 145, 147, 0.1);
  overflow: hidden;
  display: flex;
  align-items: center;
  direction: ltr;
}

.challenge-ticker-track {
  display: inline-flex;
  align-items: center;
  direction: ltr;
  white-space: nowrap;
  will-change: transform;
  animation: challenge-ticker-scroll 550s linear infinite;
}

@keyframes challenge-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .challenge-ticker-track {
    animation: none;
  }
}

.challenge-ticker-item {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent-strong);
  padding: 0 1.25rem;
  white-space: nowrap;
  direction: rtl;
}

.challenge-ticker-sep {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0.55;
}

.page-sections {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.footer-inner {
  display: grid;
  gap: 2rem;
  padding: 3rem 0 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.75fr 1.4fr;
  gap: 3.5rem;
  align-items: start;
}

.footer-brand {
  display: grid;
  gap: 0.5rem;
}

.footer-logo {
  font-size: 1.05rem;
  font-weight: 700;
  color: white;
}

.footer-brand p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.footer-badges {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* White card: the badge is designed for a light background. */
.footer-badge {
  display: flex;
  padding: 0.375rem 0.25rem;
  border-radius: 0.5rem;
  background: white;
  transition: opacity 0.2s;
}

.footer-badge:hover {
  opacity: 0.9;
}

.footer-badge img {
  display: block;
  height: 6rem;
  width: auto;
}

.footer-links {
  display: grid;
  gap: 0.6rem;
}

.footer-links h3 {
  margin: 0 0 0.35rem;
  color: white;
  font-size: 1.05rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: white;
}

.footer-copy {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}

.footer-contact {
  display: grid;
  gap: 0.85rem;
  color: rgba(255, 255, 255, 0.84);
}

.footer-contact h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  color: white;
}

.footer-contact p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.84);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.5;
}

.contact-item strong {
  display: block;
  font-size: 0.95rem;
  color: white;
}

.contact-item span span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
}

.footer-phone-link {
  color: inherit;
  text-decoration: none;
  direction: ltr;
  unicode-bidi: bidi-override;
  display: inline-block;
  white-space: nowrap;
}

.footer-phone-link:hover {
  color: white;
}

.footer-phone-sep {
  padding: 0 0.55rem;
  opacity: 0.35;
  user-select: none;
}

.footer-phone-list {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.contact-icon {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.1);
}

.contact-icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  color: white;
}

.footer-socials {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.social-icon {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.social-icon::before {
  content: "";
  position: absolute;
  inset: -0.3rem;
}

.social-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
  display: block;
}

.social-icon img {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.social-icon:hover {
  transform: translateY(-2px);
  background: var(--accent);
}

.social-icon:hover img {
  filter: brightness(0) invert(1);
}

.stack {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 9rem;
}

.stack:last-child {
  margin-bottom: 0;
}

.section-heading {
  display: grid;
  gap: 0.25rem;
}

.section-heading h2,
.hero h1,
.card h3,
.simple-page h1 {
  margin: 0;
}

.section-heading p,
.hero-lead,
.card p {
  color: var(--muted);
}

.hero,
.simple-page,
.card {
  background: var(--surface);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.06);
}

.hero {
  width: 100vw;
  margin: -5.5rem calc(50% - 50vw) 1.75rem;
  padding: 20rem 0 12rem;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(222, 63, 130, 0.18), transparent 18%),
    radial-gradient(circle at 18% 82%, rgba(84, 133, 122, 0.38), transparent 28%),
    radial-gradient(circle at top right, rgba(84, 133, 122, 0.22), transparent 34%),
    radial-gradient(circle at bottom left, rgba(222, 63, 130, 0.06), transparent 30%),
    linear-gradient(180deg, #f8f8f8 0%, #f5f1eb 100%);
  box-shadow:
    inset 0 -22px 30px rgba(37, 145, 147, 0.07),
    inset 0 16px 18px rgba(255, 255, 255, 0.18);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(84, 133, 122, 0.05) 0%, transparent 38%),
    radial-gradient(circle at 72% 22%, rgba(222, 63, 130, 0.14) 0%, transparent 24%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  top: 8%;
  right: 6%;
  z-index: 0;
  width: min(40vw, 28rem);
  height: min(40vw, 28rem);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(222, 63, 130, 0.26) 0%, rgba(222, 63, 130, 0.1) 30%, transparent 70%),
    radial-gradient(circle at 40% 40%, rgba(84, 133, 122, 0.34) 0%, transparent 65%);
  filter: blur(50px);
  opacity: 0.8;
  pointer-events: none;
}

.hero-copy {
  position: relative;
}

.hero-copy::before {
  content: "";
  position: absolute;
  inset: auto 50% -3rem auto;
  width: min(24vw, 18rem);
  height: min(24vw, 18rem);
  transform: translateX(50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(37, 145, 147, 0.12) 0%, transparent 70%);
  filter: blur(42px);
  pointer-events: none;
  z-index: -1;
}

.hero-inner {
  width: min(var(--content-width), calc(100% - 2rem));
  margin: 0 auto;
  display: block;
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: 88rem;
  margin: 0 auto;
  text-align: center;
  padding: 0.5rem 0 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  color: var(--accent-strong);
  font-size: 0.95rem;
  font-weight: 600;
}

.eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
}

.hero h1 {
  font-size: clamp(2rem, 3.4vw, 3.7rem);
  line-height: 1.25;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-lead {
  font-size: 1.05rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 0;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 1rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.2rem;
  border-radius: 15px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(33, 50, 58, 0.08);
}

.button.primary {
  background: var(--accent);
  color: white;
  border-color: transparent;
}

.button.secondary {
  background: transparent;
  color: var(--accent-strong);
  /*border: 1px solid rgba(37, 145, 147, 0.18);*/
}

.button.secondary:hover {
  transform: none;
  box-shadow: none;
  background: rgba(30, 30, 30, 0.05);
}

.button-flat {
  background: transparent;
  color: var(--accent-strong);
  border: 0;
  border-radius: 0.65rem;
  box-shadow: none;
}

.button-flat:hover {
  transform: none;
  box-shadow: none;
  background: rgba(37, 145, 147, 0.06);
}

.button-login {
  padding: 0.45rem 0.95rem;
  border-radius: 0.9rem;
  font-weight: 500;
}

.button-login:hover {
  transform: none;
  box-shadow: none;
  background: rgba(37, 145, 147, 0.06);
}

.button-reserve {
  padding: 0.42rem 0.9rem;
  border-radius: 0.55rem;
  font-weight: 600;
}

.user-account-link {
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
}

.button-reserve:hover {
  transform: none;
  box-shadow: none;
}

.button:active,
.button-flat:active,
.button-login:active,
.button-reserve:active {
  transform: scale(0.96);
  box-shadow: none;
}

.hero-points {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-points li {
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.95rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.service-card {
  min-height: 13rem;
  display: grid;
  align-content: start;
  gap: 0.8rem;
  background: linear-gradient(180deg, #f8f8f8 0%, rgba(245, 241, 235, 0.92) 100%);
}

.blog-card {
  display: grid;
  gap: 0.85rem;
}

.services-section {
  gap: 1.25rem;
}

.how-we-work-section {
  padding: 2.75rem 0 0.5rem;
  margin-bottom: 5.5rem;
}

.how-we-work-panel {
  background: rgba(37, 145, 147, 0.05);
  border-radius: 1.25rem;
  padding: 3rem 3rem;
}

.how-we-work {
  max-width: 42rem;
  margin: 0 auto;
  display: grid;
  gap: 0.9rem;
  text-align: center;
}

.how-we-work h2 {
  margin: 0;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 700;
  color: var(--accent-strong);
}

.how-we-work p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}

.section-action-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.section-action-heading h2 {
  margin: 0;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.3;
  font-weight: 700;
}

.section-more {
  flex: 0 0 auto;
  padding: 0.45rem 0.95rem;
  color: rgba(37, 145, 147, 0.72);
  font-size: 0.9rem;
  font-weight: 500;
  border-color: rgba(37, 145, 147, 0.12);
  border-radius: 0.9rem;
}

.section-more:hover {
  transform: none;
  box-shadow: none;
  background: rgba(37, 145, 147, 0.06);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.service-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  min-height: 17rem;
  display: grid;
  align-content: end;
  gap: 0.7rem;
  padding: 1.25rem;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #e8e2d7;
  color: white;
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.06);
  isolation: isolate;
}

.service-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Was transparent 24% -> 86% opaque by the bottom — tuned only against
     the highest-contrast photo in the set, so most other tiles' photos
     were essentially invisible under it. Starts later and caps lower so
     the photo stays legible while the title still has enough contrast. */
  background: linear-gradient(180deg, transparent 45%, rgba(37, 145, 147, 0.72) 100%);
}

.service-image {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.service-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.service-title {
  position: relative;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
}

.service-tile p {
  position: relative;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.8;
}

.articles-section {
  gap: 1.25rem;
}

.articles-grid {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.92fr) minmax(0, 0.92fr) minmax(0, 1.15fr);
  grid-template-areas:
    "article-left-top article-feature article-feature article-right-top"
    "article-left-bottom article-feature article-feature article-right-bottom";
  gap: 1rem;
}

.article-tile {
  min-width: 0;
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: 1;
  min-height: 16rem;
  direction: rtl;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #e8e2d7;
  color: white;
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.08);
  isolation: isolate;
}

.article-tile:nth-of-type(2) {
  grid-area: article-right-top;
}

.article-tile:nth-of-type(3) {
  grid-area: article-right-bottom;
}

.article-tile:nth-of-type(4) {
  grid-area: article-left-top;
}

.article-tile:nth-of-type(5) {
  grid-area: article-left-bottom;
}

.article-tile-featured {
  grid-area: article-feature;
  aspect-ratio: auto;
  min-height: 100%;
}

.article-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(135deg, rgba(37, 145, 147, 0.18), rgba(37, 145, 147, 0.04)),
    linear-gradient(145deg, #f8f8f8 0%, #f1dc8b 48%, #d8e0d8 100%);
}

.article-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.article-tile:nth-of-type(2) .article-image,
.article-tile:nth-of-type(5) .article-image {
  background:
    linear-gradient(135deg, rgba(37, 145, 147, 0.16), rgba(37, 145, 147, 0.04)),
    linear-gradient(145deg, #e2ece6 0%, #f4e3a4 58%, #f8f8f8 100%);
}

.article-tile:nth-of-type(3) .article-image,
.article-tile:nth-of-type(4) .article-image {
  background:
    linear-gradient(135deg, rgba(37, 145, 147, 0.18), rgba(37, 145, 147, 0.04)),
    linear-gradient(145deg, #f8f8f8 0%, #e6d5bd 52%, #d7e5e4 100%);
}

.article-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 45%, rgba(37, 145, 147, 0.62) 100%);
}

.article-content {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
}

.article-tile-featured .article-content {
  padding: 1.35rem;
}

.article-title {
  font-weight: 700;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-excerpt {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.7;
}

.article-tile:not(.article-tile-featured) .article-excerpt {
  display: none;
}

.cta-card {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(2.2rem, 7vw, 6rem) 1.5rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.38), transparent 32%),
    radial-gradient(circle at bottom left, rgba(37, 145, 147, 0.08), transparent 36%),
    linear-gradient(135deg, #e84a8f 0%, #DE3F82 54%, #cc3475 100%);
  color: white;
  text-align: center;
  box-shadow: 0 24px 60px rgba(37, 145, 147, 0.12);
  overflow: hidden;
  margin-top: 50px;
}

.cta-card h2 {
  max-width: 36ch;
  margin: 6px 0;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.35;
}

.cta-card p {
  max-width: 43rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}

.cta-button {
  margin-top: 0.4rem;
  background: var(--accent-strong);
  color: white;
  border: 1px solid rgba(37, 145, 147, 0.14);
  box-shadow: 0 12px 30px rgba(37, 145, 147, 0.18);
}

.card h2,
.simple-page h1,
.hero h1 {
  margin-top: 0;
}

.page-hero {
  display: grid;
  gap: 0.65rem;
  width: 100vw;
  margin: 0 calc(50% - 50vw) 2.25rem;
  padding-block: 6.5rem 2.75rem;
  padding-inline: max(1rem, calc((100vw - var(--content-width)) / 2));
  border-radius: 0;
  /* Back close to the original bold pink (too pale once combined with a
     lighter base + a strong glow) — just a small white touch on the
     left, where the page-hero's h1/breadcrumb/summary (right-aligned
     under RTL) leave empty space. */
  background:
    radial-gradient(ellipse at left, rgba(255, 255, 255, 0.1), transparent 35%),
    linear-gradient(135deg, #e84a8f 0%, #DE3F82 55%, #cc3475 100%);
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.12);
}

.page-hero-compact {
  margin-bottom: 1.75rem;
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  line-height: 1.25;
  color: #fff;
}

.page-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  line-height: 1.6;
}

.page-breadcrumb a {
  color: #fff;
}

.page-breadcrumb span {
  white-space: nowrap;
}

.page-summary {
  width: 100%;
  max-width: none;
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.95;
}

/* .page-hero's background became a pink gradient with the panel/public
   header redesign, and its h1/breadcrumb were updated for that (white,
   translucent white) — .page-summary's color was missed, leaving the
   --muted token (tuned for the light page background) stranded on pink.
   Scoped here rather than changed on .page-summary itself, since that
   class is also used outside .page-hero (e.g. test_start.html's white
   intro-text card), where the original --muted color is correct. */
.page-hero .page-summary {
  color: rgba(255, 255, 255, 0.88);
}

.blogs-page {
  padding-bottom: 1rem;
}

.services-page {
  padding-bottom: 1rem;
}

.challenges-page {
  padding-bottom: 1rem;
}

.challenges-wrap {
  position: relative;
}

.counselors-page {
  padding-bottom: 1rem;
}

.about-page {
  padding-bottom: 1rem;
}

.blogs-empty-state {
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: 4rem 1rem;
  text-align: center;
  color: var(--muted);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.post-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: rgba(37, 145, 147, 0.09);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 500;
}

.post-tags-cover {
  gap: 0.4rem;
}

.post-tag-cover {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  padding: 0.22rem 0.7rem;
  font-size: 0.83rem;
  backdrop-filter: blur(6px);
}

.blogs-toolbar {
  display: grid;
  gap: 1rem;
  padding: 0;
  margin-bottom: 1.4rem;
}

.blogs-controls {
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(10rem, 0.65fr) minmax(10rem, 0.65fr) minmax(0, 1.35fr);
  grid-template-areas: "category sort search";
  gap: 0.75rem;
}

.blogs-controls > * {
  min-width: 0;
}

.search-field {
  grid-area: search;
}

.blogs-filter-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.85rem;
  align-self: stretch;
  border-radius: 0.7rem;
  border: 1px solid rgba(37, 145, 147, 0.14);
  background: white;
  color: var(--accent-strong);
  transition: background 0.15s ease;
}

.blogs-filter-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

.blogs-filter-toggle:hover {
  background: rgba(37, 145, 147, 0.06);
}

.blogs-filter-toggle[aria-expanded="true"] {
  background: rgba(37, 145, 147, 0.1);
  border-color: rgba(37, 145, 147, 0.3);
}

.sort-field-category {
  grid-area: category;
}

.sort-field-sort {
  grid-area: sort;
}

@keyframes blogs-filter-field-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-field,
.sort-field {
  direction: rtl;
}

.search-field {
  position: relative;
}

.search-icon {
  position: absolute;
  right: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(37, 145, 147, 0.55);
  pointer-events: none;
}

.search-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.search-field input,
.sort-field select {
  width: 100%;
  min-height: 2.85rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(37, 145, 147, 0.14);
  background: white;
  color: var(--text);
  padding: 0.7rem 0.95rem;
  font: inherit;
  outline: none;
}

.sort-field select {
  padding-inline-start: 0.95rem;
  padding-inline-end: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23133333' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: 0.95rem 50%;
  background-size: 0.95rem 0.95rem;
  background-repeat: no-repeat;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.search-field input {
  padding-inline-start: 2.5rem;
  padding-inline-end: 0.95rem;
}

.search-field input:focus,
.sort-field select:focus {
  border-color: rgba(37, 145, 147, 0.28);
  box-shadow: 0 0 0 4px rgba(37, 145, 147, 0.06);
}

/* Custom dropdown for the public site (blogs page tag/sort filters) — a
   <details>/<summary> disclosure, same pattern as the panel's own custom
   selects (see .panel-select), but a separate class/rule set on purpose:
   public and panel styling should stay independent so a tweak to one
   never silently bleeds into the other. */
.site-select {
  position: relative;
  direction: rtl;
}

.site-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.85rem;
  padding: 0.7rem 0.95rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(37, 145, 147, 0.14);
  background: white;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-select-trigger::-webkit-details-marker {
  display: none;
}

.site-select-trigger:hover {
  border-color: rgba(37, 145, 147, 0.3);
}

.site-select[open] > .site-select-trigger {
  border-color: rgba(37, 145, 147, 0.28);
  box-shadow: 0 0 0 4px rgba(37, 145, 147, 0.06);
}

.site-select-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-select-chevron {
  flex-shrink: 0;
  color: var(--accent-strong);
  transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.site-select[open] .site-select-chevron {
  transform: rotate(180deg);
}

.site-select-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  left: 0;
  z-index: 20;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.14), 0 20px 45px rgba(33, 50, 58, 0.18);
  padding: 0.35rem;
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  gap: 0.1rem;
}

.site-select-option {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 0.55rem;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.site-select-option:hover {
  background: rgba(37, 145, 147, 0.08);
}

.site-select-option.active {
  background: rgba(37, 145, 147, 0.12);
  color: var(--accent-strong);
  font-weight: 600;
}

.blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.services-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.services-category-section {
  margin-bottom: 3rem;
  scroll-margin-top: 6rem;
}

.services-category-section:last-child {
  margin-bottom: 0;
}

.services-category-title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 700;
  color: var(--accent-strong);
  padding-bottom: 0.65rem;
  border-bottom: 2px solid rgba(37, 145, 147, 0.15);
  position: relative;
}

.services-category-title::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: 0;
  width: var(--accent-line-width, 3rem);
  height: 2px;
  background: var(--accent-strong);
  border-radius: 2px;
}

.services-category-wrap {
  position: relative;
}

.services-category-empty {
  margin: 0;
  padding: 1.5rem 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
  border: 1px dashed rgba(37, 145, 147, 0.2);
  border-radius: 0.75rem;
  text-align: center;
}

/* ── Services peek / expand ── */
.services-grid-clip {
  position: relative;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-mask-image: linear-gradient(
    to top,
    transparent 0%,
    rgba(0,0,0,0.03) 6%,
    rgba(0,0,0,0.10) 13%,
    rgba(0,0,0,0.25) 21%,
    rgba(0,0,0,0.48) 30%,
    rgba(0,0,0,0.70) 39%,
    rgba(0,0,0,0.87) 48%,
    rgba(0,0,0,0.96) 55%,
    black 62%
  );
  mask-image: linear-gradient(
    to top,
    transparent 0%,
    rgba(0,0,0,0.03) 6%,
    rgba(0,0,0,0.10) 13%,
    rgba(0,0,0,0.25) 21%,
    rgba(0,0,0,0.48) 30%,
    rgba(0,0,0,0.70) 39%,
    rgba(0,0,0,0.87) 48%,
    rgba(0,0,0,0.96) 55%,
    black 62%
  );
}

.services-expandable.is-expanded .services-grid-clip {
  -webkit-mask-image: none;
  mask-image: none;
}

.services-expand-wrap {
  display: flex;
  justify-content: center;
  padding-top: 1.1rem;
}

.services-expand-btn {
  gap: 0.4rem;
  padding: 0.55rem 1.6rem;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.services-expand-icon {
  display: inline-flex;
  align-items: center;
  transition: transform 0.35s ease;
}

.services-expandable.is-expanded .services-expand-icon {
  transform: rotate(180deg);
}


.about-page-card {
  display: grid;
  gap: 2rem;
  width: 100%;
  padding: 1.75rem;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at top right, rgba(222, 63, 130, 0.08), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border: 1px solid rgba(37, 145, 147, 0.09);
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.06);
}

@media (min-width: 900px) {
  .about-page-card {
    grid-template-columns: 17rem 1fr;
    align-items: start;
    gap: 3.5rem;
    padding: 3rem;
  }
}

.about-page-card-header {
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 900px) {
  .about-page-card-header {
    position: sticky;
    top: 6.5rem;
  }
}

.about-page-card-header h2 {
  margin: 0;
  color: var(--accent-strong);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.45;
}

.about-page-card-header h3 {
  margin: 0;
  color: rgba(37, 145, 147, 0.72);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.8;
}

.about-page-card-content {
  display: grid;
  gap: 1.35rem;
}

.about-page-card-content p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 2;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.about-page-card-content p:first-of-type {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 500;
}

.counselors-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.blog-card-vertical,
.service-card-vertical {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: white;
  border: 1px solid rgba(37, 145, 147, 0.09);
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.06);
}

.counselor-card-vertical {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: white;
  border: 1px solid rgba(37, 145, 147, 0.09);
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.06);
}

/* Whole-card click target: each card's own "more" link's ::after is
   stretched (via position:relative on the card above) to cover the full
   card, so clicking anywhere on services/blogs/tests/challenges/counselor
   cards navigates like clicking the visible button — a bigger, easier hit
   target, especially on mobile. Deliberately keeps the default cursor over
   the stretched area (cursor:default below) rather than pointer, so the
   card doesn't visually read as "the whole thing is a button" — only the
   real button (lifted above the overlay via z-index) shows the hand
   cursor, same as before. */
.service-card-more::after,
.blog-card-more::after,
.counselor-card-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: default;
}

.service-card-more-label,
.service-card-more-icon,
.blog-card-more-label,
.blog-card-more-icon,
.counselor-card-more-label,
.counselor-card-more-icon {
  position: relative;
  z-index: 2;
}

.blog-card-image,
.service-card-image {
  aspect-ratio: 1 / 0.8;
  overflow: hidden;
  background: linear-gradient(145deg, #f8f8f8 0%, #e8e2d7 100%);
}

.counselor-card-image {
  aspect-ratio: 1 / 0.8;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.26), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.14), transparent 22%),
    linear-gradient(135deg, #fef2f6 0%, #fce4ee 42%, #f7cfe0 72%, #f2bcd3 100%);
}

.test-card-visual {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.8;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.42), transparent 22%),
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.18), transparent 20%),
    linear-gradient(135deg, #fdf8fa 0%, #faeef4 38%, #f6e3ed 72%, #f1d8e7 100%);
}

.test-card-visual .test-card-icon {
  width: 2.7rem;
  height: 2.7rem;
  display: block;
  position: relative;
  z-index: 1;
  object-fit: contain;
  transform: scale(2.05);
  transform-origin: center;
  filter: brightness(0) saturate(0%) invert(22%) sepia(13%) saturate(1106%) hue-rotate(131deg) brightness(94%) contrast(92%);
  opacity: 0.95;
  /* The parent also carries .service-card-image (shared with real photo
     cards), whose img rule adds an inset frame meant to define a photo's
     edge — wrong here, since this is a small centered icon, not a
     full-bleed photo, and the frame showed as a faint square around it. */
  box-shadow: none;
}

.counselor-card-avatar {
  aspect-ratio: 1 / 0.8;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #fef2f6 0%, #fce4ee 46%, #f7cfe0 100%);
  color: white;
}

.counselor-card-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.counselor-card-avatar span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.counselor-card-avatar span svg {
  width: 42%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.blog-card-image img,
.service-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.blog-card-body,
.service-card-body {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.1rem 1.2rem;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
}

.counselor-card-body {
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem 1.1rem 1.2rem;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
}

.blog-card-footer,
.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  direction: rtl;
  gap: 0.75rem;
}

.counselor-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  direction: rtl;
  gap: 0.6rem;
}

.service-card-footer {
  justify-content: flex-end;
}

.test-card-footer {
  justify-content: space-between;
}

.blog-card-text,
.service-card-text {
  display: grid;
  gap: 0.45rem;
}

.counselor-card-text {
  display: grid;
  gap: 0.35rem;
}

.counselor-card-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.counselor-card-heading-row .counselor-badge {
  align-self: flex-end;
}

.blog-card-text h2,
.service-card-text h2 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--accent-strong);
}

.counselor-card-text h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--accent-strong);
}

.blog-card-text p,
.service-card-text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.85;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.counselor-card-text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.85;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.counselor-card-role {
  color: rgba(37, 145, 147, 0.82);
  font-size: 0.92rem;
  font-weight: 600;
}

.counselor-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: fit-content;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(222, 63, 130, 0.1);
  color: var(--accent);
}

.counselor-card-meta {
  display: none;
}

.counselor-card-label {
  color: rgba(37, 145, 147, 0.58);
  font-size: 0.78rem;
}

.counselor-card-specialization {
  color: var(--accent-strong);
  font-size: 0.9rem;
  font-weight: 500;
}

.blog-card-more {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  direction: ltr;
  gap: 0.35rem;
  width: fit-content;
  white-space: nowrap;
  padding: 0.32rem 0.68rem;
  font-size: 0.84rem;
}

.service-card-more {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  direction: ltr;
  gap: 0.35rem;
  width: fit-content;
  white-space: nowrap;
  padding: 0.32rem 0.68rem;
  font-size: 0.84rem;
}

.counselor-card-more {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  direction: ltr;
  gap: 0.35rem;
  width: fit-content;
  white-space: nowrap;
  padding: 0.32rem 0.68rem;
  font-size: 0.84rem;
}

.blog-card-date {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.test-card-duration {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.test-card-duration-icon {
  width: 0.92rem;
  height: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(37, 145, 147, 0.55);
}

.test-card-duration-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.service-card-more-label,
.blog-card-more-label,
.counselor-card-more-label {
  direction: rtl;
  unicode-bidi: plaintext;
}

.service-card-more-icon {
  width: 0.36rem;
  height: 0.36rem;
  display: inline-block;
  border-left: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: rotate(45deg);
  margin-top: 0.01rem;
  flex: 0 0 auto;
}

.counselor-card-more-icon {
  width: 0.36rem;
  height: 0.36rem;
  display: inline-block;
  border-left: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: rotate(45deg);
  margin-top: 0.01rem;
  flex: 0 0 auto;
}

.test-card-vertical .service-card-text h2 {
  font-size: 1.05rem;
}

.blog-card-more-icon {
  width: 0.36rem;
  height: 0.36rem;
  display: inline-block;
  border-left: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: rotate(45deg);
  margin-top: 0.01rem;
  flex: 0 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Service detail page ──────────────────────────────────── */

.service-detail-cover {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  position: relative;
  min-height: 26rem;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}

.service-detail-cover-image {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.service-detail-cover-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: blur(3px);
  transform: scale(1.04);
}

.service-detail-cover-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(37, 145, 147, 0.08) 0%,
    rgba(37, 145, 147, 0.55) 55%,
    rgba(37, 145, 147, 0.88) 100%
  );
}

.service-detail-cover-inner {
  width: min(var(--content-width), calc(100% - 2rem));
  margin: 0 auto;
  padding: 2.5rem 0;
  color: white;
  display: grid;
  gap: 0.65rem;
}

.service-detail-breadcrumb {
  color: rgba(255, 255, 255, 0.72);
}

.service-detail-breadcrumb a {
  color: rgba(255, 255, 255, 0.88);
}

.service-detail-cover-inner h1 {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 3.2rem);
  line-height: 1.25;
}

.service-detail-cover-lead {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.85;
}

.service-detail-page {
  padding-bottom: 1rem;
}

.service-detail-body {
  margin: 2.5rem 0 3rem;
}

.service-detail-prose {
  font-size: 1.05rem;
  line-height: 2.1;
  color: var(--text);
  text-align: justify;
  text-justify: inter-word;
}

.service-detail-prose p {
  margin-bottom: 1.4rem;
}

.service-detail-prose h2 {
  margin: 2rem 0 0.75rem;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.4;
  color: var(--accent-strong);
}

.service-detail-prose h3 {
  margin: 1.5rem 0 0.6rem;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--accent-strong);
}

.service-detail-prose h4 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.service-detail-prose ul,
.service-detail-prose ol {
  margin: 0 1.5rem 1.4rem 0;
  padding: 0;
  color: var(--text);
}

.service-detail-prose li {
  margin-bottom: 0.4rem;
  line-height: 1.95;
}

.service-detail-prose strong {
  font-weight: 700;
  color: var(--accent-strong);
}

.service-detail-prose a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-detail-prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

.service-detail-counselors {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .service-detail-cover {
    aspect-ratio: auto;
    min-height: 20rem;
    width: 100%;
    margin-inline: 0;
  }
}

/* ── Blog detail page ────────────────────────────────────── */

.blog-detail-cover {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  position: relative;
  min-height: 26rem;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}

.blog-detail-cover-image {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.blog-detail-cover-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: blur(3px);
  transform: scale(1.04);
}

.blog-detail-cover-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(37, 145, 147, 0.08) 0%,
    rgba(37, 145, 147, 0.55) 55%,
    rgba(37, 145, 147, 0.88) 100%
  );
}

.blog-detail-cover-inner {
  width: min(var(--content-width), calc(100% - 2rem));
  margin: 0 auto;
  padding: 2.5rem 0;
  color: white;
  display: grid;
  gap: 0.65rem;
}

.blog-detail-breadcrumb {
  color: rgba(255, 255, 255, 0.72);
}

.blog-detail-breadcrumb a {
  color: rgba(255, 255, 255, 0.88);
}

.blog-detail-cover-inner h1 {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 3.2rem);
  line-height: 1.25;
}

.blog-detail-cover-meta {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  direction: ltr;
  text-align: right;
}

.blog-detail-cover-lead {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.85;
}

.blog-detail-page {
  padding-bottom: 1rem;
}

.blog-detail-body {
  margin: 2.5rem 0 3rem;
}

.blog-detail-prose {
  font-size: 1.05rem;
  line-height: 2.1;
  color: var(--text);
  text-align: justify;
  text-justify: inter-word;
}

.blog-detail-prose p {
  margin-bottom: 1.4rem;
}

.blog-detail-prose h2 {
  margin: 2rem 0 0.75rem;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.4;
  color: var(--accent-strong);
}

.blog-detail-prose h3 {
  margin: 1.5rem 0 0.6rem;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--accent-strong);
}

.blog-detail-prose h4 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.blog-detail-prose ul,
.blog-detail-prose ol {
  margin: 0 1.5rem 1.4rem 0;
  padding: 0;
  color: var(--text);
}

.blog-detail-prose li {
  margin-bottom: 0.4rem;
  line-height: 1.95;
}

.blog-detail-prose strong {
  font-weight: 700;
  color: var(--accent-strong);
}

.blog-detail-prose a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-detail-prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

@media (max-width: 600px) {
  .blog-detail-cover {
    aspect-ratio: auto;
    min-height: 20rem;
    width: 100%;
    margin-inline: 0;
  }
}

/* ── Counselor detail page ───────────────────────────────── */

.counselor-detail-header {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  position: relative;
  padding: 3rem 0 3.5rem;
  isolation: isolate;
  overflow: hidden;
}

.counselor-detail-header-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 80% 20%, rgba(222, 63, 130, 0.22), transparent 35%),
    radial-gradient(circle at 20% 80%, rgba(37, 145, 147, 0.18), transparent 35%),
    linear-gradient(135deg, #f8f8f8 0%, #fce4ee 55%, #e0f4f4 100%);
}

.counselor-detail-header-inner {
  display: grid;
  gap: 1.25rem;
}

.counselor-detail-breadcrumb {
  color: rgba(37, 145, 147, 0.72);
}

.counselor-detail-breadcrumb a {
  color: var(--accent-strong);
}

.counselor-detail-profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: center;
}

.counselor-detail-photo {
  width: min(14rem, 38vw);
  height: min(14rem, 38vw);
  border-radius: 1.75rem;
  overflow: hidden;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #fef2f6 0%, #fce4ee 46%, #f7cfe0 100%);
  box-shadow:
    0 24px 60px rgba(222, 63, 130, 0.15),
    0 0 0 4px rgba(255, 255, 255, 0.7);
}

.counselor-detail-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.counselor-detail-photo span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.counselor-detail-photo span svg {
  width: 45%;
  height: 45%;
}

.counselor-detail-identity {
  display: grid;
  gap: 0.6rem;
  align-content: center;
}

.counselor-detail-identity h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.25;
  color: var(--accent-strong);
}

.counselor-detail-role-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.counselor-detail-role {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
}

.counselor-detail-specialization {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.7;
}

.counselor-detail-reserve {
  margin-top: 0.35rem;
  width: fit-content;
  padding: 0.55rem 1.4rem;
  font-size: 0.97rem;
  border-radius: 0.65rem;
}

.counselor-detail-page {
  padding-bottom: 1rem;
}

.counselor-detail-section {
  margin: 2.5rem 0 2rem;
  padding: 2rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top right, rgba(222, 63, 130, 0.05), transparent 30%),
    linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border: 1px solid rgba(37, 145, 147, 0.09);
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.06);
}

.counselor-detail-section-title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--accent-strong);
  line-height: 1.4;
}

.counselor-detail-prose {
  font-size: 1.03rem;
  line-height: 2.05;
  color: var(--text);
  text-align: justify;
  text-justify: inter-word;
}

.counselor-detail-prose p { margin-bottom: 1.25rem; }

.counselor-detail-prose h2 {
  margin: 1.75rem 0 0.65rem;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--accent-strong);
}

.counselor-detail-prose h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.05rem;
  color: var(--accent-strong);
}

.counselor-detail-prose strong {
  font-weight: 700;
  color: var(--accent-strong);
}

.counselor-detail-prose ul,
.counselor-detail-prose ol {
  margin: 0 1.5rem 1.25rem 0;
  padding: 0;
}

.counselor-detail-prose li {
  margin-bottom: 0.35rem;
  line-height: 1.9;
}

.counselor-detail-services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.1rem;
}

.counselor-detail-service-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: rgba(37, 145, 147, 0.1);
  color: var(--accent-strong);
  font-size: 0.84rem;
  font-weight: 500;
  transition: background 0.2s ease;
}

.counselor-detail-service-tag:hover {
  background: rgba(37, 145, 147, 0.18);
}

.counselor-card-specialization-tag {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(37, 145, 147, 0.75);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .counselor-detail-profile {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1.5rem;
  }

  .counselor-detail-photo {
    width: min(12rem, 55vw);
    height: min(12rem, 55vw);
  }

  .counselor-detail-role-row {
    justify-content: center;
  }

  .counselor-detail-reserve {
    margin: 0.2rem auto 0;
  }

  .counselor-detail-section {
    padding: 1.25rem;
  }

  .counselor-detail-header {
    width: 100%;
    margin-inline: 0;
  }
}

/* ── Auth pages ───────────────────────────────────────────── */

.logout-form {
  margin: 0;
  padding: 0;
  display: contents;
}

.auth-page {
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: 2rem 0 4rem;
}

.auth-card {
  width: min(480px, 100%);
  padding: 2rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top right, rgba(222, 63, 130, 0.07), transparent 30%),
    linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border: 1px solid rgba(37, 145, 147, 0.09);
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.08);
  display: grid;
  gap: 1.5rem;
}

.auth-card form {
  display: grid;
  gap: 1.25rem;
}

.auth-card-header {
  display: grid;
  gap: 0.35rem;
  text-align: center;
}

.auth-card-header h1 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.35;
  color: var(--accent-strong);
}

.auth-card-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.form-fields {
  display: grid;
  gap: 1rem;
}

.form-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.form-field {
  display: grid;
  gap: 0.4rem;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.form-input {
  width: 100%;
  min-height: 2.85rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(37, 145, 147, 0.14);
  background: white;
  color: var(--text);
  padding: 0.7rem 0.95rem;
  font: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.form-input {
  min-height: auto;
  resize: vertical;
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  padding-left: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23259193' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

.form-input:focus {
  border-color: rgba(37, 145, 147, 0.28);
  box-shadow: 0 0 0 4px rgba(37, 145, 147, 0.06);
}

.form-input.error {
  border-color: rgba(180, 40, 40, 0.4);
}

/* Custom-select: replaces a plain <select>'s native (OS-chrome) dropdown
   with an on-brand popup list — the select itself stays in the DOM, hidden,
   as the real source of truth. */
.custom-select {
  position: relative;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: right;
  cursor: pointer;
}

.custom-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-chevron {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--accent-strong);
  transition: transform 0.15s ease;
}

.custom-select-trigger[aria-expanded="true"] .custom-select-chevron {
  transform: rotate(180deg);
}

.custom-select-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.4rem);
  right: 0;
  left: 0;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border-radius: 0.85rem;
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.12), 0 20px 50px rgba(33, 50, 58, 0.16);
  animation: cal-pop-in 0.15s ease-out;
}

.custom-select-option {
  display: block;
  width: 100%;
  text-align: right;
  padding: 0.6rem 0.75rem;
  border: none;
  border-radius: 0.6rem;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.12s ease-out;
}

.custom-select-option:hover,
.custom-select-option:focus-visible {
  background: rgba(37, 145, 147, 0.08);
  outline: none;
}

.custom-select-option[aria-selected="true"] {
  background: rgba(37, 145, 147, 0.14);
  color: var(--accent-strong);
  font-weight: 700;
}

/* ── Type-to-search combobox (static/js/site_combobox.js) ──────────────────
   Reuses .custom-select / .custom-select-list / .custom-select-option for the
   wrapper and the popup; only the text field, its chevron and the extras a
   searchable list needs are new. The list itself is placed by SitePopover. */

/* While open the list is moved to <body> (so no modal/scroll container can clip
   it) — it must then out-rank the modal backdrop (1300) and the date picker (1400). */
.combobox-list-portal {
  z-index: 1500;
}

.combobox-input {
  padding-left: 2.6rem;
  text-overflow: ellipsis;
  cursor: text;
}

.combobox-toggle {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--accent-strong);
  cursor: pointer;
}

.combobox-toggle:hover {
  background: rgba(37, 145, 147, 0.1);
}

.combobox-toggle svg {
  transition: transform 0.15s ease;
}

.combobox-input[aria-expanded="true"] ~ .combobox-toggle svg {
  transform: rotate(180deg);
}

.custom-select-option.combobox-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.custom-select-option.is-active {
  background: rgba(37, 145, 147, 0.1);
}

.custom-select-option.is-active[aria-selected="true"] {
  background: rgba(37, 145, 147, 0.18);
}

.combobox-option-title {
  flex: 1;
  min-width: 0;
}

.combobox-option-number {
  flex-shrink: 0;
  min-width: 1.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: 0.5rem;
  background: rgba(37, 145, 147, 0.1);
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.combobox-option-number-none {
  background: none;
}

.combobox-divider {
  margin: 0.4rem 0.35rem 0.25rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(37, 145, 147, 0.16);
  font-size: 0.75rem;
  color: var(--muted);
}

.combobox-divider:empty {
  padding-top: 0;
}

/* Number chip on the "order in the reception calendar" admin page. */
.rc-number {
  flex-shrink: 0;
  min-width: 2rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.6rem;
  background: rgba(37, 145, 147, 0.12);
  color: var(--accent-strong);
  font-weight: 700;
  text-align: center;
}

.rc-number-off {
  background: none;
  color: var(--muted);
}

.combobox-option-secondary {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
}

.combobox-option-clear {
  color: var(--muted);
}

.combobox-empty {
  padding: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

/* ── Reservations filter (templates/partials/reservation_filter_*.html) ──────
   One button replaces the old row of status chips + sort dropdown; it opens a
   popup holding every filter. Built from the site's own pieces — .cal-modal-*
   for the popup, .form-input fields, the shared combobox and Jalali picker. */

.button.secondary.rf-open {
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.4rem 1.05rem 0.4rem 0.9rem;
  background: #fff;
  color: var(--accent-strong);
  /* shadow-as-border ring + a hairline of depth, like the modals */
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.2), 0 1px 2px rgba(33, 50, 58, 0.06);
  transition-property: background-color, box-shadow, transform;
  transition-duration: 0.18s;
  transition-timing-function: ease-out;
}

.button.secondary.rf-open:hover {
  background: rgba(37, 145, 147, 0.07);
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.32), 0 6px 16px rgba(33, 50, 58, 0.08);
}

.button.secondary.rf-open:active {
  transform: scale(0.96);
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.32);
}

.rf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Active filters, each removable on its own. */
.rf-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.15rem 0 1rem;
}

.rf-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0 0.6rem 0 0.85rem;
  border-radius: 2rem;
  background: rgba(37, 145, 147, 0.09);
  box-shadow: inset 0 0 0 1px rgba(37, 145, 147, 0.2);
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition-property: background-color, box-shadow, color;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

/* the chip is 32px tall; extend the hit area to 40px without growing it */
.rf-chip::after {
  content: "";
  position: absolute;
  inset: -0.25rem 0;
}

.rf-chip svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* hovering signals "this removes it" */
.rf-chip:hover {
  background: rgba(180, 40, 40, 0.07);
  box-shadow: inset 0 0 0 1px rgba(180, 40, 40, 0.28);
  color: var(--danger);
}

.rf-chip:hover svg {
  opacity: 1;
}

.rf-clear {
  padding: 0.5rem 0.3rem;
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: underline;
  text-decoration-color: rgba(30, 30, 30, 0.25);
  text-underline-offset: 0.25em;
  transition: color 0.15s ease-out;
}

.rf-clear:hover {
  color: var(--accent-strong);
}

/* The popup */
.cal-modal-box.rf-box {
  /* (compound selector: .cal-modal-box is declared later in this file) */
  /* a little roomier than the default modal: more air between fields, and
     enough width that the dropdowns and the date picker feel comfortable */
  width: min(500px, 100%);
  padding: 1.6rem 1.7rem 1.75rem;
}

.rf-box:focus {
  outline: none;
}

.rf-box .cal-modal-header h3 {
  text-wrap: balance;
}

/* Month/year dropdowns in the Jalali date picker — the shared combobox in a
   compact size that fits the picker's header. */
.jdp-combobox {
  display: inline-block;
  width: auto;
}

.jdp-combobox .combobox-input {
  width: 6.2rem;
  min-height: 2rem;
  height: 2rem;
  padding: 0 0.6rem 0 1.7rem;
  border-radius: 0.5rem;
  border-color: rgba(37, 145, 147, 0.18);
  background: rgba(37, 145, 147, 0.05);
  color: var(--accent-strong);
  font-size: 0.85rem;
  font-weight: 700;
}

.jdp-combobox-year .combobox-input {
  width: 4.7rem;
}

.jdp-combobox .combobox-toggle {
  left: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
}

.jdp-combobox .combobox-toggle svg {
  width: 12px;
  height: 12px;
}

.rf-box .jdp-input {
  padding-left: 2.6rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23259193'%3E%3Cpath fill-rule='evenodd' d='M6 2a1 1 0 011 1v1h6V3a1 1 0 112 0v1h1a2 2 0 012 2v11a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zm-2 7v8h12V9H4z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat left 0.9rem center / 1.05rem;
}

.rf-box .form-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.rf-box .form-actions .button {
  flex: 1;
  min-height: 2.75rem;
}

/* Fields ease in one after another when the popup opens (split into chunks,
   ~50ms apart) — the fade-out on close stays a plain, quick fade. */
.rf-box .form-field,
.rf-box .form-actions {
  opacity: 0;
  transform: translateY(8px);
  transition-property: opacity, transform;
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.cal-modal-backdrop.open .rf-box .form-field,
.cal-modal-backdrop.open .rf-box .form-actions {
  opacity: 1;
  transform: none;
}

.cal-modal-backdrop.open .rf-box .form-field:nth-child(1) { transition-delay: 70ms; }
.cal-modal-backdrop.open .rf-box .form-field:nth-child(2) { transition-delay: 120ms; }
.cal-modal-backdrop.open .rf-box .form-field:nth-child(3) { transition-delay: 170ms; }
.cal-modal-backdrop.open .rf-box .form-actions { transition-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  .rf-box .form-field,
  .rf-box .form-actions {
    transform: none;
    transition-delay: 0s !important;
  }
}

.form-error {
  font-size: 0.82rem;
  color: var(--danger);
}

.input-error {
  border-color: var(--danger) !important;
}

.form-error-block {
  padding: 0.65rem 0.85rem;
  border-radius: 0.6rem;
  background: rgba(180, 40, 40, 0.07);
  border: 1px solid rgba(180, 40, 40, 0.18);
}

.form-hint {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
}

.form-hint-error {
  color: #b23a3a;
}

#summary-count {
  font-variant-numeric: tabular-nums;
}

.auth-submit {
  width: 100%;
  min-height: 2.85rem;
  font-size: 1rem;
}

.auth-alt {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.auth-alt a {
  color: var(--accent-strong);
  font-weight: 600;
}

.otp-boxes {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  direction: ltr;
}

.otp-box {
  width: 3rem;
  height: 3.4rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(37, 145, 147, 0.2);
  background: white;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--accent-strong);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  caret-color: transparent;
}

.otp-box:focus {
  border-color: rgba(37, 145, 147, 0.5);
  box-shadow: 0 0 0 4px rgba(37, 145, 147, 0.08);
}

.otp-box.error {
  border-color: rgba(180, 40, 40, 0.4);
}

.button-link {
  background: none;
  border: none;
  color: var(--accent-strong);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.button-link:disabled {
  color: var(--muted);
  cursor: default;
  text-decoration: none;
}

/* ── Dashboard ────────────────────────────────────────────── */

.dashboard-page {
  padding-bottom: 1rem;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1.25rem;
}

.dashboard-layout > aside {
  display: flex;
  align-self: start;
}

.profile-card {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  width: 100%;
  padding: 1.5rem;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at top right, rgba(222, 63, 130, 0.08), transparent 28%),
    linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border: 1px solid rgba(37, 145, 147, 0.09);
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.06);
}

.profile-avatar {
  width: 3.6rem;
  height: 3.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #fef2f6 0%, #fce4ee 55%, #f7cfe0 100%);
  color: white;
  font-size: 1.4rem;
  font-weight: 700;
}

.profile-name,
.profile-email {
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to left, black calc(100% - 1.5rem), transparent 100%);
  mask-image: linear-gradient(to left, black calc(100% - 1.5rem), transparent 100%);
}

.profile-name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent-strong);
  line-height: 1.4;
}

.profile-email {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  direction: ltr;
  text-align: right;
}

.profile-meta {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.profile-meta-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.profile-meta-label {
  flex: 0 0 auto;
  color: var(--muted);
}

.profile-meta-value {
  color: var(--text);
  font-weight: 500;
}

.profile-meta-empty {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.profile-card-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
}

.profile-edit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.85rem;
  border-radius: 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-strong);
  border: 1px solid rgba(37, 145, 147, 0.14);
  transition: background 0.2s ease;
}

.profile-edit-link:hover {
  background: rgba(37, 145, 147, 0.05);
}

.profile-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.42rem 0.85rem;
  border-radius: 0.65rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(180, 40, 40, 0.82);
  border: 1px solid rgba(180, 40, 40, 0.14);
  transition: background 0.2s ease, color 0.2s ease;
}

.profile-logout-btn:hover {
  background: rgba(180, 40, 40, 0.06);
  color: var(--danger);
}

.dashboard-main {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.dashboard-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1.5rem;
  min-width: 0;
  border-radius: 1.15rem;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border: 1px solid rgba(37, 145, 147, 0.09);
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.06);
}

.dashboard-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.dashboard-section-header h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-strong);
  padding-top: 0.2rem;
}

.dashboard-section-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Match the sort chips' height to the adjacent add (+) button's fixed
   2.1rem .button-icon square, so the row reads as one aligned control
   cluster instead of two different heights. */
.panel-sort-row .panel-filter-chip {
  display: inline-flex;
  align-items: center;
  height: 2.1rem;
  padding: 0 0.85rem;
}

.therapy-plan-card {
  gap: 0;
}

.therapy-plan-toggle {
  width: 100%;
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.therapy-plan-toggle h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* nested plan card inside a bigger section (e.g. the panel user-detail page),
   as opposed to .therapy-plan-card which is a full top-level section itself */
.therapy-plan-subcard {
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(37, 145, 147, 0.03);
  border: 1px solid rgba(37, 145, 147, 0.07);
}

.therapy-plan-subcard-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.therapy-plan-chips {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.therapy-plan-menu {
  position: relative;
}

/* .cal-modal-icon-btn (single class, declared later in this file) would
   otherwise win the specificity tie-break and keep its own idle background
   and color, so these combine both classes to guarantee they win instead. */
.cal-modal-icon-btn.therapy-plan-menu-btn {
  background: none;
  color: var(--muted);
}

.cal-modal-icon-btn.therapy-plan-menu-btn:hover {
  background: rgba(37, 145, 147, 0.1);
  color: var(--accent-strong);
}

.cal-modal-icon-btn.therapy-plan-menu-btn[aria-expanded="true"] {
  background: rgba(37, 145, 147, 0.16);
  color: var(--accent-strong);
}

/* The absolute/right:0 here is only the pre-JS baseline. Opening a menu hands
   it to SitePopover (static/js/popover_position.js), which switches it to
   position: fixed and places it against the real viewport — flipping upward,
   clamping horizontally — so it can't clip off-screen or under an ancestor's
   overflow. That's why there are no per-breakpoint direction patches. */
.therapy-plan-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  min-width: 180px;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.14), 0 20px 45px rgba(33, 50, 58, 0.18);
  padding: 0.35rem;
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

/* Flipped above its button: slide in from below instead of from above. */
.therapy-plan-menu-dropdown[data-placement="top"] {
  transform: scale(0.95) translateY(4px);
}

.therapy-plan-menu-dropdown.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

.therapy-plan-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: right;
  padding: 0.55rem 0.75rem;
  border: none;
  background: none;
  border-radius: 0.55rem;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.therapy-plan-menu-item svg {
  flex-shrink: 0;
}

.therapy-plan-menu-item:hover:not(:disabled) {
  background: rgba(37, 145, 147, 0.08);
}

.therapy-plan-menu-item-danger {
  color: var(--danger);
}

.therapy-plan-menu-item-danger:hover:not(:disabled) {
  background: rgba(180, 40, 40, 0.08);
}

.therapy-plan-menu-item:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.65;
}

.therapy-plan-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.therapy-plan-toggle[aria-expanded="true"] .therapy-plan-chevron {
  transform: rotate(180deg);
}

.therapy-plan-sessions {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.therapy-plan-sessions-inner {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.75rem;
}

.empty-state {
  display: grid;
  place-items: center;
  gap: 0.85rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  border-radius: 0.75rem;
  background: rgba(37, 145, 147, 0.03);
}

.reservation-item,
.test-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(37, 145, 147, 0.03);
  border: 1px solid rgba(37, 145, 147, 0.07);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* the flex wrappers nested inside a reservation-item row (drag handle +
   avatar + title/date) default to min-width:auto like any flex/grid item;
   without this, a text child refuses to wrap and instead overflows into
   the next grid column once the row is narrower than its content. Fixed
   widths set inline (avatar/icon dimensions) are unaffected since min-width
   only lowers the shrink floor, it never overrides an explicit width. */
.reservation-item *,
.test-item * {
  min-width: 0;
}

/* ...but the kebab dropdown is absolutely positioned (out of flow), so the
   reset above has no layout benefit for it — only the side effect of
   collapsing its own min-width back to 0 on rows that use it (e.g. the
   users list), since both rules share the same specificity and this one
   comes later. Restore it explicitly wherever the dropdown sits inside one
   of these rows. */
.reservation-item .therapy-plan-menu-dropdown,
.test-item .therapy-plan-menu-dropdown {
  min-width: 180px;
}

a.reservation-item:hover,
.reservation-item[data-res-detail]:hover,
a.test-item:hover {
  cursor: pointer;
  background: rgba(37, 145, 147, 0.08);
  border-color: rgba(37, 145, 147, 0.2);
}

.reservation-item-title,
.test-item-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.reservation-item-date,
.test-item-date {
  font-size: 0.82rem;
  color: var(--muted);
  grid-column: 1;
}

.reservation-status {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.reservation-status-pending {
  background: rgba(234, 179, 8, 0.15);
  color: #7a5f00;
}

.reservation-status-contacted {
  background: rgba(37, 145, 147, 0.1);
  color: var(--accent-strong);
}

.reservation-status-confirmed {
  background: rgba(34, 120, 70, 0.1);
  color: #227846;
}

.reservation-status-cancelled {
  background: rgba(180, 40, 40, 0.08);
  color: var(--danger);
}

/* ── Profile edit page ────────────────────────────────────── */

.profile-edit-page {
  padding-bottom: 1rem;
}

.profile-edit-card {
  max-width: 640px;
  padding: 2rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top right, rgba(222, 63, 130, 0.06), transparent 30%),
    linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border: 1px solid rgba(37, 145, 147, 0.09);
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.08);
}

.profile-edit-card form {
  display: grid;
  gap: 1.25rem;
}

.form-section-title {
  margin: 0.25rem 0 0.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(37, 145, 147, 0.55);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.profile-edit-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* ── Admin Panel ──────────────────────────────────────────────────────────── */

.panel-nav-toggle {
  display: none;
}

.panel-nav-collapse {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.panel-nav {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.panel-nav-section {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0 0.5rem;
}

.panel-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.55rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.panel-nav-link:hover {
  background: rgba(37, 145, 147, 0.07);
  color: var(--accent-strong);
}

.panel-nav-link.active {
  background: rgba(37, 145, 147, 0.11);
  color: var(--accent-strong);
  font-weight: 600;
}

.role-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.42rem 0.85rem;
  border-radius: 0.65rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--accent-strong);
  border: 1px solid rgba(37, 145, 147, 0.14);
  transition: background 0.2s ease, transform 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.role-switch-btn:hover {
  background: rgba(37, 145, 147, 0.05);
}

.role-switch-btn:active {
  transform: scale(0.96);
}

.panel-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.panel-stat-card {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border: 1px solid rgba(37, 145, 147, 0.09);
  border-radius: 1rem;
  padding: 1.15rem 1.15rem 1.25rem;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.45rem;
  box-shadow: 0 10px 24px rgba(33, 50, 58, 0.05);
  text-decoration: none;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.panel-stat-card:hover {
  border-color: rgba(37, 145, 147, 0.25);
  box-shadow: 0 16px 32px rgba(33, 50, 58, 0.09);
}

.panel-stat-icon {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: rgba(37, 145, 147, 0.1);
  color: var(--accent-strong);
}

.panel-stat-card-attention .panel-stat-icon {
  background: rgba(234, 179, 8, 0.18);
  color: #a17f00;
}

.panel-stat-value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.panel-stat-label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

.panel-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.76rem;
  font-weight: 600;
}

.panel-trend-up { color: #227846; }
.panel-trend-down { color: var(--danger); }
.panel-trend-flat { color: var(--muted); }

/* Content-management counts (services/counselors/challenges/etc.) — these
   barely change day to day and don't inform any decision, so they're quick
   nav shortcuts to their list pages rather than full stat cards competing
   for attention with the time-aware KPIs above. */
.panel-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.panel-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(37, 145, 147, 0.05);
  border: 1px solid rgba(37, 145, 147, 0.1);
  color: var(--text);
  font-size: 0.83rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.panel-quick-link:hover {
  background: rgba(37, 145, 147, 0.11);
  border-color: rgba(37, 145, 147, 0.25);
}

.panel-quick-link svg {
  color: var(--accent-strong);
  flex-shrink: 0;
}

.panel-quick-link-count {
  font-weight: 700;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

/* ── Dashboard insight cards (bar lists + the one line chart) ────────────── */

.panel-dashboard-grid {
  display: grid;
  /* min(420px, 100%) instead of a bare 420px — a fixed minimum forces a
     grid track wider than the viewport on any phone, causing the whole
     dashboard to scroll horizontally. Capping it at 100% lets the track
     shrink to a real single column below ~420px instead of overflowing. */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* Grid rows default to stretching every card to match the tallest sibling
   (e.g. a 5-row status breakdown next to a 1-row counselor-load card) —
   .dashboard-section is itself a nested grid with no explicit row sizing,
   so that extra height cascades into its content instead of just leaving
   blank space, visibly distorting a short card's one row. Each card sizes
   to its own content instead. */
.panel-dashboard-grid > .dashboard-section {
  align-self: start;
}

.panel-bar-list {
  display: grid;
  gap: 1rem;
}

.panel-bar-row {
  display: grid;
  gap: 0.4rem;
}

.panel-bar-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.panel-bar-row-label {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-bar-row-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong);
}

.panel-bar-row-pct {
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.panel-bar-row-risk {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--danger);
  background: rgba(180, 40, 40, 0.08);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}

.panel-bar-track {
  height: 0.6rem;
  border-radius: 999px;
  background: rgba(37, 145, 147, 0.08);
  overflow: hidden;
}

.panel-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-strong);
}

.panel-bar-fill-pending { background: rgb(234, 179, 8); }
.panel-bar-fill-contacted { background: var(--accent-strong); }
.panel-bar-fill-confirmed { background: #227846; }
.panel-bar-fill-cancelled { background: var(--danger); }

/* Shown the instant a range chip is clicked, in place of the chart's own
   .panel-line-chart-scroll, while the new range's data is still in flight —
   same 600x210 aspect ratio as the real <svg> so nothing jumps when the
   real chart replaces it. */
.panel-chart-skeleton {
  width: 100%;
  aspect-ratio: 600 / 210;
}

/* Range-chip swap (panel_dashboard.js): fades the chart card's content out,
   swaps the markup while invisible, then fades it back in — instead of a
   full page reload (which also used to jump-scroll the page). */
.panel-sessions-chart-inner {
  transition: opacity 0.16s ease;
}

.panel-sessions-chart-inner.panel-sessions-chart-fading {
  opacity: 0;
}

.panel-line-chart-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.panel-line-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  /* text-anchor start/end is direction-relative — force ltr so the axis
     labels (positioned with plain numeric x/y math) anchor predictably
     regardless of the page's own rtl direction. */
  direction: ltr;
}

.panel-line-chart-area {
  fill: rgba(37, 145, 147, 0.12);
}

.panel-line-chart-line {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel-line-chart-dot {
  fill: var(--accent-strong);
  stroke: #fff;
  stroke-width: 2;
}

.panel-line-chart-value {
  font-size: 10px;
  font-weight: 700;
  fill: var(--accent-strong);
  text-anchor: middle;
}

.panel-line-chart-baseline {
  stroke: var(--border);
  stroke-width: 1;
}

.panel-line-chart-axis-label {
  font-size: 9px;
  fill: var(--muted);
}

.panel-line-chart-x-label {
  text-anchor: middle;
}

.panel-line-chart-y-label {
  text-anchor: start;
  font-variant-numeric: tabular-nums;
}


.panel-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Custom filter dropdown for a long/growing option list (e.g. test types) —
   a chip row like .panel-filter-row doesn't scale past a handful of short
   labels and starts crowding the section heading once there are many, and a
   plain <select> looks like a stray system control next to everything else
   here. Visually matches .therapy-plan-menu-dropdown (the kebab menu).

   Built on native <details>/<summary> rather than a button + JS-toggled
   class: the closed state is what the browser paints on the very first
   frame, with no JS timing involved, so there's no flash of the panel being
   open before a script has a chance to hide it. panel_select_dropdown.js
   only adds click-outside/Escape-to-close on top — the open/close mechanism
   itself needs no JS at all. */
.panel-select {
  position: relative;
}

.panel-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 340px;
  padding: 0.6rem 0.9rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(37, 145, 147, 0.16);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.panel-select-trigger:hover {
  border-color: rgba(37, 145, 147, 0.32);
}

.panel-select[open] > .panel-select-trigger {
  border-color: rgba(37, 145, 147, 0.36);
  box-shadow: 0 0 0 4px rgba(37, 145, 147, 0.08);
}

.panel-select-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-select-chevron {
  flex-shrink: 0;
  color: var(--accent-strong);
  transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.panel-select[open] .panel-select-chevron {
  transform: rotate(180deg);
}

.panel-select-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  left: 0;
  z-index: 20;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.14), 0 20px 45px rgba(33, 50, 58, 0.18);
  padding: 0.35rem;
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  gap: 0.1rem;
}

.panel-select-option {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 0.55rem;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.panel-select-option:hover {
  background: rgba(37, 145, 147, 0.08);
}

.panel-select-option.active {
  background: rgba(37, 145, 147, 0.12);
  color: var(--accent-strong);
  font-weight: 600;
}

.panel-search-form {
  margin: 0.85rem 0 1.1rem;
}

.panel-search-form .search-field {
  width: 100%;
  max-width: 26rem;
}

/* AJAX-swapped list results (users.html) sit one level deeper than the
   .dashboard-section grid that normally spaces .reservation-item rows via
   its own `gap` — without this they'd render flush against each other. */
#users-list-container {
  display: grid;
  gap: 0.75rem;
}

.panel-filter-chip {
  padding: 0.25rem 0.7rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  background: rgba(37, 145, 147, 0.05);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.panel-filter-chip:hover {
  background: rgba(37, 145, 147, 0.1);
  color: var(--accent-strong);
}

.panel-filter-chip.active {
  background: rgba(37, 145, 147, 0.12);
  border-color: rgba(37, 145, 147, 0.3);
  color: var(--accent-strong);
  font-weight: 600;
}

.reservation-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.panel-detail-list {
  display: flex;
  flex-direction: column;
}

.panel-detail-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(37, 145, 147, 0.07);
  font-size: 0.9rem;
}

.panel-detail-row:last-child {
  border-bottom: none;
}

.panel-detail-label {
  flex: 0 0 150px;
  color: var(--muted);
  font-weight: 500;
}

.panel-detail-value {
  color: var(--text);
  font-weight: 600;
}

/* Questionnaire Q&A — one column, clearly separated cards */
.panel-qa-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.panel-qa-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(37, 145, 147, 0.04);
  border: 1px solid rgba(37, 145, 147, 0.09);
}

.panel-qa-question {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.panel-qa-answer {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.8;
  white-space: pre-line;
}

/* ── Session/reservation summaries ───────────────────────────────────────── */
/* Expand/collapse cards for written summaries. Built as a <button> +
   sibling panel (not native <details>/<summary>) specifically so the reveal
   can be animated — <details> snaps display:none<->block instantly with no
   way to transition it. JS (expandable_summary.js) drives the max-height
   transition and toggles the .open class. */
.expandable-toggle {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.session-summary-box {
  margin-top: 0.6rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  background: rgba(37, 145, 147, 0.04);
  border: 1px solid rgba(37, 145, 147, 0.09);
}

.session-summary-box > .expandable-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.session-summary-meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.session-summary-text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.8;
  white-space: pre-line;
  text-wrap: pretty;
  margin: 0.5rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(37, 145, 147, 0.1);
}

.session-summary-edit {
  position: relative;
  margin-top: 0.6rem;
}

/* Extend the edit button's hit area to ~40px tall without growing its
   visible pill — it's easy to under-size a small text button like this. */
.session-summary-edit::after {
  content: "";
  position: absolute;
  inset: -0.5rem;
}

/* A reservation/session row that has a written summary: the whole row is
   the expand trigger, so the row and its summary render as one card instead
   of two separately-bordered boxes stacked on top of each other.

   Grid (not an extra wrapper <div>) so an optional side action button
   (.reservation-item-expandable-action, e.g. panel/user_detail.html's
   delete-session button) can sit beside the toggle while both stay *direct*
   children — the toggle's own grid layout and expandable_summary.js's wiring
   both specifically target ":scope > .expandable-toggle", so nesting it one
   level deeper inside a flex wrapper silently breaks both. */
.reservation-item-expandable {
  display: grid;
  grid-template-columns: 1fr auto;
  border-radius: 0.75rem;
  background: rgba(37, 145, 147, 0.03);
  border: 1px solid rgba(37, 145, 147, 0.07);
  transition-property: background-color, border-color;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

.reservation-item-expandable > .expandable-toggle {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
}

.reservation-item-expandable > .reservation-item-expandable-action {
  grid-column: 2;
  align-self: center;
  margin-inline-end: 1rem;
}

.reservation-item-expandable > .session-summary-inner {
  grid-column: 1 / -1;
}

.reservation-item-expandable:hover {
  background: rgba(37, 145, 147, 0.06);
  border-color: rgba(37, 145, 147, 0.15);
}

.session-summary-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.open > .expandable-toggle .session-summary-chevron {
  transform: rotate(180deg);
}

.session-summary-inner {
  max-height: 0;
  overflow: hidden;
  transition-property: max-height;
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.reservation-item-expandable .session-summary-inner {
  padding: 0 1rem;
}

.reservation-item-expandable.open .session-summary-inner {
  padding: 0 1rem 0.85rem;
}

/* Compact history rows inside the calendar's session-view popup — the modal
   is a fixed ~420px wide regardless of screen size, too narrow for the wide
   pages' title/status side-by-side grid without cramming, so this stacks
   title above a date+status footer instead. */
.cal-history-item {
  padding: 0.7rem 0.85rem;
  border-radius: 0.7rem;
  background: rgba(37, 145, 147, 0.03);
  border: 1px solid rgba(37, 145, 147, 0.07);
  margin-bottom: 0.5rem;
}

.cal-history-item:last-child {
  margin-bottom: 0;
}

.cal-history-item-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent-strong);
  line-height: 1.6;
  text-wrap: pretty;
}

.cal-history-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.cal-history-item-date {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cal-history-item .session-summary-inner {
  padding-top: 0;
}

.cal-history-item.open .session-summary-inner {
  padding-top: 0.55rem;
}

/* The top-level "سابقه قبلی" toggle inside the calendar popup — same card
   shell as .session-summary-box, but its panel holds a dynamically-fetched
   list rather than static text. */
.cal-history-panel {
  max-height: 0;
  overflow: hidden;
  transition-property: max-height;
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.session-summary-box.open .cal-history-panel {
  padding-top: 0.5rem;
}

.panel-checkbox-list {
  display: grid;
  gap: 0.5rem;
  padding: 0.6rem 0;
}

.panel-checkbox-list--inline {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.panel-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  cursor: pointer;
}

.panel-checkbox-item input[type="checkbox"],
.profile-edit-card input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid rgba(37, 145, 147, 0.35);
  border-radius: 0.3rem;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  vertical-align: middle;
}

.panel-checkbox-item input[type="checkbox"]:hover,
.profile-edit-card input[type="checkbox"]:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 145, 147, 0.1);
}

.panel-checkbox-item input[type="checkbox"]:checked,
.profile-edit-card input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.panel-checkbox-item input[type="checkbox"]:checked::after,
.profile-edit-card input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.panel-checkbox-item input[type="checkbox"]:focus-visible,
.profile-edit-card input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


.panel-count-badge {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(37, 145, 147, 0.07);
  padding: 0.2rem 0.65rem;
  border-radius: 2rem;
  font-variant-numeric: tabular-nums;
}

/* "جلسه ۴۶" — a client's lifetime session number with one doctor. Same
   pill family as .panel-count-badge, but teal text on a ring so it reads as a
   label on the row's title, not as one more status. */
.session-ordinal {
  display: inline-block;
  margin-inline-start: 0.5rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: rgba(37, 145, 147, 0.08);
  box-shadow: inset 0 0 0 1px rgba(37, 145, 147, 0.14);
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  vertical-align: 0.05em;
}

/* Per-doctor numbering summary above a client's plans (panel user page):
   "12 جلسه در سیستم + 34 جلسه پیش از سیستم" with the edit control. */
.session-numbering {
  margin-bottom: 0.85rem;
  padding: 0.35rem 1rem;
  border-radius: 0.75rem;
  background: rgba(37, 145, 147, 0.03);
  border: 1px solid rgba(37, 145, 147, 0.07);
}

.session-numbering-title {
  margin: 0.4rem 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.session-numbering-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
}

.session-numbering-row + .session-numbering-row {
  border-top: 1px solid rgba(37, 145, 147, 0.08);
}

/* controls stay on one line; the detail text is what wraps on a phone */
.session-numbering-row .therapy-plan-chips {
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.session-numbering-info {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.session-numbering-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.session-numbering-detail {
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.session-prior-preview {
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

/* Reusable rows inside a .reservation-item: the avatar+title/date row on one
   side, and the badges+kebab-menu row on the other. Pulled out of inline
   styles so the mobile breakpoint below can target them directly instead of
   guessing at wrapping behaviour. */
.reservation-item-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.reservation-item-info > *:last-child {
  min-width: 0;
  flex: 1;
}

.reservation-item-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.reservation-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.button-icon {
  position: relative;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  border-radius: 0.55rem;
  flex-shrink: 0;
}

.button-icon::before {
  content: "";
  position: absolute;
  inset: -0.35rem;
}

/* ── Panel identity header + section tabs ─────────────────────────────────
   Used on the admin user-detail and counselor client-history pages to
   replace one long scroll with a persistent identity summary + switchable
   section tabs. panel_tabs.js progressively enhances this: the server
   renders every .panel-tab-panel fully visible with no [hidden], so with
   JS disabled the page degrades to the old single-scroll layout exactly. */

.panel-identity-header {
  display: grid;
  gap: 0.75rem;
  padding: 1.35rem 1.5rem;
  border-radius: 1.15rem;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border: 1px solid rgba(37, 145, 147, 0.09);
  box-shadow: 0 18px 40px rgba(33, 50, 58, 0.06);
  margin-bottom: 1.25rem;
}

.panel-identity-header-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.panel-identity-header-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.panel-identity-header-case {
  font-size: 0.85rem;
  color: var(--muted);
}

.panel-identity-header .panel-detail-list {
  border-top: 1px solid rgba(37, 145, 147, 0.07);
  padding-top: 0.5rem;
}

.panel-identity-header .panel-detail-row {
  padding: 0.35rem 0;
  font-size: 0.85rem;
}

.panel-identity-header .panel-detail-label {
  flex: 0 0 110px;
}

.panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0;
}

.panel-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.15rem;
  border-radius: 2rem;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  background: rgba(37, 145, 147, 0.05);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.panel-tab svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.panel-tab:hover {
  background: rgba(37, 145, 147, 0.1);
  color: var(--accent-strong);
}

.panel-tab[aria-selected="true"] {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(37, 145, 147, 0.25);
}

.panel-tab[aria-selected="true"] svg {
  opacity: 1;
}

.panel-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.panel-tab-panel {
  display: grid;
  gap: 1.25rem;
}

.panel-tab-panel[hidden] {
  display: none;
}

/* Field grouping helpers inside .profile-edit-card */

.form-subsection-title {
  margin: 0.15rem 0 -0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-strong);
  opacity: 0.75;
}

.form-notes-box {
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  background: rgba(37, 145, 147, 0.03);
  border: 1px dashed rgba(37, 145, 147, 0.16);
}

/* Case number: pulled out of the field groups and shown first so staff can
   confirm they're on the right record at a glance, before reading anything
   else. Styled like any other field, not called out with heavy color. */
.form-case-number-field {
  display: grid;
  gap: 0.4rem;
  max-width: 260px;
  padding-bottom: 1rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

/* De-emphasized read-only account metadata (join date, last login) — kept
   low-priority and placed near the bottom of the form since staff rarely
   need it, unlike the fields above. Same .form-fields-row grid every other
   paired row in this form already uses. */
.form-meta-block {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(37, 145, 147, 0.08);
}

.form-meta-block .panel-detail-value {
  color: var(--muted);
  font-weight: 500;
}

/* Account-active toggle, styled as a switch instead of a checkbox. */
.form-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.75rem;
  background: rgba(37, 145, 147, 0.03);
  border: 1px solid rgba(37, 145, 147, 0.08);
  cursor: pointer;
}

.form-switch-row-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.form-switch {
  position: relative;
  flex-shrink: 0;
  width: 2.6rem;
  height: 1.45rem;
}

.form-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.form-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(30, 30, 30, 0.2);
  transition: background-color 0.15s ease;
}

/* The site is RTL: "off" rests on the right (the start side) and the thumb
   slides left to switch on — the mirror of a left-to-right switch. */
.form-switch-thumb {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1);
}

.form-switch input:checked ~ .form-switch-track {
  background: var(--accent-strong);
}

.form-switch input:checked ~ .form-switch-track .form-switch-thumb {
  transform: translateX(-1.15rem);
}

.form-switch input:focus-visible ~ .form-switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── End Admin Panel ──────────────────────────────────────────────────────── */

.form-actions {
  display: flex;
  gap: 0.75rem;
}

.form-actions-center {
  justify-content: center;
}

@media (max-width: 768px) {
  .nav {
    position: relative;
  }

  .brand {
    min-width: 0;
    gap: 0.3rem;
  }

  .brand-logo {
    height: 2.2rem;
  }

  .brand-text {
    font-size: 1rem;
    letter-spacing: 0.05em;
    margin-right: 0;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* Admin/counselor panel sidebar — collapse the nav links + logout behind
     a toggle so the page content isn't pushed a full screen down by the
     sidebar on every panel page. */
  .panel-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(37, 145, 147, 0.14);
    background: rgba(37, 145, 147, 0.05);
    color: var(--accent-strong);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
  }

  .panel-nav-toggle-icon {
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
  }

  .panel-nav-toggle[aria-expanded="true"] .panel-nav-toggle-icon {
    transform: rotate(180deg);
  }

  /* Positioning context for the open dropdown below — without this it
     anchors to the nearest positioned ancestor, which on a panel page is
     way up at .site-header, landing the menu in the wrong spot entirely. */
  .profile-card {
    position: relative;
  }

  .panel-nav-collapse {
    display: none;
  }

  /* display:none -> flex kept this out of the layout while closed, but
     opening it was still a normal-flow block, so it pushed the whole page
     (.dashboard-main and everything in it) down by the menu's height
     instead of floating over it. Absolute-positioned overlay instead,
     anchored right under the card exactly like a real dropdown. */
  .panel-nav-collapse.open {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: 0;
    z-index: 90;
    padding: 0.85rem;
    max-height: min(70vh, 26rem);
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(37, 145, 147, 0.14);
    border-radius: 1.25rem;
    box-shadow: 0 20px 45px rgba(33, 50, 58, 0.16);
    animation: panel-nav-collapse-in 0.18s cubic-bezier(0.2, 0, 0, 1);
  }

  @keyframes panel-nav-collapse-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* As a floating popover rather than a full-height sidebar, the desktop
     nav's left-flush icon+label rows read as oddly off-balance — center
     everything and give touch targets more room to breathe. */
  .panel-nav-collapse.open .panel-nav {
    width: 100%;
    gap: 0.3rem;
  }

  .panel-nav-collapse.open .panel-nav-section {
    text-align: center;
  }

  .panel-nav-collapse.open .panel-nav-link {
    justify-content: center;
    padding: 0.7rem 0.9rem;
    font-size: 0.92rem;
  }

  .panel-nav-collapse.open .profile-card-actions {
    width: 100%;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
  }

  .panel-tab {
    padding: 0.5rem 0.9rem;
    font-size: 0.84rem;
  }

  .panel-identity-header {
    padding: 1.1rem 1.15rem;
  }

  .panel-identity-header .panel-detail-label {
    flex: 0 0 96px;
  }

  .menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    left: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.15rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 20px 45px rgba(30, 30, 30, 0.18);
    padding: 0.6rem;
    z-index: 120;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }

  .site-header.menu-open .menu {
    display: flex;
  }

  .menu > a,
  .menu-item {
    width: 100%;
  }

  .menu > a,
  .menu-item > a {
    padding: 0.8rem 0.7rem;
    border-radius: 0.6rem;
  }

  .menu-item > a {
    flex: 1;
  }

  .menu > a.nav-active,
  .menu-item > a.nav-active {
    background: rgba(37, 145, 147, 0.07);
  }

  @media (hover: hover) {
    .menu > a:hover,
    .menu-item > a:hover {
      background: rgba(37, 145, 147, 0.07);
    }
  }

  .menu > a:active,
  .menu-item > a:active {
    background: rgba(37, 145, 147, 0.12);
  }

  .menu > a::after,
  .menu-item > a::after {
    display: none;
  }

  .nav-actions .guest-reserve-link {
    display: none;
  }

  .nav-actions .button-login {
    background: var(--accent);
    color: white;
    border-color: transparent;
    padding: 0.42rem 0.9rem;
    border-radius: 0.55rem;
    font-weight: 600;
  }

  .nav-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .section-action-heading {
    align-items: flex-start;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-tile {
    min-height: 16rem;
    aspect-ratio: 1.25;
  }

  .articles-grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .blogs-controls {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "search toggle"
      "category category"
      "sort sort";
    gap: 0.6rem;
  }

  .blogs-filter-toggle {
    display: inline-flex;
    grid-area: toggle;
  }

  .blogs-controls:not(.filters-open) .sort-field {
    display: none;
  }

  .blogs-controls.filters-open .sort-field {
    animation: blogs-filter-field-in 0.2s ease;
  }

  .page-summary {
    font-size: 0.94rem;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .page-summary.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .page-summary-toggle {
    display: inline-flex;
    margin: 0.1rem 0 0.6rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--accent-strong);
  }

  .blogs-grid {
    grid-template-columns: 1fr;
  }

  .services-page-grid {
    grid-template-columns: 1fr;
  }


  .counselors-grid {
    grid-template-columns: 1fr;
  }

  .about-page-card {
    padding: 1.15rem;
  }

  .article-tile,
  .article-tile-featured,
  .article-tile:nth-of-type(2),
  .article-tile:nth-of-type(3),
  .article-tile:nth-of-type(4),
  .article-tile:nth-of-type(5) {
    grid-area: auto;
    min-height: 16rem;
    aspect-ratio: 1.35;
  }

  .blog-card-image,
  .service-card-image {
    aspect-ratio: 1 / 0.65;
  }

  .blog-card-body,
  .service-card-body {
    gap: 0.3rem;
    padding: 0.85rem 1rem 0.9rem;
  }

  .blog-card-text,
  .service-card-text {
    gap: 0.2rem;
  }

  .blog-card-text p,
  .service-card-text p {
    -webkit-line-clamp: 1;
  }

  .blog-card-footer,
  .service-card-footer {
    margin-top: 0;
  }

  .blog-card-more,
  .service-card-more {
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
  }

  .counselor-card-avatar {
    aspect-ratio: 1 / 0.9;
  }

  .article-tile .article-excerpt {
    display: none;
  }

  .service-tile p {
    display: none;
  }

  .hero {
    width: 100%;
    margin-inline: 0;
  }

  .hero-inner {
    width: 100%;
  }

  .page-hero {
    padding-block: 2.75rem 1.5rem;
  }

  .footer-links {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer-brand {
    justify-items: center;
  }

  .footer-contact {
    justify-items: center;
  }

  .contact-item {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .contact-icon {
    display: none;
  }

  .footer-phone-list {
    justify-content: center;
  }

  .footer-socials {
    justify-content: center;
  }

  .cta-card {
    padding: 2rem 1rem;
  }

  .dashboard-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-fields-row {
    grid-template-columns: 1fr;
  }

  .auth-card {
    padding: 1.5rem;
  }

  .profile-edit-card {
    padding: 1.25rem;
  }

  .profile-edit-sections {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 980px) {
  .articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "article-feature article-feature"
      "article-right-top article-left-top"
      "article-right-bottom article-left-bottom";
  }

  .article-tile-featured {
    min-height: 22rem;
  }
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 0 0.5rem;
}

.button.pagination-btn {
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
}

.button.pagination-btn:hover {
  transform: none;
  box-shadow: inset 0 0 0 1.5px rgba(37, 145, 147, 0.9);
}

.button.pagination-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.pagination-info {
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 5rem;
  text-align: center;
}

/* ── Contact page ────────────────────────────────────────────────────────── */

.contact-page {
  padding-bottom: 3rem;
}

/* ── 2-column layout (map left, info right in RTL) ── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
  align-items: stretch;
}

.contact-map-col {
  display: flex;
  flex-direction: column;
}

.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* fallback when no map */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-radius: 1rem;
  background: var(--surface, #f8fafb);
  border: 1px solid rgba(37, 145, 147, 0.12);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.contact-card:hover {
  box-shadow: 0 6px 20px rgba(37, 145, 147, 0.1);
  transform: translateY(-2px);
}

.contact-card-address {
  cursor: default;
}

.contact-card-address:hover {
  transform: none;
  box-shadow: none;
}

.contact-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  background: rgba(37, 145, 147, 0.1);
  color: var(--accent, #259193);
  flex-shrink: 0;
}

.contact-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.contact-card-icon img {
  opacity: 0.75;
}

.contact-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.contact-card-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

.contact-card-value {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}

.contact-no-info {
  color: var(--muted);
  font-size: 0.95rem;
}

.contact-card-phones {
  cursor: default;
}

.contact-card-phones:hover {
  transform: none;
  box-shadow: none;
}

.contact-phone-list {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  direction: ltr;
  unicode-bidi: isolate;
  word-break: normal;
}

.contact-phone-link {
  color: inherit;
  text-decoration: none;
  direction: ltr;
  unicode-bidi: bidi-override;
  white-space: nowrap;
  display: inline-block;
}

.contact-phone-link:hover {
  color: var(--accent-strong, var(--accent));
}

.contact-phone-sep {
  padding: 0 0.55rem;
  opacity: 0.35;
  user-select: none;
}

.contact-map {
  flex: 1;
  min-height: 420px;
  width: 100%;
  border: none;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ── Error pages (404 / 500) ─────────────────────────────────────────── */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 10rem 1rem 4rem;
  text-align: center;
}

@media (max-width: 768px) {
  .error-page {
    padding-top: 7rem;
  }
}

.error-code {
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(37, 145, 147, 0.15);
  letter-spacing: -0.02em;
  user-select: none;
}

.error-message {
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .contact-map {
    min-height: 280px;
  }
}

/* ── Jalali date picker ──────────────────────────────────────────────────── */

.jdp-popup {
  position: absolute;
  /* Above .cal-modal-backdrop (1300) — this picker is now also opened from
     inside a calendar modal (the schedule-exception date field), so it must
     out-rank the modal it's nested in, not just page content. */
  z-index: 1400;
  width: 280px;
  background: #fff;
  border: 1px solid rgba(37, 145, 147, 0.18);
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(33, 50, 58, 0.2);
  padding: 0.85rem;
  font-family: "Peyda", Tahoma, Arial, sans-serif;
}

.jdp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
  margin-bottom: 0.75rem;
}

.jdp-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-strong);
}

.jdp-title-selects {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.jdp-month-select,
.jdp-year-select {
  direction: rtl;
  border: 1px solid rgba(37, 145, 147, 0.18);
  border-radius: 0.5rem;
  background: rgba(37, 145, 147, 0.05);
  color: var(--accent-strong);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
}

.jdp-year-select {
  min-width: 4.2rem;
}

/* Custom-select for the picker's own month/year fields — the native
   <select> stays in the DOM (hidden) as the source of truth. */
.jdp-custom-select {
  position: relative;
  direction: rtl;
}

.jdp-custom-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid rgba(37, 145, 147, 0.18);
  border-radius: 0.5rem;
  background: rgba(37, 145, 147, 0.05);
  color: var(--accent-strong);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  transition: background 0.12s ease-out;
}

.jdp-custom-select-trigger:hover {
  background: rgba(37, 145, 147, 0.1);
}

.jdp-custom-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jdp-custom-select-chevron {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--accent-strong);
  transition: transform 0.15s ease;
}

.jdp-custom-select-trigger[aria-expanded="true"] .jdp-custom-select-chevron {
  transform: rotate(180deg);
}

.jdp-custom-select-list {
  /* Fixed (not absolute) and positioned from JS in viewport coordinates —
     an absolutely-positioned list here could poke past the document's
     current bottom edge and grow page scrollHeight, causing a visible
     jump/scrollbar-flicker the instant it opens. Fixed never affects
     document flow, so that can't happen regardless of where it renders. */
  position: fixed;
  z-index: 1500;
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border-radius: 0.65rem;
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.14), 0 16px 40px rgba(33, 50, 58, 0.18);
}

.jdp-custom-select-option {
  display: block;
  width: 100%;
  text-align: right;
  white-space: nowrap;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 0.45rem;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.83rem;
  cursor: pointer;
  transition: background 0.1s ease-out;
}

.jdp-custom-select-option:hover {
  background: rgba(37, 145, 147, 0.08);
}

.jdp-custom-select-option[aria-selected="true"] {
  background: rgba(37, 145, 147, 0.14);
  color: var(--accent-strong);
  font-weight: 700;
}

.jdp-nav {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.6rem;
  background: rgba(37, 145, 147, 0.08);
  color: var(--accent-strong);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.jdp-nav:hover { background: rgba(37, 145, 147, 0.18); }

.jdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
  margin-bottom: 0.3rem;
}

.jdp-weekdays span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.2rem 0;
}

.jdp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}

.jdp-blank { aspect-ratio: 1; }

.jdp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.jdp-day:hover { background: rgba(37, 145, 147, 0.1); }

.jdp-day.today {
  color: var(--accent-strong);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.35) inset;
}

.jdp-day.selected {
  background: var(--accent-strong);
  color: #fff;
  font-weight: 700;
}

.jdp-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(37, 145, 147, 0.1);
  font-size: 0.85rem;
  color: var(--muted);
}

.jdp-time select {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.4rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(37, 145, 147, 0.25);
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

.jdp-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.jdp-actions button {
  flex: 1;
  padding: 0.5rem;
  border-radius: 0.6rem;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.jdp-clear {
  background: rgba(30, 30, 30, 0.05);
  color: var(--muted);
}
.jdp-clear:hover { background: rgba(30, 30, 30, 0.1); }

.jdp-confirm {
  background: var(--accent-strong);
  color: #fff;
}
.jdp-confirm:hover { background: #1f7d7f; }

.jdp-input { cursor: pointer; background: #fff; }

/* ── Reservation Modal ───────────────────────────────────────────────────── */

/* hidden attribute must win over explicit display rules (flex/grid) */
[hidden] {
  display: none !important;
}

.res-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(30, 30, 30, 0.55);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem 1rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.res-backdrop.open {
  display: flex;
  opacity: 1;
}

.res-dialog {
  position: relative;
  width: min(540px, 100%);
  max-height: calc(100vh - 5rem);
  display: flex;
  flex-direction: column;
}

.res-box {
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border: 1px solid rgba(37, 145, 147, 0.12);
  border-radius: 1.35rem;
  box-shadow: 0 32px 80px rgba(33, 50, 58, 0.18);
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateY(16px);
  transition: transform 0.22s;
}

.res-backdrop.open .res-box {
  transform: translateY(0);
}

.res-close {
  position: absolute;
  top: -3rem;
  left: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  z-index: 1;
  transition: background 0.15s;
}

.res-close::before {
  content: "";
  position: absolute;
  inset: -0.4rem;
}

.res-close:hover {
  background: rgba(255, 255, 255, 0.32);
}

.res-close svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Discard-answers confirm — nested above the reservation modal itself
   (higher z-index), styled like the rest of the site's own modal system
   instead of the browser's native confirm() dialog. */
.res-confirm-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(30, 30, 30, 0.55);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.18s;
}

.res-confirm-backdrop.open {
  display: flex;
  opacity: 1;
}

.res-confirm-box {
  width: min(460px, 100%);
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border: 1px solid rgba(37, 145, 147, 0.12);
  border-radius: 1.35rem;
  box-shadow: 0 32px 80px rgba(33, 50, 58, 0.22);
  padding: 2rem 2.1rem;
  transform: translateY(10px);
  transition: transform 0.18s;
}

.res-confirm-backdrop.open .res-confirm-box {
  transform: translateY(0);
}

.res-confirm-box .res-title {
  font-size: 1.15rem;
}

.res-confirm-text {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.res-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* The lift-on-hover from the base .button rule reads fine on a normal
   button in open space, but jittery this close together in a small,
   stacked pair — keep the hover feedback as just a color/background
   change, the same way .button-flat and .button.secondary already do
   elsewhere. */
.res-confirm-actions .button {
  transform: none !important;
  box-shadow: none !important;
}

.res-confirm-actions .button.primary:hover {
  background: var(--accent-strong);
}

.res-confirm-discard {
  color: #b42828;
}

.res-confirm-discard:hover {
  background: rgba(180, 40, 40, 0.07);
}

.res-header {
  padding: 1.5rem 1.5rem 0;
}

.res-stepper {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.res-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(37, 145, 147, 0.1);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.res-step-dot.active {
  background: var(--accent-strong);
  color: #fff;
}

.res-step-dot.done {
  background: rgba(34, 120, 70, 0.15);
  color: #227846;
}

.res-step-line {
  flex: 1;
  height: 2px;
  background: rgba(37, 145, 147, 0.12);
  border-radius: 1px;
  transition: background 0.2s;
}

.res-step-line.done {
  background: rgba(34, 120, 70, 0.3);
}

.res-counselor-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  background: rgba(37, 145, 147, 0.05);
  border: 1px solid rgba(37, 145, 147, 0.1);
  margin-bottom: 1.1rem;
}

.res-counselor-bar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(37, 145, 147, 0.15);
}

.res-counselor-bar-info .res-counselor-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.res-counselor-bar-info .res-counselor-role {
  font-size: 0.82rem;
  color: var(--muted);
}

.res-body {
  padding: 0 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.res-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text);
}

/* Counselor picker */
.res-counselor-list {
  display: grid;
  gap: 0.6rem;
  max-height: 320px;
  overflow-y: auto;
}

.res-counselor-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1.5px solid rgba(37, 145, 147, 0.12);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: right;
  width: 100%;
}

.res-counselor-card:hover,
.res-counselor-card.selected {
  border-color: var(--accent-strong);
  background: rgba(37, 145, 147, 0.04);
}

.res-counselor-card img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.res-counselor-card-name {
  font-weight: 600;
  font-size: 0.92rem;
}

.res-counselor-card-role {
  font-size: 0.8rem;
  color: var(--muted);
}

/* Session type cards */
.res-session-types {
  display: grid;
  gap: 0.6rem;
}

.res-session-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.05rem;
  border-radius: 0.9rem;
  border: 1.5px solid rgba(37, 145, 147, 0.14);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  width: 100%;
  text-align: right;
}

.res-session-card:hover {
  border-color: rgba(37, 145, 147, 0.4);
}

.res-session-card.selected {
  border-color: var(--accent-strong);
  background: rgba(37, 145, 147, 0.05);
  box-shadow: 0 0 0 1px var(--accent-strong) inset;
}

.res-session-card-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 0.7rem;
  background: rgba(37, 145, 147, 0.08);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.res-session-card.selected .res-session-card-icon {
  background: var(--accent-strong);
  color: #fff;
}

.res-session-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.res-session-card-label {
  font-weight: 600;
  font-size: 0.95rem;
}

.res-session-card-price {
  font-size: 0.82rem;
  color: var(--accent-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.res-session-card-check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 145, 147, 0.3);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.res-session-card-check::after {
  content: "";
  width: 6px;
  height: 10px;
  margin-bottom: 2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.6);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.res-session-card.selected .res-session-card-check {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.res-session-card.selected .res-session-card-check::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* Intake questionnaire */
.res-q-error {
  font-size: 0.83rem;
  color: var(--danger);
  background: rgba(180, 40, 40, 0.07);
  border: 1px solid rgba(180, 40, 40, 0.15);
  border-radius: 0.6rem;
  padding: 0.6rem 0.85rem;
}

.res-required {
  color: var(--accent);
}

.res-question.missing .form-input {
  border-color: var(--danger);
}

.res-question.missing .res-question-label {
  color: var(--danger);
}

.res-question {
  display: grid;
  gap: 0.45rem;
}

.res-question-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.res-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.res-radio-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(37, 145, 147, 0.2);
  background: #fff;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.res-radio-option:has(input:checked) {
  background: rgba(37, 145, 147, 0.1);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  font-weight: 600;
}

.res-radio-option input {
  display: none;
}

/* Summary */
.res-summary-card {
  border-radius: 0.85rem;
  background: rgba(37, 145, 147, 0.04);
  border: 1px solid rgba(37, 145, 147, 0.1);
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.55rem;
}

.res-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  gap: 1rem;
}

.res-summary-row-label {
  color: var(--muted);
}

.res-summary-row-value {
  font-weight: 600;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.res-summary-divider {
  height: 1px;
  background: rgba(37, 145, 147, 0.1);
}

.res-payable-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-strong);
  gap: 1rem;
}

.res-notice {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.7;
  padding: 0.75rem 1rem;
  border-radius: 0.65rem;
  background: rgba(222, 63, 130, 0.05);
  border: 1px solid rgba(222, 63, 130, 0.1);
}

.res-terms-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.res-terms-row input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent-strong);
}

.res-terms-row a {
  color: var(--accent-strong);
  text-decoration: underline;
}

/* Footer actions */
.res-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid rgba(37, 145, 147, 0.07);
}

.res-footer .button {
  min-width: 180px;
}

.res-footer .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Success screen */
.res-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 2.5rem 1.5rem 2rem;
}

.res-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(34, 120, 70, 0.1);
  color: #227846;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.res-success h2 {
  font-size: 1.1rem;
  margin: 0;
  color: var(--text);
}

.res-success p {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 340px;
  margin: 0;
  line-height: 1.75;
}

.res-success p + p {
  font-size: 0.82rem;
  opacity: 0.7;
}

.res-pay-error {
  color: var(--danger);
  font-size: 0.83rem;
  display: none;
}

/* Session types grid in counselor profile edit */
.session-types-grid {
  display: grid;
  gap: 0.65rem;
}

.session-type-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(37, 145, 147, 0.03);
  border: 1px solid rgba(37, 145, 147, 0.08);
}

.session-type-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.session-type-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-strong);
}

/* Hover feedback for a .reservation-item row. Deliberately no `cursor:
   pointer` here — plenty of these rows (users, blog, services, challenges,
   counselors) aren't clickable themselves, only their kebab menu is, and a
   pointer cursor over the whole row falsely promised it would do something
   on click. The genuinely clickable variants (a plain link, or one with
   data-res-detail wired to a click handler) get the pointer cursor from the
   more specific rule above instead. */
.reservation-item {
  transition: background 0.15s, border-color 0.15s;
}

.reservation-item:hover {
  background: rgba(37, 145, 147, 0.06);
  border-color: rgba(37, 145, 147, 0.15);
}

/* Drag-and-drop reordering (panel_reorder.js) */
[data-sortable-list] {
  display: grid;
  gap: 0.75rem;
}

.sortable-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.5rem;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  transition: background 0.15s, color 0.15s;
}

.sortable-handle:hover {
  background: rgba(37, 145, 147, 0.1);
  color: var(--accent-strong);
}

.sortable-item.sortable-dragging {
  opacity: 0.5;
  cursor: grabbing;
  user-select: none;
}

[data-sortable-list] [data-sortable-item] {
  cursor: default;
}

.reservation-item-meta {
  font-size: 0.8rem;
  color: var(--muted);
  grid-column: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.meta-sep {
  color: rgba(0,0,0,0.2);
  font-weight: 300;
  user-select: none;
}

/* Detail popup for reservation */
.res-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.88rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(37, 145, 147, 0.06);
}

.res-detail-row:last-child {
  border-bottom: none;
}

.res-detail-label {
  color: var(--muted);
  flex-shrink: 0;
}

.res-detail-value {
  font-weight: 600;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.res-appointment-highlight {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(34, 120, 70, 0.08);
  border: 1px solid rgba(34, 120, 70, 0.15);
  font-weight: 700;
  color: #227846;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Terms page */
.terms-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.terms-page h1 {
  margin-bottom: 1.5rem;
}

.terms-section {
  margin-bottom: 2rem;
}

.terms-section h2 {
  font-size: 1.05rem;
  color: var(--accent-strong);
  margin-bottom: 0.5rem;
}

.terms-section p,
.terms-section ul {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.9;
  margin: 0 0 0.5rem;
}

.terms-section a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Assessments: disclaimer */
.test-disclaimer {
  font-size: 0.85rem;
  line-height: 1.85;
  color: var(--muted);
  background: rgba(222, 63, 130, 0.05);
  border: 1px solid rgba(222, 63, 130, 0.15);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  margin: 1rem 0 1.5rem;
}

/* Assessments: question wizard */
.quiz-page {
  max-width: 720px;
  margin: clamp(4rem, 14vh, 8rem) auto clamp(3.5rem, 12vh, 7rem);
}

.quiz-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(37, 145, 147, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  padding: 1.5rem 1.5rem 1.75rem;
  view-transition-name: quiz-card;
}

.quiz-progress-track {
  height: 0.4rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.quiz-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-strong);
  view-transition-name: quiz-progress-fill;
}

.quiz-progress {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(37, 145, 147, 0.7);
  margin: 0 0 0.6rem;
}

.quiz-question-text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 1.25rem;
}

.quiz-error {
  font-size: 0.83rem;
  color: var(--danger);
  background: rgba(180, 40, 40, 0.07);
  border: 1px solid rgba(180, 40, 40, 0.15);
  border-radius: 0.6rem;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
}

.quiz-choices {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.quiz-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(37, 145, 147, 0.15);
  background: #fff;
  font-size: 0.92rem;
  line-height: 1.65;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.quiz-choice:has(input:checked) {
  background: rgba(37, 145, 147, 0.07);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  font-weight: 600;
}

.quiz-choice input {
  margin-top: 0.2rem;
  accent-color: var(--accent-strong);
  flex: 0 0 auto;
}

.quiz-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Question-to-question transition (View Transitions API, cross-document).
   The `@view-transition { navigation: auto; }` opt-in lives per-page in
   each assessment template's own <style> block, not here — main.css loads
   on every page, and this should only animate the assessment flow, not
   every navigation site-wide. These rules only take effect on pages that
   opted in and actually render a .quiz-card/.quiz-progress-fill; they're
   inert everywhere else. Browsers without View Transitions support just
   keep today's instant navigation. */
@media (prefers-reduced-motion: no-preference) {
  /* The header/footer/background are pixel-identical between two quiz
     pages, so the browser's default full-page cross-fade was fading the
     *entire* viewport through a transparent blend on every click — that
     "wash" over static chrome is what read as slow/laggy, not the card
     animation itself. Killing it means only the card actually moves;
     everything else holds rock still, which reads as instant + crisp. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  ::view-transition-old(quiz-card) {
    animation: quiz-card-leave 0.11s cubic-bezier(0.4, 0, 1, 1) both;
  }

  ::view-transition-new(quiz-card) {
    animation: quiz-card-enter 0.16s cubic-bezier(0, 0, 0.2, 1) both;
  }
}

@keyframes quiz-card-leave {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes quiz-card-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ===== Skeleton loading =================================================
   One shared shimmer look, reused everywhere something loads in after the
   page itself has rendered: content-image reveal (.img-skel, wired by
   static/js/img_skeleton.js on every page), the admin dashboard's
   sessions-trend chart, the reception/counselor calendar grid, the
   counselor's client-history list, and the public reservation modal's
   counselor picker. Each caller supplies its own size/shape; this only
   supplies the shimmer + the "stop and reveal real content" mechanics. */
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, rgba(30, 30, 30, 0.06) 25%, rgba(30, 30, 30, 0.13) 37%, rgba(30, 30, 30, 0.06) 63%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-circle {
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-line {
  height: 0.85em;
  border-radius: 999px;
}

.skeleton-block {
  border-radius: 0.65rem;
}

/* Content-image reveal: wrap an <img> in an element carrying .img-skel.
   img_skeleton.js adds .img-skel-active once it starts watching that img
   (only when one is actually present — an avatar's initials-fallback span
   never gets a shimmer), then .is-loaded once it has loaded or failed, and
   finally drops .img-skel-active shortly after so the shimmer stops
   animating for good instead of running invisibly forever underneath.
   :where() keeps this at zero specificity so it never fights a wrapper's
   own position — several of these (.service-image, .article-image,
   .service-detail-cover-image, .blog-detail-cover-image) are already
   position:absolute full-bleed layers, and forcing position:relative here
   would collapse them back to a tiny in-flow image. */
:where(.img-skel) {
  position: relative;
}

.img-skel.img-skel-active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30, 30, 30, 0.06) 25%, rgba(30, 30, 30, 0.13) 37%, rgba(30, 30, 30, 0.06) 63%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.img-skel.img-skel-active.is-loaded::before {
  opacity: 0;
}

.img-skel.img-skel-active > img {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.img-skel.img-skel-active.is-loaded > img {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .img-skel.img-skel-active::before {
    animation: none;
    background-position: 0 0;
  }
}

/* Assessments: result page */
.result-page {
  max-width: 920px;
  margin: 0 auto;
}

.result-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(37, 145, 147, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  padding: 2rem 2.5rem;
  text-align: center;
}

/* Inside the panel it sits directly on a .dashboard-section, which already
   supplies its own border + shadow — keeping both here doubled up into a
   visible card-inside-a-card outline. */
.dashboard-section .result-card {
  border: 0;
  box-shadow: none;
  padding: 0;
}

.result-band-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-strong);
  margin: 0 0 1.25rem;
}

.result-paragraph {
  font-size: 0.95rem;
  line-height: 2;
  color: var(--muted);
  text-align: right;
  max-width: 680px;
  margin: 1.75rem auto 1.5rem;
}

/* Assessments: result scale (visual interval showing score position) */
.result-scale {
  max-width: 640px;
  margin: 0 auto 0.5rem;
}

.result-scale-track {
  position: relative;
  display: flex;
  height: 0.85rem;
  border-radius: 999px;
  overflow: visible;
}

.result-scale-segment {
  height: 100%;
  opacity: 0.35;
  transition: opacity 0.15s;
}

.result-scale-segment:first-child {
  border-radius: 999px 0 0 999px;
}

.result-scale-segment:last-child {
  border-radius: 0 999px 999px 0;
}

.result-scale-segment.active {
  opacity: 1;
}

.result-scale-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.result-scale-marker-dot {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.result-scale-labels {
  display: flex;
  margin-top: 0.5rem;
}

.result-scale-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  padding: 0 0.2rem;
}

.result-scale-label.active {
  color: var(--text);
  font-weight: 700;
}

/* Assessments: per-subscale result (tests with no single meaningful total,
   e.g. GARS-3 -- one small bar per subscale instead of one banded gauge) */
.subscale-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 640px;
  margin: 1.75rem auto;
}

/* These result components (.result-paragraph/.result-scale/.subscale-list)
   were sized to float inside the public site's narrow centered container.
   The panel's .dashboard-section content column is much wider, so the same
   fixed caps leave a large empty margin on both sides instead of filling
   the card — let them use the section's actual width there instead. */
.dashboard-section .result-paragraph {
  max-width: none;
}

/* .result-scale/.subscale-list specifically end in a fully round pill cap
   (border-radius: 999px) rather than a square edge — flush against the
   card's own rounded corner, that pill end optically reads as poking past
   it even though the margin matches the paragraph text exactly. A small
   fixed inset (rather than max-width: none) keeps them nearly full-width
   while giving the rounded ends breathing room. */
.dashboard-section .result-scale,
.dashboard-section .subscale-list {
  max-width: calc(100% - 2rem);
}

.subscale-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}

.subscale-row-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.subscale-row-score {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.subscale-bar-track {
  height: 0.65rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.subscale-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-strong);
}

.result-score-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  background: rgba(37, 145, 147, 0.06);
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  margin-bottom: 1.5rem;
}

.result-score-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.result-score-max {
  font-size: 0.85rem;
  color: var(--muted);
}

.result-risk-notice {
  font-size: 0.88rem;
  line-height: 1.85;
  color: #7a3a1f;
  background: rgba(234, 130, 8, 0.1);
  border: 1px solid rgba(234, 130, 8, 0.25);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  text-align: right;
  margin-bottom: 1.5rem;
}

.result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Assessments: history list */
.history-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(37, 145, 147, 0.03);
  border: 1px solid rgba(37, 145, 147, 0.07);
  margin-bottom: 0.6rem;
}

.history-item-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.history-item-date {
  font-size: 0.82rem;
  color: var(--muted);
}

.history-item-score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.history-item-score-value {
  font-weight: 700;
  color: var(--accent-strong);
}

.history-item-band {
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(37, 145, 147, 0.07);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
}

.terms-section ul {
  padding-right: 1.25rem;
}

/* ── Panel calendar (therapy session scheduling) ─────────────────────────── */

.calendar-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.calendar-toolbar .form-field {
  max-width: 320px;
  width: 100%;
}

.calendar-shell {
  min-height: 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.calendar-placeholder {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 380px;
  border-radius: 0.9rem;
  background:
    repeating-linear-gradient(135deg, rgba(37, 145, 147, 0.05) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #fbfaf7 0%, #f6f4ef 100%);
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
  filter: saturate(0.6);
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.calendar-nav-months {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Teal (--accent-strong) outline button, filling solid on hover — same family
   as .calendar-nav-btn's color tokens and the site's .button hover lift, so it
   reads as part of both the calendar toolbar and the wider design system. */
.calendar-add-exception-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  border: 1.5px solid var(--accent-strong);
  background: rgba(37, 145, 147, 0.08);
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.calendar-add-exception-btn:hover {
  background: var(--accent-strong);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(37, 145, 147, 0.25);
}

.calendar-add-exception-btn:active {
  transform: scale(0.97);
  box-shadow: none;
}

.calendar-nav-title {
  min-width: 8.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.calendar-nav-btn {
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.65rem;
  background: rgba(37, 145, 147, 0.08);
  color: var(--accent-strong);
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition-property: background, scale;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

/* expand the hit area to ~40px without growing the visible button */
.calendar-nav-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 2.5rem;
  height: 2.5rem;
}

.calendar-nav-btn:hover { background: rgba(37, 145, 147, 0.18); }
.calendar-nav-btn:active { scale: 0.96; }

.calendar-scroll {
  overflow-x: visible;
  min-width: 0;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(var(--cal-cols, 7), 1fr);
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.calendar-weekdays span {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.2rem 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(var(--cal-cols, 7), 1fr);
  gap: 0.4rem;
}

/* each cell is a freshly-created node on every month switch, so this keyframe
   naturally replays on navigation, kept fast and unstaggered since reception
   clicks through months repeatedly all day; a per-cell stagger would drag. */
@keyframes cal-day-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.calendar-day {
  position: relative;
  /* sized for the busiest a cell ever gets now (3 rows: pills, or pills + the
     "N more" row) so every cell in the grid shares one height instead of the
     row growing per-day. */
  min-height: 128px;
  min-width: 0;
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  cursor: pointer;
  /* shadow-as-border: adapts to any background, unlike a flat border */
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.1);
  transition-property: box-shadow;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  animation: cal-day-in 0.15s ease-out;
}

.calendar-day:hover {
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.35), 0 6px 16px rgba(33, 50, 58, 0.07);
}

.calendar-day.is-blank {
  background: transparent;
  box-shadow: none;
  cursor: default;
}

/* Shown in place of the real grid while a month's sessions are being
   fetched (initial load and every month/therapist switch) — sized and
   spaced exactly like .calendar-day so the real grid drops in with no
   layout jump. */
.calendar-day.calendar-day-skeleton {
  background: linear-gradient(90deg, rgba(30, 30, 30, 0.05) 25%, rgba(30, 30, 30, 0.1) 37%, rgba(30, 30, 30, 0.05) 63%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  box-shadow: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .calendar-day.calendar-day-skeleton {
    animation: none;
    background-position: 0 0;
  }
}

.calendar-day.is-today {
  box-shadow: 0 0 0 1.5px var(--accent-strong);
}

.calendar-day-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.calendar-day.is-today .calendar-day-num {
  color: var(--accent-strong);
}

.calendar-day-sessions {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.calendar-day-more {
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.26rem 0.4rem;
  border-radius: 0.4rem;
  border: none;
  background: rgba(37, 145, 147, 0.06);
  color: var(--accent-strong);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.12s, filter 0.12s;
}

.calendar-day-more:hover {
  background: rgba(37, 145, 147, 0.14);
  filter: brightness(0.96);
}

.calendar-pill {
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 0.26rem 0.4rem;
  border-radius: 0.4rem;
  background: rgba(37, 145, 147, 0.12);
  color: var(--accent-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition-property: filter, scale;
  transition-duration: 0.12s;
}

.calendar-pill:hover {
  filter: brightness(0.94);
}

.calendar-pill:active {
  scale: 0.96;
}

.calendar-pill.is-awaiting_summary {
  background: rgba(234, 179, 8, 0.16);
  color: #7a5f00;
}

.calendar-pill.is-done {
  background: rgba(76, 175, 100, 0.14);
  color: #2e7d43;
}

.calendar-pill.is-missed {
  background: rgba(222, 63, 63, 0.12);
  color: #b23a3a;
}

.calendar-pill.is-cancelled {
  background: rgba(120, 120, 120, 0.1);
  color: var(--muted);
  text-decoration: line-through;
}

.calendar-day-add {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: rgba(37, 145, 147, 0.1);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.12s;
}

.calendar-day:hover .calendar-day-add {
  opacity: 1;
}

/* days the therapist doesn't normally work: new bookings are blocked, but an
   existing session on one (a legacy record, a one-off exception) stays visible
   and editable via its pill. */
.calendar-day.is-unavailable {
  background:
    repeating-linear-gradient(135deg, rgba(120, 120, 120, 0.06) 0 2px, transparent 2px 10px),
    #fff;
  cursor: not-allowed;
}

.calendar-day.is-unavailable .calendar-day-num {
  color: var(--muted);
}

.calendar-day.is-unavailable:hover {
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.1);
}

.calendar-day-lock {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  font-size: 0.72rem;
  opacity: 0.5;
  border: none;
  background: none;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.12s;
}

.calendar-day-lock:hover {
  opacity: 0.95;
}

/* a one-off exception (reception opening/closing a single date) overriding
   the therapist's normal weekly schedule for that date only */
.calendar-day-exception-tag {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 0.4rem;
  white-space: nowrap;
}

.calendar-day-exception-tag.is-open {
  background: rgba(37, 145, 147, 0.14);
  color: var(--accent-strong);
}

.calendar-day-exception-tag.is-closed {
  background: rgba(222, 63, 63, 0.12);
  color: #b23a3a;
}

.calendar-day-exception-undo {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

/* official Iranian holidays: a visual mark only, bookings are never blocked
   on one (a doctor may still choose to work a holiday), unlike is-unavailable. */
.calendar-day.is-holiday {
  background:
    repeating-linear-gradient(135deg, rgba(222, 63, 63, 0.07) 0 2px, transparent 2px 10px),
    #fff;
}

.calendar-day.is-holiday .calendar-day-num {
  color: #b23a3a;
}

.calendar-day-holiday-tag {
  position: absolute;
  top: 50%;
  left: 0.45rem;
  right: 0.45rem;
  transform: translateY(-50%);
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.1rem 0.35rem;
  border-radius: 0.4rem;
  background: rgba(222, 63, 63, 0.12);
  color: #b23a3a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ── Panel calendar modal ─────────────────────────────────────────────────── */

.cal-modal-backdrop {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(30, 30, 30, 0.5);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  /* visibility (not display:none) is what actually makes the exit fade play:
     display:none would hide the element in the same paint as the opacity
     change starts, so the fade-out would never be visible. */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.cal-modal-backdrop.open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.cal-modal-box {
  width: min(420px, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
  border-radius: 1.1rem;
  /* shadow-as-border ring + ambient depth, matching .res-box's own pattern */
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.12), 0 32px 80px rgba(33, 50, 58, 0.2);
  padding: 1.35rem;
  transform: translateY(16px);
  transition: transform 0.22s ease, opacity 0.14s ease;
  will-change: transform, opacity;
}

/* Crossfade for swapping content on an already-open modal (e.g. day list →
   a session's details, then back) instead of an instant, jarring innerHTML
   replacement. */
.cal-modal-box.cal-modal-swapping {
  opacity: 0;
  transform: translateY(6px);
}

.cal-modal-box-wide {
  width: min(640px, 100%);
}

/* Session edit popup: wide enough that the four status buttons each fit their
   label on one line (the longest, "در انتظار خلاصه‌نویسی", plus the check). */
.cal-modal-box-edit {
  width: min(800px, 100%);
}

.cal-modal-box-lg {
  width: min(560px, 100%);
  min-height: 420px;
}

/* Day-list popup: a fixed size that never changes shape between "just the
   list" and "list + add-form" — same height always, only the width grows
   when the form opens (so its inputs stop being squeezed), and both columns
   scroll internally instead of the box stretching taller. */
.cal-modal-box-daylist {
  width: min(780px, 100%);
  height: min(760px, calc(100vh - 3rem));
  display: flex;
  flex-direction: column;
}

.cal-modal-box-daylist.cal-modal-box-split {
  width: min(1040px, 100%);
}

.cal-modal-box-daylist .cal-modal-header {
  flex-shrink: 0;
}

.cal-day-list-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.85rem;
  flex: 1;
  min-height: 0;
}

.cal-day-list-body.cal-day-list-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 640px) {
  .cal-modal-box-daylist,
  .cal-modal-box-daylist.cal-modal-box-split {
    width: min(680px, 100%);
    height: auto;
    max-height: calc(100vh - 3rem);
  }
  .cal-day-list-body {
    flex: none;
  }
  .cal-day-list-body.cal-day-list-split {
    grid-template-columns: minmax(0, 1fr);
  }
  /* stacked on a narrow screen: the add-form goes above the day's list */
  .cal-day-list-body.cal-day-list-split .cal-day-list-add-panel {
    order: -1;
    /* the form is what reception is here for (the split view opens with it),
       so it takes its natural height and the whole popup scrolls (the popup
       box already does), instead of hiding "ثبت جلسه" behind an inner scroll */
    max-height: none;
    overflow: visible;
  }
  .cal-day-list-body.cal-day-list-split .cal-day-list,
  .cal-day-list-body.cal-day-list-split .cal-day-list-empty {
    max-height: min(22vh, 190px);
  }
  .cal-day-list,
  .cal-day-list-add-panel,
  .cal-day-list-empty {
    height: auto;
    max-height: min(45vh, 320px);
  }
}

.cal-modal-backdrop.open .cal-modal-box {
  transform: translateY(0);
}

.cal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cal-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--accent-strong);
}

/* Session-detail modals: the client's name as a clickable chip (profile
   icon + name) instead of a plain heading, so opening their profile reads
   as an obvious, generously-sized action rather than a hidden icon button. */
.cal-client-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(37, 145, 147, 0.09);
  color: var(--accent-strong);
  font-size: 0.95rem;
  font-weight: 700;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cal-client-chip:hover {
  background: rgba(37, 145, 147, 0.18);
  transform: translateY(-1px);
}

.cal-client-chip:active {
  transform: scale(0.97);
}

.cal-modal-close {
  position: relative;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: rgba(37, 145, 147, 0.08);
  color: var(--text);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: background, scale;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

/* expand the hit area to ~40px without growing the visible circle */
.cal-modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 2.5rem;
  height: 2.5rem;
}

.cal-modal-close:hover { background: rgba(37, 145, 147, 0.16); }
.cal-modal-close:active { scale: 0.96; }

.cal-client-results {
  position: relative;
}

.cal-client-results-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.25rem);
  right: 0;
  left: 0;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.18), 0 20px 50px rgba(33, 50, 58, 0.16);
  max-height: 220px;
  overflow-y: auto;
}

.cal-client-result {
  display: block;
  width: 100%;
  text-align: right;
  padding: 0.55rem 0.75rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
  transition: background 0.12s ease-out;
}

.cal-client-result:hover { background: rgba(37, 145, 147, 0.08); }

.cal-day-list-add-panel {
  height: 100%;
  padding: 0.85rem;
  border-radius: 0.75rem;
  background: rgba(37, 145, 147, 0.05);
  border: 1px solid rgba(37, 145, 147, 0.12);
  overflow-y: auto;
  animation: cal-pop-in 0.18s ease-out;
}

.cal-day-list-add-title {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-strong);
}

.cal-day-list-add-panel .form-actions {
  display: flex;
  gap: 0.6rem;
}

.cal-day-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  height: 100%;
  overflow-y: auto;
}

.cal-day-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 100%;
  padding: 1.5rem 1rem;
  text-align: center;
}

.cal-day-list-empty-icon {
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(37, 145, 147, 0.1);
  color: var(--accent-strong);
}

.cal-day-list-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.cal-day-list-empty-sub {
  font-size: 0.86rem;
  color: var(--muted);
}

.cal-day-list-empty-add {
  margin-top: 0.7rem;
  padding: 0.65rem 1.6rem;
  font-size: 0.95rem;
  border-radius: 0.85rem;
}

.cal-day-list-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: none;
  border-radius: 0.65rem;
  background: rgba(37, 145, 147, 0.08);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.83rem;
  text-align: right;
  transition: filter 0.12s ease-out;
}

.cal-day-list-row:hover { filter: brightness(0.96); }

.cal-day-list-time {
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong);
}

.cal-day-list-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-day-list-status {
  flex-shrink: 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.cal-day-list-row.is-awaiting_summary { background: rgba(234, 179, 8, 0.16); }
.cal-day-list-row.is-awaiting_summary .cal-day-list-time { color: #7a5f00; }

.cal-day-list-row.is-done { background: rgba(76, 175, 100, 0.14); }
.cal-day-list-row.is-done .cal-day-list-time { color: #2e7d43; }

.cal-day-list-row.is-missed { background: rgba(222, 63, 63, 0.12); }
.cal-day-list-row.is-missed .cal-day-list-time { color: #b23a3a; }

.cal-day-list-row.is-cancelled {
  background: rgba(120, 120, 120, 0.1);
  color: var(--muted);
}
.cal-day-list-row.is-cancelled .cal-day-list-name { text-decoration: line-through; }

/* one-shot pop-in for feedback that appears via innerHTML swap; a keyframe
   is correct here (not a transition) since these nodes are freshly inserted,
   not toggled, each time they show up. */
@keyframes cal-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.cal-selected-client {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.65rem;
  background: rgba(37, 145, 147, 0.08);
  font-size: 0.85rem;
  margin-top: 0.4rem;
  animation: cal-pop-in 0.18s ease-out;
}

.cal-selected-client button {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  transition: color 0.12s ease-out;
}

.cal-selected-client button:hover {
  color: var(--accent-strong);
}

.cal-open-plan-note {
  font-size: 0.82rem;
  color: var(--accent-strong);
  background: rgba(37, 145, 147, 0.08);
  border-radius: 0.65rem;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  animation: cal-pop-in 0.18s ease-out;
}

/* "ثبت همه‌ی جلسات پلن" in the add-session form: the switch, then weekday
   chips (only the doctor's working days) and a one-line summary. */
/* The edit popup's date box is a click-to-open picker, not a typed field —
   a calendar icon and pointer cursor say so (it used to read as plain text). */
.form-input.cal-date-trigger {
  cursor: pointer;
  padding-left: 2.75rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23259193'><path fill-rule='evenodd' d='M6 2a1 1 0 011 1v1h6V3a1 1 0 112 0v1h1a2 2 0 012 2v11a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zm-2 7v8h12V9H4z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-position: left 0.9rem center;
  background-size: 1.1rem;
}

/* Session status in the edit popup: one-tap buttons instead of a dropdown.
   The chosen one is filled in its own colour (the same hues as the calendar
   pills) with a ring and a check, so it reads as "this is the status". */
.cal-status-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem;
}

.cal-status-option-label {
  white-space: nowrap;
}

/* phone: two columns, and the long label may wrap inside its button */
@media (max-width: 640px) {
  .cal-status-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cal-status-option-label {
    white-space: normal;
  }
}

.cal-status-option {
  --status-color: var(--accent-strong);
  --status-tint: rgba(37, 145, 147, 0.12);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 3rem;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 0.75rem;
  background: #fff;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(37, 145, 147, 0.16);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition-property: background-color, color, box-shadow, scale;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

.cal-status-option.is-awaiting_summary { --status-color: #7a5f00; --status-tint: rgba(234, 179, 8, 0.18); }
.cal-status-option.is-done { --status-color: #2e7d43; --status-tint: rgba(76, 175, 100, 0.16); }
.cal-status-option.is-missed { --status-color: #b23a3a; --status-tint: rgba(222, 63, 63, 0.13); }
.cal-status-option.is-cancelled { --status-color: #5c5c5c; --status-tint: rgba(120, 120, 120, 0.14); }

/* hover is a hint, not a selection: a light wash and the status colour on the
   text only — the chosen one alone gets the full tint, ring and check */
.cal-status-option:hover {
  background: rgba(37, 145, 147, 0.06);
  color: var(--status-color);
}

.cal-status-option:active {
  scale: 0.97;
}

.cal-status-option.is-selected,
.cal-status-option.is-selected:hover {
  background: var(--status-tint);
  color: var(--status-color);
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--status-color);
}

/* the check that marks the chosen one */
.cal-status-option.is-selected::before {
  content: "";
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  background-color: var(--status-color);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z' clip-rule='evenodd'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z' clip-rule='evenodd'/></svg>") center / contain no-repeat;
}

.cal-status-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* "تعداد کل جلسات" and "ساعت جلسه" share a row so the form needs less
   scrolling; when the count is hidden (single-session service, or continuing
   an open plan) the time simply takes the whole row. Wraps on a very narrow
   popup instead of squeezing the inputs. */
.cal-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.cal-field-row > .form-field {
  flex: 1 1 8rem;
  min-width: 0;
}

/* edit popup: the date (with its icon) needs more room than "16:00" */
.cal-field-row > .form-field.cal-field-date {
  flex: 3 1 9.5rem;
}

.cal-field-row > .form-field.cal-field-time {
  flex: 2 1 6.5rem;
}

.cal-repeat {
  display: grid;
  gap: 0.75rem;
}

.cal-repeat-body {
  display: grid;
  gap: 0.75rem;
  animation: cal-pop-in 0.18s ease-out;
}

.form-switch-row-text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.cal-weekday-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* .panel-filter-chip is styled for <a>; as a <button> it needs its own reset,
   and a phone-sized touch target. */
.cal-weekday-chip {
  font-family: inherit;
  cursor: pointer;
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.86rem;
}

.cal-weekday-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cal-repeat-summary {
  display: grid;
  gap: 0.15rem;
  margin-top: 0;
  font-variant-numeric: tabular-nums;
}

.cal-repeat-summary strong {
  font-weight: 600;
}

.cal-bulk-result {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.cal-bulk-result > * {
  margin-top: 0;
}

.cal-warning-box + .cal-open-plan-note,
.cal-open-plan-note + .cal-warning-box {
  margin-top: 0.5rem;
}

.cal-warning-box {
  font-size: 0.82rem;
  color: #a15a1f;
  background: rgba(255, 176, 32, 0.14);
  border-radius: 0.65rem;
  padding: 0.6rem 0.75rem;
  margin-top: 0.6rem;
  animation: cal-pop-in 0.18s ease-out;
}

.cal-error-box {
  font-size: 0.82rem;
  color: #b23a3a;
  background: rgba(222, 63, 63, 0.1);
  border-radius: 0.65rem;
  padding: 0.6rem 0.75rem;
  margin-top: 0.6rem;
  animation: cal-pop-in 0.18s ease-out;
}

/* ── Image cropper (image_cropper.js) ────────────────────────────────────── */
.cropper-stage {
  position: relative;
  width: 100%;
  max-width: 340px;
  /* Matches .counselor-card-avatar's real aspect ratio — cropping to a
     square here would look right in the modal but then get its top/bottom
     silently trimmed by object-fit: cover on the actual card. */
  aspect-ratio: 1 / 0.8;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1rem;
  background: #1e1e1e;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.15);
}

.cropper-stage:active {
  cursor: grabbing;
}

.cropper-stage img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.cropper-zoom-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 320px;
  margin: 0.9rem auto 0;
}

.cropper-zoom-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent-strong);
}

.cropper-zoom-icon {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  width: 1rem;
  text-align: center;
  user-select: none;
}

.image-crop-preview img {
  max-height: 80px;
  border-radius: 0.5rem;
  object-fit: cover;
  display: block;
}

.cal-no-results {
  font-size: 0.82rem;
  color: var(--muted);
  padding: 0.65rem 0.75rem;
  text-align: center;
}

@media (max-width: 640px) {
  /* Keep the same side-by-side grid as desktop (avatar+title on one side,
     badges/kebab on the other, vertically centered) instead of stacking
     into rows — stacking pushed the kebab menu to an orphaned row below
     the content. The info column truncates instead. */
  .reservation-item,
  .test-item {
    gap: 0.3rem 0.6rem;
  }

  .reservation-item-info {
    align-items: flex-start;
  }

  .reservation-item-title,
  .test-item-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 28px, black 100%);
    mask-image: linear-gradient(to right, transparent 0, black 28px, black 100%);
  }

  /* A title that carries the "جلسه N" tag wraps instead of truncating (the
     tag would otherwise be clipped away), and the tag drops its
     " با این درمانگر" tail — the full phrase stays in its tooltip. */
  .reservation-item-title:has(.session-ordinal) {
    white-space: normal;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .session-ordinal-suffix {
    display: none;
  }

  /* the title column is narrow beside the status pill — a long ordinal
     ("چهل و هشتم") wraps inside its pill instead of spilling over it */
  .session-ordinal-num {
    white-space: nowrap;
  }

  .session-ordinal {
    white-space: normal;
    max-width: 100%;
    margin-inline-start: 0;
    border-radius: 0.9rem;
  }

  .reservation-item-date,
  .test-item-date {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .reservation-item-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* the toggle button (title) fights the chips + "سابقه کامل" link (or,
     inside a user-detail page, the chips + kebab menu) for space on one
     row and gets squeezed to a sliver — give it its own row */
  .therapy-plan-card .dashboard-section-header,
  .therapy-plan-subcard .dashboard-section-header {
    flex-wrap: wrap;
  }

  .therapy-plan-card .therapy-plan-toggle,
  .therapy-plan-subcard .therapy-plan-toggle {
    flex-basis: 100%;
  }

  /* status-filter chip rows (reservations, test results, …) fight the
     section heading for space on one line and end up tangled together —
     give the heading its own row and let the chips wrap below it */
  .dashboard-section-header:has(.panel-filter-row) {
    flex-wrap: wrap;
  }

  .panel-filter-row {
    flex-basis: 100%;
  }

  .dashboard-section-header:has(.panel-select) {
    flex-wrap: wrap;
  }

  .panel-select {
    flex-basis: 100%;
  }

  .panel-select-trigger {
    width: 100%;
  }

  .calendar-day {
    min-height: 118px;
    padding: 0.3rem;
  }

  .calendar-scroll {
    overflow-x: auto;
    margin: 0 -0.25rem;
    padding: 0 0.25rem 0.4rem;
    -webkit-overflow-scrolling: touch;
  }

  /* The sessions-trend chart's axis/value text is set in plain CSS px
     inside the SVG's own coordinate space, so it scales down with the
     SVG's rendered width — at native width:100% on a phone (~300-340px
     against a 600px viewBox) 9-10px text shrinks to under 5px, unreadable.
     37.5rem (600px) matches the chart's native viewBox width exactly —
     a true 1:1 render, same text size as desktop — and
     .panel-line-chart-scroll handles the overflow, so labels stay legible
     and the chart scrolls horizontally instead of illegibly compressing.
     Same idiom as .calendar-scroll above. */
  .panel-line-chart-svg {
    width: 37.5rem;
  }

  .calendar-weekdays,
  .calendar-grid {
    /* scales down with fewer columns so a 1- or 2-day therapist doesn't force
       the same horizontal scroll a full 7-day week needs. */
    min-width: calc(34rem * var(--cal-cols, 7) / 7);
  }
}

.button.danger {
  color: var(--danger);
  border: 1px solid rgba(180, 40, 40, 0.18);
  background: rgba(180, 40, 40, 0.04);
}

.button.danger:hover {
  background: rgba(180, 40, 40, 0.09);
}

.cal-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cal-modal-icon-btn {
  position: relative;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 145, 147, 0.08);
  color: var(--text);
  transition-property: background, scale;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

/* expand the hit area to ~40px without growing the visible circle */
.cal-modal-icon-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 2.5rem;
  height: 2.5rem;
}

.cal-modal-icon-btn:active { scale: 0.96; }

/* A solid, filled circle (vs. the neutral ghost-circle close button next to
   it) so "add a session" reads as a distinct primary action, not just
   another close-style icon button. */
.cal-modal-icon-btn-add {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37, 145, 147, 0.3);
}

.cal-modal-icon-btn-add:hover {
  background: #1f7d7f;
}

.cal-modal-icon-danger {
  background: rgba(180, 40, 40, 0.09);
  color: var(--danger);
}

.cal-modal-icon-danger:hover {
  background: rgba(180, 40, 40, 0.16);
}

.cal-confirm-text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 0.4rem;
}

.calendar-day.is-view-only {
  cursor: default;
}

.calendar-day.is-view-only:hover {
  box-shadow: 0 0 0 1px rgba(37, 145, 147, 0.1);
}