/* =======================================
   Variables & Base
======================================= */
:root {
  /* عمومی */
  --surface: #ffffff;
  --surface-border: #e6e6ef;
  --text: #343a40;
  --brand: #1acc8d;
  --brand-dark: #149f6e;

  /* کارت‌ها */
  --surface-2: #f6f7fb;
  --muted: #6b7280;
  --ring: #e5e7eb;
  --chip: #eef2ff;
  --chip-text: #1e3a8a;
  --danger: #ef4444;
  --success: #16a34a;
  --shadow: 0 10px 24px rgba(0,0,0,.08);

  /* رنگ‌های اضافی */
  --pink: #d220e6;
  --pink-dark: #ba06cf;
  --green: #40c75d;
  --green-dark: #15a334;
  --turquoise: #47e6e3;
  --turquoise-dark: #1bc4c1;
  --deeppink: #db379a;
  --deeppink-dark: #a8116c;
  --goldenrod: #dba63b;
  --goldenrod-dark: #c48c1a;
  --crimson: #de3e59;
  --crimson-dark: #c4233e;
  --skyblue: #00BFFF;
  --skyblue-dark: #009acd;
  --orange: #FFA500;
  --orange-dark: #cc8400;
  --red-bright: #FF4C4C;
  --red-bright-dark: #cc0000;
  --lime: #A8E10C;
  --lime-dark: #7eb600;
  --turquoise-light: #40E0D0;
  --turquoise-light-dark: #2cb8a9;
  --purple-light: #BA55D3;
  --purple-light-dark: #9932cc;
  --pink-soft: #FF69B4;
  --pink-soft-dark: #d14a8a;

  /* عمومی دیگر */
  --indigo: #010483;
  --indigo-2: rgba(1, 4, 136, 0.9);
  --white: #ffffff;
  --black: #000000;
  --bg-light: #f5f5ff;

  /* تایپوگرافی */
  --fs-h1-min: 28px;
  --fs-h1-max: 48px;
  --fs-h2-min: 18px;
  --fs-h2-max: 24px;
  --fs-section-title-min: 18px;
  --fs-section-title-max: 24px;
  --fs-breadcrumbs-min: 18px;
  --fs-breadcrumbs-max: 24px;
  --fs-count-number-min: 24px;
  --fs-count-number-max: 36px;
  --fs-small: 14px;
  --fs-btn: 16px;

  /* فاصله و گردی */
  --section-padding: 60px;
  --radius-btn: 50px;
}

:root[data-bs-theme="dark"] {
  --surface: #121a31;
  --surface-border: #25314a;
  --surface-2: #0f172a;
  --text: #e5e7eb;
  --muted: #a5b4fc;
  --brand: #34e5a6;
  --ring: #25314a;
  --chip: #0b1222;
  --chip-text: #a7c4ff;
  --shadow: 0 14px 30px rgba(0,0,0,.35);
}

:root {
  --fieldset-border: #dcdcdc;
  --fieldset-bg: #ffffff;
  --fieldset-shadow: rgba(0, 0, 0, 0.05);
  --legend-bg: #0d6efd;
  --legend-color: #fff;
}

[data-bs-theme="dark"] {
  --fieldset-border: #444;
  --fieldset-bg: #1e1e1e;
  --fieldset-shadow: rgba(255, 255, 255, 0.05);
  --legend-bg: #0dcaf0;
  --legend-color: #000;
}

html { scroll-behavior: smooth; }

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}
#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  right: calc(50% - 30px);
  border: 6px solid var(--green);
  border-top-color: #d2f9eb;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}
@keyframes animate-preloader {
  to { transform: rotate(-360deg); }
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  left: 15px;
  bottom: 15px;
  z-index: 996;
  background: var(--green);
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: opacity .4s, visibility .4s, background-color .2s, transform .2s;
}
.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover { background: #2be4a2; color: #fff; }
.back-to-top.active { visibility: visible; opacity: 1; }

/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media (max-width: 768px) {
  [data-aos-delay] { transition-delay: 0 !important; }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  height: 80px;
  z-index: 997;
  background: var(--indigo-2);
  transition: background-color .5s, height .5s;
}
#header.header-transparent { background: transparent; }
#header.header-scrolled { background: var(--indigo-2); height: 60px; }

#header .logo h1 {
  font-size: 28px;
  margin: 0;
  line-height: 1;
  font-weight: 700;
}
#header .logo h1 a,
#header .logo h1 a:hover {
  color: #fff;
  text-decoration: none;
}
#header .logo img { padding: 0; margin: 0; max-height: 40px; }

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.navbar { padding: 0; }
.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}
.navbar li { position: relative; }
.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px 10px 0;
  font-size: 15px;
  font-weight: 500;
  font-family: "iranyekan", sans-serif;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  transition: color .3s;
}
.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-right: 5px;
}
.navbar > ul > li > a:before {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 3px;
  right: 30px;
  background-color: var(--brand);
  visibility: hidden;
  width: 0;
  transition: width .3s ease-in-out, visibility .3s;
}
.navbar a:hover:before,
.navbar li:hover > a:before,
.navbar .active:before {
  visibility: visible;
  width: 25px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: #fff;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  right: 30px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
  transition: opacity .3s, top .3s, visibility .3s;
  border-radius: 4px;
}
.navbar .dropdown ul li { min-width: 200px; }
.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #01036f;
}
.navbar .dropdown ul a i { font-size: 12px; }
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a { color: var(--brand); }
.navbar .dropdown:hover > ul { opacity: 1; top: 100%; visibility: visible; }

.navbar .dropdown .dropdown ul {
  top: 0;
  right: calc(100% - 30px);
  visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  right: 100%;
  visibility: visible;
}
@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul { right: -90%; }
  .navbar .dropdown .dropdown:hover > ul { right: -100%; }
}

/* Mobile Navigation */
/* 🎯 متغیرهای رنگ برای لایت و دارک */
:root {
  --mobile-toggle-color: #fff; /* رنگ آیکن همبرگر */
  --mobile-backdrop: rgba(1, 3, 91, 0.92); /* بک‌گراند پشت منو */
  --mobile-panel-bg: #fff; /* پس‌زمینه پنل */
  --mobile-link-color: #0205a1; /* رنگ متن لینک */
  --mobile-link-hover: #3f43fd; /* رنگ هاور لینک */
  --mobile-dropdown-bg: #fff; /* پس‌زمینه منوی بازشونده */
  --brand: #3f43fd; /* رنگ برند پیش‌فرض */
}

:root[data-bs-theme="dark"] {
  --mobile-toggle-color: #fff;
  --mobile-backdrop: rgba(0, 0, 0, 0.95);
  --mobile-panel-bg: #1e1e1e;
  --mobile-link-color: #f0f0f0; /* متن لینک روشن‌تر */
  --mobile-link-hover: #66b2ff; /* هاور آبی روشن */
  --mobile-dropdown-bg: #2a2a2a;
  --brand: #66b2ff; /* برند در حالت دارک */
}

/* 🎯 آیکن باز/بسته کردن منوی موبایل */
.mobile-nav-toggle {
  color: var(--mobile-toggle-color);
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: opacity .5s, color .3s;
}

@media (max-width: 991px) {
  .mobile-nav-toggle { display: block; }
  .navbar ul { display: none; }
}

/* 🎯 پس‌زمینه و ساختار منوی موبایل */
.navbar-mobile {
  position: fixed;
  inset: 0;
  background: var(--mobile-backdrop);
  transition: background .3s;
  z-index: 999;
  overflow: hidden;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  left: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  left: 15px;
  bottom: 15px;
  right: 15px;
  padding: 10px 0;
  border-radius: 8px;
  background-color: var(--mobile-panel-bg);
  overflow-y: auto;
  transition: background-color .3s;
}

/* 🎯 لینک‌ها */
.navbar-mobile > ul > li > a:before {
  right: 20px;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: var(--mobile-link-color);
  transition: color .3s;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: var(--mobile-link-hover);
}

/* 🎯 منوی بازشونده */
.navbar-mobile .dropdown ul,
.navbar-mobile .dropdown .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  background: var(--mobile-dropdown-bg);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  transition: background-color .3s;
}

.navbar-mobile .dropdown ul li,
.navbar-mobile .dropdown .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a,
.navbar-mobile .dropdown .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a,
.navbar-mobile .dropdown .dropdown ul a:hover,
.navbar-mobile .dropdown .dropdown ul .active:hover,
.navbar-mobile .dropdown .dropdown ul li:hover > a {
  color: var(--brand);
}

