/* ============================================================
   RESET & BASICS
============================================================ */

* {
  box-sizing: border-box;
  font-family: "Vazirmatn", sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  text-align: right;
  direction: rtl;
  color: #333;
}

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

img, video {
  max-width: 100%;
  display: block;
}

ul { margin: 0; padding: 0; list-style: none; }


/* ============================================================
      COLOR THEMING — VARIABLES
============================================================ */

/* 🎀 Girl Mode (Default) */
:root {
  --theme-main-1: #ff9bce;
  --theme-main-2: #c9a6ff;
  --theme-accent: #ff79c4;

  --theme-soft-1: #ffd6ec;
  --theme-soft-2: #fbe7ff;

  --theme-bg-light: #fff0fa;
  --theme-bg-gradient: linear-gradient(180deg,#d9f2ff 0%,#dcfff2 100%);
}

/* 🔵 Boy Mode */
body.boy-mode {
  --theme-main-1: #1b77c5;
  --theme-main-2: #1aa37a;
  --theme-accent: #47c1ff;

  --theme-soft-1: #c8f1ff;
  --theme-soft-2: #d6fff0;

  --theme-bg-light: #e2f7ff;
  --theme-bg-gradient: linear-gradient(180deg,#e2f7ff 0%,#e6ffe8 100%);
}


/* ============================================================
      HEADER — FULL LUX VERSION
============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  width: 100%;
}

.header-inner {
  max-width: 1350px;
  margin: auto;
  padding: 12px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.brand-title {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(90deg,var(--theme-main-1),var(--theme-main-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.menu {
  display: flex;
  gap: 18px;
  align-items: center;
}

/* Mobile menu should stay hidden on desktop */
.mobile-menu { display: none; }


.menu a {
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  color: #444;
  transition: .25s;
}

.menu a:hover {
  background: rgba(0,0,0,0.06);
}

.menu .cta {
  background: linear-gradient(90deg,var(--theme-main-1),var(--theme-main-2));
  color: white;
  border-radius: 30px;
}


.actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-btn {
  background: linear-gradient(90deg,#fbd1eb,#d9b7ff);
  border: none;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .25s;
}

body.boy-mode .login-btn {
  background: linear-gradient(90deg,#baf3ff,#a0ffe0);
}

.login-btn:hover {
  transform: translateY(-2px);
}


/* Theme Toggle Button */
.theme-toggle {
  border: none;
  background: rgba(255,255,255,0.8);
  padding: 7px 10px;
  border-radius: 14px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: .25s;
}

.theme-toggle:hover {
  background: rgba(255,255,255,1);
}


/* Desktop defaults for hamburger + mobile menu */
.menu-toggle{display:none;border:0;background:rgba(255,255,255,0.85);width:44px;height:44px;border-radius:14px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.10);align-items:center;justify-content:center;gap:4px;padding:8px;transition:.2s;}
.menu-toggle:hover{background:rgba(255,255,255,1);transform:translateY(-1px);}
.menu-toggle__line{display:block;width:20px;height:2px;background:#333;border-radius:2px;margin:3px 0;}
/* ============================================================
   HEADER MENU — SINGLE SOURCE (Desktop + Mobile)
   ============================================================ */
.nj-main-menu a{ white-space: nowrap; }

/* Desktop */
@media (min-width: 901px) {
  .nj-main-menu{ display:flex; }
}

/* Mobile drawer */
@media (max-width: 900px) {
  .nj-main-menu{
    display:none;
    position:absolute;
    left:16px;
    right:16px;
    top:78px;
    background:rgba(255,255,255,0.98);
    border:1px solid rgba(0,0,0,0.08);
    box-shadow:0 14px 40px rgba(0,0,0,0.12);
    border-radius:18px;
    padding:10px;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .nj-main-menu.is-open{ display:flex; }
  .nj-main-menu a{ padding:12px 10px; border-radius:12px; }
}


/* Mobile */
@media (max-width: 900px) {
  .desktop-menu{ display: none; }
  .menu-toggle{ display: inline-flex; }

  /* Mobile drawer */
  .mobile-menu{
    display:none;
    position:absolute;
    left:16px;
    right:16px;
    top:78px;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(10px);
    border:1px solid rgba(0,0,0,0.08);
    box-shadow:0 14px 40px rgba(0,0,0,0.12);
    border-radius:18px;
    padding:10px;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .mobile-menu.is-open{ display:flex; }
  .mobile-menu a{ padding:12px 10px; border-radius:12px; }
}



/* ============================================================
      FOOTER — FULL LUX VERSION
============================================================ */

#nini-footer {
  background: var(--theme-bg-gradient);
  margin-top: 64px;
  padding-top: 32px;
}

.footer-container {
  max-width: 1400px;
  margin: auto;
  padding: 0 22px;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.footer-logo {
  text-align: center;
  padding-bottom: 2px;
}

.footer-logo video {
  width: 105px;
  margin: auto;
  border-radius: 20px;
}

.footer-logo h2 {
  font-size: 22px;
  font-weight: 800;
  margin-top: 10px;
  background: linear-gradient(90deg,var(--theme-main-1),var(--theme-main-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-logo p {
  color: #4b4b4b;
  font-size: 14px;
  margin-top: 4px;
}


.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 22px;
}

.footer-box {
  background: rgba(255,255,255,0.85);
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  text-align: right;
}

.footer-box h3 {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--theme-main-1);
}

.footer-box ul li {
  margin-bottom: 6px;
}

.footer-box ul li a {
  font-size: 14px;
  color: #555;
  text-decoration: none;
}

.footer-box ul li a:hover {
  color: #333;
  text-decoration: underline;
}

.footer-box a img {
  margin: 0 5px;
}

/* Footer content helpers (address / contacts / socials) */
.footer-contact {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}

.footer-contact__item {
  display: block;
}

.footer-address {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: #555;
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #555;
  text-decoration: none;
  font-size: 14px;
  justify-content: flex-start;
  width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
}

.footer-social__link:hover {
  color: #333;
  text-decoration: underline;
}

.footer-social__link img {
  width: 24px;
  height: 24px;
}

.footer-social__handle {
  direction: ltr;
  unicode-bidi: plaintext;
}

.footer-enamad {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
}

.footer-enamad img {
  max-width: 140px;
  width: 140px;
  height: auto;
  display: block;
}

.footer-enamad__fallback {
  font-size: 12px;
  color: #555;
  text-decoration: underline;
}
.footer-enamad__fallback:hover {
  color: #222;
}
.footer-wave svg {
  width: 100%;
  height: 120px;
  display: block;
}

.footer-bar {
  text-align: center;
  padding: 12px 0;
  background: rgba(255,255,255,0.8);
  font-size: 14px;
  margin-top: -1px;
}



/* ============================================================
      BUTTONS — GLOBAL
============================================================ */

.btn-primary {
  background: linear-gradient(90deg,var(--theme-main-1),var(--theme-main-2));
  color: white;
  padding: 10px 22px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
}

.btn-secondary {
  background: rgba(255,255,255,0.8);
  border: 2px solid var(--theme-main-1);
  color: var(--theme-main-1);
  padding: 10px 22px;
  border-radius: 30px;
  cursor: pointer;
}



/* ============================================================
      INPUTS & FORMS
============================================================ */

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--theme-main-1);
  box-shadow: 0 0 0 2px rgba(255,140,200,0.3);
}

/* Boy mode: focus ring should match the blue/teal theme (avoid pink shadow) */
body.boy-mode input:focus,
body.boy-mode select:focus,
body.boy-mode textarea:focus {
  box-shadow: 0 0 0 2px rgba(27,119,197,0.25);
}



/* ============================================================
      SOFT CARD STYLE
============================================================ */

.soft-card {
  background: rgba(255,255,255,0.85);
  border-radius: 18px;
  padding: 20px;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}



/* ============================================================
      GRID SYSTEM
============================================================ */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}

@media (max-width: 850px) {
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   THEME SELECTOR — GIRL / BOY PILLS
============================================================ */

.theme-selector {
  display: flex;
  background: rgba(255,255,255,.8);
  border-radius: 40px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  gap: 4px;
}

.theme-pill {
  padding: 6px 14px;
  border-radius: 40px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: .25s;
  user-select: none;
}

.theme-pill:hover {
  transform: translateY(-2px);
}

/* انتخاب شده */
.theme-pill.selected {
  color: white;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

/* دختر */
.theme-pill.girl.selected {
  background: linear-gradient(90deg, #ff98d0, #d48bff);
}

/* پسر */
.theme-pill.boy.selected {
  background: linear-gradient(90deg,#6fd0ff,#5effc8);
  color: #0b3558; /* contrast on light-cyan gradient */
  text-shadow: 0 1px 2px rgba(255,255,255,0.45);
}


/* ============================================================
      UTILITY CLASSES
============================================================ */

.center { text-align: center; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.p-20 { padding: 20px; }
.rounded { border-radius: 16px; }
.shadow { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.bg-white { background: white; }

/* MODAL */
.role-modal {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    z-index: 5000;
}

.modal-box {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(14px);
    padding: 32px 26px;
    width: 90%;
    max-width: 360px;
    border-radius: 26px;
    text-align: center;
    animation: fade .25s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

@keyframes fade {
    from {
        opacity: 0;
        transform: scale(.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.role-btn {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: white;
    margin-bottom: 10px;
}

.parent-btn {
    background: linear-gradient(145deg, #ff92c6, #ff5fa1);
}

.doctor-btn {
    background: linear-gradient(145deg, #8ca7ff, #6b86ff);
}

.admin-btn {
    background: linear-gradient(145deg, #b690ff, #9a63ff);
}


/* =====================================
   NNJ – MOBILE PATCH (<= 768px)
   ===================================== */
@media (max-width: 768px) {

  /* -------- Reset & Safety -------- */
  html, body {
    overflow-x: hidden;
  }

  body {
    font-size: 14px;
  }

  /* -------- Header -------- */
  .site-header {
    padding: 12px 14px;
  }

  .site-header .header-inner {
    flex-wrap: wrap;
    gap: 10px;
  }

  nav.menu {
    display: none; /* منوی دسکتاپ مخفی */
  }

  .header-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  /* -------- Hero -------- */
  .hero {
    height: auto;
    min-height: auto;
    padding: 40px 16px 32px;
    text-align: center;
  }

  .hero h1 {
    font-size: 22px;
    line-height: 1.5;
  }

  .hero p {
    font-size: 14px;
    margin-top: 10px;
  }

  /* -------- Hero Buttons -------- */
  .hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  .hero-buttons a,
  .hero-buttons button {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
  }

  /* -------- Plans / Cards -------- */
  .plans-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 0 12px;
  }

  .plan-card,
  .card {
    width: 100%;
  }

  /* -------- Sections spacing -------- */
  section {
    padding: 32px 12px;
  }

  /* -------- Footer -------- */
  footer .footer-inner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

}

/* =====================================
   NNJ – DESKTOP HEADER FIX
   ===================================== */

/* دسکتاپ واقعی */
@media (min-width: 992px) {

  .site-header {
    padding: 16px 32px; /* مقدار قبلی یا نزدیک به آن */
  }

  .site-header .header-inner {
    flex-wrap: nowrap;
    gap: 0;
  }

}


/* =====================================
   NNJ – HERO SMALL MOBILE
   ===================================== */
@media (max-width: 420px) {

  .hero h1 {
    font-size: 20px;
  }

  .hero p {
    font-size: 13px;
    line-height: 1.8;
  }

  .hero-buttons a {
    font-size: 13px;
    padding: 10px 14px;
  }

}
/* =====================================
   NNJ – BOY THEME TEXT CONTRAST FIX
   ===================================== */

body.theme-boy .hero h1,
body.theme-boy .hero p,
body.theme-boy .hero .subtitle,
body.theme-boy section p {
  color: #0b3558; /* آبی تیره با کنتراست بالا */
}

body.theme-boy .hero h1 {
  text-shadow: 0 1px 6px rgba(255,255,255,0.35);
}

/* =====================================
   NNJ – CHATBOT MOBILE UX FIX
   ===================================== */

@media (max-width: 640px) {

  /* پنجره چت را مخفی کن */
  .chat-widget,
  .chat-box,
  .chat-popup {
    display: none !important;
  }

  /* فقط آیکن چت باقی بماند */
  .chat-toggle,
  .chat-fab {
    display: flex !important;
    bottom: 16px;
    right: 16px;
    z-index: 999;
  }

}



/* ============================================================
   NNJ – FINAL PATCHES (APPLIED WITHOUT SIMPLIFICATION)
   ============================================================ */

/* === FIX: Boy Mode Text Contrast (correct class) === */
body.boy-mode .hero h1,
body.boy-mode .hero h2,
body.boy-mode .hero p,
body.boy-mode .hero .subtitle,
body.boy-mode section p {
  color: #0b3558;
}

body.boy-mode .hero h1 {
  text-shadow: 0 1px 6px rgba(255,255,255,0.35);
}

/* === FIX: Remove legacy wrong selector (safety override) === */
body.theme-boy .hero h1,
body.theme-boy .hero p,
body.theme-boy .hero .subtitle,
body.theme-boy section p {
  color: inherit;
  text-shadow: none;
}

/* === FIX: Chatbot Mobile – robust selectors === */
@media (max-width: 640px) {

  iframe[src*="chat"],
  iframe[src*="crisp"],
  iframe[src*="tawk"],
  iframe[src*="chatwoot"],
  .crisp-client,
  .tawk-widget,
  .chat-widget,
  .chat-box,
  .chat-popup {
    display: none !important;
  }

}

/* ============================================================
   BOTPRESS WEBCHAT — MOBILE UX SAFETY PATCH
   هدف: عدم مزاحمت، عدم پوشاندن CTA و رعایت Safe Area
   نکته: این پچ با Botpress Webchat (inject.js) سازگار است.
   ============================================================ */

@media (max-width: 768px) {
  /* Launcher container injected by Botpress */
  #bp-web-widget {
    right: 14px !important;
    left: auto !important;

    /* Move it slightly up to avoid bottom CTAs / mobile browser UI */
    bottom: 90px !important;

    /* Ensure it never blocks taps behind it */
    pointer-events: auto !important;
    z-index: 999 !important;
  }

  /* If Botpress renders a proactive bubble/tooltip, keep it compact */
  .bp-widget-web,
  .bpWebchat,
  .bpw-layout,
  .bpw-widget-container,
  .bpw-chat-bubble {
    max-width: min(92vw, 360px) !important;
  }
}


/* Mobile tap reliability for theme pills */
.theme-pill { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ============================================================
   NNJ — Contrast Fixes (Buttons / CTAs)
   Goal: ensure readable text on light gradients (especially Girl Mode)
   NOTE: !important is intentional because some pages define .btn-main inline.
   ============================================================ */

/* Girl Mode: gradient is light -> use dark text */
body:not(.boy-mode) .btn-main,
body:not(.boy-mode) .menu .cta {
  color: #2b2450 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Boy Mode: gradient is darker -> white text is best */
body.boy-mode .btn-main,
body.boy-mode .menu .cta {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* White button hover in Girl Mode: avoid white-on-light */
body:not(.boy-mode) .btn-white:hover {
  color: #2b2450 !important;
}


/* ============================================================
   NNJ PATCH v4 — Improve contrast for Hero primary CTA in GIRL mode
   - index.html defines .btn-main { color: white; } inline, so we must override with higher specificity + !important.
   - In girl mode theme colors are light (pink/purple), therefore dark text is required for legibility.
   - In boy mode theme colors are darker, keep white text for best contrast.
   ============================================================ */
.hero-buttons .btn-main {
  color: #17324a !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  font-weight: 700;
}

body.boy-mode .hero-buttons .btn-main {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}



/* ============================================================
   NNJ — Contrast Fixes (Buttons / CTAs)
   هدف: افزایش خوانایی CTAهای گرادیانی (خصوصاً Hero CTA)
   ============================================================ */
.hero-buttons a.btn-main,
.hero-buttons a.btn-main.login-btn {
  color: #17324a !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  font-weight: 700;
}

body.boy-mode .hero-buttons a.btn-main,
body.boy-mode .hero-buttons a.btn-main.login-btn {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}




/* === PATCH: desktop header ordering + prevent overlap (RTL-safe) ===
   هدف: برند سمت راست، منو وسط، اکشن‌ها سمت چپ (همه در یک ردیف)
   علت: Grid در RTL در برخی ترکیب‌های CSS باعث جابجایی ستون‌ها/شکستن ردیف می‌شد.
*/
@media (min-width: 901px) {
  .site-header .header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
  }

  /* IMPORTANT (RTL): In RTL documents, flex "start" is the RIGHT.
     So to keep BRAND on the right and ACTIONS on the left, the brand must come first.
     (Previous patch used the opposite order and reversed the layout.) */

  /* Brand (right) */
  .site-header .brand{
    order: 1;
    flex: 0 0 auto;
    min-width: 170px; /* reserve space for logo + title */
    justify-content: flex-end;
    position: relative;
    z-index: 2;
  }

  /* Menu (center) */
  .site-header nav.menu{
    order: 2;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }

  /* Actions (left) */
  .site-header .actions{
    order: 3;
    flex: 0 0 auto;
    justify-content: flex-start;
    min-width: 0;
  }

  /* Hamburger not used on desktop */
  .site-header .menu-toggle{
    display: none !important;
  }
}


/* Phase1 fix: Hero (boy-mode) login button text must be black for readability */
body.boy-mode .hero-buttons a.btn-main.login-btn,
body.boy-mode .hero-buttons a.btn-main.login-btn:visited,
body.boy-mode .hero-buttons a.btn-main.login-btn:hover,
body.boy-mode .hero-buttons a.btn-main.login-btn:active,
body.boy-mode .hero-buttons a.btn-main.login-btn:focus {
  color: #000000 !important;
  text-shadow: none !important;
}