/* =====================================================================
   TizCore – style.css (Consolidated / Clean)
   نکات:
   - توکن‌ها و رنگ‌های اصلی در :root
   - همه‌ی دابل‌کاری‌های قبلی حذف/ادغام شده
   - Slider, Cookie Info Panel, Captcha UI بدون نیاز به inline-style
   ===================================================================== */

/* ===== Base / Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Vazirmatn', sans-serif; }
html, body { height: 100%; }
body { background: #f9fafb; color: #1f2937; line-height: 1.7; font-size: 1rem; }

/* ===== Design Tokens ===== */
:root{
  --brand: #1e88e5;
  --ink: #0f172a;
  --text: #0f172a;
  --muted: #6b7280;
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #e5e7eb;
  --bg-soft: #f8fafc;

  --card-radius: 14px;
  --card-shadow: 0 6px 20px rgba(0,0,0,.06);
  --card-shadow-hover: 0 12px 28px rgba(0,0,0,.12);
  --lift: translateY(-4px);
  --radii: 14px;
  --shadow: 0 6px 20px rgba(0,0,0,.06);
  --shadow-hover: 0 12px 28px rgba(0,0,0,.12);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ===== Utilities ===== */
.text-center{ text-align:center; }
.align-start{ align-self:flex-start; }
.mt-1{ margin-top:1rem; }
.mt-1-5{ margin-top:1.5rem; }
.hidden{ display:none !important; }
.is-hidden{ display:none !important; }

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

/* ===== Header / Navbar ===== */
.main-header{
  background:#fff; border-bottom:1px solid #e5e7eb; padding:1rem 1.5rem;
  box-shadow:0 2px 4px rgba(0,0,0,.05); position:sticky; top:0; z-index:999;
}
.nav-container{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; position:relative;
}
.nav-right{ display:flex; align-items:center; gap:1.5rem; }
.logo-img{ height:40px; border-radius:50%; object-fit:cover; }
.main-nav{ display:flex; }
.main-nav ul{ list-style:none; display:flex; gap:1.5rem; }
.main-nav ul li a{
  text-decoration:none; color:#1f2937; font-weight:600; transition:color .3s ease;
}
.main-nav ul li a:hover{ color:#2563eb; }

.menu-toggle{ display:none; background:none; border:0; }

.account-menu-wrapper{ position:relative; display:inline-block; z-index:1001; }
.account-dropdown{
  display:none; position:absolute; background:#fff; top:36px; left:0; right:auto; z-index:1000;
  border-radius:.5rem; box-shadow:0 4px 12px rgba(0,0,0,.1); min-width:160px;
}
.account-dropdown a{
  display:block; padding:.6rem 1rem; text-decoration:none; color:#1f2937; font-weight:500;
}
.account-dropdown a:hover{ background:#f3f4f6; }
.account-dropdown.show{ display:block; }
.account-icon{ width:36px; height:30px; fill:none; stroke:#82878f70; stroke-width:1; }
.account-toggle{ border-radius:100%; }

/* Mobile nav */
@media (max-width:768px){
  .nav-right{ gap:1rem; justify-content:flex-end; }
  .account-menu-wrapper{ position:relative; z-index:10; }
  .nav-container{ position:relative; flex-wrap:wrap; display:flex; justify-content:space-between; align-items:center; }
  .account-dropdown{
    position:fixed; top:64px; left:1rem; right:auto; border-radius:.5rem; padding:.5rem 0; background:#fff;
    z-index:1100; box-shadow:0 4px 10px rgba(0,0,0,.1); min-width:180px;
  }
  .account-dropdown.show{ display:block; }
  .menu-toggle{ display:block; background:none; border:0; position:relative; z-index:1001; }
  .main-nav{
    display:none; position:absolute; top:60px; right:.5rem; background:#fff; width:180px; padding:1rem;
    border-radius:.75rem; box-shadow:0 0 12px rgba(0,0,0,.1); z-index:1000; text-align:right; flex-direction:column;
  }
  .main-nav.active{ display:flex; }
  .main-nav ul{ padding:0; margin:0; display:flex; flex-direction:column; gap:1rem; }
  .main-nav ul li a{ display:block; padding:.4rem 0; font-weight:600; color:#1f2937; text-decoration:none; }
  .main-nav ul li a:hover{ color:#2563eb; }
}

/* ===== Buttons ===== */
.btn-link,.btn-outline,.btn-secondary,.signup-btn{
  display:inline-block; padding:.65rem 1rem; border-radius:10px; font-weight:700; text-decoration:none;
}
.btn-link{ background:var(--brand); color:#fff; }
.btn-link:hover{ background:#1565c0; }
.btn-outline{ border:1px solid var(--brand); color:var(--brand); background:#fff; }
.btn-outline:hover{ background:#eef6ff; }

.btn-secondary{ background:#111827; color:#fff; }
.btn-secondary:hover{ background:#374151; }

.signup-btn{ background:#2563eb; color:#fff !important; transition:background .3s ease; }
.signup-btn:hover{ background:#1e40af; }

/* Rate button */
.rate-btn{
  display:inline-block; padding:.6rem 1.2rem; background:#222; color:#fff; border-radius:.5rem; border:0; cursor:pointer;
}
.rate-btn:hover{ background:#444; }

/* 404 buttons */
.error-404{ text-align:center; padding:5rem; }
.error-404 h1{ font-size:3rem; color:#c00; }
.error-404 p{ color:#6b7280; margin:0 0 20px; }
.error-404 .actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.btn404{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; text-decoration:none;
  border:1px solid #2563eb; background:#2563eb; color:#fff;
}
.btn404:hover{ background:#1d4ed8; }

/* حالت primary: سفید/تیره */
.btn404.primary{
  border-color:#e5e7eb; background:#111827; color:#fff;
}
.btn404.primary:hover{ background:#2b3438; }

@media (prefers-color-scheme:dark){
  .error-404 p{ color:#9ca3af; }
  .btn404.primary{ border-color:#374151; background:#111827; color:#e5e7eb; }
  .btn404.primary:hover{ background:#0b1220; }
}

/* ===== Hero / Sections ===== */
.hero{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: center;
  padding: 2.2rem 1rem;
  background: linear-gradient(180deg,#eef6ff,#fbfdff);
  direction: rtl;
}
.hero h1{
  font-size: 2rem;
  margin: .2rem 0 .6rem;
  color: var(--ink);
}
.hero p{ color:var(--muted); margin:0 0 1rem; }
.hero .muted{ color: var(--muted); }
.hero .btns{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .8rem;
  margin: .8rem 0 1rem;
}
.hero .teacher-photo img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radii);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* دو ستونه ← تک‌ستونه */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; text-align: center; }
  .hero .teacher-photo{ order: -1; max-width: 620px; margin: 0 auto; }
}

.section{ max-width:1100px; margin:1.6rem auto; padding:0 1rem; background:#fff; }
.section h2{ font-size:1.5rem; margin:1rem 0 .5rem; color:var(--text); }
.muted{ margin-top:.4rem; color:var(--muted); }
/* ---------- Sections (فقط صفحهٔ خانه) ---------- */
.section[aria-labelledby]{
  max-width: 1100px;
  margin: 1.6rem auto;
  padding: 0 1rem;
  background: var(--card);
}
.section[aria-labelledby] > .notice{
  background: #f0f6ff;
  color: #0f5fbf;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: .8rem 1rem;
  margin-top: 1rem;
}
/* ---------- Typographic tweaks ---------- */
.section[aria-labelledby] > h2{
  font-size: 1.5rem;
  margin: 1rem 0 .5rem;
  color: var(--ink);
}
.section[aria-labelledby] > .muted{ color: var(--muted); margin-top: .4rem; }
/* ---------- Helpers (دکمه‌ها کنار هم) ---------- */
.btns .btn-link,
.btns .btn-outline{
  border-radius: 10px;
  padding: .65rem 1rem;
  font-weight: 700;
  text-decoration: none;
}
.btns .btn-link{ background: var(--brand); color: #fff; }
.btns .btn-link:hover{ filter: brightness(.95); }
.btns .btn-outline{
  background: #fff;
  border: 1px solid var(--brand);
  color: var(--brand);
}
.btns .btn-outline:hover{ background: #eef6ff; }


/* ---------- Services ---------- */
.grid-5{
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 12px;
}
@media (max-width: 980px){ .grid-5{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .grid-5{ grid-template-columns: 1fr; } }

.service-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.service-card h3{ margin: .2rem 0 .35rem; font-size: 1.05rem; color: var(--ink); }
.service-card p{ color: var(--muted); font-size: .95rem; line-height: 1.9; }
@media (hover:hover){
  .service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }
}

/* ---------- Courses ---------- */
.courses{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
}
@media (max-width: 820px){ .courses{ grid-template-columns: 1fr; } }

.course-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radii);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.course-card .badge{
  display: inline-block;
  padding: .18rem .6rem;
  background: #eef6ff;
  color: #0f5fbf;
  border-radius: 999px;
  font-size: .82rem;
  margin-bottom: .4rem;
}
.course-card .course-meta{
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.9;
}
@media (hover:hover){
  .course-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }
}

/* ---------- Stats ---------- */
.stats{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
@media (max-width: 720px){ .stats{ grid-template-columns: repeat(2,1fr); } }
.stat{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat b{ display: block; color: var(--ink); font-size: 1.12rem; }

/* ===== Cards micro-interactions ===== */
.service-card,.course-card,.alumni-card{
  border-radius:var(--card-radius); box-shadow:var(--card-shadow);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease);
  will-change:transform; transform:translateZ(0);
}
@media (hover:hover) and (pointer:fine){
  .service-card:hover,.course-card:hover,.alumni-card:hover{
    transform:var(--lift); box-shadow:var(--card-shadow-hover);
  }
}
.service-card:active,.course-card:active,.alumni-card:active{ transform:translateY(-2px) scale(.995); }

/* ---------- Alumni (Drag slider) ---------- */
.alumni-wrap{ position: relative; }
.alumni-track{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 0 2px 8px;
  scrollbar-width: thin;
  cursor: grab;
  touch-action: pan-x;
}
.alumni-track.dragging{ cursor: grabbing; scroll-behavior: auto !important; }
.alumni-track::-webkit-scrollbar{ height: 8px; }
.alumni-track::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 99px; }

.alumni-card{
  flex: 0 0 auto;
  min-width: 240px;
  max-width: 260px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  scroll-snap-align: start;
  user-select: none;
  box-shadow: var(--shadow);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.alumni-card img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 10px;
  background: #f3f4f6;
  transition: transform .28s var(--ease);
}
.alumni-card .name{ font-weight: 700; color: var(--ink); margin: .4rem 0 0; }
.alumni-card .year{ color: var(--muted); font-size: .92rem; }
@media (hover:hover){
  .alumni-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }
  .alumni-card:hover img{ transform: translateY(-5px) scale(1.05); }
}
.alumni-card .muted{ color:#6b7280; font-size:.88rem; }

/* ---------- HOWTO (باکس راهنما؛ فاصلهٔ سمت راست فیکس شد) ---------- */
.howto{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.2rem;           /* فاصلهٔ داخلی کافی از سمت راست */
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  color: var(--ink);
}
.howto ol{
  margin: .25rem 0 .75rem;
  padding: 0 1.2rem 0 0;          /* تورفتگی عددها برای RTL */
  list-style: decimal;
  line-height: 1.9;
}
.howto li{ margin: .2rem 0; }
.howto .muted{ color: var(--muted); }


/* Optional nav buttons */
.slider-nav{ display:flex; justify-content:flex-end; gap:6px; margin:.4rem 0; }
.slider-btn{ background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:.4rem .6rem; cursor:pointer; }
.slider-btn:hover{ background:#f3f4f6; }

/* ===== Articles – List ===== */
.article-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem; padding:2rem;
}
.article-card{
  display:flex; flex-direction:column; background:#fff; border-radius:.75rem; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.08); text-decoration:none; color:inherit;
  max-width:100%; transition:transform .2s ease;
}
.article-card:hover{ transform:translateY(-4px); }
.article-thumb{ width:100%; height:180px; object-fit:cover; display:block; max-width:100%; aspect-ratio:16/9; }
.article-card-body{ padding:1rem; flex:1; }
.article-card-title{ font-size:1.2rem; font-weight:700; margin-bottom:.5rem; color:#111; }
.article-card-summary{ color:#6b7280; }
.article-card-meta{ font-size:.9rem; color:#777; margin-top:auto; }

/* ===== Article – Single ===== */
.article-container{
  max-width:800px; margin:2rem auto; padding:2rem; background:#fff; border-radius:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.1); direction:rtl;
}
.article-title{ font-size:1.8rem; font-weight:700; color:#333; margin-bottom:1rem; }
.article-image{ max-width:100%; height:auto; border-radius:.5rem; margin-bottom:1.5rem; display:block; }
.article-meta{ font-size:.9rem; color:#888; margin-bottom:1rem; }
.article-body{ font-size:1rem; line-height:2; color:#444; text-align:justify; text-align-last:right; }

/* Separators */
.divider{ margin:2rem 0; border:0; border-top:1px solid #eee; }

/* ===== Rating (Stars LTR) ===== */
.rating-section{ text-align:center; margin-top:2rem; }
.rating-title{ margin-bottom:1rem; font-weight:700; font-size:1.1rem; color:#111827; }
/* فرم ستاره‌ای برای AJAX سابمیت */
.star-rating-form{ display:inline-flex; flex-direction:column; align-items:center; gap:.5rem; }
/* پیام موفق/خطا زیر فرم امتیازدهی */
.rate-flash{ margin-top:.75rem; font-size:.9rem; }

.star-rating{
  direction:ltr; display:inline-flex; justify-content:center; flex-direction:row-reverse; gap:.25rem;
}
.star-rating input[type="radio"]{ display:none; }
.star-rating label{
  font-size:2.5rem; color:#ccc; cursor:pointer; transition:color .2s ease; line-height:1; user-select:none;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label{ color:#facc15; }

/* AJAX flash (بدون inline) */
.rate-flash{ margin-top:.75rem; font-size:.9rem; }
.rate-flash.is-ok{ color:green; }
.rate-flash.is-err{ color:#b91c1c; }

/* ===== Success / Error boxes ===== */
.success-message{
  background:#e5fbe5; color:#207520; padding:1rem; border-radius:.5rem; margin-bottom:1rem; text-align:center;
}
.error-message{
  background:#ffe5e5; color:#900; padding:1rem; border-radius:.5rem; margin-bottom:1rem;
}
.error-box{ text-align:center; color:red; padding:2rem; font-weight:600; }

/* ===== Contact / Comments ===== */
.contact-container{
  max-width:800px; margin:3rem auto; background:#fff; padding:2rem; border-radius:1rem;
  box-shadow:0 0 15px rgba(0,0,0,.05); text-align:right; direction:rtl;
}
.contact-title{ font-size:2rem; color:#1d4ed8; margin-bottom:1rem; }
.contact-text{ font-size:1rem; color:#4b5563; margin-bottom:2rem; }
.contact-list{ list-style:none; margin-bottom:2rem; }
.contact-list li{ margin-bottom:1rem; font-size:1rem; color:#333; }
.contact-list a{ color:#2563eb; text-decoration:none; }
.contact-list a:hover{ text-decoration:underline; }

.contact-narrow{ max-width:720px; margin:0 auto; padding:1rem; }
.contact-links{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.8rem; margin:.8rem 0 1.2rem;
}
.contact-form{
  background:#fff; border:1px solid #eee; border-radius:.75rem; padding:1rem;
  display:flex; flex-direction:column; gap:1rem;
}

.form-input{ width:100%; padding:.6rem; margin:.5rem 0 1rem; border-radius:.5rem; border:1px solid #ccc; font-size:1rem; }
.form-textarea{
  width:100%; padding:.6rem; margin:.5rem 0 1rem; border-radius:.5rem;
  border:1px solid #ccc; font-size:1rem; font-family:inherit; box-sizing:border-box;
}
/* ==== reCAPTCHA mobile fix: prevent clipping ==== */

/* ظرف‌های فرم/کپچا اجازه‌ی بیرون‌زدگی داشته باشن */
.contact-container,
.contact-form,
#loginForm,
#captcha-box {
  overflow: visible !important;
}

/* وقتی چالش باز شد (بدنه کلاس می‌گیره)، هیچ کلیپی نشه */
body.recaptcha-open .contact-container,
body.recaptcha-open .contact-container * {
  overflow: visible !important;
}

/* بعضی قالب‌ها روی والدها transform می‌دن و fixed کپچا رو می‌بُرن.
   هنگام بازبودن چالش، موقتاً transform رو خنثی کن. */
body.recaptcha-open * {
  transform: none !important;
}
/* ==== reCAPTCHA responsive base ==== */
#captcha-box.g-recaptcha{
  display:inline-block;
  width:100%;
  max-width:100%;
  /* برای RTL، مبدأ اسکیل از راست بالا باشد */
  transform-origin: right top;
}

/* در حالت باز شدن چالش (تصاویر)، اجازه‌ی بیرون‌زدگی بده */
body.recaptcha-open .contact-container,
body.recaptcha-open .contact-form,
body.recaptcha-open #loginForm,
body.recaptcha-open #captcha-box{
  overflow: visible !important;
}

/* اگر والدها transform دارند، در زمان چالش خنثی‌شان کن تا کلیپ نشود */
body.recaptcha-open *{
  transform: none !important;
}

/* کمی فاصلهٔ منطقی اطراف کپچا روی موبایل */
@media (max-width: 420px){
  #captcha-box.g-recaptcha{text-align: left; direction: ltr; margin-inline: 0; }
}

/* Comments */
.comments-section{ max-width:800px; margin:3rem auto 0; padding:1rem; direction:rtl; }
.comments-list{ list-style:none; display:flex; flex-direction:column; gap:1.5rem; }
.comment-item{ border:1px solid #eee; border-radius:.7rem; padding:1rem; }
.comment-header{ margin-bottom:.5rem; color:#374151; }
.comment-date{ color:#6b7280; font-weight:normal; }
.comment-text{ line-height:1.8; color:#444; }
.no-comments{ text-align:center; color:#777; margin-top:3rem; }
.comment-messages{ margin:.5rem 0; }
.comment-form{ display:flex; flex-direction:column; gap:1rem; }
.input-control,.textarea-control{
  padding:.7rem; border-radius:.4rem; border:1px solid #ccc; width:100%; font:inherit;
}
.input-control:focus,.textarea-control:focus{
  outline:none; border-color:#888; box-shadow:0 0 0 3px rgba(0,0,0,.05);
}

/* Honeypot (کاملاً مخفی) */
.honeypot{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:0 !important;
  border:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
  white-space:nowrap !important; opacity:0 !important; pointer-events:none !important; left:0 !important; top:0 !important;
}

/* ===== Footer ===== */
.site-footer, footer{
  text-align:center; padding:2rem; font-size:.9rem; color:#6b7280; background:#fff; border-top:1px solid #e5e7eb;
}
.footer-heading{ margin-top:2rem; }
.footer-address{ margin:.5rem 0 1rem; }
.map-wrapper{ border-radius:.75rem; overflow:hidden; margin:1rem 0; }
.map-wrapper iframe{ width:100%; height:350px; border:0; display:block; }
.footer-copy{ margin-top:1rem; font-size:.85rem; color:#555; }

/* ===== Article lists / actions ===== */
.article-links{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:2rem 0;
}
.article-links-secondary{ margin-top:1rem; }
.page-title{ text-align:center; margin-bottom:2rem; font-size:1.6rem; font-weight:700; }
.articles-filter{ text-align:center; margin-bottom:2rem; }
.select-control{ max-width:260px; display:inline-block; }
.empty-state{ text-align:center; color:#777; }
.empty-muted{ color:#9ca3af; }
.empty-lg{ font-size:1.1rem; }

/* ===== Signup page / forms ===== */
.section--signup{ padding:2rem; }
.signup-title{ font-size:2rem; font-weight:700; line-height:1.4; margin-bottom:1rem; text-align:center; }
@media (max-width:768px){ .signup-title{ font-size:1.5rem; } }
@media (max-width:480px){ .signup-title{ font-size:1.25rem; } }
.signup-text{ font-size:1.1rem; margin-bottom:2rem; text-align:center; color:#444; }
@media (max-width:768px){ .signup-text{ font-size:.95rem; } }
@media (max-width:480px){ .signup-text{ font-size:.9rem; } }
.signup-subtitle{ font-size:1.25rem; font-weight:600; margin:2rem 0 1rem; color:#333; }
@media (max-width:768px){ .signup-subtitle{ font-size:1.05rem; } }
@media (max-width:480px){ .signup-subtitle{ font-size:.95rem; } }
.signup-benefits{ font-size:1rem; list-style:inside square; padding:0 1rem; color:#333; line-height:2; }
@media (max-width:768px){ .signup-benefits{ font-size:.95rem; } }
@media (max-width:480px){ .signup-benefits{ font-size:.9rem; } }

#signupForm{
  max-width:500px; margin:0 auto; padding:1rem; background:#fff; border-radius:.6rem; box-shadow:0 2px 6px rgba(0,0,0,.1);
}
#loginForm {
    max-width: 500px;
    margin: 0 auto;
    padding: 1rem;
    background: #fff;
    border-radius: .6rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}
#signupForm label{ display:block; margin:.35rem 0 .35rem; font-weight:600; color:#222; }
#signupForm input,#signupForm select,#signupForm button{
  display:block; width:100%; margin-bottom:1rem; padding:.6rem; font-size:1rem; border:1px solid #ccc; border-radius:.4rem;
}
#signupForm input#phone{ direction:ltr; text-align:left; }
#signupForm .signup-btn{ background:#0077cc; color:#fff; border:0; cursor:pointer; font-weight:600; transition:background .25s ease; }
#signupForm .signup-btn:hover,#signupForm .signup-btn:focus{ background:#005fa3; }
@media (max-width:600px){
  #signupForm{ padding:.8rem; }
  #signupForm input,#signupForm select,#signupForm button{ font-size:.95rem; padding:.5rem; }
}
.signup-form-title{ text-align:center; margin:1.2rem 0 .8rem; font-size:1.1rem; color:#222; }

/* ===== Teacher section ===== */
.teacher-section{ background:#fff; }
.teacher-wrap{ max-width:900px; margin:0 auto; display:flex; flex-wrap:wrap; gap:2rem; align-items:center; }
.teacher-photo{ flex:1 1 300px; }
.teacher-photo img{
  display:block; margin:0 auto; max-width:100%; height:auto; border-radius:1rem; box-shadow:0 8px 24px rgba(0,0,0,.1);
}
.teacher-info{ flex:2 1 400px; min-width:0; }
.teacher-title{ color:#2563eb; margin-bottom:1rem; }
.teacher-desc{ line-height:2; color:#4b5563; text-align:justify; text-align-last:right; }
.teacher-note{ margin-top:1rem; color:#1f2937; }

/* ===== Flash messages ===== */
.flash{ margin:1rem 0; padding:.9rem 1rem; border-radius:.6rem; border:1px solid transparent; }
.flash.success{ background:#ecfdf5; border-color:#10b981; color:#065f46; }
.flash.error{ background:#fef2f2; border-color:#ef4444; color:#991b1b; }

/* ===== Captcha UI (reCAPTCHA explicit) ===== */
.captcha-wrapper{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.captcha-actions{ margin-top:.5rem; display:flex; align-items:center; gap:.5rem; }
.info-message{ color:#6b7280; font-size:.9rem; }
.btn-retry{ border:1px solid #e5e7eb; background:#fff; color:#111827; padding:.4rem .65rem; border-radius:.5rem; cursor:pointer; }
.btn-retry:hover{ background:#f9fafb; }
.captcha-spinner{
  width:18px; height:18px; border:2px solid #e5e7eb; border-top-color:#2563eb; border-radius:50%;
  animation:tcspin .8s linear infinite;
}
@keyframes tcspin{ to{ transform:rotate(360deg) } }
/* ==== reCAPTCHA mobile fit ==== */
#captcha-box{ max-width:100%; }
#captcha-box > div{ transform-origin:0 0; } /* مقیاس با JS ست می‌شود */
/* reCAPTCHA: اجازه بده بیرون نزنه/کلیپ نشه */
#captcha-box,
.captcha-wrapper,
.captcha-row {
  overflow: visible !important;
}

/* ظرف کپچا جای کافی داشته باشه؛ وسط‌چین */
#captcha-box { display:inline-block; max-width: 100%; }

/* اگر کارت/کانتینر والد transform نداره، نیازی نیست؛
   ولی اگر دیدی چالش بریده میشه، مطمئن شو هیچ ancestor نزدیکِ #captcha-box
   transform / filter / perspective نداره. */


/* ===== Cookie Info Panel (no inline styles needed) ===== */
.tc-info__backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9998; }
.tc-info{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:9999; }
.tc-info.tc-hidden,.tc-info__backdrop.tc-hidden{ display:none !important; }
.tc-info__box{
  max-width:680px; width:calc(100% - 2rem); background:#111; color:#fff; border-radius:12px;
  padding:1rem 1rem .9rem; box-shadow:0 20px 60px rgba(0,0,0,.35); line-height:1.7; position:relative;
}
.tc-info__title{ font-size:1.1rem; margin:.25rem 0 .5rem; text-align:right; }
.tc-info__content p{ margin:.4rem 0; }
.tc-info__list{ margin:.5rem 1rem .5rem 0; padding:0 1rem; list-style:disc; }
.tc-info__actions{ display:flex; gap:.5rem; justify-content:flex-start; margin:1rem 0 .8rem; }
.tc-info__close{ position:absolute; inset-inline-end:.75rem; top:.5rem; border:0; background:transparent; color:#fff; font-size:1.4rem; cursor:pointer; line-height:1; }
.tc-btn{ border:0; padding:.6rem .9rem; border-radius:.55rem; cursor:pointer; }
.tc-btn--accept{ background:#06c167; color:#fff; }
@media (prefers-reduced-motion:no-preference){
  .tc-info__box{ transform:translateY(8px); opacity:0; transition:opacity .2s ease, transform .2s ease; }
  .tc-info:not(.tc-hidden) .tc-info__box{ transform:translateY(0); opacity:1; }
}