.navbar-mobile .dropdown > .dropdown-active,
.navbar-mobile .dropdown .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  background: url("/images/header-bg.jpg") no-repeat center center / cover;
  position: relative;
  padding: 120px 0 0;
}
#hero:before {
  content: "";
  background: rgba(2, 5, 161, 0.91);
  position: absolute;
  inset: 0;
}
#hero h1 {
  margin: 0 0 20px;
  font-size: clamp(var(--fs-h1-min), 4vw + 12px, var(--fs-h1-max));
  font-weight: 700;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.8);
}
#hero h1 span {
  color: #fff;
  border-bottom: 4px solid var(--brand);
}
#hero h2 {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 40px;
  font-size: clamp(var(--fs-h2-min), 1.2vw + 12px, var(--fs-h2-max));
}

/* Hero buttons - base */
.hero-btn {
  font-family: "iranyekan", sans-serif;
  font-weight: 500;
  font-size: var(--fs-btn);
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 30px;
  border-radius: var(--radius-btn);
  color: var(--white);
  transition: background-color .2s;
}
/* Color variants */
.btn-green { background: var(--green); }         
.btn-green:hover { background: var(--green-dark); }

.btn-pink { background: var(--pink); }          
 .btn-pink:hover { background: var(--pink-dark); }

.btn-turquoise { background: var(--turquoise); } 
.btn-turquoise:hover { background: var(--turquoise-dark); }

.btn-deeppink { background: var(--deeppink); }   
.btn-deeppink:hover { background: var(--deeppink-dark); }

.btn-goldenrod { background: var(--goldenrod); } 
.btn-goldenrod:hover { background: var(--goldenrod-dark); }

.btn-crimson { background: var(--crimson); }     
.btn-crimson:hover { background: var(--crimson-dark); }

/* دکمه‌های جدید */

.btn-skyblue { background: var(--skyblue); }
.btn-skyblue:hover { background: var(--skyblue-dark); }

.btn-orange { background: var(--orange); }
.btn-orange:hover { background: var(--orange-dark); }

.btn-red-bright { background: var(--red-bright); }
.btn-red-bright:hover { background: var(--red-bright-dark); }

.btn-lime { background: var(--lime); }
.btn-lime:hover { background: var(--lime-dark); }

.btn-turquoise-light { background: var(--turquoise-light); }
.btn-turquoise-light:hover { background: var(--turquoise-light-dark); }

.btn-purple-light { background: var(--purple-light); }
.btn-purple-light:hover { background: var(--purple-light-dark); }

.btn-pink-soft { background: var(--pink-soft); }
.btn-pink-soft:hover { background: var(--pink-soft-dark); }

#hero .animated { animation: up-down 2s ease-in-out infinite alternate-reverse both; }
@media (min-width: 1024px) { #hero { background-attachment: fixed; } }
@media (max-width: 991px) {
  #hero { padding-top: 80px; }
  #hero .animated { animation: none; }
  #hero .hero-img { text-align: center; }
  #hero .hero-img img { max-width: 50%; }
}
@media (max-width: 575px) {
  #hero .hero-img img { width: 80%; }
}
@keyframes up-down {
  0% { transform: translateY(10px); }
  100% { transform: translateY(-10px); }
}

/* Waves */
.hero-waves {
  display: block;
  margin-top: 60px;
  width: 100%;
  height: 60px;
  z-index: 5;
  position: relative;
}
.wave1 use { animation: move-forever1 10s linear infinite; animation-delay: -2s; }
.wave2 use { animation: move-forever2 8s linear infinite;  animation-delay: -2s; }
.wave3 use { animation: move-forever3 6s linear infinite;  animation-delay: -2s; }
@keyframes move-forever1 { 0% { transform: translate(-85px,0); } 100% { transform: translate(90px,0); } }
@keyframes move-forever2 { 0% { transform: translate(90px,0); } 100% { transform: translate(-85px,0); } }
@keyframes move-forever3 { 0% { transform: translate(90px,0); } 100% { transform: translate(-85px,0); } }

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section { padding: var(--section-padding) 0; overflow: hidden; }
.section-bg { background-color: var(--bg-light); }
.section-title { padding-bottom: 40px; }

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1;
  margin: 0 0 5px;
  letter-spacing: 2px;
  color: #000000;
  font-family: "iranyekan", sans-serif;
}
.section-title h2::after {
  content: ".::.";
  width: 50px;
  height: 1px;
  margin: 4px 10px;
}
.section-title p {
  margin: 0;
  font-size: clamp(var(--fs-section-title-min), 1.5vw + 10px, var(--fs-section-title-max));
  font-weight: 700;
  font-family: "iranyekan", sans-serif;
  color: var(--indigo);
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 20px 0;
  background-color: #fafaff;
  min-height: 40px;
  margin-top: 80px;
}
@media (max-width: 992px) { .breadcrumbs { margin-top: 64px; } }
.breadcrumbs h2 {
  font-size: clamp(var(--fs-breadcrumbs-min), 1vw + 14px, var(--fs-breadcrumbs-max));
  font-weight: 400;
  margin: 0;
}
@media (max-width: 992px) { .breadcrumbs h2 { margin: 0 0 10px; } }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; list-style: none;
  padding: 0; margin: 0; font-size: 14px;
}
.breadcrumbs ol li + li { padding-right: 10px; }
.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-left: 10px;
  color: #6c757d;
  content: "/";
}
@media (max-width: 768px) {
  .breadcrumbs .d-flex { display: block !important; }
  .breadcrumbs ol { display: block; }
  .breadcrumbs ol li { display: inline-block; }
}

/* حالت دارک مود برای breadcrumbs */
[data-bs-theme="dark"] .breadcrumbs {
  background-color: #1e1e2f; /* پس‌زمینه تیره‌تر */
}

[data-bs-theme="dark"] .breadcrumbs ol li,
[data-theme="dark"] .breadcrumbs h2 {
  color: #ddd; /* متن روشن */
}

[data-bs-theme="dark"] .breadcrumbs ol li + li::before {
  color: #aaa; /* جداکننده روشن‌تر */
}

[data-bs-theme="dark"] .breadcrumbs a {
  color: #66b2ff; /* لینک آبی روشن‌تر */
}

[data-bs-theme="dark"] .breadcrumbs a:hover {
  color: #80c8ff; /* رنگ لینک در هاور */
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about { padding: 40px 0 0; }
.about .icon-boxes h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: 15px;
}
.about .icon-box { margin-top: 40px; }
.about .icon-box .icon {
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 2px solid #7ceec6;
  border-radius: 50px;
  transition: background-color .5s, border-color .5s;
}
.about .icon-box .icon i { color: var(--green); font-size: 32px; }
.about .icon-box:hover .icon { background: var(--green-dark); border-color: var(--green); }
.about .icon-box:hover .icon i { color: #fff; }
.about .icon-box .title {
  margin-right: 85px;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 18px;
}
.about .icon-box .title a { color: #343a40; transition: color .3s; }
.about .icon-box .title a:hover { color: var(--brand); }
.about .icon-box .description {
  margin-right: 85px;
  line-height: 24px;
  font-size: 14px;
  font-family: "iranyekan", sans-serif;
}
.about .video-box {
  background: url("/images/why-us.png") center center no-repeat;
  background-size: contain;
  min-height: 300px;
}
.about .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(#3f43fd 50%, rgba(63, 67, 253, 0.4) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  right: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}
.about .play-btn::after {
  content: "";
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translateX(40%) translateY(-50%);
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.about .play-btn::before {
  content: "";
  position: absolute;
  width: 120px; height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s forwards infinite steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(63, 67, 253, 0.7);
  top: -15%; right: -15%;
  background: rgba(198, 16, 0, 0);
}
.about .play-btn:hover::after {
  border-right: 15px solid #3f43fd;
  transform: scale(20);
}
.about .play-btn:hover::before {
  content: "";
  position: absolute;
  right: 50%; top: 50%;
  transform: translateX(40%) translateY(-50%);
  width: 0; height: 0; border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #fff;
  z-index: 200;
  animation: none; border-radius: 0;
}
@keyframes pulsate-btn {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features .icon-box {
  display: flex;
  align-items: center;
  padding: 20px;
  background: var(--bg-light);
  transition: background-color .3s;
}
.features .icon-box i { font-size: 32px; padding-left: 10px; line-height: 1; }
.features .icon-box h3 {
  font-weight: 700; margin: 0; padding: 0; line-height: 1; font-size: 16px;
}
.features .icon-box h3 a { color: var(--indigo); transition: color .3s; }
.features .icon-box h3 a:hover { color: #01036f; }
.features .icon-box:hover { background: #ebebff; }

/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts { background: var(--bg-light); padding: 70px 0 60px; }
.counts .count-box {
  padding: 30px 30px 25px;
  width: 100%;
  position: relative;
  text-align: center;
  background: #fff;
}
.counts .count-box i {
  position: absolute;
  top: -25px;
  right: 50%;
  transform: translateX(50%);
  font-size: 20px;
  background: var(--brand);
  padding: 12px;
  color: #fff;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: 48px;
  height: 48px;
}
.counts .count-box span {
  font-size: clamp(var(--fs-count-number-min), 2vw + 16px, var(--fs-count-number-max));
  display: block;
  font-weight: 600;
  color: var(--indigo);
}
.counts .count-box p {
  padding: 0;
  margin: 0;
  font-family: "iranyekan", sans-serif;
  font-size: 14px;
}

/*--------------------------------------------------------------
# Details
--------------------------------------------------------------*/
.details .content + .content { margin-top: 100px; }
.details .content h3 {
  font-weight: 600;
  font-size: 26px;
  color: var(--indigo);
}
.details .content ul { list-style: none; padding: 0; }
.details .content ul li { padding-bottom: 10px; }
.details .content ul i { font-size: 20px; padding-left: 4px; color: var(--brand); }
.details .content p:last-child { margin-bottom: 0; }

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/
.gallery .gallery-item {
  overflow: hidden;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
}
.gallery .gallery-item img { transition: transform .4s; }
.gallery .gallery-item:hover img { transform: scale(1.1); }

/* =========================================
   Testimonials (Light + Dark, Swiper ready)
========================================= */

/* Section base (Light) */
.testimonials{
  position: relative;
  padding: 80px 0;
  background: url("/images/cta-bg.jpg") no-repeat center/cover;
}
.testimonials::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(1, 3, 111, 0.8); /* لایه‌ی آبی روی بک‌گراند */
}

/* Container & slider wrappers */
.testimonials .section-header{ margin-bottom:40px; }
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider{ overflow:hidden; }

/* Card */
.testimonials .testimonial-item{
  position: relative;
  text-align: center;
  color:#fff;
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 28px 28px;
  border-radius: 18px;
  background: rgba(0,0,0,.45);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  overflow: hidden;
  backdrop-filter: saturate(120%) blur(2px);
}

/* Avatar on card */
.testimonials .testimonial-item .testimonial-img{
  width:100px; height:100px; display:block;
  margin: -30px auto 8px;              /* کمی روی لبه‌ی کارت بیاید */
  border-radius:50%;
  border:6px solid rgba(255,255,255,.85);
  background:#fff;
  object-fit: cover;
}

/* Texts */
.testimonials .testimonial-item h3{
  font-size:20px; font-weight:700; margin:6px 0 4px; color:#fff;
}
.testimonials .testimonial-item h4{
  font-size:14px; margin:0 0 14px; color:#ddd;
}
.testimonials .testimonial-item p{
  font-style: italic;
  margin: 0 auto 10px;
  padding: 0 6px;
  color: #eee;
}

/* Quote icons */
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right{
  font-size:26px;
  color: rgba(255,255,255,.4);
}
.testimonials .testimonial-item .quote-icon-left{ position:relative; right:-5px; display:inline-block; }
.testimonials .testimonial-item .quote-icon-right{ position:relative; left:-5px; top:10px; display:inline-block; }

/* Swiper pagination (bullets) */
.testimonials .swiper-pagination{
  position: relative;
  margin-top:18px;
}
.testimonials .swiper-pagination .swiper-pagination-bullet{
  width:12px; height:12px; opacity:1;
  background-color: rgba(255,255,255,.4);
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active{
  background-color: var(--brand);
}

/* Optional: Swiper arrows */
.testimonials .swiper-button-prev,
.testimonials .swiper-button-next{
  color:#fff;
  width:42px; height:42px;
  border-radius:50%;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
}
.testimonials .swiper-button-prev:hover,
.testimonials .swiper-button-next:hover{
  background: rgba(0,0,0,.4);
}

/* Parallax-like bg on large screens */
@media (min-width:1024px){
  .testimonials{ background-attachment: fixed; }
}
/* Narrow paragraphs on md+ */
@media (min-width:992px){
  .testimonials .testimonial-item p{ width:80%; }
}

/* Mobile tweaks */
@media (max-width:575px){
  .testimonials{ padding: 64px 0; }
  .testimonials .testimonial-item{
    padding: 26px 18px 20px;
    border-radius:14px;
    max-width: calc(100% - 24px);
  }
  .testimonials .testimonial-item .testimonial-img{
    width:84px; height:84px; margin:-42px auto 6px;
    border-width:5px;
  }
}

/* ====================
   Dark Mode Overrides
==================== */
:root[data-bs-theme="dark"]{
  --t-card-surface: rgba(18,26,49,.92);
  --t-card-shadow: 0 14px 34px rgba(0,0,0,.35);
  --t-text: #e6eaf2;
  --t-subtext: #c0c5d2;
}

/* حذف تصویر زمینه و لایه‌ی آبی، کاهش ارتفاع */
[data-bs-theme="dark"] .testimonials{
  background: none !important;
  padding: 40px 0 !important;
}
[data-bs-theme="dark"] .testimonials::before{
  background: none !important;
}

/* کارت‌ها روشن‌تر و خواناتر */
[data-bs-theme="dark"] .testimonials .testimonial-item{
  background: var(--t-card-surface);
  color: var(--t-text);
  box-shadow: var(--t-card-shadow);
}
[data-bs-theme="dark"] .testimonials .testimonial-item h3{ color:#fff; }
[data-bs-theme="dark"] .testimonials .testimonial-item h4{ color: var(--t-subtext); }
[data-bs-theme="dark"] .testimonials .testimonial-item p{ color: var(--t-text); }

/* بولت‌ها در دارک */
[data-bs-theme="dark"] .testimonials .swiper-pagination .swiper-pagination-bullet{
  background-color: rgba(255,255,255,.35);
}
[data-bs-theme="dark"] .testimonials .swiper-pagination .swiper-pagination-bullet-active{
  background-color: var(--brand);
}

/* فلش‌ها در دارک */
[data-bs-theme="dark"] .testimonials .swiper-button-prev,
[data-bs-theme="dark"] .testimonials .swiper-button-next{
  background: rgba(255,255,255,.08);
  color:#fff;
}
[data-bs-theme="dark"] .testimonials .swiper-button-prev:hover,
[data-bs-theme="dark"] .testimonials .swiper-button-next:hover{
  background: rgba(255,255,255,.16);
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team { background: #fff; }
.team .member {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}
.team .member .pic {
  width: 200px; height: 200px; border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 15px;
  border: 3px solid #e0e0e0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform .2s, box-shadow .2s;
}
.team .member .pic img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .4s;
}
.team .member .pic:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }
.team .member .member-info {
  position: absolute;
  bottom: -80px; right: 0; left: 0;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
.team .member h4,
.team .member h2 {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 16px;
  color: #01036f;
  position: relative;
  padding-bottom: 10px;
}
.team .member h4::after,
.team .member h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: #0d12fc;
  bottom: 0;
  right: calc(50% - 25px);
}
.team .member span { font-style: italic; display: block; font-size: 13px; color: #01036f; }
.team .member .social { margin-top: 10px; }
.team .member .social a { transition: color .3s; color: #01036f; }
.team .member .social a:hover { color: var(--brand); }
.team .member .social i { font-size: 16px; margin: 0 2px; }

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {
  padding: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.pricing h3 {
  margin: -20px -20px 20px;
  padding: 20px 15px;
  font-size: 16px;
  font-weight: 600;
  color: #777;
  background: #f8f8f8;
}
.pricing h4 {
  font-size: 36px;
  color: var(--brand);
  font-weight: 600;
  font-family: "iranyekan", sans-serif;
  margin-bottom: 20px;
}
.pricing h4 sup { font-size: 20px; top: -15px; right: -3px; position: relative; }
.pricing h4 span { color: #bababa; font-size: 16px; font-weight: 300; }
.pricing ul {
  padding: 0; list-style: none; color: #444; text-align: center; line-height: 20px; font-size: 14px;
}
.pricing ul li { padding-bottom: 16px; }
.pricing ul i { color: var(--brand); font-size: 18px; padding-left: 4px; }
.pricing ul .na { color: #ccc; text-decoration: line-through; }
.pricing .btn-wrap {
  margin: 20px -20px -20px;
  padding: 20px 15px;
  background: #f8f8f8;
  text-align: center;
}
.pricing .btn-buy {
  background: var(--brand);
  display: inline-block;
  padding: 8px 35px 10px;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: "iranyekan", sans-serif;
  transition: background-color .3s;
}
.pricing .btn-buy:hover { background: var(--brand-dark); }
.pricing .featured h3 { color: #fff; background: var(--brand); }
.pricing .advanced {
  width: 200px;
  position: absolute;
  top: 18px;
  left: -68px;
  transform: rotate(-45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px;
  background: var(--brand);
  color: #fff;
}

/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
.faq .faq-list { padding: 0; }
.faq .faq-list ul { padding: 0; list-style: none; }
.faq .faq-list li + li { margin-top: 15px; }
.faq .faq-list li {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  position: relative;
}
.faq .faq-list a {
  display: block;
  position: relative;
  font-family: "iranyekan", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding: 0 30px;
  outline: none;
  cursor: pointer;
}
.faq .faq-list .icon-help {
  font-size: 24px;
  position: absolute;
  left: 0;
  right: 20px;
  color: #34e5a6;
}
.faq .faq-list .icon-show,
.faq .faq-list .icon-close {
  font-size: 24px;
  position: absolute;
  left: 0;
  top: 0;
}
.faq .faq-list p { margin-bottom: 0; padding: 10px 0 0; }
.faq .faq-list .icon-show { display: none; }
.faq .faq-list a.collapsed { color: #343a40; }
.faq .faq-list a.collapsed:hover { color: var(--brand); }
.faq .faq-list a.collapsed .icon-show { display: inline-block; }
.faq .faq-list a.collapsed .icon-close { display: none; }
@media (max-width: 1200px) { .faq .faq-list { padding: 0; } }

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info { width: 100%; background: #fff; }
.contact .info i {
  font-size: 20px;
  color: #3f43fd;
  float: right;
  width: 44px; height: 44px;
  background: #f0f0ff;
  display: flex; justify-content: center; align-items: center;
  border-radius: 50px;
  transition: background-color .3s, color .3s;
}
.contact .info h4 {
  padding: 0 60px 0 0;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--indigo);
}
.contact .info p {
  padding: 0 60px 0 0;
  margin-bottom: 0;
  font-size: 14px;
  color: #0205a1;
}
.contact .info .email,
.contact .info .phone { margin-top: 40px; }
.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i {
  background: var(--brand);
  color: #fff;
}
.contact .php-email-form { width: 100%; background: #fff; }
.contact .php-email-form .form-group { padding-bottom: 8px; }
.contact .php-email-form .error-message {
  display: none; color: #fff; background: #ed3c0d; text-align: right; padding: 15px; font-weight: 600;
}
.contact .php-email-form .error-message br + br { margin-top: 25px; }
.contact .php-email-form .sent-message {
  display: none; color: #fff; background: #18d26e; text-align: center; padding: 15px; font-weight: 600;
}
.contact .php-email-form .loading {
  display: none; background: #fff; text-align: center; padding: 15px;
}
.contact .php-email-form .loading:before {
  content: ""; display: inline-block; border-radius: 50%;
  width: 24px; height: 24px; margin: 0 0 -6px 10px;
  border: 3px solid #18d26e; border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}
.contact .php-email-form input { height: 44px; }
.contact .php-email-form textarea { padding: 10px 12px; }
.contact .php-email-form button[type=submit] {
  background: var(--brand);
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: background-color .4s;
  border-radius: 50px;
}
.contact .php-email-form button[type=submit]:hover { background: #34e5a6; }
@keyframes animate-loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #010351;
  padding: 0 0 30px;
  color: #fff;
  font-size: 14px;
}
#footer .footer-top { padding: 60px 0 30px; }
#footer .footer-top .footer-info {
  margin-bottom: 15px;
  background: #010246;
  color: #fff;
  border-top: 4px solid var(--green);
  text-align: center;
  padding: 30px 20px;
}
#footer .footer-top .footer-info h3 {
  font-size: 24px;
  margin: 0 0 20px;
  padding: 2px 0;
  line-height: 1;
  font-weight: 700;
}
#footer .footer-top .footer-info p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "iranyekan", sans-serif;
}
#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-left: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px; height: 36px;
  transition: background-color .3s, color .3s;
}
#footer .footer-top .social-links a:hover {
  background: var(--brand);
  color: #fff;
  text-decoration: none;
}
#footer .footer-top h4 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-bottom: 12px;
}
#footer .footer-top .footer-links { margin-bottom: 30px; }
#footer .footer-top .footer-links ul { list-style: none; padding: 0; margin: 0; }
#footer .footer-top .footer-links ul i {
  padding-left: 2px; color: #61ebba; font-size: 18px; line-height: 1;
}
#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}
#footer .footer-top .footer-links ul li:first-child { padding-top: 0; }
#footer .footer-top .footer-links ul a {
  color: #fff;
  transition: color .3s;
  display: inline-block;
  line-height: 1;
}
#footer .footer-top .footer-links ul a:hover { color: #4be8b0; }
#footer .footer-top .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 15px 6px 10px;
  position: relative;
  border-radius: 50px;
}
#footer .footer-top .footer-newsletter form input[type=email] {
  border: 0; padding: 4px; width: calc(100% - 110px);
}
#footer .footer-top .footer-newsletter form input[type=submit] {
  position: absolute;
  top: 0; left: -2px; bottom: 0;
  border: 0; background: var(--green);
  font-size: 16px; padding: 0 20px;
  color: #000000;
  transition: background-color .3s;
  border-radius: 50px;
}
#footer .footer-top .footer-newsletter form input[type=submit]:hover { background: var(--brand-dark); }
#footer .copyright {
  border-top: 1px solid #010479;
  text-align: center;
  padding-top: 30px;
}
#footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #fff;
}
@media (max-width: 575px) {
  #footer .footer-top .footer-info { margin: -20px 0 30px; }
}
/* =======================
   Dark Mode Overrides
   ======================= */
:root[data-bs-theme="dark"] {
  /* پس‌زمینه و متن */
  --bg-light: #0f172a;       /* رنگ زمینه عمومی بخش‌های روشن */
  --text: #e5e7eb;           /* رنگ متن اصلی */
  --indigo: #7aa2ff;         /* رنگ تیترها و لینک‌های اصلی */
  --indigo-2: rgba(15, 23, 42, 0.85); /* هدر نیمه‌شفاف */
  --white: #121a31;          /* جعبه‌ها و کارت‌ها در دارک */
  
  /* رنگ‌های برند در دارک (اختیاری تغییر) */
  --brand: #34e5a6;
  --brand-dark: #149f6e;
}

/* متن‌ها و لینک‌ها */
[data-bs-theme="dark"] body { background-color: var(--bg-light); color: var(--text); }
[data-bs-theme="dark"] p,
[data-bs-theme="dark"] li { color: var(--text); }
[data-bs-theme="dark"] a { color: var(--indigo); }
[data-bs-theme="dark"] a:hover { opacity: 0.85; }

/* هدر شفاف */
/* فقط دسکتاپ */
@media (min-width: 992px) {
  [data-bs-theme="dark"] #header.header-transparent {
    background: var(--indigo-2);
    backdrop-filter: blur(8px);
  }
}

/* موبایل: شفاف و بدون بلور تا منوی موبایل سالم بماند */
@media (max-width: 991px) {
  [data-bs-theme="dark"] #header.header-transparent {
    background: transparent !important;
    backdrop-filter: none !important;
  }
}
[data-bs-theme="dark"] #navbar ul li a {
  color: var(--text);
}
[data-bs-theme="dark"] #navbar .dropdown ul {
  background: var(--white);
}

/* سکشن‌های روشن */
[data-bs-theme="dark"] .section-bg {
  background-color: var(--white) !important;
}

/* کارت‌ها، باکس‌ها، فوتر */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .feature-box,
[data-bs-theme="dark"] #footer {
  background-color: var(--white);
  color: var(--text);
}

/* فرم‌ها */
[data-bs-theme="dark"] .form-control {
  background-color: #121827;
  color: var(--text);
  border-color: #25314a;
}
[data-bs-theme="dark"] .form-control::placeholder {
  color: #7b8596;
}
/* =======================
   Dark Mode - Hero & Main Sections
   ======================= */
:root[data-bs-theme="dark"] {
  --hero-bg: #0d172a; /* پس‌زمینه بخش Hero */
}

/* بخش Hero */
[data-bs-theme="dark"] #hero {
  background: var(--hero-bg) !important;
}
[data-bs-theme="dark"] #hero:before {
  background: rgba(13, 23, 42, 0.92) !important;
}

/* تیترها و متن‌ها در Hero */
[data-bs-theme="dark"] #hero h1 {
  color: #ffffff !important;
}
[data-bs-theme="dark"] #hero h2 {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* دکمه‌ها در Hero */
[data-bs-theme="dark"] .hero-btn {
  color: #fff !important;
}
[data-bs-theme="dark"] .hero-btn.btn-green {
  background: var(--brand);
}
[data-bs-theme="dark"] .hero-btn.btn-pink {
  background: var(--pink);
}

/* Waves زیر Hero */
[data-bs-theme="dark"] .hero-waves path {
  fill: var(--hero-bg) !important;
}
/* متن‌ها و تیترهای کم‌رنگ در حالت دارک */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  color: #ffffff !important;
}

[data-bs-theme="dark"] .section-title p,
[data-bs-theme="dark"] small,
[data-bs-theme="dark"] .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* برای متن‌های سیاه پیش‌فرض */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .title,
[data-bs-theme="dark"] p {
  color: #e5e7eb !important;
}

/* لینک‌ها در متن */
[data-bs-theme="dark"] a {
  color: var(--indigo);
}
[data-bs-theme="dark"] a:hover {
  color: var(--brand);
}
/* زمینه سکشن */
[data-bs-theme="dark"] .counts { background: transparent; }

/* کارت‌های شمارنده */
.counts .count-box {
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

/* عدد بزرگ */
[data-bs-theme="dark"] .counts .count-box span {
  color: #a9c1ff; /* یا var(--indigo) اگر دوست دارید */
}

/* عنوان زیر عدد (خیلی کم‌رنگ بود) */
[data-bs-theme="dark"] .counts .count-box p {
  color: rgba(255,255,255,.78);
}

/* آیکون گرد بالای کارت */
.counts .count-box i {
  background: var(--green);
}
[data-bs-theme="dark"] .counts .count-box i {
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
/* ========= Team (Dark Mode) ========= */
:root[data-bs-theme="dark"] {
  --team-surface: #121a31;     /* زمینه باکس زیر تصویر */
  --team-ring: rgba(255,255,255,.18);
  --team-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* پس‌زمینه سکشن تیم */
[data-bs-theme="dark"] .team { background: transparent; }

/* قاب دایره عکس */
[data-bs-theme="dark"] .team .member .pic {
  border-color: var(--team-ring);
  box-shadow: var(--team-shadow);
}

/* باکس توضیحات زیر عکس */
[data-bs-theme="dark"] .team .member .member-info {
  background: rgba(18,26,49,.92);
  color: #e5e7eb;
  box-shadow: var(--team-shadow);
}

/* تیترها و خط زیر تیتر */
[data-bs-theme="dark"] .team .member h2,
[data-bs-theme="dark"] .team .member h4 { color:#ffffff; }
[data-bs-theme="dark"] .team .member h4::after,
[data-bs-theme="dark"] .team .member h2::after { background: var(--brand); }

/* شرح و لینک‌ها */
[data-bs-theme="dark"] .team .member span { color:#c9d1e1; }
[data-bs-theme="dark"] .team .member .social a { color:#e5e7eb; }
[data-bs-theme="dark"] .team .member .social a:hover { color: var(--brand); }

/* کارت‌های سفید زیر دایره (اگر دارید) */
[data-bs-theme="dark"] .team .card,
[data-bs-theme="dark"] .team .member .card {
  background: var(--team-surface);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--team-shadow);
  color: #e5e7eb;
}

/* دکمه «مشاهده پروفایل» داخل کارت */
[data-bs-theme="dark"] .team .btn,
[data-bs-theme="dark"] .team .btn.btn-primary {
  background: #2b3a67;
  border-color: #2b3a67;
  color: #fff;
}
[data-bs-theme="dark"] .team .btn:hover,
[data-bs-theme="dark"] .team .btn.btn-primary:hover {
  background: #384b84;
  border-color: #384b84;
}

/* آیکون‌های نقل‌قول */
[data-bs-theme="dark"] .testimonial-item .quote-icon-left,
[data-bs-theme="dark"] .testimonial-item .quote-icon-right {
  color: #ffd369;
}
/* FAQ / Accordion Dark Mode */
:root[data-bs-theme="dark"] {
  --faq-bg: #1e2635; /* پس‌زمینه کارت‌ها */
  --faq-border: #334155; /* حاشیه کارت */
  --faq-text: #e2e8f0; /* متن اصلی */
  --faq-icon-bg: #0f766e; /* پس‌زمینه آیکون سوال */
}

/* پس‌زمینه کارت و حاشیه‌ها */
[data-bs-theme="dark"] .accordion-item {
  background-color: var(--faq-bg) !important;
  border: 1px solid var(--faq-border) !important;
}

/* متن سوالات */
[data-bs-theme="dark"] .accordion-button {
  background-color: var(--faq-bg) !important;
  color: var(--faq-text) !important;
}

/* متن پاسخ‌ها */
[data-bs-theme="dark"] .accordion-body {
  background-color: var(--faq-bg) !important;
  color: var(--faq-text) !important;
}

/* آیکون سوال */
[data-bs-theme="dark"] .accordion-button .faq-icon {
  background-color: var(--faq-icon-bg) !important;
  color: white !important;
  border-radius: 50%;
  padding: 4px;
}
/* ================== FAQ Dark Mode (for .faq .faq-list) ================== */
:root[data-bs-theme="dark"]{
  --faq-bg: #1b2333;       /* پس‌زمینه آیتم */
  --faq-border: #2b364d;   /* مرز نرم */
  --faq-text: #e6eaf2;     /* متن اصلی */
  --faq-muted: #b7c0cf;    /* متن توضیح */
  --faq-accent: #34e5a6;   /* آیکون سوال سبز */
}

/* آیتم‌های لیست */
[data-bs-theme="dark"] .faq .faq-list li{
  background: var(--faq-bg) !important;
  border: 1px solid var(--faq-border) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* لینک سوال (باز/بسته) */
[data-bs-theme="dark"] .faq .faq-list a{
  color: var(--faq-text) !important;
}
[data-bs-theme="dark"] .faq .faq-list a.collapsed{
  color: var(--faq-text) !important; /* جلوگیری از برگشت به #343a40 */
}

/* متن پاسخ */
[data-bs-theme="dark"] .faq .faq-list p{
  color: var(--faq-muted) !important;
}

/* آیکون‌های راست و چپ (bx-chevron...) */
[data-bs-theme="dark"] .faq .faq-list .icon-show,
[data-bs-theme="dark"] .faq .faq-list .icon-close{
  color: var(--faq-muted) !important;
}

/* آیکون دایره پرسش کنار عنوان */
[data-bs-theme="dark"] .faq .faq-list .icon-help{
  color: var(--accent, var(--faq-accent)) !important;
}

/* حاشیه‌ها و حالت هاور برای خوانایی بیشتر */
[data-bs-theme="dark"] .faq .faq-list a:hover{
  color: #ffffff !important;
}
[data-bs-theme="dark"] .faq .faq-list li + li{
  border-top-color: var(--faq-border) !important;
}

/* دکمه پایین سکشن */
[data-bs-theme="dark"] #faq .btn{
  color:#fff;
}
/* ===== Contact - Dark Mode ===== */
:root[data-bs-theme="dark"]{
  --contact-surface: #121a31;     /* پس‌زمینه کارت‌ها */
  --contact-border: #25314a;      /* حاشیه‌ها */
  --contact-text: #e5e7eb;        /* متن اصلی */
  --contact-muted: #b7c0cf;       /* متن فرعی */
  --contact-icon-bg: #0f172a;     /* دایره آیکون‌ها */
}

[data-bs-theme="dark"] .contact .info{
  background: var(--contact-surface) !important;
  border: 1px solid var(--contact-border);
  color: var(--contact-text);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
[data-bs-theme="dark"] .contact .info h2{ color: #fff; }
[data-bs-theme="dark"] .contact .info p{ color: var(--contact-muted); }

[data-bs-theme="dark"] .contact .info i{
  background: var(--contact-icon-bg);
  color: var(--brand); /* سبز برند شما */
  border: 1px solid var(--contact-border);
}

/* فرم سمت چپ */
[data-bs-theme="dark"] .contact .php-email-form{
  background: var(--contact-surface) !important;
  border: 1px solid var(--contact-border);
}
[data-bs-theme="dark"] .contact .php-email-form .form-control{
  background: #1a2233;
  color: var(--contact-text);
  border-color: var(--contact-border);
}
[data-bs-theme="dark"] .contact .php-email-form .form-control::placeholder{ color:#8b95a7; }
[data-bs-theme="dark"] .contact .php-email-form .form-floating>label{ color:#c4cbda; }

/* استایل legend سبز که در دارک خیلی روشن بود */
[data-bs-theme="dark"] .bg-success-subtle{
  background-color: rgba(52,229,166,.12) !important;
  color: #d1fae5 !important;
  border-color: rgba(52,229,166,.35) !important;
}
/* ===== Footer - Dark Mode ===== */
:root[data-bs-theme="dark"]{
  --footer-bg: #0c1426;
  --footer-panel: #0f1a34;
  --footer-text: #e6eaf2;
  --footer-muted: #b7c0cf;
  --footer-border: #243352;
}

/* پس‌زمینه کلی و تاپ فوتر */
[data-bs-theme="dark"] #footer { background: var(--footer-bg); color: var(--footer-text); }
[data-bs-theme="dark"] #footer .footer-top { background: transparent; }

/* باکس اطلاعات (سمت راست تصویر) */
[data-bs-theme="dark"] #footer .footer-top .footer-info{
  background: #0c1850; /* اگر می‌خوای هم‌رنگ بقیه شود: var(--footer-panel) */
  color: #fff;
  border-top-color: var(--brand);
}

/* تیترها و لینک‌ها */
[data-bs-theme="dark"] #footer h4 { color: #fff; }
[data-bs-theme="dark"] #footer a { color: var(--footer-text); }
[data-bs-theme="dark"] #footer a:hover { color: var(--brand); }
[data-bs-theme="dark"] #footer .footer-links ul i { color: var(--brand); }

/* خطوط و کپی‌رایت */
[data-bs-theme="dark"] #footer .copyright { border-top: 1px solid var(--footer-border); }

/* شبکه‌های اجتماعی */
[data-bs-theme="dark"] #footer .social-links a { color:#fff; }
[data-bs-theme="dark"] #footer .social-links a:hover { background: var(--brand); color:#000; }

/* خبرنامه */
[data-bs-theme="dark"] #footer .footer-newsletter form{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--footer-border);
}
[data-bs-theme="dark"] #footer .footer-newsletter input.form-control{
  background: #1a2233;
  color: var(--footer-text);
  border: 1px solid var(--footer-border);
}
[data-bs-theme="dark"] #footer .footer-newsletter input.form-control::placeholder{
  color: var(--footer-muted);
}
[data-bs-theme="dark"] #footer .footer-newsletter input[type=submit]{
  background: var(--brand);
  color: #000; /* روی سبز خواناتر است */
  border: 0;
}
[data-bs-theme="dark"] #footer .footer-newsletter input[type=submit]:hover{
  background: var(--brand-dark);
}
/* Welcome Card - base */
#welcomeCard.alert {
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, #ffc955, #ffb33b);
  color: #1f2937;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* متن داخلی */
#welcomeCard strong { font-weight: 800; display:inline-block; margin-bottom: 6px; }
#welcomeCard .d-flex > div:last-child { line-height: 1.9; }

/* دکمه بستن روی پس‌زمینه رنگی */
#welcomeCard .btn-close {
  filter: invert(0); opacity: .7;
}
#welcomeCard .btn-close:hover { opacity: 1; }

/* دارک‌مد */
[data-bs-theme="dark"] #welcomeCard.alert {
  background: linear-gradient(180deg, #9b6b00, #8a5200);  /* کهربایی تیره */
  color: #f9fafb;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}

/* دکمه بستن در دارک‌مد */
[data-bs-theme="dark"] #welcomeCard .btn-close {
  filter: invert(1) brightness(1.2); /* سفیدش کنیم */
  opacity: .8;
}

/* اگر بخواهی کارت کم‌زرق‌وبرق‌تر باشد: */
#welcomeCard.alert.softer {
  background: rgba(255, 193, 7, .15);
  border: 1px solid rgba(255, 193, 7, .35);
  color: inherit;
}
[data-bs-theme="dark"] #welcomeCard.alert.softer {
  background: rgba(255, 193, 7, .12);
  border-color: rgba(255, 193, 7, .35);
}
/* Base */
.video-section{
  background: var(--bg-light);
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}
.video-section .video-subtitle{ color: #6c757d; }

/* فریم ویدیو زیباتر شود */
.video-frame{
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

/* Dark mode */
[data-bs-theme="dark"] .video-section{
  background: rgba(255,255,255,.04);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
[data-bs-theme="dark"] .video-section h3{ color:#fff; }
[data-bs-theme="dark"] .video-section .video-subtitle{
  color: rgba(255,255,255,.72);
}
[data-bs-theme="dark"] .video-frame{
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
/* ===== Pricing - Dark Mode ===== */
[data-bs-theme="dark"] .pricing { background: transparent; }

[data-bs-theme="dark"] .pricing .box{
  background: var(--surface);
  border: 1px solid var(--surface-border);
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  color: var(--text);
}

[data-bs-theme="dark"] .pricing .box h3{ color:#fff; }

[data-bs-theme="dark"] .pricing .box h4{
  color: #cbd5e1;                    /* قیمت */
}
[data-bs-theme="dark"] .pricing .box h4 span{ color:#94a3b8; }  /* /ماه */

[data-bs-theme="dark"] .pricing .box ul{ color: var(--text); }
[data-bs-theme="dark"] .pricing .box ul li{ color:#e5e7eb; }
[data-bs-theme="dark"] .pricing .box ul .na{
  color: #8a93a5;
  opacity: .8;
  text-decoration: line-through;
}

/* ریبون بالای کارت‌ها */
[data-bs-theme="dark"] .pricing .advanced{
  background: var(--brand);
  color:#0b1c14;
}
[data-bs-theme="dark"] .pricing .box.featured h3{
  background: var(--brand);
  color:#0b1c14;
}

/* دکمه عضویت */
[data-bs-theme="dark"] .pricing .btn-wrap { background: transparent; }
[data-bs-theme="dark"] .pricing .btn-buy{
  background: var(--brand);
  color:#000;
}
[data-bs-theme="dark"] .pricing .btn-buy:hover{
  background: var(--brand-dark);
}

/* خط جداکننده‌ی بین دو کارت اگر لازم شد */
@media (min-width: 992px){
  [data-bs-theme="dark"] .pricing .row > [class*="col-"] + [class*="col-"] .box{
    border-right-color: var(--surface-border);
  }
}
/* برجسته‌تر کردن کارت featured در دارک‌مد */
[data-bs-theme="dark"] .pricing .box.featured{
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0,0,0,.38);
}

/* Dark Mode fix for Call Us card */
[data-bs-theme="dark"] .card[style*="#e6f5ff"] {
  background: var(--surface) !important;
  border: 1px solid var(--surface-border) !important;
  color: var(--text) !important;
}

[data-bs-theme="dark"] .card[style*="#e6f5ff"] h6,
[data-bs-theme="dark"] .card[style*="#e6f5ff"] .text-primary {
  color: var(--brand) !important;
}

[data-bs-theme="dark"] .card[style*="#e6f5ff"] p {
  color: var(--text) !important;
}

[data-bs-theme="dark"] .card[style*="#e6f5ff"] .fw-bold.text-dark {
  color: #fff !important;
}

[data-bs-theme="dark"] .card[style*="#e6f5ff"] div[style*="font-size"] {
  color: var(--brand) !important;
}
/* ===== Registration (Dark Mode) ===== */
[data-bs-theme="dark"] #registration fieldset {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

/* legend آبی */
[data-bs-theme="dark"] #registration legend.bg-primary {
  background-color: rgba(59,130,246,.18) !important; /* آبی ملایم */
  color: #dbeafe !important;
  border-color: rgba(59,130,246,.35) !important;
}

/* نوارهای راهنما/راهنما که bg-light هستند */
[data-bs-theme="dark"] #registration .bg-light {
  background-color: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid var(--surface-border) !important;
}

/* پِل‌های عنوان بخش‌ها */
[data-bs-theme="dark"] #registration .rounded-pill.text-muted {
  color: rgba(255,255,255,.75) !important;
}

/* هشدار ثانویه (پیش‌نمایش لینک پروفایل) */
[data-bs-theme="dark"] #registration .alert.alert-secondary {
  background: rgba(255,255,255,.06) !important;
  color: #e5e7eb !important;
  border: 1px solid var(--surface-border) !important;
}

/* برچسب موفق (سبز کمرنگ) – قبلاً success-subtle را داشتیم، اینجا مخصوص همین سکشن */
[data-bs-theme="dark"] #registration .bg-success-subtle {
  background-color: rgba(52,229,166,.12) !important;
  color: #d1fae5 !important;
  border-color: rgba(52,229,166,.35) !important;
}

/* ورودی‌ها */
[data-bs-theme="dark"] #registration .form-control {
  background: #121827;
  color: var(--text);
  border-color: var(--surface-border);
}
[data-bs-theme="dark"] #registration .form-control::placeholder { color:#7b8596; }
[data-bs-theme="dark"] #registration .form-floating>label { color:#c4cbda; }

/* ورودی‌های بزرگ (search boxes) */
[data-bs-theme="dark"] #registration .input-group-lg .form-control {
  background: #121827;
  color: var(--text);
  border-color: var(--surface-border);
}

/* چک‌باکس‌ها و رادیوها روی bg-light */
[data-bs-theme="dark"] #registration .form-check.bg-light {
  background-color: rgba(255,255,255,.06) !important;
  border: 1px solid var(--surface-border);
}
[data-bs-theme="dark"] #registration .form-check-input {
  background-color: #0b1222;
  border-color: var(--surface-border);
}
[data-bs-theme="dark"] #registration .form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* سوییچ قوانین */
[data-bs-theme="dark"] #registration .form-check.form-switch {
  background-color: rgba(255,255,255,.06) !important;
  border: 1px solid var(--surface-border);
}
[data-bs-theme="dark"] #registration .form-check.form-switch .form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* پیام‌های خطا */
[data-bs-theme="dark"] #registration .invalid-feedback {
  color: #fecaca; /* قرمز لطیف خواناتر */
}

/* دکمه ثبت */
[data-bs-theme="dark"] #registration .btn.btn-primary {
  background-color: #3b82f6;
  border-color: #3b82f6;
}
[data-bs-theme="dark"] #registration .btn.btn-primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* لینک داخل متن قوانین */
[data-bs-theme="dark"] #registration .AcceptPolicy {
  color: var(--indigo) !important;
}
[data-bs-theme="dark"] #registration .AcceptPolicy:hover {
  color: var(--brand) !important;
}

/* ===== About Section Titles - Dark Mode ===== */
[data-bs-theme="dark"] .about .icon-box .title a {
  color: #fff; /* یا مثلا #e6eaf2 برای کمی نرم‌تر */
}

[data-bs-theme="dark"] .about .icon-box .title a:hover {
  color: var(--brand); /* هم‌رنگ لینک‌های فعال در سایت */
}

/* اگر آیکون‌ها هم کم‌رنگ هستند */
[data-bs-theme="dark"] .about .icon-box .icon i {
  color: var(--brand); /* یا هر رنگ برجسته‌ی مورد نظر */
}

[data-bs-theme="dark"] .about .icon-box .icon i {
  color: #fff; /* آیکون سفید در دارک مود */
}

[data-bs-theme="dark"] .about .icon-box:hover .icon i {
  color: #000; /* وقتی هاور شد و زمینه سبز شد، آیکون تیره بشه */
}

/* حالت دارک برای بخش features */
[data-bs-theme="dark"] .features .icon-box {
  background: var(--bg-dark); /* پس‌زمینه تیره */
}

[data-bs-theme="dark"] .features .icon-box i {
  color: #fff; /* آیکون سفید برای دیده شدن بهتر */
}

[data-bs-theme="dark"] .features .icon-box h3 a {
  color: #ddd; /* متن لینک روشن */
}

[data-bs-theme="dark"] .features .icon-box h3 a:hover {
  color: #66b2ff; /* هاور لینک آبی روشن */
}

[data-bs-theme="dark"] .features .icon-box:hover {
  background: #2a2a2a; /* پس‌زمینه کمی روشن‌تر در هاور */
}
/* استایل فلوشیپ */
.fellowship-text {
  font-size: 0.75em; /* کوچکتر از تخصص */
  display: inline-block;
  margin-top: 6px; /* فاصله از تخصص */
  color: var(--fellowship-color);
}

/* حالت لایت مود */
:root {
  --fellowship-color: #42ed9d; /* خاکستری تیره */
}

/* حالت دارک مود */
[data-theme="dark"] {
  --fellowship-color: #bbb; /* خاکستری روشن */
}

/* Alert روشن داخل دارک‌مود را تیره و خوانا کن */
[data-bs-theme="dark"] .alert-light {
  background-color: rgba(255,255,255,.06) !important;
  border: 1px solid var(--surface-border) !important;
  color: #e5e7eb !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

/* متن‌های کم‌رنگ داخل مودال/آلرت */
[data-bs-theme="dark"] .alert-light .text-muted,
[data-bs-theme="dark"] .modal .text-muted {
  color: rgba(255,255,255,.75) !important;
}

/* اگر عکس حلقه/بوردر دارد */
[data-bs-theme="dark"] .profile-user-img {
  border: 3px solid rgba(255,255,255,.15);
}

/* ===== حالت دارک مود ===== */
[data-bs-theme="dark"] .btn-app {
  background: rgba(255, 255, 255, 0.05); /* پس‌زمینه تیره ولی کمی شفاف */
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e6eaf2; /* متن روشن */
}

[data-bs-theme="dark"] .btn-app:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

/* آیکون داخل دکمه در دارک مود */
[data-bs-theme="dark"] .btn-app .fa-solid,
[data-bs-theme="dark"] .btn-app .fa {
  color: #4dabf7 !important; /* رنگ آیکون (آبی روشن) */
}

/* متن داخل دکمه */
[data-bs-theme="dark"] .btn-app span,
[data-bs-theme="dark"] .btn-app strong {
  color: #e6eaf2;
}

.visit-card{
  background:var(--surface);
  border:1px solid var(--ring);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:14px 14px 10px;
  margin:16px 8px;
  position: relative;
  overflow: visible !important;
}
.appointment-card{
  background:var(--surface);
  padding:5px 5px 5px;
  margin:8px 8px;
  position: relative;
  overflow: visible !important;
}
/* Header */
.visit-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding-bottom:8px; border-bottom:1px dashed var(--ring);
}
.visit-title{display:flex; margin-top:5px; align-items:center; gap:8px; color:var(--text);}
.visit-title .order{
  background:linear-gradient(180deg,#22c55e,#16a34a); color:#fff;
  border-radius:12px; padding:3px 8px; font-weight:700;
}
.visit-title .visit-id{color:var(--muted); font-size:12px}
.visit-actions .icon-btn{
  border:0; background:transparent; width:34px; height:34px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted);
}
.visit-actions .icon-btn:hover{ background:var(--surface-2); color:var(--text) }

/* Meta chips */
.visit-meta{display:flex; flex-wrap:wrap; gap:8px; padding:10px 0}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--chip); color:var(--chip-text);
  border-radius:999px; padding:6px 10px; font-size:12px; line-height:1;
  border:1px solid var(--ring);
}
.chip.time i{opacity:.85}
.chip.type i{color:var(--brand)}
.chip.insurance i{color:#22d3ee}
.chip.phone i{color:#22c55e}

/* Grid buttons */
.visit-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:10px;
}
@media (max-width:1200px){ .visit-grid{ grid-template-columns: repeat(5,1fr); } }
@media (max-width:992px){  .visit-grid{ grid-template-columns: repeat(4,1fr); } }
@media (max-width:576px){  .visit-grid{ grid-template-columns: repeat(3,1fr); } }

.app-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; min-height:70px; border:1px solid var(--ring); border-radius:12px;
  background:var(--surface-2); color:var(--text);
  transition:transform .06s ease, box-shadow .2s, border-color .2s;
}
.app-btn i{font-size:20px; opacity:.9}
.app-btn span{font-size:12px; line-height:1; white-space:nowrap}
.app-btn:hover{
  transform:translateY(-2px);
  border-color:var(--brand);
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}

/* More panel */
.visit-more{ display:none; padding-top:10px }
.visit-card.open .visit-more{ display:block }

/* Footer */
.visit-footer{
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; padding-top:10px; border-top:1px dashed var(--ring); margin-top:10px;
}
.chip.age{ background:transparent; border:0; color:var(--muted) }

/* نوار نقش – سمت راست یا بالا */
.visit-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;

  /* ✅ تغییر جهت خمیدگی به سمت داخل کارت */
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;

  /* ❌ حذف خمیدگی سمت راست */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;

  background: #e1e5e8; 
  z-index: 5;
}

.visit-card[data-role="reception"]::after {
  background: #3b82f6;
}
.visit-card[data-role="clinic"]::after {
  background: #f59e0b;
}
.visit-card[data-role="doctor"]::after {
  background: #10b981;
}
.visit-card[data-role="support"]::after {
  background: #8b5cf6;
}
.visit-card[data-role="patient"]::after {
  background: #3489eb;
}
.visit-card[data-role="surgery"]::after {
  background: #f24e95;
}
/* وضعیت جدید (گوشه روبان) */
.visit-card[data-status="free"]{
  position:relative;
}
.visit-card[data-status="free"]::before{
  content:"بدون کارمزد ثبت"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="notfree"]{
  position:relative;
}
.visit-card[data-status="notfree"]::before{
  content:"با کارمزد ثبت"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #ef4444, #b91c1c); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="visitdate"]{
  position:relative;
}
.visit-card[data-status="visitdate"]::before{
  content:"تاریخ انتخابی شما"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #8b5cf6, #6d28d9); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="new"]{
  position:relative;
}
.visit-card[data-status="new"]::before{
  content:"جدید"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="visited"]{
  position:relative;
}
.visit-card[data-status="visited"]::before{
  content:"ویزیت شد"; position:absolute; top:-1px; right:-1px;
  background:linear-gradient(180deg,#22c55e,#16a34a); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="rejected"]{
  position:relative;
}
.visit-card[data-status="rejected"]::before{
  content:"ویزیت شد"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #8b5cf6, #6d28d9); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="canceled"]{
  position:relative;
}
.visit-card[data-status="canceled"]::before{
  content:"لغو شده"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #ef4444, #b91c1c); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="paid"]{
  position:relative;
}
.visit-card[data-status="paid"]::before{
  content:"آماده ویزیت"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="active"]{
  position:relative;
}
.visit-card[data-status="active"]::before{
  content:"فعال"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="inactive"]{
  position:relative;
}
.visit-card[data-status="inactive"]::before{
  content:"غیرفعال"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #ef4444, #b91c1c); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="profile-active"]{
  position:relative;
}
.visit-card[data-status="profile-active"]::before{
  content:"پروفایل فعال"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="profile-inactive"]{
  position:relative;
}
.visit-card[data-status="profile-inactive"]::before{
  content:"پروفایل غیرفعال"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #ef4444, #b91c1c); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="booking-active"]{
  position:relative;
}
.visit-card[data-status="booking-active"]::before{
  content:"نوبت دهی فعال"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="booking-inactive"]{
  position:relative;
}
.visit-card[data-status="booking-inactive"]::before{
  content:"نوبت دهی غیرفعال"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #ef4444, #b91c1c); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="telemedicine-active"]{
  position:relative;
}
.visit-card[data-status="telemedicine-active"]::before{
  content:"مشاوره فعال"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="telemedicine-inactive"]{
  position:relative;
}
.visit-card[data-status="telemedicine-inactive"]::before{
  content:"مشاوره غیرفعال"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #ef4444, #b91c1c); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="search-radiology"]{
  position:relative;
}
.visit-card[data-status="search-radiology"]::before{
  content:"جستجوی مرکز تصویربرداری"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="search-doctor"]{
  position:relative;
}
.visit-card[data-status="search-doctor"]::before{
  content:"جستجوی پزشک"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="search-physio"]{
  position:relative;
}
.visit-card[data-status="search-physio"]::before{
  content:"جستجوی مرکز فیزیوتراپی"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="search-lab"]{
  position:relative;
}
.visit-card[data-status="search-lab"]::before{
  content:"جستجوی آزمایشگاه"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="search-pharmacy"]{
  position:relative;
}
.visit-card[data-status="search-pharmacy"]::before{
  content:"جستجوی داروخانه و دراگ استور"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="search-clinic"]{
  position:relative;
}
.visit-card[data-status="search-clinic"]::before{
  content:"جستجوی کلینیک پزشکی"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="chat-main"]{
  position:relative;
}
.visit-card[data-status="chat-main"]::before{
  content:"گفتگوی زنده"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="chat-side"]{
  position:relative;
}
.visit-card[data-status="chat-side"]::before{
  content:"منو"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="new-consult"]{
  position:relative;
}
.visit-card[data-status="new-consult"]::before{
  content:"جدید"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="accepted-consult"]{
  position:relative;
}
.visit-card[data-status="accepted-consult"]::before{
  content:"پذیرفته شده"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="paid-consult"]{
  position:relative;
}
.visit-card[data-status="paid-consult"]::before{
  content:"پرداخت شده"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="rejected-consult"]{
  position:relative;
}
.visit-card[data-status="rejected-consult"]::before{
  content:"پذیرفته نشده"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="new-surgery"]{
  position:relative;
}
.visit-card[data-status="new-surgery"]::before{
  content:"جراحی جدید"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #2dd4bf, #0d9488); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="done-surgery"]{
  position:relative;
}
.visit-card[data-status="done-surgery"]::before{
  content:"جراحی انجام شده"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="cancelled-patient-surgery"]{
  position:relative;
}
.visit-card[data-status="cancelled-patient-surgery"]::before{
  content:"لغو شده توسط بیمار"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #ef4444, #b91c1c); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="cancelled-doctor-surgery"]{
  position:relative;
}
.visit-card[data-status="cancelled-doctor-surgery"]::before{
  content:"لغو شده توسط پزشک"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
.visit-card[data-status="livepanel"]{
  position:relative;
}
.visit-card[data-status="livepanel"]::before{
  content:"محدوده زمانی و تعداد نوبت ها"; position:absolute; top:-1px; right:-1px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8); color:#fff;
  padding:3px 10px; border-bottom-left-radius:8px; font-size:12px; font-weight:700;
}
/* Dropdown inside card visible */
.visit-card .dropdown-menu{ z-index:2050; }

.modern-fieldset {
  border: 1px solid var(--fieldset-border);
  border-radius: 0.75rem;
  background-color: var(--fieldset-bg);
  padding: 2rem 1.5rem;
  box-shadow: 0 0 1rem var(--fieldset-shadow);
  position: relative;
}

.legend-tag {
  position: absolute;
  top: -0.8rem;
  right: 1rem;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  color: #fff; /* متن به صورت پیش‌فرض سفید */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;

  /* زاویه‌دار از سمت راست */
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}

.legend-modern {
  position: absolute;
  top: -1.2rem;
  right: 1.5rem;
  padding: 0.5rem 1.25rem 0.5rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  border-radius: 0 0.5rem 0.5rem 0;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  display: inline-block;
  z-index: 10;
  transition: all 0.3s ease-in-out;
}
.angled-legend {
  position: absolute;
  top: -1.5rem;
  right: 0;
  padding: 0.75rem 2rem 0.75rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--bs-primary);
  color: #fff;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 0 0.5rem 0.5rem 0;
}
.angled-label {
  position: absolute;
  top: -1.3rem;
  right: 0;
  padding: 0.5rem 1.5rem 0.5rem 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  background-color: var(--bs-success);
  color: #fff;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-top-left-radius: 0.4rem;
}
/* ✅ کانتینر ویدیو و کانواس */
#videoContainer {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4 / 3;
  margin: auto;
}

#video, #canvas {
  width: 100%;
  max-height: 80vh;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* 🧠 اختیاری برای رفع کشیدگی یا پر شدن عرض کامل در موبایل */
@media (max-width: 768px) {
  #videoContainer {
    max-width: 100%;
    padding: 0 5px;
  }
}
#sittingStatus {
  font-weight: bold;
  margin-top: 6px;
  font-size: 1.1em;
}
.listening {
  animation: pulse 1s infinite;
  background-color: #ffc107 !important;
}
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}