@import url(./iransans.css);
@import url(./yekan.css);
/* ---------- Root: Theme Variables (Dark Theme) ---------- */
:root {
  /* main-colors */
  --color-title: #fff;
  --color-title-golden: #ffd966;
  --color-text-light: #b2bad0;
  --color-golden-hover: #ffd966;
  --color-blue-hover:rgba(50, 92, 170, 0.95);
  --color-blue-light-hover:rgba(68, 103, 168, 0.23);
  --color-trans-btn:  #58a6ff;
  --color-trans-btn-hover:  #22345e;
  --color-trans-btn-hover-p:  #fcfcfa;
  --color-bg-card: rgba(45, 66, 105, 0.7);
  

  /* --- Background Colors --- */
  --color-bg-main: linear-gradient(135deg, #303544 0%, #353951 100%);
/* --- header Colors --- */
  --color-bg-header: rgba(25, 32, 65, 0.4); 
  --color-bg-header2: rgba(45, 58, 86, 0.9);
  --color-bg-register-btn:rgba(68, 103, 168, 0.13);
  --color-bg-basket-btn:rgba(68, 103, 168, 0.13);
  --color-bg-dropdown-btn: rgba(45, 58, 86, 0.95);
  
  /* Dropdown (منوهای عمومی) */
  --dropdown-bg: rgba(45, 66, 105, 0.95);
  --dropdown-border: rgba(255,255,255,0.16);
  --dropdown-shadow: 0 10px 38px rgba(40,60,120,0.18);
  --dropdown-link: #f7faff;
  --dropdown-link-hover: #ffd966;
  --dropdown-link-bg-hover: rgba(255,217,102,0.14);

  /* Profile Card */
  --profile-bg: linear-gradient(145deg, rgba(35,50,85,.95) 0%, rgba(25,35,65,.95) 100%);
  --profile-border: rgba(255,255,255,.12);
  --profile-shadow: 0 12px 28px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
  --profile-text: #e9eef8;
  --profile-icon: #f8e089;   /* آیکن‌ها کمی گرم‌تر برای دید بهتر */
  --profile-link: #dbe9ff;
  --profile-hover-bg: rgba(255,255,255,.10);
  --profile-hover-text: #ffffff;

  /* Profile (قدیمی سازگار) */
  --color-bg-dropdown-btn-profile: rgba(45,66,105,0.96);
  --color-profile-menu-shadow: 0 8px 34px rgba(44,56,97,0.15), 0 2px 8px rgba(68,103,168,0.08);
  --color-profile-menu-border: rgba(255,255,255,0.12);
  --color-profile-menu-text: var(--profile-text);
  --color-profile-menu-hover-bg: rgba(68, 103, 168, 0.18);
  --color-profile-menu-hover-text: #ffd966;
  --color-profile-menu-icon: var(--profile-icon);

  /* Misc */
  --profile-dot-blue: #3b82f6;
  --profile-dot-green: #22c55e;
  
  /* دکمه‌های هدر (در صورت نیاز) */
  --color-bg-dropdown-btn: rgba(45,58,86,0.95);
  /* --- hero Colors --- */
  --color-hero-titel:#fff;
  --color-hero-p:#b2bad0;
  --color-hero-btn-bg:#ffd966;
  --color-hero-btn-p:rgba(45, 58, 86, 0.9);
  --color-hero-btn-p-hover:#fff;
  --color-hero-btn-hover:rgba(34, 95, 225, 0.5);
  --color-hero-btn-trans-bg:rgba(255,255,255,0.07);
  --color-hero-btn-tarans-p:#f6f7f8;
  --color-hero-btn-tarans-hover:#ffffff0a;
  --color-hero-btn-tarans-hover-p:#f7f8fa;
  /* --- course Colors --- */

--color-course-titel:  #fff;
--color-course-desc:  #b8c2db;
--color-course-icon:  rgba(246, 247, 248, 0.9);
--color-course-btn:  #58a6ff;
--color-course-btn-hover:  #22345e;
--color-course-btn-hover-p:  #fcfcfa;

/* --- topuser Colors --- */

--color-top-titel:  #fff;
--color-top-bg:  rgba(255,255,255,0.035);
--color-top-bg-hover:  rgba(255,255,255,0.13);
--color-top-rank:  #fff;
--color-top-avatar:  #bed2fa;
--color-top-name:  #fff;
--color-top-coins-bg:  rgba(43,173,94,0.10);
--color-top-coins-count:  #2bad5e;
--color-top-coins-rm:  #ffd966;
--color-top-bt:  rgba(68, 103, 168, 0.08);
--color-top-bt-p:  #fffffb;
--color-top-bt-hover:  #3673ce;
/* --- testimonial Colors --- */

--color-test-titel:   #fff;
--color-test-desc:   #dbe7fa;
--color-test-card-bg:   rgba(37, 46, 69, 0.97);
--color-test-card-text:   #e7eefa;
--color-test-card-nav:   #898989;
--color-test-card-icon:   #e7eefa;
/* --- shop Colors --- */

--color-shop-titel:   #ffd966;
--color-shop-titel-icon:   #ffd966;
--color-shop-desc:    #f9fafa;
--color-shop-benefit:    #fff;
--color-bt-bg:#ffd966;
--color-bt-text:rgba(45, 58, 86, 0.9);;
--color-bt-bg-hover:rgba(45, 58, 86, 0.9);
--color-bt-text-hover:#fdfdfc;
--color-shop-bg-info:rgba(37, 46, 69, 0.97);
--color-social: #fff;
--color-social-hover: #ffd966;
/* --------------------------- */
 --color-gold:#f1c94a;

  /* Text */
  --text-main:#eaf1ff;
  --text-muted:#b8c3da;
  --text-title:var(--color-gold);
  --text-price-old:#b6c0d8;
  --text-price-new:#eaf1ff;

  /* Surfaces & borders */
  --bg-main:rgba(25,36,64,.55);
  --bg-alt:rgba(25,36,64,.72);
  --bg-benefit-icon:rgba(212,175,55,.12);
  --bg-stock:rgba(25,36,64,.55);
  --border-color:rgba(255,255,255,.08);
  --border-dashed:rgba(255,255,255,.08);

  /* Stock colors */
  --stock-available-text:#bfffe9;
  --stock-available-icon:#22c55e;
  --stock-unavailable-text:#ffd6d6;
  --stock-unavailable-icon:#ef4444;

  /* Button */
  --btn-bg:linear-gradient(180deg,#f1c94a 0%,#f1c94a 40%,#d2af37 100%);
  --btn-text:#1a2237;
  --text-decoration-color: rgba(255, 100, 100, 0.8);

 --resposive-color-text:#ffd966;
 --resposive-color-text2:#ffd966;
 --resposive-color-text3:#bed2fa;
 --resposive-color-text4:#ffff;
 --resposive-color-text4-gold:#ffd966;
 --resposive-color-text5:#ffff;
 --resposive-color-text6:#ffff;
 --resposive-color-text6-gold:#ffd966;
 --resposive-color-text7:#ffff;
  --resposive-color-text8:#ffff;
  --resposive-color-text9:#ffd966;
  --resposive-color-text10:#ffd966;
   --resposive-color-text11:#ffff;
  --resposive-color-text12:#ffff;
  --resposive-color-text13:#ffff;
  --resposive-color-text14:#ffff;
  --resposive-color-text15:#ffff;
  --resposive-color-text16:#ffff;
  --resposive-color-text17-gold:#ffd966;
  --resposive-color-text18-gold:#ffd966;
  --resposive-color-text19-gold:#ffd966;
  --resposive-color-text20-gold:#ffd966;
  --resposive-color-text21-gold:#ffd966;
  --resposive-color-text22-gold:#ffd966;
   --resposive-color-text23-gold:#ffd966;
}
body.light-theme {
  /* main-colors */
 --color-title: #1f2937f7;
 --color-title-golden: rgba(45, 66, 105, 0.95);
 --color-text-light: rgba(45, 66, 105, 0.8);
 --color-golden-hover: rgba(50, 92, 170, 0.95);
 --color-blue-hover:rgba(50, 92, 170, 0.95);
 --color-blue-light-hover:rgba(68, 103, 168, 0.23);
 --color-trans-btn:  rgba(45, 66, 105, 0.9);
 --color-trans-btn-hover:  rgba(45, 66, 105, 0.9);
 --color-trans-btn-hover-p:  #fff;
 --color-bg-card: rgba(45, 66, 105, 0.8);
  /* --- Background Colors --- */
  --color-bg-main: linear-gradient(135deg, #F8FAFF 0%, #E1E9F8 100%);
  /* --- header Colors --- */
  --color-bg-header: rgba(45, 66, 105, 0.9);
  --color-bg-header2: rgba(45, 66, 105, 0.8);
  --color-bg-register-btn: rgba(45, 66, 105, 0.8);
  --color-bg-basket-btn:rgba(45, 66, 105, 0.8);
  --color-bg-dropdown-btn:rgba(175, 191, 207, 0.95);
  --color-bg-dropdown-btn-profile: rgba(45, 66, 105, 0.8);
   --dropdown-bg: rgba(255, 255, 255, 0.94);  /* سفید شیشه‌ای */
  --dropdown-border: rgba(68, 103, 168, 0.18);
  --dropdown-shadow: 0 10px 38px 0 rgba(90,110,150,0.08);
  --dropdown-link: #35425a;
  --dropdown-link-hover: #ffd966;
  --dropdown-link-bg-hover: rgba(102, 168, 255, 0.064);
 
  /* --- hero Colors --- */
  --color-hero-titel:rgba(45, 66, 105, 0.95);
  --color-hero-p:rgba(45, 66, 105, 0.8);
  --color-hero-btn-bg:rgba(54, 85, 144, 0.8);
  --color-hero-btn-p:#fff;
  --color-hero-btn-hover:rgba(41, 104, 221, 0.9);
  --color-hero-btn-trans-bg:rgba(255,255,255,0.07);
  --color-hero-btn-tarans-p:rgba(45, 66, 105, 0.8);
  --color-hero-btn-tarans-hover: rgba(41, 104, 221, 0.9);
  --color-hero-btn-tarans-hover-p:#fff;
  /* --- course Colors --- */

--color-course-titel:  #1f2937f7;
--color-course-desc:  #1f2937e3;
--color-course-icon:  #1f2937f7;
--color-course-btn:  #0f3a5f;
--color-course-btn-hover:  rgba(45, 66, 105, 0.9);
--color-course-btn-hover-p:  #fff;
/* --- topuser Colors --- */

--color-top-titel:  rgba(45, 66, 105, 1);
--color-top-bg:  rgba(45, 66, 105, 0.5);
--color-top-bg-hover:  rgba(45, 66, 105, 0.7);
--color-top-rank:  rgb(254, 253, 253);
--color-top-avatar:  rgba(45, 66, 105, 0.7);
--color-top-name:  rgb(252, 251, 251);
--color-top-coins-bg:  rgba(45, 66, 105, 0.4);
--color-top-coins-count:  rgb(251, 251, 251);
--color-top-coins-rm:  #ffd966;
--color-top-bt:  rgba(45, 66, 105, 0.8);
--color-top-bt-p:  rgba(248, 248, 249, 0.9);
--color-top-bt-hover:  #ffd966;
/* --- testimonial Colors --- */

--color-test-titel:   rgba(45, 66, 105, 0.95);
--color-test-desc:   rgba(45, 66, 105, 0.8);
--color-test-card-bg:   rgba(45, 66, 105, 0.95);
--color-test-card-text:   #e7eefa;
--color-test-card-nav:   rgba(45, 66, 105, 0.5);
--color-test-card-icon:   rgba(45, 66, 105, 0.8);
/* --- shop Colors --- */
--color-shop-titel:   rgba(45, 66, 105, 0.95);
--color-shop-titel-icon:   rgba(45, 66, 105, 0.95);
--color-shop-desc:    rgba(45, 66, 105, 0.8);
--color-shop-benefit:   rgba(45, 66, 105, 0.8);
--color-bt-bg:rgba(48, 75, 124, 0.9);
--color-bt-text:rgba(250, 250, 250, 0.95);
--color-bt-bg-hover:rgba(50, 92, 170, 0.95);
--color-bt-text-hover:#fdfdfc;
--color-shop-bg-info: rgba(200, 214, 250, 0.5);
--color-social: rgba(45, 66, 105, 0.8);
--color-social-hover: rgba(50, 92, 170, 0.95);
/* -------------------------------- */
/* Texts: softer navy-blues */
  --text-main: #1f2937f7;        /* متن‌ها */
  --text-muted:#1f2937e3;        /* توضیحات/کم‌رنگ */
  --text-title:#314a6e;        /* عنوان */
  --text-price-old:#4a6084;
  --text-price-new:#314a6e;

  /* Surfaces & borders: airy + matching header hue */
  --bg-main: rgba(255,255,255,.80);
  --bg-alt:  rgba(248,251,255,.92);
  --bg-benefit-icon: rgba(49,74,110,.08);
  --bg-stock: rgba(250,252,255,.92);

  --border-color:  rgba(49,74,110,.18);
  --border-dashed: rgba(49,74,110,.26);

  /* Button: navy gradient close to header */
  --btn-bg: linear-gradient(180deg, #3a557d 0%, #334d73 100%);
  --btn-text: #ffffff;

 --stock-available-bg: rgba(56, 168, 93, 0.12);  /* سبز خیلی ملایم */
  --stock-available-text: #2b7a4b;
  --stock-available-icon: #2b7a4b;

  --stock-unavailable-bg: rgba(210, 73, 73, 0.12); /* قرمز ملایم */
  --stock-unavailable-text: #b33a3a;
  --stock-unavailable-icon: #b33a3a;

  --grad-gold-start: #1e3a8a;
  --grad-gold-end: #3b82f6;
  --resposive-color-text:#3b82f6;
  --resposive-color-text2:#1e3a8a;
  --resposive-color-text3:#1e3a8a;
  --resposive-color-text4:#1e3a8a;
  --resposive-color-text4-gold:#1e3a8a;
  --resposive-color-text5:#3b82f6;
  --resposive-color-text6:#F65555;
  --resposive-color-text6-gold:#F65555;
  --resposive-color-text7:#14A1FF;
  --resposive-color-text8:#1291E6;
  --resposive-color-text9:#14A1FF;
  --resposive-color-text10:#1291E6;
  --resposive-color-text11:#0E6FB0;
  --resposive-color-text12:#0C5F96;
  --resposive-color-text13:#0A4F7D;
  --resposive-color-text14:#08446B;
  --resposive-color-text15:#073959;
  --resposive-color-text16:#05253B;
  --resposive-color-text17-gold:#0E6FB0;
  --resposive-color-text18-gold:#0C5F96;
  --resposive-color-text19-gold:#0A4F7D;
  --resposive-color-text20-gold:#08446B;
  --resposive-color-text21-gold:#073959;
  --resposive-color-text22-gold:#05253B;
  --resposive-color-text23-gold:#1f2937f7;
}




/* -------------------- Base Styles -------------------- */
body {
  font-family: IRANSansX;
  margin: 0;
  padding-top: 2rem;
  
}

/* -------------------- Responsive Container -------------------- */
.container2 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* Breakpoints: sm, md, custom, lg, xl, 2xl */
@media (min-width: 640px) { /* sm */
  .container2 { max-width: 640px; }
}
@media (min-width: 768px) { /* md */
  .container2 {
    max-width: 768px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 850px) { /* md custom */
  .container2 {
    max-width: 850px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 950px) { /* md custom */
  .container2 {
    max-width: 950px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1050px) { /* lg */
  .container2 {
    max-width: 1050px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1280px) { /* xl */
  .container2 { max-width: 1280px; }
}
@media (min-width: 1536px) { /* 2xl */
  .container2 { max-width: 1280px; }
}

/* -------------------- Main Background -------------------- */
.custom-bg {
  background: var(--color-bg-main);
  min-height: 100vh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}



/* سایزبندی و تنظیمات هدر سایت */
/* ------------------- Header Styles ------------------- */
/* ------------------- Global Safety ------------------- */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ------------------- Header Styles ------------------- */
.header {
  width: 100%;
  margin: 0 auto;
  background: var(--color-bg-header);
  border-radius: 1.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.5rem 1rem;
  height: 90px;
  z-index: 99999;
  transition: padding 0.2s, height 0.2s;
  display: flex;
  justify-content: center;
}

/* ------------------- Inner Container ------------------- */
.header-inner {
  width: 100%;
  max-width: 1380px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ------------------- Logo Styles ------------------- */
.logo {
  width: 70px;
  height: 70px;
}

.desktop-logo {
  display: none;
}

.mobile-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------- Desktop Logo ------------------- */
@media (min-width: 1050px) {
  .mobile-logo {
    display: none;
  }

  .desktop-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .logo {
    width: 230px;
    height: 80px;
  }
}

/* ------------------- Responsive Header Adjustments ------------------- */
@media (min-width: 950px) {
  .header {
    height: 100px;
  }
}

@media (min-width: 1050px) {
  .header {
    height: 120px;
  }
}

/* ------------------- Header2 (Secondary Menu Bar) ------------------- */
.header2 {
  display: none;
}

.menu_list {
  display: none;
}

@media (min-width: 950px) {
  .header2 {
    display: block;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.1rem;
    min-height: 40px;
    max-height: 60px;
    background: var(--color-bg-header2);
    border-radius: 0 0 1.5rem 1.5rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .menu_list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    color: #f8f9fb;
    font-size: 14px;
    font-weight: 500;
    margin-top: 8px;
    list-style: none;
  }

  .main_li a {
    text-decoration: none;
    color: #f8f9fb;
    font-family: inherit;
  }
  .menu_list li a:hover,
.menu_list li a:focus {
  color: #ffd966 !important; /* طلایی روشن */
  transition: color 0.15s;
}

}



/* --- Dropdown Modern Glass Style --- */
.dropdown {
  position: relative;
  display: inline-block;
  direction: rtl;
}

.dropbtn {
  color: #fff;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 16px;
  padding: 8px 0px 8px 8px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 6px;
  outline: none;
}
.dropbtn:hover,
.dropdown.open .dropbtn {
  
  color: #ffd966;
}

.dropbtn .dropdown-arrow {
  font-size: 1.1em;
  transition: transform 0.18s;
}
.dropdown.open .dropbtn .dropdown-arrow {
  transform: rotate(-180deg);
}



@keyframes dropdown-fade-in {
  from { opacity: 0; transform: translateY(8px);}
  to   { opacity: 1; transform: none;}
}

.dropdown.open .dropdown-content {
  display: block;
}


.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 135%;
  min-width: 182px;
  z-index: 100000;
  background: var(--dropdown-bg);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  border-radius: 20px;
  box-shadow: var(--dropdown-shadow);
  border: 1.2px solid var(--dropdown-border);
  padding: 8px 0;
  animation: dropdown-fade-in 0.22s cubic-bezier(.33,.73,.71,.99);
}

/* Dropdown Links */
.dropdown-content a {
  color: var(--dropdown-link);
  padding: 11px 24px 11px 16px;
  font-size: 15px;
  text-decoration: none;
  display: block;
  border-radius: 13px;
  margin: 2px 8px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  font-family: inherit;
}

.dropdown-content a:hover, 
.dropdown-content a:focus {
  background: var(--dropdown-link-bg-hover);
  color: var(--resposive-color-text);
  box-shadow: 0 0 0 1px var(--dropdown-link-bg-hover);
}


/* Responsive */
@media (max-width: 700px) {
  .dropdown-content {
    min-width: 90vw;
    right: 2vw;
    left: 2vw;
    padding: 4px 0;
  }
  .dropbtn {
    width: 100%;
    font-size: 1.12em;
    justify-content: flex-end;
  }
}


/* ==================== Sidebar Popup ==================== */
.sidebar_popup {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: -400px; /* پیش‌فرض: بیرون صفحه باشه */
  width: 280px;
  max-width: 90vw;
  background: rgba(34, 40, 66, 0.55);
  box-shadow: -8px 0 40px 0 rgba(68, 103, 168, 0.19);
  border-radius: 24px 0 0 24px;
  padding: 1rem;
  z-index: 1200;
  transition: right 0.35s cubic-bezier(.45, .85, .37, 1.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.sidebar_popup.open {
  right: 0;
}

/* ==================== Sidebar Content ==================== */
.sidebar_content {
  flex: 1;
  overflow-y: auto;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  padding-top: 0.5rem;
}

/* ==================== Sidebar Logo Row ==================== */
.sidebar_logo_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sidebar_logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar_logo img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border-radius: 50%;
  box-shadow: 0 6px 24px rgba(68, 103, 168, 0.18);
  background: #383838;
  object-fit: cover;
}

/* ==================== Sidebar Close Button ==================== */
.sidebar_close {
  font-size: 1.6rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.18s, background 0.14s;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar_close:hover,
.sidebar_close:focus {
  color: #ffd966;
  background: rgba(68, 103, 168, 0.08);
}

/* ==================== Sidebar Search Box ==================== */
.sidebar_search {
  position: relative;
  margin: 0 0.6rem 0.7rem 0.6rem;
}

.sidebar_search input {
  width: 100%;
  padding: 0.6rem 2.2rem 0.6rem 0.8rem;
  border-radius: 1rem;
  border: none;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-size: 1rem;
  outline: none;
  box-shadow: 0 2px 10px rgba(68, 103, 168, 0.07);
}

.sidebar_search .search_icon {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #a5b4cc;
  font-size: 1.25rem;
  pointer-events: none;
  font-family: inherit;
}
#sidebarSearchInput::placeholder {
  font-family: IRANSansX;
  font-size: 0.95rem; /* اندازه دلخواه */
  color: var(--color-text-light); /* رنگ هماهنگ با تم */
  opacity: 1; /* حذف شفافیت پیش‌فرض */
}


/* ==================== Sidebar Menu List ==================== */
.sidebar_menu_list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 0.1rem;
  list-style: none;
}

/* ==================== Sidebar Menu Items ==================== */
.sidebar_menu_list li a,
.sidebar_dropbtn {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 1rem;
  padding: 0.7rem 0.8rem;
  transition: background 0.16s, color 0.16s;
  display: block;
}

.sidebar_menu_list li a:hover,
.sidebar_dropbtn:hover,
.sidebar_dropbtn:focus {
  background: rgba(68, 103, 168, 0.13);
  color: #ffd966;
}

/* ==================== Sidebar Dropdown ==================== */
.sidebar_dropdown {
  position: relative;
}

.sidebar_dropbtn {
  width: 100%;
  text-align: right;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.sidebar_dropdown_icon {
  font-size: 0.8em;
  margin-right: 0.6em;
  transition: transform 0.2s;
}

/* ==================== Sidebar Dropdown Content ==================== */
.sidebar_dropdown_content {
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.1rem;
  margin-right: 1.2rem;
  padding-right: 0.7rem;
  border-right: 2px solid rgba(68, 103, 168, 0.11);
  animation: fadeInDropdown 0.32s;
  list-style: none;
  text-decoration: none;
}

@keyframes fadeInDropdown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sidebar_dropdown.open .sidebar_dropdown_content {
  display: flex;
}

.sidebar_dropdown.open .sidebar_dropdown_icon {
  transform: rotate(-180deg);
}

/* ==================== Sidebar Backdrop ==================== */
.sidebar_backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(30, 36, 61, 0.33);
  z-index: 1190;
  transition: opacity 0.25s;
}

.sidebar_popup.open ~ .sidebar_backdrop {
  display: block;
  opacity: 1;
}

/* ==================== Media Queries ==================== */
.sidebar_menu_list li a,
.sidebar_dropbtn,
.sidebar_menu_list li a *,
.sidebar_dropbtn * {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: 0.9rem;
  color: #fff;
}
.sidebar_content {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent; /* Firefox پشتیبانی */
}

/* برای Chrome و Safari */
/* ====== Modern Minimal Scrollbar for Sidebar ====== */
.sidebar_content::-webkit-scrollbar {
  width: 4px; /* حتی می‌توان 2px گذاشت ولی 4px خواناتر است */
}

.sidebar_content::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar_content::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.15); /* پایه خیلی ظریف */
  border-radius: 4px;
  transition: background-color 0.2s ease, width 0.2s ease;
}

/* هاور: کمی پررنگ‌تر و پهن‌تر برای تعامل راحت‌تر */
.sidebar_content:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 217, 102, 0.35);
  width: 6px;
}

/* تم روشن */
body.light-theme .sidebar_content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
}
body.light-theme .sidebar_content:hover::-webkit-scrollbar-thumb {
  background-color: rgba(184, 134, 11, 0.35);
}
/* 1) سایدبار همیشه بالاتر از هدر و همه‌ی بک‌دراپ‌ها باشد */
.sidebar_popup{
  z-index: 100002 !important;  /* بالاتر از header, dropdown-backdrop */
}
#sidebarBackdrop,
.sidebar_backdrop{
  z-index: 100001 !important;  /* درست پشت سایدبار */
}

/* 2) مدل بک‌دراپ استاندارد با کلاس active (هماهنگ با JS) */
.sidebar_backdrop{
  position: fixed; inset: 0;
  background: rgba(2,6,23,.35);
  opacity: 0; transition: opacity .25s ease;
  display: none;
}
.sidebar_backdrop.active{ display:block; opacity:1; }

/* اگر قبلاً داشتی: .sidebar_popup.open ~ .sidebar_backdrop { ... }  را حذف کن */







/* ریسپانسیو: مخفی کردن در دسکتاپ */
@media (min-width: 950px) {
  .mobile_menu,
  .sidebar_popup,
  .sidebar_backdrop {
    display: none !important;
  }
}

/* ریسپانسیو: مخفی کردن در موبایل */
@media (max-width: 949px) {
  .header2,
  .menu_list,
  .basket,
  .register,
  .login {
    display: none !important;
  }
}

/* نمایش دکمه موبایل */
@media (min-width: 950px) {
  .register_mobile,
  .profile_dropdown {
    display: none !important;
  }
}
/* --------- Profile Button --------- */
.mobile_menu {
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.22s, transform 0.13s;
  font-family: inherit;
  outline: none;
  padding: 10px 0px;
  margin-top: 10px;
}
.mobile_menu:focus,
.mobile_menu:hover {


  transform: scale(1.06);
}
.mobile_menu i {
  font-size: 30px;
  color: #f7fafc;
  transition: color 0.13s, text-shadow 0.17s;
  
}
.mobile_menu:focus i,
.mobile_menu:hover i {
  color: #ffd966;
}


/* -------- Profile Dropdown Container -------- */
/* =================== Base =================== */
.register_mobile {
  position: relative;
  display: inline-block;
}
.header {
  position: relative;
  z-index: 99999; /* همیشه بالای بک‌دراپ */
}
.profile_dropdown {
  z-index: 100001; /* کانتینر بالای بک‌دراپ */
}

/* ================= Trigger ================= */
.profile_btn {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
.profile_btn i {
  font-size: 30px;
  color: #e9eef8;
  transition: transform .18s, color .18s, text-shadow .2s;
}
.profile_avatar_btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .25);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.profile_btn:hover .profile_avatar_btn,
.profile_btn:focus .profile_avatar_btn {
  transform: scale(1.07);
  border-color: #ffd966;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}
.profile_btn:hover i,
.profile_btn:focus i {
  color: #ffd966;
  text-shadow: 0 2px 12px rgba(255, 217, 102, .4);
}

/* ================= Backdrop ================= */
.dropdown-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 19, 34, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 9000;
  display: none;
}
.dropdown-backdrop.active {
  opacity: 1;
  display: block;
}

/* ================= Panel (Shared) ================= */
.profile_card,
.profile_dropdown_menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  width: min(92vw, 360px);
  border-radius: 20px;
  background: var(--profile-bg);
  border: 1px solid var(--profile-border);
  box-shadow: var(--profile-shadow);
  color: var(--profile-text);
  z-index: 100001;
  animation: profileFadeIn .22s cubic-bezier(.45, .85, .47, 1.13);
}
.profile_dropdown.open .profile_card,
.profile_dropdown.open .profile_dropdown_menu {
  display: flex;           /* بجای block */
  flex-direction: column;
}

@keyframes profileFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

/* ================= Logged-in Card ================= */
.profile_card {
  padding: 14px 14px 10px;
}
.profile_card_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px 10px;
}
.profile_card_user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar_ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid rgba(78, 205, 90, .65);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.avatar_ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.avatar_ring i {
  font-size: 26px;
  color: #e6eefc;
}
.user_meta .hello {
  font-size: .78rem;
  color: #b7c3df;
  line-height: 1.1;
}
.user_meta .name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--profile-text);
}
.profile_card_link {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;            /* چپِ کارت در RTL */
  margin: 8px 14px 10px 0;         /* فقط همین یک بار */
  gap: 6px;
  font-size: 1rem;
  color: var(--profile-link);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--profile-border);
  transition: background .14s, color .14s, border-color .14s;
}
.profile_card_link:hover {
  background: var(--profile-hover-bg);
  color: var(--profile-hover-text);
}

/* ================= Stats ================= */
.profile_stats {
  display: grid;
  gap: 10px;
  padding: 8px 6px 12px;
}
.profile_stats .stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .18);
}
.profile_stats .label {
  color: #d7e2fb;
  font-size: .9rem;
}
.profile_stats .value {
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; margin-left: 6px;
}
.dot.blue  { background: var(--profile-dot-blue); }
.dot.green { background: var(--profile-dot-green); }

.profile_divider {
  border: none;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  margin: 6px 0 8px;
}

/* ================= Actions ================= */
.profile_actions {
  list-style: none;
  margin: 0;
  padding: 2px;
}
.profile_actions li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--profile-text);
  font-size: .95rem;
  font-weight: 500;
  transition: background .14s, color .14s, transform .08s;
}
.profile_actions li a i {
  font-size: 1.05rem;
  color: var(--profile-icon);
  transition: color .18s, transform .18s;
}
.profile_actions li a:hover {
  background: var(--profile-hover-bg);
  color: var(--profile-hover-text);
  transform: translateX(-2px);
}
.profile_actions li a:hover i {
  color: var(--profile-hover-text);
}
.profile_actions li.logout a i {
  color: #ffb4b4;
}

/* ===== Guest Menu — Final, clean, theme-aware ===== */
/* Reset */
.profile_dropdown_menu,
.profile_dropdown_menu ul,
.profile_dropdown_menu li {
  list-style: none; margin: 0; padding: 0;
}

/* Container */
.profile_dropdown_menu {
  min-width: 150px;
  max-width: 200px;
  padding: 8px;
  border-radius: 18px;
  background: var(--profile-bg);
  border: 1px solid var(--profile-border);
  box-shadow: var(--profile-shadow);
}

/* Items */
.profile_dropdown_menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--profile-text);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease;
  outline: none;
}

/* Icon “pill” */
.profile_dropdown_menu li a i {
  font-size: 1.05rem;
  color: var(--profile-icon);
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--profile-hover-bg) 55%, transparent);
  box-shadow: 0 2px 10px rgba(0,0,0,.10) inset, 0 4px 10px rgba(0,0,0,.07);
  transition: background .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease;
}

/* Separator (between items only) */
.profile_dropdown_menu li + li::before {
  content: "";
  display: block;
  height: 1px;
  margin: 6px 6px 0;
  background: linear-gradient(
    90deg, transparent,
    color-mix(in oklab, var(--profile-text) 14%, transparent),
    transparent
  );
  opacity: .5;
}

/* Hover / Focus */
.profile_dropdown_menu li a:hover,
.profile_dropdown_menu li a:focus {
  background: var(--profile-hover-bg);
  color: var(--profile-hover-text);
  transform: translateX(-2px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.profile_dropdown_menu li a:hover i,
.profile_dropdown_menu li a:focus i {
  color: var(--profile-hover-text);
  background: color-mix(in oklab, var(--profile-hover-bg) 85%, transparent);
  box-shadow: 0 3px 14px rgba(0,0,0,.10) inset, 0 6px 14px rgba(0,0,0,.08);
}

/* Keyboard focus only */
.profile_dropdown_menu li a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37,99,235,.35);
}

/* Optional CTA (add class="cta" to <li>) */
.profile_dropdown_menu li.cta a {
  background: color-mix(in oklab, var(--profile-hover-bg) 65%, transparent);
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
}
.profile_dropdown_menu li.cta a i {
  color: #ffd966; /* طلایی برند */
}

/* ================= Scrollbars (order-sensitive) ================= */
.profile_card {
  scrollbar-width: thin;                  /* برای فایرفاکس */
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.profile_card::-webkit-scrollbar {        /* استایل اولیه */
  width: 4px;                             /* خیلی نازک */
}
.profile_card::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.profile_card::-webkit-scrollbar-track {
  background: transparent;
}

/* اگر بخوای کامل مخفی شه: (Authority – باید بعد از استایل بالا بماند) */
.profile_card::-webkit-scrollbar {
  display: none;
}

/* ================= Mobile ================= */
@media (max-width: 700px) {
  .profile_card {
    max-width: 80vw;
    font-size: 0.95rem;
    max-height: 70vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* =========================
   دکمه و منوی پروفایل نسخه دسکتاپ
   ========================= */

/* ========== Base: Wrapper & Visibility ========== */
/* --- دکمه دسکتاپ (نمایش بالای 950px) --- */
.profile_dropdown_desktop {
  position: relative;
  display: none; /* پیش‌فرض مخفی */
  z-index: 100001;
}

@media (min-width: 950px) {
  body.is-logged-in .profile_dropdown_desktop {
    display: inline-block;
  }
}

/* ========== Button (Trigger) ========== */


.profile_dropdown_desktop .profile_btn_desktop:hover {
  background: rgba(68, 103, 168, 0.23);
  box-shadow: 0 4px 12px rgba(68, 103, 168, 0.14);
}

/* متن سلام */
.profile_dropdown_desktop .profile_greet .hello {
  opacity: 0.9;
  margin-left: 0.25rem;
}

/* --- آیکون روی هاور --- */
.profile_dropdown_desktop .profile_btn_desktop i {
  font-size: 30px;
  color: #e9eef8;
  transition: transform .18s, color .18s, text-shadow .2s;
}

.profile_dropdown_desktop .profile_btn_desktop:hover i {
  color: #ffd966;
  text-shadow: 0 2px 12px rgba(255, 217, 102, .4);
}

/* ========== Avatar (Small ring at trigger) ========== */
.profile_dropdown_desktop .avatar_ring {
  position: relative;
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.profile_dropdown_desktop .avatar_ring::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #2ecc71;
}

.profile_dropdown_desktop .avatar_ring .bi-person {
  font-size: 16px;
  line-height: 1;
}

/* ========== Backdrop ========== */
.dropdown-backdrop-desktop {
  position: fixed;
  inset: 0;
  background: rgba(14, 19, 34, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 100001;
  display: none;
}

.dropdown-backdrop-desktop.active {
  opacity: 1;
  display: block;
}

/* ========== Dropdown Card ========== */
.profile_dropdown_desktop .profile_card {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(92vw, 360px);
  border-radius: 20px;
  background: var(--profile-bg);
  border: 1px solid var(--profile-border);
  box-shadow: var(--profile-shadow);
  color: var(--profile-text);
  z-index: 100001;
  animation: profileFadeIn .22s cubic-bezier(.45, .85, .47, 1.13);
  padding: 14px 14px 10px;
}

.profile_dropdown_desktop.open .profile_card {
  display: flex;
  flex-direction: column;
}

@keyframes profileFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========== Card: Header ========== */
.profile_dropdown_desktop .profile_card_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px 10px;
}

/* ========== Card: User meta + Large avatar (inside card) ========== */
.profile_dropdown_desktop .profile_card_user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile_dropdown_desktop .avatar_ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid rgba(78, 205, 90, .65);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.profile_dropdown_desktop .avatar_ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.profile_dropdown_desktop .avatar_ring i {
  font-size: 26px;
  color: #e6eefc;
}

.profile_dropdown_desktop .user_meta .hello {
  font-size: .78rem;
  color: #b7c3df;
  line-height: 1.1;
}

.profile_dropdown_desktop .user_meta .name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--profile-text);
}

/* لینک «مشاهده پروفایل» */
.profile_dropdown_desktop .profile_card_link {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  margin: 8px 14px 10px 0;
  gap: 6px;
  font-size: 1rem;
  color: var(--profile-link);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--profile-border);
  transition: background .14s, color .14s, border-color .14s;
}

.profile_dropdown_desktop .profile_card_link:hover {
  background: var(--profile-hover-bg);
  color: var(--profile-hover-text);
}

/* ========== Stats ========== */
.profile_dropdown_desktop .profile_stats {
  display: grid;
  gap: 10px;
  padding: 8px 6px 12px;
}

.profile_dropdown_desktop .profile_stats .stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .18);
}

.profile_dropdown_desktop .profile_stats .label {
  color: #d7e2fb;
  font-size: .9rem;
}

.profile_dropdown_desktop .profile_stats .value {
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
}

.profile_dropdown_desktop .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
}

.profile_dropdown_desktop .dot.blue  { background: var(--profile-dot-blue); }
.profile_dropdown_desktop .dot.green { background: var(--profile-dot-green); }

.profile_dropdown_desktop .profile_divider {
  border: none;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  margin: 6px 0 8px;
}

/* ========== Actions (Menu Links) ========== */
.profile_dropdown_desktop .profile_actions {
  list-style: none;
  margin: 0;
  padding: 2px;
}

.profile_dropdown_desktop .profile_actions li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--profile-text);
  font-size: .95rem;
  font-weight: 500;
  transition: background .14s, color .14s, transform .08s;
}

.profile_dropdown_desktop .profile_actions li a i {
  font-size: 1.05rem;
  color: var(--profile-icon);
  transition: color .18s, transform .18s;
}

.profile_dropdown_desktop .profile_actions li a:hover {
  background: var(--profile-hover-bg);
  color: var(--profile-hover-text);
  transform: translateX(-2px);
}

.profile_dropdown_desktop .profile_actions li a:hover i {
  color: var(--profile-hover-text);
}

.profile_dropdown_desktop .profile_actions li.logout a i {
  color: #ffb4b4;
}

/* ========== Desktop-Specific Overrides (Kept Last as Authority) ========== */
@media (min-width: 950px) {
  .profile_dropdown_desktop .profile_btn_desktop {
    height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-basket-btn);
    border: 1px solid rgba(68, 103, 168, 0.13);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(68, 103, 168, 0.09);
    color: #e9eef8;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, border-color .14s, box-shadow .18s;
    font-family: inherit;
  }

  .profile_dropdown_desktop .profile_btn_desktop:hover {
    background: rgba(68, 103, 168, 0.23);
    color: #ffd966;
    box-shadow: 0 4px 16px rgba(68, 103, 168, 0.12);
  }

  /* اندازه آواتار کوچک روی دکمه (دسکتاپ) */
  .profile_dropdown_desktop .avatar_ring {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    border: 2px solid rgba(78, 205, 90, .65);
  }

  .profile_dropdown_desktop .avatar_ring .bi-person {
    font-size: 18px;
  }
}

/* فقط هدر منوی دسکتاپ را مثل موبایل کن (Authority Block - MUST stay last) */
@media (min-width: 950px) {
  .profile_dropdown_desktop .profile_card_header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 4px 10px; /* مثل موبایل */
    flex-direction: row;   /* آواتار راست، متن چپ (RTL) */
  }

  .profile_dropdown_desktop .profile_card_header .avatar_ring{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid rgba(78,205,90,.65);
    background: rgba(255,255,255,.06);
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
  }

  .profile_dropdown_desktop .profile_card_header .avatar_ring i{
    font-size: 26px;
    color: #e6eefc;
  }

  .profile_dropdown_desktop .user_meta .hello{
    font-size: .78rem;
    color: #b7c3df;
    line-height: 1.1;
  }

  .profile_dropdown_desktop .user_meta .name{
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--profile-text);
  }
}









/* ==================== Button Container ==================== */
.register_btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
  margin-left: 10px;
}

/* ==================== Mobile View - Only Mobile Button ==================== */
.basket, .register, .login, .theme-toggle {
  display: none;
}

.register_mobile {
  display: flex;
}

/* ==================== Desktop View - From 950px and up ==================== */
@media (min-width: 950px) {

  /* Display Right Side Buttons */
  .basket, .search_btn, .register, .login, .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.1em;
  }

  .register_mobile {
    display: none;
  }

  /* ==================== Button Styling ==================== */
  .basket a, .search_btn a {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 18px;
    border-radius: 12px;
    background: var(--color-bg-basket-btn);
    border: 1px solid rgba(68, 103, 168, 0.13);
    box-shadow: 0 2px 8px rgba(68, 103, 168, 0.09);
    color: #f7fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 
      background 0.17s cubic-bezier(.4, .8, .4, 1.08),
      color 0.12s,
      box-shadow 0.18s cubic-bezier(.5, 1, .55, 1.18),
      border 0.14s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .basket  i, .search_btn i {
    font-size: 20px;
    margin: 0 auto;
    color: #f9fafa;
    padding-top: 5px;

  }

  /* ==================== Text Buttons (Login/Register) ==================== */
  .register a, .login a {
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 0.6em;  /* Space between icon and text */
    padding: 0.62em 1.3em;
    font-size: 15px;
    font-weight: 500;
    border-radius: 10px;
    background: var(--color-bg-register-btn);
    border: 1px solid rgba(68, 103, 168, 0.13);
    box-shadow: 0 2px 8px rgba(68, 103, 168, 0.09);
    color: #f7fafc;
    transition: 
      background 0.17s cubic-bezier(.4, .8, .4, 1.08),
      color 0.12s,
      box-shadow 0.18s cubic-bezier(.5, 1, .55, 1.18),
      border 0.14s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* ==================== Hover Effects ==================== */
  .basket a:hover, .search_btn a:hover, 
  .register a:hover, .login a:hover {
    background: rgba(68, 103, 168, 0.23);
    color: #ffd966;
    box-shadow: 0 4px 16px rgba(68, 103, 168, 0.12);
  }
  .basket a i:hover, .search_btn a i:hover{
    color: #ffd966;
  }

  /* ==================== Active State ==================== */
  .basket a:active, .search_btn a:active, 
  .register a:active, .login a:active {
    background: rgba(68, 103, 168, 0.16);
    color: #fffbe8;
    box-shadow: none;
  }
}



/* ==================== Hero Section ==================== */
.hero {
   max-height: 800px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 10px;
}
.hero3 {
  font-family: IRANYekanX  !important;
   max-height: 800px;
  max-width: 1200px;
  margin: 0 auto;
  
}
.hero4 {
   max-height: 800px;
  max-width: 1200px;
  margin: 0 auto;
  
}
/* ==================== Hero Flex (Flexbox Layout) ==================== */
.hero-flex {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 20px 3vw 32px 3vw;
  gap: 70px;
}
.hero-flex3 {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  padding: 0px 3vw 32px 3vw;
  gap: 40px;
}

/* ==================== Hero Image Wrap ==================== */
.hero-img-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-basis: 40%;
}

.hero-img {
  width: 420px;
  max-width: 90vw;
  border-radius: 2.5em 2.5em 64px 64px / 2.5em 2.5em 44px 44px;
  padding-right: 50px;
  object-fit: contain;
  margin: 0 auto;
}

.hero-img-wrap3 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-basis: 50%;
}

.hero-img3 {
  width: 600px;
  max-width: 90vw;
  border-radius: 2.5em 2.5em 64px 64px / 2.5em 2.5em 44px 44px;
  padding-right: 50px;
  object-fit: contain;
  margin: 0 auto;
}
/* ==================== Hero Content (Text Area) ==================== */
.hero-content {
  display: flex;
  flex-direction: column;
  flex-basis: 60%;
  gap: 30px;
  align-items: flex-start;
  max-width: 540px;
  padding-top: 5px;
  padding-right: 120px;
}
.hero-content3 {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
  gap: 10px;
  align-items: flex-start;
  max-width: 540px;
  padding-top: 70px;
  padding-right: 60px;
}
/* ==================== Hero Title ==================== */
.hero-title {
  font-size: 2.7rem;
  font-weight: 900;
  color: var(--color-hero-titel);
  line-height: 1.8;
  margin-bottom: 5px;
}
.hero-title3 {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--h-text-main);
  line-height: 2;
  margin-bottom: 0px;
}
/* ==================== Hero Description ==================== */
.hero-desc {
  color: var(--color-hero-p);
  font-size: 1.13rem;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.8;
}
.hero-desc3 {
  color: var(--h-text-sub);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 2;
}
/* ==================== Hero CTA (Call to Action) ==================== */
.hero-cta {
  display: flex;
  gap: 15px;
  margin-bottom: 18px;
  
}

/* ==================== Buttons Styling ==================== */
.btn {
  border: none;
  border-radius: 1.5em;
  font-size: 1rem;
  font-weight: 700;
  padding: 1em 1.5em;
  cursor: pointer;
  transition: background .16s, color .13s;
  outline: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn1 {
  border: none;
  border-radius: 1.5em;
  font-size: 1rem;
  font-weight: 700;
  padding: 1em 2em;
  cursor: pointer;
  transition: background .16s, color .13s;
  outline: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn3 {
  border: none;
  border-radius: 1.5em;
  font-size: 1rem;
  font-weight: 700;
  padding: 1em 1.5em;
  cursor: pointer;
  transition: background .16s, color .13s;
  outline: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn-primary {
  background: var(--color-hero-btn-bg);
  color: var(--color-hero-btn-p);
}

.btn-primary:hover {
  background: var(--color-hero-btn-hover);
  color: var(--color-hero-btn-p-hover)
}

.btn-secondary {
  background: var(--color-hero-btn-trans-bg);
  color: var(--color-hero-btn-tarans-p);
  border: 4px solid #4f6baa;
}

.btn-secondary:hover {
  background: var(--color-hero-btn-tarans-hover);
  color: var(--color-hero-btn-tarans-hover-p);
  border-color: rgba(253, 254, 254, 0.9);
}

/* ==================== Responsive Design ==================== */

/* Tablet and Mobile (max-width: 1280px) */
@media (max-width: 1280px) {
  .hero-flex {
    gap: 10px;
  }
  .hero-content {
    padding-right: 50px;
    gap: 30px;
  }
  .hero-img3 {
  width: 500px;
 
}
.hero-title3 {
  font-size: 1.6rem;
   line-height: 2;
   
}
.hero-content3 {
    padding-right: 50px;
    gap: 10px;
padding-top: 40px;
  }
  .hero-desc3 {
  
  font-size: .9rem;
  margin-bottom: 30px;
  line-height: 1.8;
}
}
@media (max-width: 1050px) {
 .hero-title {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 6px;
  }
  .hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.hero-img3 {
  width: 400px;
 
}
.hero-content {
    padding-right: 50px;
    gap: 10px;
  }
  .hero-desc3 {
  
  font-size: .9rem;
  
  line-height: 1.8;
}
}

/* Tablet and Mobile (max-width: 950px) */
@media (max-width: 950px) {
  .hero {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
  }
  .hero-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 5px 3vw 5px 3vw;
    gap: 20px;
  }
  .hero-img-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-basis: 50%;
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    text-align: center;
    gap: 22px;
    align-items: center;
    max-width: 540px;
    padding-top: 80px;
    padding-right: 0px;
    padding-bottom: 50px;
  }
  .hero-title {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 6px;
  }
  .hero-img-wrap3 {
    display: none !important;
  }
 .hero-content3 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    text-align: center;
    gap: 22px;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
  }
 

  .hero-title3 {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 6px;
  }
}

/* Mobile View (max-width: 860px) */
@media (max-width: 860px) {
  .hero-img-wrap {
    display: none !important;
  }
  

  .hero {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    z-index: auto;
    padding-top: 30px;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    text-align: center;
    gap: 22px;
    align-items: center;
    max-width: 540px;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
  }

  .hero-title {
    font-size: 2.7rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 6px;
  }


}

/* Mobile View (max-width: 550px) */
@media (max-width: 550px) {
  .hero-title {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 10px;
    margin-top: 0px;
  }
  .hero-cta {
  
  margin-top: 10px;
}
 .hero-title3 {
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 2;
    margin-bottom: 0px;
  }
  .hero-content3 {
    
    gap: 10px;
padding-top: 30px;
  }
  .hero-desc3 {
  
  font-size: .8rem;
  margin-bottom: 20px;
  line-height: 2;
}
  .hero-desc {
  
  font-size: .9rem;
  margin-bottom: 20px;
  line-height: 1.8;
  margin-top: 0px;
}
.btn3 {
  border: none;
  border-radius: 1.5em;
  font-size: .9rem;
  
}
}


/* ------------------------------------------------------------------------------------ */
/* ==================== Hero2 Section ==================== */
.hero2 {
  font-family: IRANYekanX  !important;
  max-height: 450px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 50px;
  
}

/* ==================== Hero Flex (Flexbox Layout) ==================== */
.hero-flex2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  max-width: 1100px;
 
  
  
}

/* ==================== Hero Image Wrap ==================== */
.hero-img-wrap2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 50%;
  max-width: 300px;
}
.hero-img-wrap3 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 50%;
  max-width: 300px;
}
.hero-img2 {
  
  max-width:  300px;
 margin: 0 auto;

}

/* ==================== Hero Content (Text Area) ==================== */
.hero-content2 {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
  gap: 22px;
  align-items: flex-start;
  max-width: 420px;
  
}

/* ==================== Hero Title ==================== */
.hero-title2 {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--h-text-main);
  line-height: 2.2;
  margin-bottom: 6px;
}

/* ==================== Hero Description ==================== */
.hero-desc2 {
  color: var(--h-text-sub);
  font-size: .95rem;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 2.2;
}

/* ==================== Hero CTA (Call to Action) ==================== */
.hero-cta2 {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
/* ==================== Buttons Styling ==================== */
.btn2 {
  border: none;
  border-radius: 1.5em;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 1em 2em;
  cursor: pointer;
  transition: background .16s, color .13s;
  outline: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.btn-primary2 {
  background: var(--color-hero-btn-bg);
  color: var(--color-hero-btn-p);
}

.btn-primary2:hover {
  background: var(--color-hero-btn-hover);
}

.btn-secondary2 {
  background: var(--color-hero-btn-trans-bg);
  color: var(--color-hero-btn-tarans-p);
  border: 2px solid #4f6baa;
}

.btn-secondary2:hover {
  background: var(--color-hero-btn-tarans-hover);
  color: var(--color-hero-btn-tarans-hover-p);
  border-color: rgba(1, 67, 132, 0.9);
}



/* ==================== Responsive Design ==================== */

/* Tablet and Mobile (max-width: 1280px) */
@media (max-width: 1280px) {
  .hero2{max-width: 900px;}
  
  .hero-title2 {
  font-size: 2rem;
  }
}
@media (max-width: 1050px) {
  .hero2{max-width: 750px;}
  
  .hero-title2 {
  font-size: 2rem;
  
}
}

/* Tablet and Mobile (max-width: 950px) */
@media (max-width: 950px) {
  
  
  
.hero2{
  padding-top: 50px;
  
}
  .hero-title2 {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 6px;
  }
  .hero-desc2 {
    font-size: .85rem;
    margin-bottom: 12px;
    line-height: 2.2;
  }
}

/* Mobile View (max-width: 770px) */
@media (max-width: 767px) {
  .hero-img-wrap2 {
    display: none !important;
  }
.hero2{
 padding-top: 0px;
  margin-bottom: 50px;
}
 

  .hero-content2 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    text-align: center;
    gap: 22px;
    align-items: center;
    max-width: 540px;
    padding-top: 50px;
    padding-right: 0px;
    padding-bottom: 30px;
  }

  .hero-title2 {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 2;
    margin-bottom: 6px;
  }

  .hero-desc2 {
    font-size: .8rem;
    margin-bottom: 12px;
    line-height: 2.2;
  }
}

/* Mobile View (max-width: 550px) */
@media (max-width: 550px) {
  .hero-title2 {
    font-size: 1.5rem;
   
  }
   .hero-desc2 {
    font-size: .8rem;
   
  }
}


/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* ==================== Hero4 Section ==================== */
.hero4 {
  max-height: 800px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 50px;
  
}

/* ==================== Hero Flex (Flexbox Layout) ==================== */
.hero-flex4 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  max-width: 1100px;
 
  
  
}

/* ==================== Hero Image Wrap ==================== */
.hero-img-wrap4 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 50%;
  max-width: 600px;
}
.hero-img-wrap4 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 50%;
  max-width: 600px;
}
.hero-img4 {
  
  max-width:  600px;
 margin: 0 auto;

}

/* ==================== Hero Content (Text Area) ==================== */
.hero-content4 {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
  gap: 22px;
  align-items: flex-start;
  max-width: 420px;
  
}

/* ==================== Hero Title ==================== */
.hero-title4 {
  font-size: 2.7rem;
  font-weight: 900;
  color: var(--color-hero-titel);
  line-height: 2;
  margin-bottom: 6px;
}

/* ==================== Hero Description ==================== */
.hero-desc4 {
  color: var(--color-hero-p);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 2;
}

/* ==================== Hero CTA (Call to Action) ==================== */
.hero-cta4 {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
/* ==================== Buttons Styling ==================== */
.btn4 {
  border: none;
  border-radius: 1.5em;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 1em 2em;
  cursor: pointer;
  transition: background .16s, color .13s;
  outline: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.btn-primary4 {
  background: var(--color-hero-btn-bg);
  color: var(--color-hero-btn-p);
}

.btn-primary4:hover {
  background: var(--color-hero-btn-hover);
}

.btn-secondary4 {
  background: var(--color-hero-btn-trans-bg);
  color: var(--color-hero-btn-tarans-p);
  border: 2px solid #4f6baa;
}

.btn-secondary4:hover {
  background: var(--color-hero-btn-tarans-hover);
  color: var(--color-hero-btn-tarans-hover-p);
  border-color: rgba(1, 67, 132, 0.9);
}



/* ==================== Responsive Design ==================== */

/* Tablet and Mobile (max-width: 1280px) */
@media (max-width: 1280px) {
  .hero4{max-width: 900px;}
  
  .hero-title2 {
  font-size: 2rem;
  }
}
@media (max-width: 1050px) {
  .hero4{max-width: 750px;}
  
  .hero-title2 {
  font-size: 1.8rem;
  
}
}

/* Tablet and Mobile (max-width: 950px) */
@media (max-width: 950px) {
  
  
  
.hero4{
  padding-top: 50px;
  
}
  .hero-title4 {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 6px;
  }
  .hero-desc4 {
    font-size: 1rem;
    margin-bottom: 12px;
    line-height: 2;
  }
}

/* Mobile View (max-width: 770px) */
@media (max-width: 767px) {
  .hero-img-wrap2 {
    display: none !important;
  }
.hero4{
 padding-top: 0px;
  margin-bottom: 50px;
}
 

  .hero-content4 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    text-align: center;
    gap: 22px;
    align-items: center;
    max-width: 540px;
    padding-top: 50px;
    padding-right: 0px;
    padding-bottom: 30px;
  }

  .hero-title4 {
    font-size: 2.7rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 6px;
  }

  .hero-desc4 {
    font-size: 1rem;
    margin-bottom: 12px;
    line-height: 2;
  }
}

/* Mobile View (max-width: 550px) */
@media (max-width: 550px) {
  .hero-title4 {
    font-size: 1.5rem;
   
  }
   .hero-desc4 {
    font-size: .9rem;
   
  }
}


/* ------------------------------------------------------------------------------------ */
/* ==================== Courses List ==================== */
.courses-list {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* ==================== Course Row ==================== */
.course-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

/* ==================== Course Info ==================== */
.course-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-basis: 50%;
  gap: 1.2rem;
}

/* ==================== Course Header ==================== */
.course-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==================== Course Icon ==================== */
.course-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 3px 18px rgba(70, 110, 180, 0.08);
  background: #232a3a;
  object-fit: contain;
}

/* ==================== Course Title ==================== */
.course-title {
  font-family: IRANYekanX  !important;
  font-size: 2rem;
  color: var(--color-course-titel);
  font-weight: 800;
  margin: 0;
}

/* ==================== Course Description ==================== */
.course-desc {
  font-size: 1rem;
  font-weight: 500;
  text-align: justify;
  line-height: 2;
  color: var(--color-course-desc);
  margin: 0;
  margin-bottom: 1.1rem;
}

/* ==================== Course Header Icon ==================== */
.course-header i {
  color: var(--color-course-icon);
}

/* ==================== Course Button ==================== */
.course-btn {
  font-family: IRANYekanX  !important;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  background: transparent;
  color: var(--color-course-btn);
  border: 1.4px solid var(--color-course-btn);
  padding: 0.56em 1.6em;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s;
}

.course-btn i {
  font-size: 1.2em;
}

.course-btn:hover {
  background: var(--color-course-btn-hover);
  color: var(--color-course-btn-hover-p);
}

/* ==================== Course Image Box ==================== */
.course-imgbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 50%;
}

.course-img {
  width: 100%;
  max-width: 95vw;
  border-radius: 24px;
  object-fit: contain;
}

/* ==================== Mobile Responsiveness ==================== */
@media (max-width: 750px) {
  .course-row {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
.courses-list {
  
  padding: 0px;
  
}
  /* Reverse Order for second row */
  .course-row-reverse {
    flex-direction: column-reverse !important;
  }

  .course-img {
    width: 90vw;
    max-width: 90vw;
  }

  .course-imgbox {
    margin-bottom: 0.7em;
  }

  /* Align text below the image */
  .course-info {
    align-items: flex-start;
    text-align: right;
    margin-top: 0;
  }

  .course-title {
    font-size: 1.5rem;
  }

  .course-desc {
    font-size: 0.9rem;
  }
}

/* ==================== Top Users Container ==================== */
.top-users {
  border-radius: 1.6em;
  padding: 2.1em 1em 1.1em;
  max-width: 1200px;
  margin: 2em auto;
  text-align: center;
  
}

/* ==================== Top Users Title ==================== */
.top-users-title {
  font-family: IRANYekanX  !important;
  color: var(--color-top-titel);
  font-weight: 900;
  font-size: 1.8rem;
  margin-bottom: 1.5em;
  letter-spacing: -0.5px;
}

/* ==================== Top Users Columns ==================== */
.top-users-columns {
  display: flex;
  gap: 2.1em;
  justify-content: center;
  align-items: flex-start;
}

/* ==================== Top Users List ==================== */
.top-users-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  width: 400px;
  flex-direction: column;
  gap: 0.9em;
}

/* ==================== Top Users List Item ==================== */
.top-users-list li {
  display: flex;
  align-items: center;
  gap: 0.1em;
  background: var(--color-top-bg);
  border-radius: 1em;
  padding: 0.8em 0.95em;
  box-shadow: 0 1px 8px rgba(32, 37, 53, 0.07);
  font-size: 14px;
  transition: background 0.13s;
}

.top-users-list li:hover {
  background: var(--color-top-bg-hover);
}

/* ==================== Rank ==================== */
.rank {
  width: 2em;
  height: 2em;
  font-size: 1.04em;
  font-weight: 700;
  color: var(--color-top-rank); /* white */
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

/* ==================== User Avatar ==================== */
.user-avatar {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  margin: 0 0.2em;
  font-size: 1.7em;
  color: var(--color-top-avatar);
}

.user-avatar i {
  display: block;
}

/* ==================== User Name ==================== */
.user-name {
  color: var(--color-top-name);
  font-size: 14px;
  font-weight: 500;
  flex: 1 1 90px;
  text-align: right;
  margin-right: .5em;
  margin-left: .2em;
}

/* ==================== User Coins ==================== */
.user-coins {
  color: var(--color-top-coins-count);
  /* background: var(--color-top-coins-bg); */
  font-weight: 600;
  font-size: 14px;
  border-radius: 1em;
  padding: .27em 0.5em;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.user-coins i {
  font-size: 1.15em;
  color: var(--color-top-coins-rm);
}

/* ==================== Load More Button ==================== */
.top-users-more {
  display: block;
  margin: 2em auto 0;
  text-align: center;
  color: var(--color-top-bt-p);
  background: var(--color-top-bt);
  border-radius: 0.9em;
  padding: 1em 3em;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, color 0.14s;
  width: fit-content;
  font-size: 16px;
}

.top-users-more:hover {
  color: var(--color-top-bt-hover);
}

/* ==================== Mobile Responsiveness ==================== */
@media (max-width: 950px) {
  .user-coins {
    font-size: 12px;
  }
}

@media (max-width: 700px) {
  .top-users-columns {
    flex-direction: column;
    gap: 1.1em;
  }

  .top-users-list {
    width: 100%;
    gap: 0.7em;
  }

  .top-users-list li {
    flex-direction: row;
    align-items: center;
    gap: 0.6em;
    padding: 0.6em 0.55em;
    min-width: 0;
  }
}

@media (max-width: 500px) {
  .top-users {
    padding: 1em 0.3em;
    border-radius: 1em;
  }

  .top-users-title {
    font-size: 1.2rem;
  }

  .user-name {
    font-size: 13px;
    
  }
}



/* استایل دسکتاپ، فقط تغییرات موبایل را در مدیاکوئری می‌گذاریم */

/* --- بخش والد و ساختار کلی --- */
/* ==================== Testimonials Section ==================== */
.user-testimonials-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 4vw 0 2vw;
  direction: rtl;
}

.testimonials-layout {
  width: 100%;
  max-width: 1380px;
  display: flex;
  gap: 56px;
  align-items: flex-start;
  justify-content: space-between;
}

.testimonials-side {
  flex: 0 0 350px;
  max-width: 410px;
  padding-top: 38px;
}

.testimonials-title {
  
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.9;
  color: var(--color-test-titel);
  margin-bottom: .7em;
  margin-top: 40px;
  text-align: center;
  padding-right: 10px;
}

.testimonials-desc {
  
  font-size: 1rem;
  color: var(--color-test-desc);
  font-weight: 500;
  line-height: 2.2;
  margin-bottom: 2em;
  text-align: center;
}

/* ==================== Testimonial Slider Container ==================== */
.testimonial-slider-container {
  flex: 1 1 0;
  min-width: 0;
  max-width: 790px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.testimonial-slider {
  position: relative;
  width: 100%;
  min-height: 330px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height .44s cubic-bezier(.44,.87,.29,1.09);
}

/* ==================== Testimonial Card ==================== */
.testimonial-card {
  background: var(--color-test-card-bg);
  border-radius: 2.3rem;
  padding: 20px 2.5em 1.3em;
  color: var(--color-test-card-text);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.testimonial-text {
  font-size: .8rem;
  text-align: justify;
  line-height: 2.13;
  color: var(--color-test-card-text);
  font-weight: 500;
  margin-bottom: 20px;
}

.testimonial-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  gap: 1em;
}

.testimonial-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
}

.testimonial-user-name {
  font-weight: bold;
  color: #fff;
  font-size: 1.23em;
}

/* ==================== Testimonial Slider (Stacked) ==================== */
.testimonial-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transform: scale(0.97) translateX(0px);
  transition:
    opacity 0.6s cubic-bezier(.33,1.5,.75,1),
    transform 0.55s cubic-bezier(.33,1.5,.75,1),
    filter 0.38s cubic-bezier(.4,.85,.33,1);
  filter: blur(1.2px) grayscale(0.11) brightness(0.97);
}

.testimonial-slide.active {
  opacity: 1;
  z-index: 5;
  pointer-events: auto;
  filter: none;
  transform: scale(1) translateX(0px);
}

.testimonial-slide.prev {
  opacity: 0.85;
  z-index: 3;
  filter: blur(2.2px) grayscale(0.18) brightness(0.93);
  transform: scale(0.975) translateX(-18px);
}

.testimonial-slide.next {
  opacity: 0.85;
  z-index: 3;
  filter: blur(2.2px) grayscale(0.18) brightness(0.93);
  transform: scale(0.975) translateX(18px);
}

.testimonial-slide.prev2 {
  opacity: 0.36;
  z-index: 2;
  filter: blur(3.5px) grayscale(0.23) brightness(0.91);
  transform: scale(0.965) translateX(-30px);
}

.testimonial-slide.next2 {
  opacity: 0.36;
  z-index: 2;
  filter: blur(3.5px) grayscale(0.23) brightness(0.91);
  transform: scale(0.965) translateX(30px);
}

/* ==================== Testimonial Controls ==================== */
.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 18px;
  width: 100%;
  margin: 30px 75px;
}

.testimonial-dots {
  display: flex;
  gap: 14px;
  padding-bottom: 5px;
}

.testimonial-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #e1e1e8;
  opacity: .48;
  border: none;
  transition: background 0.19s;
  cursor: pointer;
}

.testimonial-dot.active {
  background: #ffd966;
  opacity: 1;
}

.testimonial-nav-wrap {
  display: flex;
  gap: 10px;
}

.testimonial-nav {
  color: var(--color-test-card-icon);
  background: none !important; 
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 1.5em;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
  transition: background 0.18s, color 0.13s;
}

.testimonial-nav:hover,
.testimonial-nav:focus {
  color: #fcbe04;
}

/* ==================== Responsive ==================== */
@media (max-width: 1050px) {
  .testimonials-side {
    padding-top: 10px;
  }

  .testimonials-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }

  .testimonials-side {
    max-width: none;
    width: 100%;
    padding: 0 0 28px 0;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .testimonials-title {
    font-size: 2rem;
    font-weight: 900;
    line-height: 2;
    
    margin-bottom: .7em;
    margin-top: 40px;
    text-align: center;
  }

  .testimonials-desc {
    font-size: 1rem;
    
    font-weight: 500;
    line-height: 2.5;
    margin-bottom: .1em;
    text-align: center;
  }

  .testimonial-slider-container {
    max-width: 100%;
  }

  .testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    margin: 30px 60px 0px 60px;
  }
}

@media (max-width: 700px) {
  .testimonial-card {
    min-height: 200px;
    border-radius: 1.4em;
    padding: 1em 1.2em 1.1em 1.2em;
  }

  .testimonial-title {
    font-size: 1.1em;
  }
}


/* ===================== Structure of the Shop ===================== */
.shopbook-row {
  
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 2vw 0;
  direction: rtl;
  margin-bottom: 80px;
}

.shopbook-info {
  flex: 0 0 450px;
  display: flex;
  flex-direction: column;
  align-items: start;
  border-radius: 1.6rem;
  padding: 2.1em 1em 1em 2.1em;
  max-width: 500px;
  min-width: 285px;
  margin-left: 10px;
  gap: 10px;
}

.shopbook-title-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1em;
}

.shopbook-title {
  color: var(--color-shop-titel);
  font-size: 1.6em;
  font-weight: 900;
  margin: 0;
  display: flex;
  align-items: center;
  margin-bottom: .5em;
  gap: 12px;
}

.shopbook-title-icon {
  font-size: 2.1rem;
  color: var(--color-shop-titel-icon);
  flex-shrink: 0;
}

.shopbook-desc {
  color: var(--color-shop-desc);
  font-size: .9em;
  font-weight: 500;
  margin-bottom: .6em;
  line-height: 2;
  text-align: right;
}

/* ===================== Features ===================== */
.shopbook-features {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9em .1em;
  list-style: none;
  padding: 0;
  margin: 0 0 1em 0;
}

.shopbook-features li {
  display: flex;
  align-items: center;
  font-size: .8em;
  color: var(--color-shop-benefit);
  font-weight: 500;
  gap: 0.3em;
}

.feature-icon {
  width: 2.1em;
  height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35em;
}

/* ===================== Enter Button ===================== */
.shopbook-enter-btn {
  margin-top: 1em;
  background: var(--color-bt-bg);
  color: var(--color-bt-text);
  border-radius: 1.3em;
  font-weight: 700;
  padding: 0.8em 1.5em;
  font-size: 1em;
  box-shadow: 0 2px 14px #0002;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: background 0.16s, color 0.16s;
}

.shopbook-enter-btn:hover {
  background: var(--color-bt-bg-hover);
  color: var(--color-bt-text-hover);
}

/* ===================== Book Cards ===================== */
.shopbook-cards {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  flex: 1;
}
.shopbook-cards-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* دسکتاپ: 4 ستون */
  column-gap: 30px; /* فاصله افقی */
  row-gap: 50px;    /* فاصله عمودی بین ردیف‌ها */
  flex: 1;
  margin-top: 40px;
}
@media (max-width: 1280px) {
  .shopbook-cards-main {
    grid-template-columns: repeat(3, 1fr); /* 3 ستون */
  }
}
/* تبلت */
@media (max-width: 1050px) {
  .shopbook-cards-main {
    grid-template-columns: repeat(3, 1fr); /* 3 ستون */
  }
}

/* موبایل */
@media (max-width: 768px) {
  .shopbook-cards-main {
    grid-template-columns: repeat(2, 1fr); /* 1 ستون */
  }
}
@media (max-width: 500px) {
 
  .shopbook-cards-main {
    grid-template-columns: 1fr;   /* یک ستون */
    justify-items: center;        /* کارت‌ها وسط‌چین می‌شن */
  }

  .shopbook-card { /* خود کارت‌ها */
    width: 90%; /* یا یک مقدار ثابت مثلا 300px */
  }
}
.shopbook-card {
  background: var(--color-test-card-bg);
  border-radius: 2.1rem;
  padding: .1em .1em 2em .1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;
  min-width: 210px;
  max-width: 350px;
  width: 100%;
  transition: box-shadow 0.23s cubic-bezier(.4,1,.35,1.12);
}

.shopbook-card:hover {
  box-shadow: 0 18px 44px 0 rgba(54,72,110,0.21), 0 1px 13px 0 rgba(38,40,90,0.09);
  transform: translateY(-6px) scale(1.025);
}

/* ===================== Book Card Image ===================== */
.book-card-imgbox {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1.5rem;
}

.book-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 1.2rem;
  display: block;
  transition: filter 0.18s;
}

.shopbook-card:hover .book-card-img {
  filter: brightness(1.07) saturate(1.09);
}

/* ===================== Book Card Text & Button ===================== */
.book-card-body {
  padding: 0.5em 0.4em 0 0.4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.book-card-title {
  color: var(--color-test-card-text);
  font-size: 1.1em;
  font-weight: 700;
  margin-bottom: 2px;
  text-align: center;
}

.book-card-author {
  color: var(--color-test-card-text);
  font-size: .9em;
  font-weight: 400;
  margin-bottom: .3em;
  text-align: center;
}

.book-card-btn {
  font-family: IRANYekanX  !important;
  color: #fcfbfa;
  padding: .43em 1.13em;
  border: 1px solid #fcfbfa;
  border-radius: 1.2em;
  font-size: 1em;
  text-decoration: none;
  font-weight: 600;
  transition: background .16s, color .13s;
  display: inline-block;
  margin: 0 auto;
}

.book-card-btn:hover {
  background: var(--color-bt-bg-hover);
}

/* ===================== Responsive ===================== */
@media (max-width: 1278px) {
  .book3 {
    display: none;
  }
}

@media (max-width: 950px) {
  .book2 {
    display: none;
  }
}

@media (max-width: 800px) {
  .shopbook-row {
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }

  .shopbook-info {
    margin: 0 auto;
    align-items: center;
    padding: 1em 1em 1em 1em;
    max-height: 400px;
  }

  .shopbook-cards {
    width: 100%;
    justify-content: center;
    gap: 18px;
  }

  .book2 {
    display: flex;
  }

  .book3 {
    display: flex;
  }

  .shopbook-desc {
    text-align: center;
  }
}

@media (max-width: 700px) {
  .book3 {
    display: none;
  }
}

@media (max-width: 500px) {
  .book2 {
    display: none;
  }

  .shopbook-row {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .shopbook-info {
    margin: 0 auto;
    align-items: center;
    background: var(--color-shop-bg-info);
  }

  .shopbook-card {
    margin-top: 20px;
    min-width: 300px;
    max-width: 350px;
    width: 100%;
    padding: 5px 20px 50px 20px;
    gap: 1.2em;
  }

  .book-card-body {
    padding: 0.5em 0.4em 0 0.4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }

  .book-card-title {
    font-size: 1.5em;
  }

  .book-card-author {
    font-size: 1em;
  }

  .book-card-btn {
    font-size: 1.2em;
  }
}




/* ===================== General Animation ===================== */
.transition {
  transition: all 2s cubic-bezier(.5,1.6,.3,1);
}

/* ===================== Course Row Animation ===================== */
.course-row {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  transition: opacity 3s cubic-bezier(.5,1.6,.3,1), transform 3s cubic-bezier(.47,1.4,.38,1);
}

.course-row.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===================== Fade Reveal Animation ===================== */
.fade-reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity 2s cubic-bezier(.41,1.2,.52,1), transform 2s cubic-bezier(.37,1.3,.42,1);
  will-change: opacity, transform;
}

.fade-reveal.active {
  opacity: 1;
  transform: none;
}

/* ===================== Fade Blur Animation ===================== */
.fade-blur {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 2s cubic-bezier(.36,1.3,.48,1), filter 1s cubic-bezier(.36,1.3,.48,1);
  will-change: opacity, filter;
}

.fade-blur.active {
  opacity: 1;
  filter: blur(0);
}


.topbar {
 
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 0 0;
  height: 125px; /* دقیقا شبیه عکس، قابل تنظیم */
  width: 100%;
  box-sizing: border-box;
}

.topbar-socials {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-right: 40px;
}

.topbar-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  
  border-radius: 12px;
  width: 56px;
  height: 56px;
  font-size: 2.1rem;
  color: var(--color-social);
  
  transition: background 0.19s, color 0.16s, box-shadow 0.13s;
}
.topbar-socials a:hover {
 
  color: var(--color-social-hover);
 
}

.topbar-divider {
  flex: 1;
  height: 2px;
  background: #c6c7c7;
  margin: 0 20px;
  opacity: 0.28;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 56px;
}

.roocket-logo-img {
  height: 100px;
  width: 180px;
  object-fit: contain;
  display: inline-block;
}


@media (max-width: 900px) {
  .topbar {
    
    height: auto;
    padding: 24px 0 0 0;
  }
  .topbar-socials { margin-right: 0; margin-bottom: 10px;}
  .topbar-logo { margin-left: 0; margin-bottom: 10px;}
  .topbar-divider { margin: 12px 0; width: 92vw;}
  .roocket-logo-img {
  height: 75px;
  width: 150px;
  
}
.topbar-socials a {
 
  
 
  width: 40px;
  height: 40px;
  font-size: 1.8rem;
  
}
}

.rm-footer {
  color: var(--color-social);
  font-family: inherit;
  direction: rtl;
  margin-top: 20px;
}
.rm-footer-main {
  display: flex;
  gap: 32px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0em 3vw 1em 3vw;
  flex-wrap: wrap;
  justify-content: space-around;
}
.rm-footer-col {
  flex: 1 1 170px;
  min-width: 180px;
  max-width: 285px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  
  
}
.rm-footer-col.about {
  min-width: 320px;
  max-width: 430px;
  flex: 2 1 320px;
  font-size: 14px;
  text-align: justify;
}
.rm-footer-col.contact {
  min-width: 350px;
  max-width: 450px;
  padding-right: 80px;
}
.rm-footer-col.enamad {
  min-width: 150px;
  max-width: 250px;
  align-items: center;
}


.rm-footer-title {
  font-weight: bold;
  font-size: 14px;
  margin: 1.2em 0 .8em 0;
  color: var(--color-title);
  display: flex;
  justify-content: start;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
  
}
.rm-dot {
  width: 11px; height: 11px;
  background: #5a88f7;
  border-radius: 50%;
  display: inline-block;
  margin-right: 3px;
}
.rm-footer-about {
  color: var(--color-course-desc);
  font-size: 1.05em;
  font-weight: 400;
  line-height: 2;
  margin: 0 0 8px 0;
}



.rm-footer-list {
  list-style: none;
  margin: 0; padding: 0;
}
.rm-footer-list li {
  margin-bottom: 5px;
}
.rm-footer-list a {
  color: var(--color-course-desc);
  text-decoration: none;
  font-size: 1em;
  transition: color 0.15s;
  position: relative;
  padding-right: 15px;
}
.rm-footer-list a::before {
  content: "•";
  color: #49c7fd;
  position: absolute;
  right: 0;
  font-size: 1.1em;
}
.rm-footer-list a:hover { color: #ffd966; }

.rm-footer-contact-list {
  list-style: none;
  margin: 0 0 10px 0; padding: 0;
  font-size: 1em;
}
.rm-footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-course-desc);
  margin-bottom: 6px;
}
.rm-footer-contact-list i { font-size: 1.25em; color: var(--color-course-desc); }




.rm-footer-badges {
  display: flex;
  align-items: center;
  
  margin-top: 2px;
}
.rm-badge {
  height: 100px;
  border-radius: 9px;
  
  padding: 2px;
  box-shadow: 0 2px 14px #0001;
}


.rm-footer-bottom {
  border-top: 1px solid #1a3655;
  color: var(--color-course-desc);
  text-align: center;
  font-size: 0.8em;
  font-weight: 500;
  margin-top: 26px;
  padding: 20px 6px 20px 6px;
}

@media (max-width: 1280px) {
  .rm-footer-col { min-width: 130px; max-width: 100%; }
  .rm-footer-col.about {
   min-width: 250px;
  max-width: 300px;
  flex: 2 1 320px;
  font-size: 14px;
  text-align: justify;
}
  .rm-footer-col.contact {
  min-width: 200px;
  max-width:400px;
  padding-right: 30px;
}
.rm-footer-col.enamad {
  min-width: 150px;
  max-width: 200px;
  align-items: center;
}
}
@media (max-width: 1050px) {
 .rm-footer-col.about {
   display:none;
}
}

@media (max-width: 768px) {
  .rm-footer-main { flex-direction: column; gap: 38px; align-items: stretch;}
  .rm-footer-col, .rm-footer-col.about { display: flex;max-width: 100%; min-width: 0; }
  .rm-footer-socials { margin-top: 18px;}
  .rm-footer-col.contact {
 
  padding-right: 0px;
}
.rm-footer-col.enamad {
 
  align-items: start;
}
}







/* ---------- Theme Toggle: Desktop & Mobile Structure ---------- */


/* استایل مشترک همه دکمه‌های داخل theme-toggle */
.theme-toggle button {
  width: 40px;
  height: 40px;
  padding: 0;
  line-height: 0;                /* آیکن دقیقاً وسط */
  font-size: 18px;
  border-radius: 12px;
  background: var(--color-bg-basket-btn);
  border: 1px solid rgba(68,103,168,0.13);
  box-shadow: 0 2px 8px rgba(68,103,168,0.09);
  color: #f7fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;               /* ✅ دست */
  transition:
    background 0.17s cubic-bezier(.4,.8,.4,1.08),
    color 0.12s,
    box-shadow 0.18s cubic-bezier(.5,1,.55,1.18),
    border 0.14s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  appearance: none;          /* نسخه استاندارد */
-webkit-appearance: none;  /* برای Safari و iOS */

}

/* آیکن داخل دکمه */
.theme-toggle--desktop i {
  font-size: 20px;
  color: currentColor; 
              
  line-height: 1;
  pointer-events: none;          /* کلیک همیشه به دکمه برسد */
}

/* Hover/Active */
.theme-toggle button:hover{
  color:#ffd966;             /* ⬅️ آیکن هم زرد می‌شود */
  background: rgba(68,103,168,0.23);
  box-shadow: 0 4px 16px rgba(68,103,168,0.12);
}
.theme-toggle button:active {
  background: rgba(68,103,168,0.16);
  color: #fffbe8;
  box-shadow: none;
}

/* فقط رنگ آیکن را از رنگ دکمه ارث بده؛ نیازی به :hover جدا برای i نیست */






/* ---------- Responsive: Show Mobile Toggle Only On Mobile ---------- */
.theme-toggle--mobile {
  display: none;
}

@media (max-width: 768px) {
  .theme-toggle--mobile {
    display: flex;
  }
  .theme-toggle--desktop {
    display: none;
  }
}




/* === Toggle Mobile Container === */
.theme-toggle--mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto 5px 40px;
}

/* === Switch Button Glass Background === */
#themeSwitcherMobile {
  position: relative;
  width: 80px;
  height: 38px;
  border: 2px solid rgba(4, 35, 159, 0.32);
  border-radius: 999px;
  padding: 0;
  background: rgba(255,255,255,0.32);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  box-shadow:
    0 4px 38px 0 #a3bffa44,
    0 0 0 2px #dbeafe77 inset,
    0 0 14px 2px #fff8;
  overflow: visible;
  cursor: pointer;
  transition:
    background 0.23s cubic-bezier(.82,.09,.17,1),
    box-shadow 0.31s cubic-bezier(.7,-0.4,.58,1.36);
}

/* === Switch Circle (default: dark) === */
#themeSwitcherMobile::before {
  content: "";
  position: absolute;
  top: 2px;
  left:2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 63%, #e4ecff 100%);
  box-shadow:
    0 2px 32px 0 #b1d7ff88,
    0 0 0 3px #fff9 inset,
    0 2px 36px 6px #c3e4ff77,
    0 0 46px 11px #fff8 inset;
  z-index: 3;
  transition:
    left 0.47s cubic-bezier(.82,.09,.17,1),
    background 0.26s cubic-bezier(.64,-0.08,.45,1.17),
    box-shadow 0.37s cubic-bezier(.62,.01,.4,1.17),
    transform 0.23s cubic-bezier(.61,.04,.28,1.12);
  animation: switchElastic 0.62s cubic-bezier(.2,1.4,.53,1.02) 1;
}

/* === Switch Circle (light mode) === */
body.light-theme #themeSwitcherMobile::before {
  left: 44px;
  background: linear-gradient(120deg, #ffe6a5 0%, #ffd966 100%);
  box-shadow:
    0 4px 44px 2px #ffd96677,
    0 0 0 3px #fff7 inset,
    0 0 50px 15px #ffe39855;
  animation: switchElastic 0.62s cubic-bezier(.2,1.4,.53,1.02) 1;
}

/* === Elastic Animation (Bounce) === */
@keyframes switchElastic {
  0%   { transform: scale(1) translateY(0);}
  28%  { transform: scale(1.22,0.83) translateY(3.5px);}
  42%  { transform: scale(0.90,1.15) translateY(-4.5px);}
  61%  { transform: scale(1.08,0.92) translateY(2.3px);}
  80%  { transform: scale(0.98,1.01) translateY(-1.6px);}
  100% { transform: scale(1) translateY(0);}
}

/* === Pressed Shadow on Click === */
#themeSwitcherMobile:active::before {
  box-shadow: 0 2px 54px #a3d7ffcc;
}

/* === Shine Effect === */
#themeSwitcherMobile .shine {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 14px;
  top: 4.5px;
  width: 54px;
  height: 16px;
  border-radius: 11px;
  background: linear-gradient(90deg, #fff9 15%, #fff6 60%, #fff3 100%);
  opacity: 0.42;
  filter: blur(3.6px);
  animation: shineMove 2.7s linear infinite;
  z-index: 2;
}

/* === Shine Animation === */
@keyframes shineMove {
  0%   { left: 9px;  opacity: 0.34;}
  50%  { left: 30px; opacity: 0.51;}
  100% { left: 48px; opacity: 0.32;}
}

/* === Glow Effect (default: dark) === */
#themeSwitcherMobile .glow {
  position: absolute;
  top: 7.5px;
  left: 10.5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  opacity: 0.5;
  box-shadow:
    0 0 10px 5px #ffe06655,
    0 0 22px 7px #ffd90011;
  transition: box-shadow 0.38s cubic-bezier(.55,0,.36,1),
              opacity 0.35s,
              left 0.47s cubic-bezier(.82,.09,.17,1);
}

/* === Glow Effect (light mode) === */
body.light-theme #themeSwitcherMobile .glow {
  left: 47.5px;
  box-shadow:
    0 0 12px 7px #ffe06688,
    0 0 30px 12px #ffd96622;
}


/* =========================
   Search Overlay (Upgraded)
   ========================= */

.search-overlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50000;

  background: rgba(22, 28, 48, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  align-items: center;
  justify-content: center;

  animation: fadeIn 0.25s cubic-bezier(.55,1.15,.5,1.12);

  /* بهتر روی موبایل */
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.search-overlay.active{ display: flex; }

/* =========================
   Modal
   ========================= */

.search-modal{
  background: rgba(34, 40, 66, 0.82);
  border-radius: 2rem;

  padding: 3rem 2.2rem 2rem 2.2rem;

  box-shadow: 0 12px 48px #12183555;
  max-width: 430px;
  width: 100%;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.05rem;

  animation: modalUp 0.34s cubic-bezier(.55,1.12,.47,1.19);
  will-change: transform, opacity;

  /* اگر محتوا زیاد شد، مودال اسکرول داخلی داشته باشه */
  max-height: calc(100vh - 24px);
  overflow: auto;

  /* مرز نرم‌تر */
  border: 1px solid rgba(255,255,255,0.08);
}

@keyframes modalUp{
  from{ transform: translateY(40px) scale(0.96); opacity:0 }
  to  { transform: none; opacity:1 }
}

/* =========================
   Global inherit for controls
   ========================= */

.search-modal input,
.search-modal button,
.search-modal textarea,
.search-modal select{
  font: inherit;
  letter-spacing: inherit;
}

/* placeholder هم inherit-like */
.search-modal ::placeholder{
  font: inherit;
  opacity: 0.55;
}

/* =========================
   Close
   ========================= */

.search-close{
  position: absolute;
  top: 18px;
  left: 20px;

  background: transparent;
  border: none;

  color: #fff;
  font-size: 1.35rem;

  cursor: pointer;
  border-radius: 999px;
  padding: 8px;

  transition: background 0.15s, color 0.15s, transform 0.15s;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-close:hover{
  color: rgb(250, 209, 3);
  transform: translateY(-1px);
}

.search-close:focus-visible{
  outline: 2px solid rgba(255, 217, 102, 0.65);
  outline-offset: 3px;
}

/* =========================
   Label
   ========================= */

.search-label{
  display: block;
  font-size: 1.07rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: .5rem;
  text-align: right;
}

/* =========================
   Form layout: input + button in one row
   ========================= */

#searchForm{
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}


#searchForm > .search-input,
#searchForm > input.search-input{
  flex: 1 1 auto;
}
#searchForm > .search-submit-btn,
#searchForm > button.search-submit-btn{
  flex: 0 0 auto;
}

/* حالت واقعی: وقتی input و button کنار هم می‌خوایم */
#searchForm{
  align-items: stretch;
}

#searchForm{
  /* برای جلوگیری از بهم ریختگی، از grid استفاده می‌کنیم */
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
}

/* اگر label بالاست، grid به هم می‌ریزه؛ پس label رو full-span کن */
#searchForm .search-label,
#searchForm > label.search-label{
  grid-column: 1 / -1;
}

/* input و button */
.search-input{
  width: 100%;
  padding: 1.05em 1em;

  border-radius: 1.1em;
  border: 1px solid rgba(255,255,255,0.08);

  font-size: 1.05em;

  background: rgba(255,255,255,0.11);
  color: #fff;

  box-shadow: 0 1px 9px #3c58a110;

  transition: background 0.13s, border-color 0.13s, transform 0.13s;
  outline: none;

  font-family: inherit;
}

.search-input:focus{
  background: rgba(255,255,255,0.16);
  border-color: rgba(127, 209, 209, 0.55);
}

.search-input:focus-visible{
  outline: 2px solid rgba(127, 209, 209, 0.55);
  outline-offset: 3px;
}

.search-submit-btn{
  width: 100%;
  padding: 0.95em 0.9em;

  border-radius: 1em;
  border: none;

  background: linear-gradient(90deg,#5c95e5,#7fd1d1);
  color: #fff;

  font-size: 1.02em;
  font-weight: 800;

  cursor: pointer;

  transition: transform 0.15s, filter 0.15s;
  box-shadow: 0 3px 10px rgba(44,70,105,0.20);

  font-family: inherit;
}

.search-submit-btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}
.search-submit-btn:active{
  transform: translateY(0px);
}
.search-submit-btn:focus-visible{
  outline: 2px solid rgba(255, 217, 102, 0.65);
  outline-offset: 3px;
}

/* =========================
   Results (اگر روزی خواستی برگرده)
   ========================= */

.search-results{
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-bottom: 0.7em;
}

.search-result-item{
  background: rgba(52,58,87,0.21);
  border-radius: 1.1em;
  color: #fff;
  padding: 0.8em 1.1em;
  font-size: 1em;
  text-align: right;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border: 1px solid rgba(255,255,255,0.06);
}

.search-result-item:hover{
  background: rgba(92,170,255,0.11);
  color: #ffd966;
}

.search-show-all{
  background: none;
  color: #ffd966;
  border: none;
  padding: 0.7em 0;
  font-size: 1.07em;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0.7em;
  transition: background 0.15s;
  width: 100%;
  font-family: inherit;
}

.search-show-all:hover{ background: rgba(44,56,111,0.10); }

/* =========================
   Mobile
   ========================= */

@media (max-width: 600px){
  .search-modal{
    padding: 2rem 0.9rem 1.1rem 0.9rem;
    border-radius: 1.2rem;
    max-width: 97vw;
  }

  .search-close{
    top: 8px;
    left: 8px;
  }

  /* در موبایل دکمه باریک نشه */
  #searchForm{
    grid-template-columns: 1fr 100px;
    gap: 8px;
  }

  .search-input{ font-size: 1em; }
}

/* =========================
   Sidebar search button (mobile sidebar)
   ========================= */

.sidebar_search_btn{
  background: rgba(230, 230, 231, 0.2);
  border: none;
  border-radius: 0.8em;

  padding: 0.65em 0.98em;
  color: #fff;

  font-size: 1em;
  font-family: inherit;

  cursor: pointer;
  transition: background 0.18s, transform 0.15s;

  box-shadow: 0 2px 8px rgba(68,103,168,0.09);
  margin-right: 2px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar_search_btn:hover{
  background: rgba(36, 109, 243, 0.4);
  color: #f9f9fb;
  transform: translateY(-1px);
}
.sidebar_search_btn:active{
  transform: translateY(0);
}

/* مهم: input سایدبار هم inherit */
#sidebarSearchInput{
  font: inherit;
}
#sidebarSearchInput::placeholder{
  font: inherit;
  opacity: 0.6;
}
/* ===== Fix: Sidebar mobile search (input + button same row) ===== */
#sidebarSearchForm{
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;          /* مهم: اجازه نده بره خط بعد */
  width: 100%;
}

#sidebarSearchInput{
  flex: 1 1 auto;             /* پرکننده */
  min-width: 0;               /* مهم برای جلوگیری از overflow و wrap */
  width: auto !important;
  font: inherit;
}

#sidebarSearchForm .sidebar_search_btn{
  flex: 0 0 auto;             /* ثابت */
  width: 44px;                /* اندازه ثابت آیکون */
  height: 44px;
  padding: 0;                 /* چون با width/height کنترل می‌کنیم */
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
}

/* اگر RTL هست و می‌خوای دکمه سمت چپ input بیاد */
#sidebarSearchForm{
  direction: rtl;             /* متن داخل input RTL بماند */
}
#sidebarSearchForm{
  /* دکمه در سمت چپ input */
  flex-direction: row;
}





/* ========== گرید واکنش‌گرا برای مجموعه کارت‌ها ========== */
.vip_course {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* دسکتاپ */
  gap: 30px;
  width: 100%;
  margin: 0 auto;
  padding: 100px 0;
}
@media (max-width: 1050px) {
  .vip_course { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .vip_course { grid-template-columns: 1fr;padding: 20px 0; }
}

/* ----------- پایه و ساختار کارت ----------- */
.course-card {
  /* Layout & Size */
  max-width: 600px;
  min-width: 300PX;
  
  margin: 80px auto 24px auto;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
 

  /* Visuals */
  background: var(--color-bg-card);
  border-radius: 2.1em;
  border: 1.5px solid rgba(56, 74, 108, 0.28);
  box-shadow: 0 10px 32px 0 rgba(45, 65, 114, 0.18), 0 1.5px 12px 0 rgba(80,120,180,0.04);
  backdrop-filter: blur(6px) saturate(125%);
  -webkit-backdrop-filter: blur(6px) saturate(125%);
  transition:
  box-shadow 0.8s cubic-bezier(.16,1,.3,1),
  transform 0.8s cubic-bezier(.16,1,.3,1);


}

.course-card:hover {
  transform: translateY(-7px) scale(1.03);
  box-shadow:
    0 26px 64px 0 rgba(44,56,97,0.32),
    0 18px 40px 0 rgba(44,56,97,0.25),
    0 0 0 10px rgba(100, 162, 255, 0.12);
}

/* ----------- عکس (Image) ----------- */
.course-card__image-wrapper {
  position: relative;
  width: 92%;
  margin: 0 auto;
  top: -38px;
  z-index: 3;
  border-radius: 2.1em;
  
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.course-card__image {
  width: 100%;
  border-radius: 2.1em;
  object-fit: cover;
  display: block;
 
  position: relative;
  transition: transform 0.34s cubic-bezier(.42,.2,.47,.96), box-shadow 0.23s;
}
.course-card:hover  {
  transform: scale(1.035) translateY(-3px);
  box-shadow: 0 12px 36px rgba(61,109,202,0.11), 0 0 0 6px rgba(34, 60, 115, 0.04);
}



/* ----------- بدنه کارت ----------- */
.course-card__body {
  padding: 1px 22px 25px 22px;
  margin-top: -26px;
  display: flex;
  flex-direction: column;
  flex: 1;
 
}

/* ----------- وضعیت (Status) ----------- */
.course-card__status {
  font-family: IRANYekanX  !important;
  font-size: 1rem;
  color: #5bbdff;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.course-card__status .dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: #4dc0ff;
  border-radius: 50%;
  margin-left: 6px;
}

/* ----------- عنوان و توضیحات ----------- */
.course-card__title {
  font-family: IRANYekanX  !important;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
  margin: 5px 0 5px 0;
  position: relative;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-bottom: 16px;
}
.course-card__desc {
  color: #b4c8e2;
  font-size: .9rem;
  font-weight: 500;
  line-height: 2.1;
  text-align: justify;

  margin-bottom: 18px;
  /* می‌تونی این رو برداری، چون flex:1 خودش ارتفاع رو تنظیم می‌کنه */
  /* min-height: 70px; */

  flex: 1;              /* مهم: توضیحات فضا را پر می‌کند */
}


/* ----------- دکمه اصلی ----------- */
.course-card__btn {
  font-family: IRANYekanX  !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  margin-top: auto;     /* جادوی هم‌تراز شدن دکمه‌ها */

  color: #e0e7ff;
  font-size: 1.13rem;
  font-weight: bold;
  padding: 13px 0;
  border-radius: 1.1em;
  text-decoration: none;
  border: 1.5px solid #e0e7ff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition:
    background 0.19s,
    color 0.19s,
    border 0.18s,
    box-shadow 0.44s cubic-bezier(.22,1,.36,1),
    transform 0.44s cubic-bezier(.22,1,.36,1);
}



.course-card__btn:hover {
  background: #ffffff0a;
  /* برآمدگی: */
  box-shadow:
    0 6px 32px 0 #4dc1ff15,
    0 1.5px 10px #1d3d4a11;
  transform: translateY(-5px) scale(1.035);
}



/* ----------- ریسپانسیو ----------- */
@media (max-width: 540px) {
  .course-card {
    max-width: 95vw;
    border-radius: 1em;
    box-shadow: 0 3px 12px 0 rgba(44, 56, 97, 0.12);
  }
  .course-card {
  /* Layout & Size */
  margin: 40px auto 24px auto;
  }

  .course-card__title {
    font-size: 1.05rem;
  }
  .course-card__image-wrapper {
    top: -26px;
    border-radius: 1em;
  }
}



.free{
  margin-top: 80px;
}



.book-row{
  display:grid;
  gap:clamp(40px,3vw,50px);
  padding: 0px 10px;
  border-radius:20px;
  align-items:center;
  color:var(--text-main);
}
@media (min-width:992px){
  .book-row{ grid-template-columns:1.05fr 0.95fr; }
}
@media (max-width:1280px){
  .book-row{ margin-top:40px; }
}
@media (max-width:991.98px){
  .book-row{ grid-template-columns:1fr; }
  .book_img_box{ order:1; }
  .header_book{ order:2; }
}

/* =========================================================
   3) Typography
   ========================================================= */
.header_book{ padding:0; }
.header_book .book-title{
  margin:0 0 2rem 0;
  font-size:clamp(24px,2.6vw,40px);
  font-weight:900;
  letter-spacing:-.3px;
  line-height:1.25;
  color:var(--text-title);
}

/* =========================================================
   4) Components
   ========================================================= */

/* Prices */
.book_price,
.book_price_off{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.7rem 1.2rem;
  border-radius:14px;
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  white-space:nowrap;
  vertical-align:middle;
  margin-bottom: 16px;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  border:1px solid var(--border-color);
}
.book_price{
  color:var(--text-price-old);
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(255,255,255,.35);
}
.book_price_off{ color:var(--text-price-new); }
.book_price:hover,
.book_price_off:hover,
.book_price:focus-visible,
.book_price_off:focus-visible{
  transform:translateY(-1px);
 
  outline:none;
}

/* Benefits */
.book-benefit{
  list-style:none;
  padding:0;
  margin:1rem 0 1.2rem;
  display:grid;
  gap:.8rem;
}
@media (min-width:992px){
  .book-benefit{ grid-template-columns:1fr 1fr; }
}
.book-benefit li{
  display:grid;
  grid-template-columns:36px 1fr;
  align-items:center;
  gap:.8rem;
  padding:.7rem .9rem;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border:1px dashed var(--border-dashed);
  color:var(--text-muted);
}
.book-benefit-icon{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:12px;
  background:var(--bg-benefit-icon);
  font-size:18px;
}

/* Stock status */
.stock-status{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .85rem;
  border-radius:10px;
  font-size:.95rem;
  font-weight:600;
  
  background:var(--bg-stock);
  border:1px solid var(--border-color);
  color:var(--text-main);
}
.stock-status i{ font-size:1.05em; }
.stock-status.is-available{ color:var(--stock-available-text); }
.stock-status.is-available i{ color:var(--stock-available-icon); }
.stock-status.is-unavailable{ color:var(--stock-unavailable-text); }
.stock-status.is-unavailable i{ color:var(--stock-unavailable-icon); }



/* Image column */
.book_img_box{
  display:grid; place-items:center;
  padding-bottom:50px;
  border-radius:20px;
  overflow:hidden;
  min-height:clamp(260px,40vw,520px);
}
.book_img{
  width:min(720px,100%);
  height:auto;
  display:block;
  object-fit:contain;
}
.book_price {
  text-decoration: line-through;
  text-decoration-thickness: 2px; /* ضخامت خط */
  text-decoration-color: rgba(255, 0, 0, 0.6); /* رنگ خط، می‌تونی متناسب با تم تغییر بدی */
}



/* ================== Book Body (Desc + Specs) ================== */
/* ================= Book Body – Clean Modular ================= */

/* لایه‌بندی کلی */
.book-body{
  display:grid;
  gap:clamp(18px,2.6vw,28px);
  margin-top:clamp(24px,3vw,40px);
}
@media (min-width:992px){
  .book-body{
    grid-template-columns:1.35fr .9fr; /* توضیحات پهن‌تر */
    align-items:start;
  }
}

/* کارت‌ها */
.book-desc,
.book-specs{
  background:var(--bg-main);
  border:1px solid var(--border-color);
  border-radius:14px;
  padding:clamp(16px,2.2vw,24px);
  color:var(--text-main);
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
/* سایه لطیف‌تر در لایت */
:root.light .book-desc,
:root.light .book-specs{
  box-shadow:0 8px 18px rgba(49,74,110,.12), 0 2px 6px rgba(49,74,110,.08);
}

/* تیترها */
.book-desc h2,
.book-specs h2{
  margin:0 0 .9rem;
  font-size:clamp(18px,2.1vw,24px);
  font-weight:900;
  line-height:1.3;
  color:var(--text-title);
}

/* متن توضیحات */
.book-desc p{
  line-height: 2.1;
  margin:0; color:var(--text-main); opacity:.9; }

/* ============ Specs Table – Minimal & Tidy (RTL) ============ */
.specs-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
  margin-top:.6rem;
  border-radius:12px; /* بدون تغییر ظاهر */
  overflow:hidden;
}

.specs-table th,
.specs-table td{
  padding:.9rem 1rem;
  text-align:right;
  vertical-align:middle;
  font-size:.95rem;
  line-height:1.6;
}

/* ستون عناوین (سمت راست) */
.specs-table th{
  width:40%;
  white-space:nowrap;
  font-weight:800;
  color:var(--text-main);
  border-left:1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}

/* مقادیر */
.specs-table td{ color:var(--text-muted); }

/* خطوط افقی نرم */
.specs-table tr + tr th,
.specs-table tr + tr td{
  border-top:1px dashed var(--border-dashed);
}

/* راه‌راه خیلی ملایم */
.specs-table tr:nth-child(even) td{
  background:color-mix(in srgb, var(--bg-alt) 16%, transparent);
}
.specs-table tr:nth-child(even) th{
  background:color-mix(in srgb, var(--bg-alt) 12%, transparent);
}

/* Hover لطیف */
.specs-table tr:hover th,
.specs-table tr:hover td{
  background:color-mix(in srgb, var(--bg-alt) 26%, transparent);
}

/* فشرده‌سازی موبایل */
@media (max-width:576px){
  .specs-table th,
  .specs-table td{ padding:.7rem .8rem; font-size:.9rem; }
  .specs-table th{ width:46%; }
}

/* در لایت، داش‌لاین کمی پررنگ‌تر دیده شود */
:root.light .specs-table tr + tr th,
:root.light .specs-table tr + tr td{
  border-top:1px dashed var(--border-color);
}
/* رسانه‌ها داخل توضیحات کتاب */
.book-desc img,
.book-desc figure > img,
.book-desc video,
.book-desc iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* اگر TinyMCE روی عناصر max-width/width عجیب ست کرد، این‌ها غالب می‌شوند */
.book-desc img,
.book-desc video { max-width: 100% !important; }
.book-desc figure { margin: 1rem 0; max-width: 100%; overflow: hidden; }

/* iframe / ویدیو با نسبت تصویر استاندارد */
.book-desc iframe,
.book-desc .embed {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* جدول‌ها نشکنند و اسکرول افقی بگیرند */
.book-desc table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

/* تصاویر قرار داده‌شده داخل لینک یا پاراگراف */
.book-desc a > img,
.book-desc p > img { max-width: 100%; height: auto; display: inline-block; }

/* ================================================= */
/* 1. استایل‌های کانتینر والد (Wrapper) و المنت ویدیو */
/* ================================================= */

.custom-video-wrap {
  position: relative; /* ضروری برای قرارگیری مطلق عناصر روی ویدیو */
  display: inline-block;
  width: 100%;
 
  cursor: pointer;
  overflow: hidden;
}

.custom-video {
  width: 100%;
  display: block;
  border-radius: 20px; /* گرد کردن لبه‌ها */
  /* اطمینان از اعمال انیمیشن نرم روی خود ویدیو */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ================================================= */
/* 2. استایل‌های پایه برای دکمه Overlay (دایره و آیکون) */
/* ================================================= */

/* استایل‌های مشترک برای ::before (دایره) و ::after (آیکون) */
.custom-video-wrap::before,
.custom-video-wrap::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* تکنیک وسط‌چین کردن */
  pointer-events: none; /* بسیار مهم: اجازه می‌دهد کلیک به المنت زیرین برسد */
  transition: opacity 0.3s ease, transform 0.3s ease; /* انیمیشن نرم */
}

/* ================================================= */
/* 3. تعریف شکل آیکون‌ها (Play Icon) */
/* ================================================= */

/* --- A. دایره پس‌زمینه (::before) --- */
.custom-video-wrap::before {
  content: "";
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* --- B. آیکون مثلثی Play (::after) --- */
.custom-video-wrap::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 18px solid #fff; /* شکل مثلث */
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  z-index: 2;
}

/* ================================================= */
/* 4. مدیریت وضعیت (States: Playing, Hover, Pause) */
/* ================================================= */

/* --- وضعیت ۱: وقتی ویدیو در حال پخش است (مخفی کردن Overlay) --- */
.custom-video-wrap.is-playing::before,
.custom-video-wrap.is-playing::after {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}

/* --- وضعیت ۲: افکت Hover (بزرگ‌نمایی عمومی) --- */
.custom-video-wrap:hover::before,
.custom-video-wrap:hover::after {
  transform: translate(-50%, -50%) scale(1.1); /* 10% بزرگتر */
  opacity: 0.95;
}

/* --- وضعیت ۳: در حین پخش + Hover (نمایش آیکون Pause) --- */

/* دایره را هنگام هاور مجدداً نمایش بده */
.custom-video-wrap.is-playing:hover::before {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.1);
}

/* آیکون ::after را از Play به PAUSE تغییر شکل بده */
.custom-video-wrap.is-playing:hover::after {
  content: "";
  width: 18px; 
  height: 24px;
  /* ایجاد دو نوار عمودی به جای مثلث */
  border-left: 6px solid #fff; 
  border-right: 6px solid #fff; 
  border-top: none; 
  border-bottom: none; 
  background: transparent;
  opacity: 1; /* اطمینان از دیده‌شدن کامل */
  transform: translate(-50%, -50%) scale(1.1); /* اعمال بزرگ‌نمایی هاور */
}




/* ==================== Cart — RoyalMind (RTL, Light/Dark) ==================== */
/* ================= RoyalMind Cart — Modular, final look preserved ================= */

/* ---------- Tokens (rely on your existing palette) ---------- */
:root{
  --r-lg: 18px; --r-2xl: 24px;
  --shadow-sm: 0 10px 26px rgba(0,0,0,.18);
  --shadow-md: 0 26px 60px rgba(0,0,0,.25);
  --ok-color: var(--stock-available-icon, #22c55e);
  --err-color: var(--stock-unavailable-icon, #ef4444);
  --focus: 0 0 0 3px rgba(255,217,102,.35); /* soft gold focus */
}

/* ============================================================
=                         Alerts                              =
============================================================ */
.cart-alert{
  direction: rtl;
  max-width: 1200px; margin: 14px auto; padding: 12px 16px;
  color: var(--text-main);
  border: 1px dashed var(--border-dashed);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow-sm);
}
.cart-alert ul{margin:0; padding-inline-start:1.2rem}
.cart-alert li{margin:.25rem 0}

.cart-alert--ok{
  border-color: color-mix(in oklab, var(--ok-color) 50%, var(--border-color));
  background: color-mix(in oklab, var(--ok-color) 12%, rgba(255,255,255,.04));
  color: color-mix(in oklab, var(--ok-color) 80%, var(--text-main));
}
.cart-alert--error{
  border-color: color-mix(in oklab, var(--err-color) 55%, var(--border-color));
  background: color-mix(in oklab, var(--err-color) 10%, rgba(255,255,255,.04));
  color: color-mix(in oklab, var(--err-color) 85%, var(--text-main));
}

/* ============================================================
=                       Empty state                           =
============================================================ */
.cart-empty{
  direction: rtl; text-align:center;
  max-width: 1000px; margin: 36px auto; padding: 30px 22px;
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--r-2xl);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--shadow-md);
}
.cart-empty .cart-title{ margin:0 0 .6rem; font-size: clamp(20px,2.2vw,28px); font-weight: 800; color: var(--text-title) }
.cart-empty p{margin:.4rem 0; color: var(--text-muted)}
.cart-empty .btn{margin-top:.4rem}

/* ============================================================
=                         Layout                               =
============================================================ */
.cart-layout{
  direction: rtl; color: var(--text-main);
  max-width: 1200px; margin: 22px auto; padding: clamp(12px,2.6vw,24px);
  display: grid; gap: clamp(14px,2.4vw,28px);
  grid-template-columns: 1fr minmax(300px,360px);
}
@media (max-width:1024px){ .cart-layout{ grid-template-columns: 1fr } }

/* ============================================================
=                  Items container & card                      =
============================================================ */
.cart-items{
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--r-2xl);
  
}
.cart-items .cart-title{
  margin:0 0 10px; font-weight:800; font-size: clamp(18px,2vw,24px);
  color: var(--text-title);
}

.cart-item{
  display:grid; grid-template-columns: 88px 1fr auto; gap:14px;
  padding: 14px; margin-block: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
}
.cart-item:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--dropdown-border) }

.cart-item__thumb{
  width:72px; height:96px; object-fit:cover; border-radius:12px;
}
.cart-item__main{ display:grid; gap:10px }
.cart-item__title{ margin:0; font-size:16px; font-weight:800 }
.cart-item__title a{ color: var(--text-main); text-decoration:none }
.cart-item__title a:hover{ color: var(--color-title-golden) }

.cart-item__meta{ display:flex; flex-wrap:wrap; gap:12px; font-size:14px; color: var(--text-muted) }
.price__value{ font-weight:800 }
.cart-item__controls{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }

.cart-item__total{
  align-self:center; justify-self:end; min-width:210px; text-align:center;
  padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-alt);
}
.line-total span{ font-size:13px; color: var(--text-muted) }
.line-total strong{ display:block; margin-top:4px; font-size:16px }

@media (max-width:640px){
  .cart-item{ grid-template-columns:72px 1fr; }
  .cart-item__total{ grid-column:1 / -1; justify-self:stretch; }
}

/* ============================================================
=                   Qty control (±)                            =
============================================================ */
/* =============== PREMIUM QTY =============== */
/* ================= Premium QTY (fixed) ================= */
.qty{
  --h: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--h);
  padding: 5px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 18px rgba(0,0,0,.18);
}

/* لایت */
body.light-theme .qty{
  background: rgba(255,255,255,.92);
  border-color: rgba(49,74,110,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 10px 24px rgba(49,74,110,.08);
}

/* عدد میانی */
.qty input[type="number"]{
  width: clamp(68px, 6vw, 88px);
  height: 100%;
  padding: 0 10px;
  text-align: center;
  border: 0;
  border-radius: 12px;
  color: var(--text-main);
  font-weight: 500;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.06);

  /* 🔧 سازگاری: ظاهر استاندارد + وندور */
  -moz-appearance: textfield;  /* Firefox */
  appearance: textfield;       /* Standard */
  -webkit-appearance: none;    /* Safari/WebKit fallback */
}

/* لایتِ عدد */
body.light-theme .qty input[type="number"]{
  background: rgba(255,255,255,.98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(49,74,110,.08);
}

/* دکمه‌های سگمنتی */
.qty-btn{
  --btn-r: 12px;
  width: 40px; height: calc(var(--h) - 12px);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: var(--btn-r);
  border: 1px solid var(--dropdown-border);
  background: var(--color-bg-basket-btn);
  color: var(--color-top-bt-p, #fff);
  font-weight: 900; font-size: 18px;
  cursor: pointer; user-select: none;
  touch-action: manipulation;
  transition: transform .08s ease, box-shadow .16s ease, background .12s ease, filter .12s ease;
  box-shadow:
    0 6px 16px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.qty-btn:hover{
  background: var(--color-blue-hover);
  transform: translateY(-1px);
  box-shadow:
    0 10px 20px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.qty-btn:active{ transform: translateY(0) scale(.98); }

/* حالت غیرفعال/در حال پردازش (اگر JS کلاس بدهد) */
.qty.is-busy .qty-btn,
.qty.is-busy input{ pointer-events:none; opacity:.6; }

/* فوکوس دسترسی‌پذیر */
/* Focus: razor-thin gold ring */
/* Focus: hairline gold ring (thinner border) */
.qty :is(.qty-btn, input):focus-visible{
  outline: none;

  /* مرز خیلی باریک */
  border-color: var(--color-gold);
  border-width: .5px; /* اگر خیلی نازک شد، .75px یا 1px بگذار */

  /* حلقه باریک + هاله بسیار لطیف */
  box-shadow:
    0 0 0 .75px var(--color-gold),                                   /* کادر طلایی باریک‌تر */
    0 0 0 3px color-mix(in oklab, var(--color-gold) 16%, transparent);/* هاله ملایم‌تر */
  transition: border-color .12s ease, border-width .12s ease, box-shadow .12s ease;
}


/* حذف اسپینرهای مرورگر (WebKit/Blink) */
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* (دیگه نیازی به بلاک جداگانه برای -moz-appearance نیست؛ بالا اضافه شد) */



/* ============================================================
=                       Forms & fields                         =
============================================================ */
.cart-form{ display:flex; gap:10px; align-items:center }
.cart-form--qty .qty-field{ display:flex; align-items:center; gap:8px }
.cart-form input[type="number"], .cart-form input[type="text"]{
  height: 44px; min-width: 94px; padding: 0 12px;
  border-radius: 14px; border: 1px solid var(--border-color);
  background: var(--bg-main); color: var(--text-main);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cart-form input:focus{ outline:none; border-color: var(--dropdown-border); box-shadow: var(--focus) }
.coupon-field{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.coupon-field span{ font-size:13px; color: var(--text-muted) }

/* فرم کوپن: هم‌خط با دکمه، موبایل زیرهم */
.cart-form--coupon{ display:flex; align-items:flex-end; gap:10px; margin: 8px 0 6px }
.cart-form--coupon .coupon-field input,
.cart-form--coupon .btn{
  height:44px; border-radius:12px; box-sizing:border-box;
}
@media (max-width:520px){
  .cart-form--coupon{ flex-direction:column; align-items:stretch }
  .cart-form--coupon .btn{ width:100% }
}

/* ============================================================
=                            Buttons                           =
============================================================ */
.btn{
  font: inherit; height: 44px; padding-inline: 16px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius: 14px; cursor:pointer; user-select:none; text-decoration:none;
  border: 1px solid var(--dropdown-border);
  background: var(--color-bg-basket-btn);
  color: var(--color-top-bt-p, #fff);
  transition: transform .12s, box-shadow .18s, background .15s, border-color .15s, color .12s;
}
.btn:hover{ transform: translateY(-1px);  background: var(--color-blue-hover); color: var(--color-trans-btn-hover-p) }
.btn:active{ transform:none }

.btn-primary{
  background: var(--btn-bg); color: var(--btn-text);
  border-color: color-mix(in oklab, var(--color-gold) 35%, var(--dropdown-border));
}
.btn-primary:hover{  background: color-mix(in oklab, var(--color-gold) 16%, var(--btn-bg)) }
.btn-secondary{ background: transparent; color: color-mix(in oklab, var(--text-main) 90%, #fff) }

.cart-form--remove{ margin-inline-start: auto }
.cart-form--clear{ margin: 6px 4px 0 }

/* ============================================================
=                          Summary                             =
============================================================ */
/* ================= Cart Summary – world-class component ================= */

/* ---- Component tokens (scoped) ---- */
.cart-summary{
  --cs-radius: 22px;
  --cs-glass-bg: rgba(255,255,255,.04);
  --cs-border: var(--border-color);
  --cs-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);

  --row-sep: 1px dashed var(--border-dashed);

  /* Checkout (inherits from your site tokens) */
  --cta-bg: var(--color-bt-bg);
  --cta-fg: var(--color-bt-text);
  --cta-bg-hover: var(--color-bt-bg-hover);
  --cta-fg-hover: var(--color-bt-text-hover);
  --cta-shadow: 0 2px 14px #0002;

  position: sticky; top: 18px; height: fit-content;
  contain: layout style paint;
}

/* ---- Card ---- */
.cart-summary__card{
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--cs-radius);
  border: 1px solid var(--cs-border);
  background: var(--cs-glass-bg);
  
}
@supports not ((backdrop-filter: blur(0))){
  .cart-summary__card{ background: color-mix(in oklab, var(--cs-glass-bg) 70%, #0000); }
}
.cart-summary__card h2{
  margin: 0 0 14px; font-weight: 900; letter-spacing: -.2px;
}
body:not(.light-theme) .cart-summary__card h2{ color: var(--color-title-golden) }
body.light-theme       .cart-summary__card h2{ color: var(--text-title) }

/* ---- Rows ---- */
.summary-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px 0;
  font-weight:700; color: var(--text-main);
  border-bottom: var(--row-sep);
}
.summary-row:last-child{ border-bottom:0 }
.summary-row--discount strong{ color: var(--text-main) }

/* ---- Total (minimal glass) ---- */
.summary-total{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:12px; padding:12px 14px;
  border: 1px solid var(--cs-border);
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.summary-total span{ opacity:.9 }
.summary-total strong{ font-weight:900 }

/* Hi-DPI hairline borders (crisper on retina) */
@media (min-resolution: 2dppx){
  .cart-summary__card,
  .summary-total{ border-width: .5px; }
}

/* =================================================================
   Checkout CTA – EXACTLY like .shopbook-enter-btn (polished)
   ================================================================= */
.cart-summary__card .cart-summary__checkout{
  margin-top: 1.2em;
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-radius: 1.3em;
  font: inherit;
  font-weight: 600;
  font-size: 1em;
  padding: 0.65em 1.7em;
 
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;

  transition:
    transform .08s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
  width: 100%;
  border: 0;
  background-clip: padding-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cart-summary__card .cart-summary__checkout:hover{
  background: var(--cta-bg-hover);
  color: var(--cta-fg-hover);
  transform: translateY(-1px);
}
.cart-summary__card .cart-summary__checkout:active{
  transform: translateY(0) scale(.99);
 
}

/* Focus ring (hairline + soft halo, color-aware) */


/* Busy / Disabled */
.cart-summary__card .cart-summary__checkout:disabled,
.cart-summary__card .cart-summary__checkout.is-busy{
  opacity:.7; cursor:not-allowed; transform:none;
}

/* Pure-CSS spinner for [aria-busy="true"] */
.cart-summary__card .cart-summary__checkout[aria-busy="true"]{
  position: relative; pointer-events: none;
}
.cart-summary__card .cart-summary__checkout[aria-busy="true"]::after{
  content:""; width: 1.05em; height: 1.05em; margin-inline-start: .5em;
  border-radius: 50%;
  background:
    conic-gradient(currentColor 10%, #0000 0);
  mask:
    radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 2px));
  animation: cart-cta-spin .8s linear infinite;
}
@keyframes cart-cta-spin{ to{ transform: rotate(1turn); } }

/* Coarse pointer (بزرگ‌تر شدن تاچ تارگت) */
@media (pointer: coarse){
  .cart-summary__card .cart-summary__checkout{ padding: .75em 1.9em; }
}

/* Reduced motion / High contrast / Forced colors */
@media (prefers-reduced-motion: reduce){
  .cart-summary__card .cart-summary__checkout{ transition: none !important; }
}
@media (prefers-contrast: more){
  .cart-summary__card .cart-summary__checkout{
    box-shadow: 0 0 0 1px currentColor !important;
  }
}
@media (forced-colors: active){
  .cart-summary__card .cart-summary__checkout{
    border: 1px solid ButtonText; background: ButtonFace; color: ButtonText;
  }
}


/* 1) جلوی اورفلو آیتم‌های Grid را بگیر */
.cart-layout,
.cart-items,
.cart-summary,
.cart-item { min-width: 0; }          /* مهم */
.cart-item__main { min-width: 0; }    /* مهم برای ستون وسط کارت */

/* 2) ستون سوم کارت adaptive شود */
.cart-item__total { 
  min-width: clamp(160px, 45vw, 210px);
}

/* 3) ستون سایدبار در Grid اصلی قابل جمع شدن باشد */
.cart-layout {
  grid-template-columns: 1fr minmax(0, 360px);
}
@media (max-width:1024px){
  .cart-layout { grid-template-columns: 1fr; }
}

/* 4) متن‌ها اجازهٔ شکست داشته باشند */
.cart-item__title,
.cart-item__meta,
.summary-row strong,
.summary-row span {
  overflow-wrap: anywhere;  /* یا word-break: break-word; */
}

/* 5) اگر هنوز جایی اورفلو داشتید (به‌خصوص به‌خاطر سایه‌ها/حاشیه‌ها) */
html, body { /* آخرین چاره */
  overflow-x: hidden;
}

/* ===== ساختار دو ستونی: [محتوا] | [جمع کل آیتم] ===== */
.cart-item{ 
  display:grid;
  grid-template-columns: 1fr clamp(200px, 26vw, 280px);
  grid-auto-rows: auto;
  gap: 14px 18px;
  align-items: start;
  min-width: 0;
}

/* ستون اول: دو ردیف (سرتیتر + اکشن‌ها) */
.cart-item__content{
  display:grid;
  grid-template-rows: auto auto;  /* سطر۱: item-head ، سطر۲: item-actions */
  gap: 12px;
  min-width: 0;
}

/* سطر اول: تصویر + عنوان + قیمت (گرید دونقطه‌ای) */
.item-head{
  display:grid;
  grid-template-columns: 72px 1fr;  /* تصویر | متن */
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.cart-item__thumb{
  width:72px; height:96px; object-fit:cover; border-radius:12px;
}
.head-main{ min-width:0; }
.cart-item__title{ margin:0 0 6px; font-weight:800; font-size:16px; }
.cart-item__title a{ color: var(--text-main); text-decoration:none }
.cart-item__title a:hover{ color: var(--color-title-golden) }
.cart-item__meta{ display:flex; gap:8px; color:var(--text-muted); font-weight:700; }

/* سطر دوم: تعداد + حذف (فلکس تمیز) */
.item-actions{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  min-width:0;
}
.cart-item__controls{ flex:1 1 320px; min-width:260px; }
.qty{ width:100%; }
.qty input[type="number"]{ width:clamp(60px, 9vw, 88px); min-width:60px; }
.cart-form--remove{ flex:0 0 auto; }

/* ستون دوم: جمع کل این آیتم (کنار محتوا، سرتاسرِ عمودی) */
.cart-item__total{
  align-self: stretch;        /* ارتفاع هم‌قدِ محتوای سمت راست */
  justify-self: stretch;
  min-width: 0;
  display:flex; align-items:center; justify-content:center;
  /* استایل‌های کارت/گِلَس هم که داری همون‌ها */
}

/* جلوگیری از اورفلو متن‌ها */
.cart-item, .cart-item__content, .item-head, .head-main { min-width:0; }
.cart-item__title, .cart-item__meta, .line-total { overflow-wrap:anywhere; }

/* ===== تبلت و موبایل: ستون جمع بیاد زیر محتوا ===== */
@media (max-width: 960px){
  .cart-item{
    grid-template-columns: 1fr;      /* یک ستون */
  }
  .cart-item__total{
    order: 3;                         /* بعد از محتوا بیاد */
    margin-top: 6px;
  }
  .cart-item__content{
    order: 1;
  }
}

/* موبایل کوچیک: سر بصورت فشرده‌تر */
@media (max-width: 640px){
  .item-head{ grid-template-columns: 64px 1fr; gap:10px; }
  .cart-item__thumb{ width:64px; height:86px; }
  .cart-item__controls{ flex-basis: 100%; min-width:0; }
}


/* دو ستون: محتوا | جمع کل آیتم (باریک) */
.cart-item{
  display:grid;
  grid-template-columns: 1fr minmax(160px, 220px); /* قبلاً 200–280 بود */
  gap: 14px 18px;
  align-items: start;
  min-width: 0;
}

/* ستون جمع: اندازه‌اش به محتوا محدود باشد، کش نیاید */
.cart-item__total{
  justify-self: start;              /* یا end اگر می‌خواهی سمت راست بچسبد */
  align-self: center;
  width: fit-content;               /* فقط به اندازه محتوا */
  max-width: 220px;                 /* سقف ایمن */
  min-width: 160px;                 /* کف ایمن تا نشکند */
}

/* خود باکسِ مجموع؛ باریک و جمع‌وجور */
.cart-item__total .line-total{
  display: grid;
  place-items: center;
  padding: 12px 14px;               /* اگر الان زیاد است، کمترش کردیم */
  text-align: center;
  width: 100%;
}

/* تبلت/موبایل: ستون جمع بیاید زیر محتوا (تمام‌عرض) */
@media (max-width: 960px){
  .cart-item{
    grid-template-columns: 1fr;
  }
  .cart-item__total{
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-top: 6px;
  }
}

/* اگر هنوز زیادی جا می‌گیرد، می‌توانی حتی باریک‌ترش کنی: */
/* .cart-item{ grid-template-columns: 1fr minmax(140px, 200px); } */


/* ============================================================
=                        Theme rules                           =
============================================================ */
/* Dark: فقط Checkout و قیمت‌ها طلایی */
body:not(.light-theme) .price__value,
body:not(.light-theme) .line-total__value,
body:not(.light-theme) .summary-total strong{ color: var(--color-gold) }

body:not(.light-theme) .cart-summary__checkout.btn,
body:not(.light-theme) .cart-summary__checkout.btn-primary{
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border-color: color-mix(in oklab, var(--color-gold) 35%, var(--border-color)) !important;

}
body:not(.light-theme) .cart-summary__checkout.btn:hover{ box-shadow: 0 18px 42px rgba(255,217,102,.25) }

/* Light: بدون زرد؛ نوی/سرمه‌ای هماهنگ */
body.light-theme .price__value,
body.light-theme .line-total__value,
body.light-theme .summary-total strong{ color: var(--text-price-new) }

body.light-theme .cart-items,
body.light-theme .cart-item,
body.light-theme .cart-summary__card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(49,74,110,.14);
 
}
body.light-theme .cart-summary__checkout.btn,
body.light-theme .cart-summary__checkout.btn-primary{
  background: var(--btn-bg) !important; color: var(--btn-text) !important;
  border-color: var(--border-color) !important;
  
}

/* سایر دکمه‌های کارتی (اعمال/بروزرسانی/حذف/...) هر دو تم غیرزرد باشند */
.cart-form--coupon .btn,
.cart-form--qty .btn,
.cart-form--remove .btn,
.cart-form--clear .btn{
  background: var(--color-bg-basket-btn);
  color: var(--color-top-bt-p, #fff);
  border-color: var(--dropdown-border);
}
.cart-form--coupon .btn:hover,
.cart-form--qty .btn:hover,
.cart-form--remove .btn:hover,
.cart-form--clear .btn:hover{ background: var(--color-blue-hover) }

/* ============================================================
=                         A11y & Responsive                    =
============================================================ */

@media (max-width:540px){
  .cart-summary__checkout{ height:52px; line-height:52px }
  .coupon-field input{ height:42px }
  .cart-form--coupon .btn{ height:42px }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}

/* ==== FIX: جلوگیری از سرریز در موبایل ==== */

/* اطمینان از اینکه هیچ ظرفی از عرض ویوپورت بزرگ‌تر نشود */
.cart-layout,
.cart-items,
.cart-summary,
.cart-summary__card,
.cart-item { max-width: 100%; box-sizing: border-box; }

/* ستون مجموع هر آیتم: در موبایل تمام‌عرض شود و حداقل‌عرض حذف شود */
@media (max-width: 640px){
  .cart-item__total{
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    min-width: 0;          /* ⬅️ مهم: قبلی را خنثی می‌کند */
  }
}

/* کنترل تعداد جمع‌وجورتر در موبایل‌های باریک */
@media (max-width: 400px){
  .qty input[type="number"]{
    width: clamp(56px, 14vw, 80px);  /* از 68~88 کوچک‌تر شود */
  }
  .qty { gap: 6px; }
}

/* متن‌ها مجبور به شکستن شوند تا باعث اسکرول افقی نشوند */
.cart-item__title a,
.summary-row,
.summary-total { overflow-wrap: anywhere; }

/* اگر هنوز جایی 1-2px سرریز داشت، این دو خط به‌عنوان گارد نهایی مفیدند */
.cart-layout { overflow-x: hidden; }
html, body { overflow-x: hidden; }




/* ===================== CHECKOUT (harmonized with Cart) ===================== */
/* ================= Checkout — layout & cards ================= */
/* ===== Checkout layout: left = summary, right = address ===== */
/* پیش‌فرض موبایل/تبلت: اول آدرس، بعد خلاصه */
/* ====== Checkout layout (Flex) ====== */
.checkout-layout{
  direction: rtl;
  max-width: 1200px;
  margin: 22px auto;
  padding: clamp(12px, 2.6vw, 24px);
  display: flex;
  gap: clamp(14px, 2.4vw, 28px);

  /* دسکتاپ: خلاصه (اولِ DOM) چپ، آدرس (دومِ DOM) راست */
  flex-direction: row;        /* با rtl، این جهت، چپ/راست را درست می‌کند */
  align-items: flex-start;
}

/* آدرس = 75% (منعطف) */
.address-card{
  flex: 1 1 65%;
  min-width: 0;                       /* جلوگیری از سرریز محتوا */
}

/* خلاصه = 25% (باریک) */
.cart-summary{
  flex: 0 1 35%;
  max-width: 400px;                   /* برای زیباتر شدن ستون خلاصه */
  min-width: 300px;                   /* نگذارد خیلی باریک شود */
}

/* موبایل/تبلت: زیر هم و «آدرس» اول */
@media (max-width: 1024px){
  .checkout-layout{
    flex-direction: column;   /* زیر هم */
    gap: 16px;
  }
  .address-card,
  .cart-summary{
    flex: 0 0 100%;           /* flex-basis: 100% */
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }
  .address-card{ order: 1; }  /* آدرس بالا */
  .cart-summary{ order: 2; }  /* خلاصه پایین */
}






.address-card{
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--border-color);
  box-shadow: 0 26px 60px rgba(0,0,0,.25);
  border-radius: 22px;
  padding: clamp(16px,2vw,22px);
  color: var(--text-main);
}
.address-card h2{ margin: 0 0 12px; font-weight: 900; letter-spacing: -.2px; color: var(--text-title) }

body.light-theme .address-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(49,74,110,.14);
  box-shadow: 0 18px 42px rgba(49,74,110,.08);
}

/* ================= Forms ================= */
.address-form{ display: grid; gap: 12px }
.frow{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px }
@media (max-width:700px){ .frow{ grid-template-columns: 1fr } }

.fcol{ display:flex; flex-direction:column; gap: 6px; min-width:0 }
.fcol > span{ font-size: 13px; color: var(--text-muted) }
.req{ color: var(--color-gold); font-weight: 900; margin: 0 2px }

/* Unified field styling */
.address-form input,
.address-form select,
.address-form textarea{
  font: inherit;                         /* فونت سایت */
  color: var(--text-main);
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  min-width: 0;
}

.address-form input,
.address-form select{ height: 46px; padding: 0 12px }
.address-form textarea{ padding: 10px 12px; min-height: 132px; resize: vertical }

/* Placeholder */
.address-form ::placeholder{ color: color-mix(in oklab, var(--text-muted) 86%, transparent) }

/* Focus — hairline ring (دارک طلایی / لایت سرمه‌ای) */
@supports (box-shadow: 0 0 0 1px #0000){
  body:not(.light-theme) .address-form :is(input,select,textarea):focus-visible{
    border-color: var(--color-gold);
    box-shadow:
      0 0 0 .75px var(--color-gold),
      0 0 0 3px color-mix(in oklab, var(--color-gold) 16%, transparent);
  }
  body.light-theme .address-form :is(input,select,textarea):focus-visible{
    border-color: rgba(49,74,110,.85);
    box-shadow:
      0 0 0 .75px rgba(49,74,110,.9),
      0 0 0 3px rgba(49,74,110,.14);
  }
}

/* Valid / Invalid states (اختیاری: با JS کلاس بده) */
.is-valid{ border-color: color-mix(in oklab, var(--stock-available-icon) 70%, var(--border-color)) !important }
.is-invalid{
  border-color: color-mix(in oklab, var(--stock-unavailable-icon) 70%, var(--border-color)) !important;
  box-shadow: 0 0 0 .75px color-mix(in oklab, var(--stock-unavailable-icon) 85%, red);
}

/* Disabled look */
.address-form :is(input,select,textarea):disabled{
  opacity:.75; cursor:not-allowed;
  background: color-mix(in oklab, var(--bg-main) 70%, #fff);
}

/* ================= Fancy <select> (RTL) ================= */
.address-form select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-left: 40px;             /* جا برای فلش سمت چپ (rtl) */
 
  background-position: 12px 50%;
  background-size: 18px;
}


/* Remove native spinners in some UAs */
/* Remove native number spinners (cross-browser) */
.address-form input[type="number"] {
  appearance: textfield;          /* استاندارد – لاینتر را راضی می‌کند */
  -moz-appearance: textfield;     /* فایرفاکس قدیمی/سخت‌گیر */
}

/* Chrome / Safari / Edge / Opera */
.address-form input[type="number"]::-webkit-outer-spin-button,
.address-form input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}


/* ================= Autosave chip ================= */
#autosave-badge{
  display:inline-flex; align-items:center; gap:.4em;
  padding: .22em .6em;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ok-color) 16%, var(--bg-main));
  color: color-mix(in oklab, var(--ok-color) 90%, #fff);
  font-size: .85rem;
  border: 1px solid color-mix(in oklab, var(--ok-color) 38%, var(--border-color));
}

/* ================= Summary list (items) ================= */
.summary-list li{
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.summary-list .line-price{ color: var(--color-gold); font-weight: 800 }

/* ================= Checkout button (uses your .shopbook-enter-btn) ================= */
.cart-summary__card .cart-summary__checkout{
  width: 100%;
  margin-top: 1.1em;
}
.cart-summary__card .cart-summary__checkout[disabled]{
  filter: grayscale(.15) saturate(.85); opacity:.7; cursor:not-allowed;
}

/* ================= Scrollbars (textarea + select lists) ================= */
/* Firefox */
.address-card :is(textarea,select){ scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--dropdown-border) 70%, transparent) transparent; }
/* WebKit */
.address-card :is(textarea,select)::-webkit-scrollbar{ width: 10px; height: 10px }
.address-card :is(textarea,select)::-webkit-scrollbar-track{
  background: color-mix(in oklab, var(--bg-main) 70%, #0000);
  border-radius: 10px;
}
.address-card :is(textarea,select)::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, color-mix(in oklab, var(--dropdown-border) 80%, #0000), color-mix(in oklab, var(--dropdown-border) 60%, #0000));
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}
.address-card :is(textarea,select)::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, color-mix(in oklab, var(--dropdown-border) 90%, #0000), color-mix(in oklab, var(--dropdown-border) 75%, #0000));
}

/* ================= Theme tweaks ================= */
body.light-theme .summary-list .line-price{ color: var(--text-price-new) }
body:not(.light-theme) .summary-total strong{ color: var(--color-gold) }



/* ========== Invoice layout ========== */
/* =========================================================
   PAY / INVOICE — Final, minimal, modular
   معیار: کدهای انتهایی (نسخه نهایی)
   ========================================================= */

/* کانتینر کلی صفحه پرداخت: همیشه فاکتور وسط صفحه و دکمه زیر آن */
#pay-root .invoice-wrap{
  max-width: 1200px;
  margin: 24px auto;
  padding: clamp(12px,2.6vw,24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* کارت فاکتور */
.invoice-card{
  order: 1;                                   /* همیشه قبل از دکمه پرداخت */
  width: min(100%, 980px);
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 26px 60px rgba(0,0,0,.25);
  color: var(--text-main);
}
body.light-theme .invoice-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(49,74,110,.14);
  box-shadow: 0 18px 42px rgba(49,74,110,.08);
}

/* هدر کارت (عنوان و شماره سفارش) */
.invoice-head{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;padding: 20px;
}
.invoice-head h2{ margin: 0 }
.invoice-head .order-no{ opacity: .8 }

/* بدنه کارت */
.invoice-body{ padding: 20px;border-radius: 5px; overflow: hidden }

/* لیست آیتم‌های سفارش */
.invoice-list{
  display: grid; gap: 10px; padding: 14px;
}
.invoice-item{
  display: grid; grid-template-columns: 72px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-main);
}
.invoice-thumb{
  width: 72px; height: 96px; object-fit: cover; border-radius: 12px;
}
.invoice-info .title{ font-weight: 800; color: var(--text-main) }
.invoice-info .meta{ margin-top: 6px; font-size: 13px; color: var(--text-muted) }
.invoice-info .meta .sep{ margin: 0 10px; opacity: .7 }
.invoice-line{
  text-align: end; font-weight: 800;
  color: var(--color-gold);
}
body.light-theme .invoice-line{ color: var(--text-price-new) }

/* جمع مبالغ */
.invoice-summary{ padding: 0 14px 14px }
.invoice-summary .summary-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px dashed var(--border-dashed);
}
.invoice-summary .summary-row:last-child{ border-bottom: 0 }
.invoice-summary .summary-total strong{ font-weight: 900 }
body:not(.light-theme) .invoice-summary .summary-total strong{ color: var(--color-gold) }
body.light-theme       .invoice-summary .summary-total strong{ color: var(--text-price-new) }

/* آدرس: همه‌چیز زیر هم */
.invoice-address{
  padding: 14px;
  border-top: 1px dashed var(--border-dashed);
}
.invoice-address h3{
  margin: 0 0 8px; font-weight: 900; font-size: 16px; color: var(--text-title);
}
.invoice-address .addr-grid{
  display: grid; grid-template-columns: 1fr; gap: 8px; color: var(--text-main);
}

/* اکشن‌های داخل کارت: فقط ویرایش آدرس، سمت چپ */
.invoice-actions{
  margin-top: 12px;
  display: flex; justify-content: flex-start;
}
.invoice-actions .btn-edit{
  font: inherit;
  padding: .56em 1.2em;
  border-radius: 12px;
  background: transparent;
  text-decoration: none;
  color: color-mix(in oklab, var(--text-main) 92%, #fff);
  border: 1px solid var(--dropdown-border);
  transition: transform .08s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.invoice-actions .btn-edit:hover{
  background: color-mix(in oklab, var(--color-blue-hover) 18%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* CTA پرداخت: بیرون از کارت، بزرگ و دقیقاً وسط */
.pay-form-out{
  order: 2;                                   /* همیشه بعد از کارت */
  width: min(100%, 980px);
  display: flex; justify-content: center;     /* وسط کارت */
}
.pay-form-out .btn-pay-out{
  font: inherit; font-weight: 700;
  padding: .9em 3em;   
  font-size: 20px;                     /* بزرگ‌تر از ویرایش */
  border: 0; border-radius: 1.3em;
  background: var(--color-bt-bg);
  color: var(--color-bt-text);
  box-shadow: 0 2px 14px #0002;
  transition: transform .08s, background .16s, color .16s, box-shadow .16s;
  margin-top: 20px;
}
.pay-form-out .btn-pay-out:hover{
  transform: translateY(-1px);
  background: var(--color-bt-bg-hover);
  color: var(--color-bt-text-hover);
}
/* نشان‌گر دست وقتی دکمه فعال است */
.btn-pay-out{ cursor: pointer; }

/* کمی فیدبک هم بدیم */
.btn-pay-out:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }

/* حالت غیرفعال */
.btn-pay-out[disabled],
.btn-pay-out:disabled{
  cursor: not-allowed;
  opacity: .6;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}


/* ریسپانسیو */
@media (max-width: 640px){
  .invoice-card, .pay-form-out{ width: 100% }
}

/* اطمینان مضاعف در صورت باقی‌بودن رَپر قدیمی checkout-layout--pay */
@media (max-width: 1024px){
  .checkout-layout.checkout-layout--pay{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .checkout-layout.checkout-layout--pay .invoice-card{ order: 1 !important; }
  .checkout-layout.checkout-layout--pay .pay-form-out{ order: 2 !important; }
}

/* پیام پرداخت‌شده */
  .paid-note{
    direction: rtl;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 800;
    line-height: 1.7;
    color: #16a34a;                    /* سبز موفقیت */
    background: rgba(22,163,74,.10);   /* پس‌زمینه لطیف */
    border: 1px solid rgba(22,163,74,.35);
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
  }
  .paid-note::before{
    content: "✓";
    font-weight: 900;
    border-radius: 50%;
    width: 1.5em; height: 1.5em;
    display: inline-grid; place-items: center;
    background: rgba(22,163,74,.18);
    border: 1px solid rgba(22,163,74,.35);
  }

  /* اگر تم روشن/تیره داری و خواستی کمی کنتراست تغییر کند: */
  body.light-theme .paid-note{
    background: rgba(22,163,74,.12);
    border-color: rgba(22,163,74,.28);
  }


 /* ===== Qty field (ورودی تعداد) ===== */
.book-addcart-form .qty-field{
  display:flex;
  align-items:center;
  gap:10px;
  direction: rtl;
}

.book-addcart-form .qty-field > span{
  font-size:.8rem;
  font-weight:500;
  color: var(--text-muted, #6c7a89);
}

/* خود input */
.book-addcart-form .qty-field input[type="number"]{
  width: 80px !important;          /* اگر inline style حذف شد، !important رو می‌تونی برداری */
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(49,74,110,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  color: var(--text-title, #0f1a2a);
  font: inherit;
  font-weight: 500;
  text-align: center !important;     /* برای override کردن inline */
  box-shadow: 0 2px 10px rgba(17,38,146,.06), inset 0 -2px 6px rgba(0,0,0,.06);
  transition: border-color .15s ease, box-shadow .2s ease, transform .06s ease;
}

/* حالت دارک (اختیاری) */
body:not(.light-theme) .book-addcart-form .qty-field input[type="number"]{
  background: rgba(255,255,255,.06);
  color: #e7efff;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 2px 10px rgba(0,0,0,.18), inset 0 -2px 6px rgba(0,0,0,.12);
}

/* Hover & Focus */
.book-addcart-form .qty-field input[type="number"]:hover{
  transform: translateY(-1px);
}
.book-addcart-form .qty-field input[type="number"]:focus-visible{
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.16), 0 6px 18px rgba(59,130,246,.18);
}

/* Disabled */
.book-addcart-form .qty-field input[type="number"]:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* مخفی کردن فلش‌های number در مرورگرها */
.book-addcart-form .qty-field input[type="number"]::-webkit-outer-spin-button,
.book-addcart-form .qty-field input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.book-addcart-form .qty-field input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}

/* واکنش‌گرا */
@media (max-width:480px){
  .book-addcart-form .qty-field input[type="number"]{
    width: 104px !important;
    height: 44px;
  }
}
/* فرم افزودن به سبد: همه چیز در یک سطر */
.book-addcart-form{
  display: flex;
  align-items: center;
  gap: 20px;           /* فاصله بین ورودی و دکمه */
  flex-wrap: nowrap;   /* یک خطی بماند */
  direction: rtl;
  margin: 30px;
}

/* برچسب و ورودی تعداد در یک ردیف جمع‌وجور */
.book-addcart-form .qty-field{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.book-addcart-form .qty-field > span{
  font: inherit;
  font-weight: 500;
  color: var(--text-muted, #6c7a89);
}

/* دکمه: بدون بردر، فونت inherit و نشانگر دست */
.book-addcart-form .shopbook-enter-btn{
  display: inline-flex;
  align-items: center;
  border: none;              /* بدون بردر */
  cursor: pointer;           /* نشانگر دست */
  font: inherit;
  font-weight: 600;             /* ارث‌بری از فونت والد */
  margin: 0px;
  
}

.book-addcart-form .shopbook-enter-btn:hover{
  transform: translateY(-1px);
  
}

.book-addcart-form .shopbook-enter-btn:active{
  transform: translateY(0);
}

.book-addcart-form .shopbook-enter-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

/* آیکن بوت‌استرپ کنار متن */


/* اگر صفحه خیلی باریک شد، اجازه بده روی دو خط بره */
@media (max-width: 500px){
  .book-addcart-form{ display: flex;flex-direction: column;align-items: flex-start; }
}


/* ===================== Toast (Bottom-Center) ===================== */
/* ظرف توست‌ها: همیشه پایینِ وسط، واکنش‌گرا و امن برای ناچ/سِیف‌اریا */
.toast-stack{
  position: fixed !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;

  width: auto !important;         /* کل عرض در دسترس با حاشیه‌های امن */
  transform: none !important;
  display: grid !important;
  justify-items: center !important;
  gap: 8px;
  pointer-events: none;            /* کلیک‌ها به زیرین برسد */
  z-index: 2147483647;
}

/* خود توست: جمع‌وجور، تک‌خط، حداکثر ارتفاع 50px و حداکثر عرض 680px */
.toast{
  max-width: min(680px, 100%) !important;
  max-height: 50px;
  padding: 10px 14px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(22,30,46,.86);
  color: #e7efff;
  border: 1px solid rgba(108,134,174,.35);
  box-shadow: 0 14px 28px rgba(0,0,0,.25);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: inherit;
  pointer-events: auto;            /* اگر دکمه داخل توست داری، کلیک‌پذیر باشد */

  /* عمر توست (قابل‌تغییر): */
  --life: 5s;
  animation: toast-in .18s ease-out,
             toast-out .22s ease-in var(--life) forwards;
}

/* حالت‌های رنگی (اختیاری) */
.toast.success{ border-color: rgba(68,210,122,.55); }
.toast.error  { border-color: rgba(255,123,123,.55); }

/* اندازه آیکن داخل توست */
.toast i{ font-size: 1.05em; line-height: 1; }

/* انیمیشن‌ها: ورود/خروج کوتاه از پایین */
@keyframes toast-in{
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes toast-out{
  to   { transform: translateY(8px); opacity: 0; }
}
/* ===== Floating Cart FAB ===== */
.fab-cart{
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 64px; height: 64px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  cursor: pointer;
  z-index: 2147483600; /* کمتر از توست‌ها که بالاترن */
  border: 1px solid var(--fab-border, rgba(108,134,174,.35));
  background: var(--fab-bg, rgba(255,255,255,.22));
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  color: var(--fab-icon, #0f1a2a);
}

.fab-cart i{
  font-size: 1.5rem;
  line-height: 1;
  pointer-events: none;
}

/* Hover/Active */
.fab-cart:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0,0,0,.28);
}
.fab-cart:active{
  transform: translateY(0);
}

/* Badge (اختیاری) */
.fab-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff4d4f;
  color: #fff;
  border: 2px solid rgba(255,255,255,.85);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* تم‌ها: پیش‌فرض + روشن/تاریک */
:root{
  /* پیش‌فرض نزدیک به تم روشن */
  --fab-bg: rgba(255,255,255,.32);
  --fab-border: rgba(49,74,110,.24);
  --fab-icon: #0f1a2a;
}

@media (prefers-color-scheme: dark){
  :root{
    --fab-bg: rgba(22,30,46,.62);
    --fab-border: rgba(108,134,174,.35);
    --fab-icon: #e7efff;
  }
}

/* اگر پروژه‌ات کلاس light-theme/dark-theme روی body می‌گذاره: */
body.light-theme{
  --fab-bg: rgba(255,255,255,.32);
  --fab-border: rgba(49,74,110,.24);
  --fab-icon: #0f1a2a;
}
body:not(.light-theme){
  --fab-bg: rgba(22,30,46,.62);
  --fab-border: rgba(108,134,174,.35);
  --fab-icon: #e7efff;
}

/* اندازه کوچکتر برای موبایل‌های خیلی باریک (اختیاری) */
@media (max-width: 360px){
  .fab-cart{ width: 56px; height: 56px; }
  .fab-cart i{ font-size: 1.35rem; }
  .fab-badge{ min-width: 20px; height: 20px; font-size: 11px; }
}
/* ===== Pulse برای دکمهٔ سبد خرید ===== */
/* وقتی کلاس has-pulse روی .fab-cart باشد، یک دایرهٔ قرمز + حلقهٔ نبض نمایش داده می‌شود */
.fab-cart.has-pulse::after,
.fab-cart.has-pulse::before{
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 0px;                 /* اگر با بجِ شمارش هم‌پوشانی داشت، این دو مقدار را کمی کم/زیاد کن */
  right: 0px;
  pointer-events: none;
}

/* دایرهٔ قرمز ثابت */
.fab-cart.has-pulse::after{
  width: 15px; height: 15px;
  background: #ff4d4f;
  border: 2px solid rgba(255,255,255,.9);
  z-index: 2;
}

/* حلقهٔ نبض */
.fab-cart.has-pulse::before{
  width: 15px; height: 15px;
  box-shadow: 0 0 0 0 rgba(255,77,79,.55);
  animation: cart-pulse 1.6s ease-out infinite;
  z-index: 1;
}

/* انیمیشن نبض */
@keyframes cart-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,77,79,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(255,77,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,79,0); }
}


body:not(.light-theme) .fab-cart.has-pulse::after{
  border-color: rgba(22,30,46,.9);
}
/* ظرف دکمه‌ها نسبی شود تا پالس درست پوزیشن بگیرد */
/* اگر قبلاً روی آواتار نبض گذاشته بودیم، خاموشش کن */
.profile_area .profile_btn--mobile::after,
.profile_area .profile_btn_desktop .avatar_ring::after{ content: none !important; }

/* لینک‌های منو قابل پوزیشن شوند */
.profile_area .profile_actions a,
.profile_area .profile_dropdown_menu a,
.profile_area .profile_cart_link { position: relative; }

/* وقتی سبد آیتم دارد، کنار لینک «سبد فروشگاه کتاب» نبض بزن */
.profile_area.has-cart-items .profile_cart_link::after{
  content: "";
  position: absolute;
  top: 50%;
  /* RTL/LTR-safe: کنار انتهایی لینک */
  inset-inline-end: 8px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: #ff3b30;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,59,48,.55);
  animation: cartlink-pulse 1.6s ease-out infinite;
  z-index: 1;
}

/* انیمیشن پالس */
@keyframes cartlink-pulse{
  0%   { box-shadow: 0 0 0 0  rgba(255,59,48,.55); transform: translateY(-50%) scale(1); }
  60%  { box-shadow: 0 0 0 10px rgba(255,59,48,0);  transform: translateY(-50%) scale(1.06); }
  100% { box-shadow: 0 0 0 0  rgba(255,59,48,0);    transform: translateY(-50%) scale(1); }
}


/* ریشه دکمه سبد */
/* ریشه‌ی دکمه سبد */
.basket{
  position: relative;
  display: inline-block;
  overflow: visible;          /* اجازه دهد بج بیرون از دکمه دیده شود */
}

/* وقتی سبد آیتم دارد → بج + نبض گوشه‌ی بیرونی */
.basket.has-cart-items::after{
  content: "";
  position: absolute;
  inset-block-start: 0;       /* top */
  inset-inline-end: 0;        /* right در LTR/RTL */
  transform: translate(45%, -45%); /* کمی بیرون از گوشه بیفتد */
  width: 8px;
  height: 8px;
  background: #ff3b30;
  border-radius: 50%;
  pointer-events: none;
  /* اگر می‌خواهی دورش از رنگ پس‌زمینه جدا شود: */
  /* border: 2px solid rgba(0,0,0,.35); */

  box-shadow: 0 0 0 0 rgba(255,59,48,.55);
  animation: basket-pulse 1.6s ease-out infinite;
  z-index: 2;
}

/* انیمیشن نبض */
@keyframes basket-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,59,48,.55); transform: translate(45%,-45%) scale(1); }
  60%  { box-shadow: 0 0 0 8px rgba(255,59,48,0); transform: translate(45%,-45%) scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0);  transform: translate(45%,-45%) scale(1); }
}






/* پیام موفقیت پس از افزودن به سبد */
.addcart-success{
  direction: rtl;
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  text-align: center;
  color: var(--text-main);
}
.addcart-success .succ-icon{
  font-size: 1.4rem;
  color: var(--color-gold, #ffd966);
  vertical-align: -2px;
  margin-left: .35rem;
}
.addcart-success .succ-title{
  font-weight: 900;
  color: var(--text-title);
}
.addcart-success .succ-actions{
  margin-top: 10px;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.addcart-success .shopbook-enter-btn{
  font: inherit;
  cursor: pointer;
  border: 0;
}
/* ===== Auth Modal ===== */
.auth-modal[hidden]{ display:none !important; }
.auth-modal{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

.auth-card{
  position: relative;
  width: min(92vw, 520px);
  padding: 20px 18px 16px;
  border-radius: 16px;
  background: rgba(22,30,46,.88);
  color: #e7efff;
  border: 1px solid rgba(108,134,174,.35);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
body.light-theme .auth-card{ background: rgba(255,255,255,.95); color: #1c2333; }

.auth-card h3{ margin: 0 0 .6rem; font-weight: 800; font-size: clamp(18px,2.4vw,22px); }
.auth-card p{ margin: .25rem 0 .9rem; line-height: 1.9; }

.auth-actions{ display: flex; gap: 10px; justify-content: flex-end; }
.auth-btn{
  font: inherit; cursor: pointer; border: 0; border-radius: 12px;
  padding: .6rem 1rem; text-decoration: none; display:inline-flex; align-items:center; gap:.4rem;
}
.auth-btn.primary  { background: var(--btn-bg, #ffd766); color: var(--btn-text, #182034); }
.auth-btn.secondary{ background: transparent; color: inherit; border: 1px solid rgba(108,134,174,.5); }

.auth-close{
  position: absolute; top: 10px; inset-inline-end: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.1); color: currentColor;
}
.auth-close:hover{ background: rgba(255,255,255,.2); }

body.modal-open{ overflow: hidden; } /* جلوگیری از اسکرول پس‌زمینه */


/* ================================
   Course Page — Dark/Light Ready
   وابسته به main.css (variables)
   ================================ */

/* ---------- 1) کارت معرفی دوره ---------- */
.course-hero-card{
  /* background: var(--bg-main); */
  /* border: 1px solid var(--border-color); */
 
  padding: clamp(18px, 2.5vw, 28px);
  /* box-shadow: 0 12px 38px rgba(0,0,0,.18); */
  margin: 30px 0 28px;
}

.course-hero-grid{
 
 display: flex;
  
  justify-content: space-between;
  gap: 40px;
  padding: 10px;
}
.course-hero-media {
  flex-basis: 50%;
}
.course-hero-content {
  flex-basis: 50%;
}

/* تصویر کاور */
.course-hero-media{
  margin: 0;
  
}
@media (max-width: 768px){
  .course-hero-grid{
 display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
}
.course-cover{
  width: 100%;
  display: block;
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(0,0,0,.25);
  border: 1px solid color-mix(in oklab, var(--border-color) 70%, transparent);
  object-fit: cover;
  justify-items: start;
}

.course-title {
  font-size: 2rem;
  
  margin-bottom: 1rem; /* فاصله با متن */
}

.course-subdesc {
  font-size: 1rem;
  line-height: 1.9;
  text-align: justify;
}

/* عنوان و توضیح */
.course-hero-content{
  display: grid;
  grid-template-rows: auto auto auto;
  gap: clamp(12px, 2vw, 18px);
}

.course-header{ margin-bottom: 8px; }
.course-title{
  margin: 0 0 6px 0;
 
 
  color: var(--color-title);
  letter-spacing: -.2px;
}
.course-name{ color: var(--resposive-color-text23-gold); }

.course-subdesc{
  margin: 0;
  color: var(--text-muted);
  line-height: 1.9;
  font-size: clamp(.98rem, 1.2vw, 1.06rem);
}
@media (max-width: 1280px){
.course-subdesc{
  
  
  font-size: 14px;
}
 
}

/* قیمت + CTA */
.course-purchase{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  flex-wrap: wrap;
  padding: 10px 0 6px;
}

.course-price-wrap{
  background: var(--bg-alt);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 10px 14px;
  min-width: 230px;
}
.course-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.course-cta .shopbook-enter-btn{
  margin-top: 0px;
  padding: .8em 1.6em;
  font-weight: 600;
  font-size: 16px;
}
.course-cta .shopbook-enter-btn i {
 
  font-weight: 800;
  font-size: 20px;
}

.price-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.price-amount{
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1;
  font-weight: 900;
  color: var(--text-title);
  text-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.price-currency{
  font-size: .95rem;
  color: var(--text-muted);
}
.price-note{
  margin-top: 6px;
  font-size: .92rem;
  color: var(--text-main);
  opacity: .9;
}
@media (max-width: 1280px){
.price-amount{
  font-size: 1.8rem;
 
}
.course-price-wrap{
  
  padding: 15px 20px;
  min-width: 100px;
}
.course-cta .shopbook-enter-btn{
 
  padding: .8em 1.2em;
  font-weight: 600;
  font-size: 14px;
}

}
@media (max-width: 1050px){
 .course-cta {
  display: flex;
  flex-direction: column;
 align-items: center;
  gap: 20px;
}
}
@media (max-width: 768px){
.price-amount{
  font-size: 2.2rem;
 
}
.course-price-wrap{
  
  padding: 20px 30px;
  min-width: 100px;
}
.course-cta .shopbook-enter-btn{
 
  padding: 20px 30px;
  font-weight: 600;
  font-size: 16px;
}

}

/* دکمه خرید (با استفاده از btn/btn-primary موجود) */
.course-buy-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.95em 1.4em;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  white-space: nowrap;
}
.course-buy-btn i{ font-size: 1.1em; }

/* متادیتا + اشتراک‌گذاری */
.course-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: clamp(10px, 1.5vw, 16px);
  border-top: 1px dashed var(--border-dashed);
}
.course-stats{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; gap: 18px;
  color: var(--text-muted);
  font-weight: 700;
}
.course-stats li{
  display: inline-flex; align-items: center; gap: 8px;
}
.course-stats i{ opacity: .9; }

.course-share{
  display: inline-flex; align-items: center; gap: 10px;
}
.share-label{ color: var(--text-muted); }
.share-btn{
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border-color);
  text-decoration: none;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
}
.share-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

/* ---------- 2) سکشن‌های عمومی ---------- */
.course-section{
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: clamp(16px, 2.5vw, 26px);
  margin: 22px 0;
  box-shadow: 0 12px 38px rgba(0,0,0,.16);
}

.section-header{ margin-bottom: 16px; }
.section-title{
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-title);
  font-weight: 900;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
}
.section-title .dot{
  color: var(--color-title-golden);
  font-size: 1.3em; line-height: 0;
}

.section-body p{
  margin: 12px 0;
  color: var(--text-main);
  line-height: 2.05;
  font-size: clamp(.98rem, 1.2vw, 1.05rem);
}

/* ---------- 3) کارت گارانتی ---------- */
/* کارت گارانتی */
.guarantee-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  background: color-mix(in oklab, var(--bg-alt) 86%, transparent);
  border:1px solid var(--border-color);
  border-radius:18px;
  padding:40px;
}
@media (max-width: 900px){
  .guarantee-card{ flex-direction:column; }
}

/* ستون متن */
.guarantee-content{
  display:flex;
  flex-direction: column;   /* ← ستون‌بندی برای متن */
  flex:1 1 60%;
}

/* خود باکس متن ادیتور */
.guarantee-html{
  width:100%;
}

/* متن‌های داخل ادیتور: هم p و هم div و li را پوشش بده */
.guarantee-html p,
.guarantee-html div,
.guarantee-html li{
  margin:0 0 14px 0;
  color:var(--text-main);
  line-height:2;
  text-align:justify;
}

/* لینک CTA (بدون تغییر) */
.guarantee-steps-link{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:800;
  color:var(--color-title);
  background:var(--bg-main);
  border:1px solid var(--border-color);
  padding:8px 12px; border-radius:12px;
  transition: background .18s, transform .12s, box-shadow .18s;
}
.guarantee-steps-link:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  color:var(--color-title-golden);
}

/* ستون تصویر */
.guarantee-illustration{
  display:grid; place-items:center;
  flex:0 1 40%;
}
.guarantee-illustration img{
  width:100%; display:block;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.25));
}


/* ---------- 4) لیست جلسات (سرفصل‌ها) ---------- */
.syllabus-list{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
.syllabus-item{ margin: 0; }

.syllabus-row{
  width: 100%;
  background: color-mix(in oklab, var(--bg-alt) 92%, transparent);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  grid-template-columns: 28px 120px 1fr;
  align-items: center;
  gap: 14px;
  color: var(--text-main);
  font-size: 1.02rem;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.syllabus-row:hover,
.syllabus-row:focus{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  border-color: color-mix(in oklab, var(--border-color) 30%, var(--color-title-golden) 70%);
}
.syllabus-icon{
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--bg-main) 65%, transparent);
  border: 1px solid var(--border-color);
}
.syllabus-part{
  color: var(--color-title);
  font-weight: 800;
}
.syllabus-title{
  color: var(--text-main);
  opacity: .95;
}

/* حالت باز شدن آتی (در صورت افزودن آکاردئون) */
.syllabus-row[aria-expanded="true"]{
  background: color-mix(in oklab, var(--bg-main) 80%, transparent);
  border-color: color-mix(in oklab, var(--border-color) 40%, var(--color-title-golden) 60%);
}




/* ظرف آکاردئون سرفصل‌ها */
.syllabus-accordion{
  display: grid;
  gap: 12px;
}

/* هر سرفصل */
.syllabus-chapter{
  border-radius: 16px;
  background: color-mix(in oklab, var(--bg-alt) 94%, transparent);
  border: 1px solid var(--border-color);
}

/* سرِ سرفصل (دکمهٔ باز/بسته) — از همان اسکین .syllabus-row الهام گرفته */
.chapter-head{
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  font-family: inherit;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: transparent;
  color: var(--text-main);
  font-size: 1.04rem;
  font-weight: 800;
  border: 0;
  cursor: pointer;
  text-align: right;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

/* آیکن فلش سرفصل */
.chapter-icon{
  display: inline-grid; place-items: center;
  width: 35px; height: 35px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--bg-main) 65%, transparent);
  border: 1px solid var(--border-color);
  font-size: 1.2rem;
  transition: transform .18s ease;
}

/* حالت هاور/فوکوس سرفصل */
.chapter-head:hover,
.chapter-head:focus{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

/* چرخش آیکن بر اساس وضعیت باز/بسته (aria-expanded) */
.chapter-head[aria-expanded="true"] .chapter-icon{ transform: rotate(90deg); }

/* پنل جلسات زیر سرفصل */
.chapter-panel{
  padding: 8px 12px 14px;
  border-top: 1px dashed color-mix(in oklab, var(--border-color) 70%, transparent);
}

/* پشتیبانی از hidden استاندارد */
.chapter-panel[hidden]{ display: none !important; }



/* لیست جلسات زیر هر سرفصل */
.lesson-list{
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; gap: 10px;
}

/* هر آیتم جلسه */
.lesson-item{ margin: 0; }

/* ردیف جلسه؛ کمی کوچک‌تر و سبک‌تر از .syllabus-row اصلی */
.lesson-row{
  width: 100%;
  background: color-mix(in oklab, var(--bg-alt) 96%, transparent);
  border: 1px solid color-mix(in oklab, var(--border-color) 80%, transparent);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 24px 320px 1fr; /* آیکن | بخش | عنوان */
  align-items: center;
  gap: 12px;
  color: var(--text-main);
  font-size: .98rem;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration: none;
}

.lesson-row:hover,
.lesson-row:focus{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
  border-color: color-mix(in oklab, var(--border-color) 30%, var(--color-title-golden) 70%);
}

/* آیکن جلسه */
.lesson-icon{
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--bg-main) 65%, transparent);
  border: 1px solid var(--border-color);
  font-size: .86rem;
}

.lesson-part{
  color: var(--color-title);
  font-weight: 800;
}

.lesson-title{
  color: var(--text-main);
  opacity: .95;
}

/* واکنش‌گرا: در عرض‌های خیلی کم، ستون «بخش» را بیار پایین عنوان */
@media (max-width: 460px){
  .lesson-row{
    grid-template-columns: 24px 1fr; /* آیکن | عنوان */
  }
  .lesson-part{ order: 2; grid-column: 2 / span 1; font-size: .9rem; opacity: .9; }
  .lesson-title{ order: 1; }
}

/* (اختیاری) اسکین طلایی هنگام باز بودن سرفصل */
.chapter-head[aria-expanded="true"]{
  background: color-mix(in oklab, var(--bg-main) 80%, transparent);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  border-color: color-mix(in oklab, var(--border-color) 40%, var(--color-title-golden) 60%);
}

/* ---------- 5) دسترسی‌پذیری و ریزافکت‌ها ---------- */
.course-hero-card,
.course-section,
.syllabus-row,
.guarantee-steps-link,
.share-btn{ outline: none; }



@media (prefers-reduced-motion: reduce){
  .course-hero-card, .course-section, .syllabus-row,
  .guarantee-steps-link, .share-btn{ transition: none !important; }
}
/* ---- Guarantee: دو ستون مساوی، تصویر راست / متن چپ ---- */


@media (max-width: 950px){
  .guarantee-card{
    grid-template-columns: 1fr;
    grid-template-areas:
      "ill"
      "content";
    text-align: center;
  }
  .guarantee-content p{ text-align: justify; }
}

/* ---- Syllabus: لینک به‌جای دکمه ---- */
.syllabus-row{
  text-decoration: none;               /* لینک بدون زیرخط */
  color: var(--text-main);
  cursor: pointer;
}
.syllabus-row:hover .syllabus-part,
.syllabus-row:focus .syllabus-part{
  color: var(--color-title-golden);
}

/* دسترسی‌پذیری برای لینک‌ها */
.syllabus-row:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(37,99,235,.28);
  border-radius: 16px;
}

/* محتوای ویرایشگر – توضیحات و گارانتی */
.course-desc-html,
.guarantee-html{
  overflow: hidden;          /* تا چیزی بیرون نزند */
}

.course-desc-html img,
.guarantee-html img{
  max-width: 100% !important; /* حتی اگر width اینلاین داشته باشد */
  height: auto !important;
  display: block;
  margin: 12px auto;          /* وسط‌چینی ملایم */
  border-radius: 12px;        /* دلخواه */
}

/* جدول‌های عریض */
.course-desc-html table,
.guarantee-html table{
  width: 100% !important;
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* ویدیو/iframe */
.course-desc-html iframe,
.course-desc-html video,
.guarantee-html iframe,
.guarantee-html video{
  max-width: 100% !important;
  width: 100% !important;
  height: auto;               /* یا: aspect-ratio: 16/9; */
}

/* شکل‌ها */
.course-desc-html figure,
.guarantee-html figure{
  max-width: 100%;
  margin: 12px auto;
}




/* ===========================
   THEME VARIABLES
   =========================== */



.glass-buy-card{
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.glass-grid{
  direction:rtl; /* Right column = card-to-card | Left column = buy form */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 600px;
  max-width: 700px;
}
@media (max-width: 768px){
  .glass-grid{ min-width: 300px; max-width: 450px; }
}


/* =================== Glass Buy Card (RTL) =================== */
.glass-buy-card{
  direction: rtl;
  margin: clamp(16px,3vw,28px) auto;
  width: 100%;
  padding: clamp(14px,2vw,18px);
 
  color: var(--text-main);
}


/* ---------------- Grid ---------------- *

/* ---------------- Section Titles ---------------- */
.glass-title{
  margin: 5px 5px 30px 12px;
  font-size: clamp(18px,2.6vw,24px);
  font-weight: 900;
  color: var(--text-title);
  letter-spacing: -.2px;
}
.course-name{
  color: var(--resposive-color-text23-gold);
  font-weight: 900;
}

/* ================= Left Column: Purchase ================= */
.glass-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  padding: 20px 10px;
}

/* Price blocks */
.price-block{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 15px 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px dashed var(--border-dashed);
  margin-bottom: 30px;
}
.price-block2 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 14px;
  padding: 20px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px dashed var(--border-dashed);
  margin:20px 0px 10px 0px;
  
}
.price-chip{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 1em 1.5em;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-weight: 900;
  font-size: 20px;
}
.price-chip .amount{ font-size: 1.05rem; }
.price-chip .unit{ font-size: .9rem; color: var(--text-muted); }
.price-chip.total{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
}
.price-block2 .price-chip .amount {
  font-size: 24px;
}
.price-block2 .price-chip .unit {
  font-size: 16px;
}
body:not(.light-theme) .price-chip.total .amount{ color: var(--color-gold); }
.hint{ color: var(--text-muted); }

/* Form */
.buy-form{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  margin-top: 10px;
}
.label{
  font-size: 1.2rem;
  color: var(--text-title);
  font-weight: 700;
}
.discount-row{
  display: flex;
 flex-direction: column;
  gap: 10px;
}
.input{
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,.04);
  color: var(--text-main);
  padding: 0 14px;
  outline: none;
  transition: box-shadow .16s, border-color .16s, background .16s;
}
.input::placeholder{ color: color-mix(in oklab, var(--text-muted) 78%, transparent); }
.input:focus{
  border-color: color-mix(in oklab, var(--color-gold) 48%, var(--border-color));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-gold) 18%, transparent);
  background: rgba(255,255,255,.06);
}

/* Alerts */
.alert{
  padding: 10px 12px;
  border-radius: 14px;
  font-size: .95rem;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,.03);
}
.alert.ok{
  border-color: #c6ebd5;
  background: #dff5e7;
  color: #146e2a;
}
.alert.err{
  border-color: #ffd2d2;
  background: #ffe5e5;
  color: #9a1a1a;
}

/* Buttons (scoped) */
.glass-buy-card .btn{
  height: 60px;
  width: 300px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: 800;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,.05);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.glass-buy-card .btn:hover{ transform: translateY(-1px); }
.glass-buy-card .btn:active{ transform: translateY(0); }
.glass-buy-card .btn-ghost{
  background: transparent;
  border-style: solid;
  width: 200px ;
}
.glass-buy-card .btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid color-mix(in oklab, var(--color-gold) 35%, var(--border-color));
  box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.1);
}
.glass-buy-card .btn-primary:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.glass-buy-card .pay-btn i{ font-size: 1.05em; }

/* ================= Right Column: Card-to-Card ================= */
.course-cardpay{
  border-radius: 20px;
  border: 1px dashed var(--border-dashed);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  padding: clamp(14px,2vw,18px);
  width: 100%;
  text-align: center;
}
.course-cardpay p{
  margin: 0 0 10px;
  line-height: 1.9;
  color: var(--text-main);
}
.course-cardpay strong{ color: var(--text-title); }

/* Card Number pill */
.card-number{
  direction: ltr; /* برای نمایش استاندارد کارت */
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  letter-spacing: .5px;
  padding: .7em 1em;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,.05);
  margin: 8px 0 6px;
  user-select: all;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* Support icons */
.support-icons{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}
.support-icons a{
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,.05);
  transition: transform .08s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  text-decoration: none;
  font-size: 20px;
   color: var(--text-main);
}
.support-icons a:hover{ transform: translateY(-1px); }
.support-icons i{ font-size: 22px; color: var(--text-main); }

/* --------------- Fine details --------------- */
.glass-buy-card .input,
.glass-buy-card .btn,
.glass-buy-card .price-chip,
.glass-buy-card .card-number,
.glass-buy-card .support-icons a{
  will-change: transform, box-shadow, border-color, background;
}

/* Print: فقط اطلاعات ضروری */
@media print{
  .glass-buy-card{ box-shadow: none; backdrop-filter: none; background: #fff; }
  .support-icons, .btn, .btn-ghost, .btn-primary{ display: none !important; }
}
/* ======================= WORLD-CLASS POLISH (NON-BREAKING) ======================= */



/* 3) تایپوگرافی و فاصله‌گذاری ظریف‌تر */
.glass-title{ letter-spacing: -.25px; text-shadow: 0 1px 0 rgba(255,255,255,.03); }
.price-block{ backdrop-filter: blur(6px) saturate(1.02); -webkit-backdrop-filter: blur(6px) saturate(1.02); }
.price-chip{ line-height: 1; }
.hint{ font-weight: 600; letter-spacing: -.1px; }

/* 4) اینتراکشـن‌ حرفه‌ای دکمه‌ها (micro-elevation + ring) */
.glass-buy-card .btn{
  position: relative;
  box-shadow: 0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.glass-buy-card .btn:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.glass-buy-card .btn:focus-visible{
  outline: none;
  box-shadow:
    0 14px 28px rgba(0,0,0,.22),
    0 0 0 3px color-mix(in oklab, var(--color-gold) 22%, transparent);
  border-color: color-mix(in oklab, var(--color-gold) 40%, var(--border-color));
}

/* حالت بارگذاری اختیاری برای دکمه پرداخت
   <button class="btn btn-primary pay-btn is-loading">... */
.glass-buy-card .pay-btn.is-loading{
  pointer-events: none; opacity: .85;
}
.glass-buy-card .pay-btn.is-loading::after{
  content:"";
  width: 1.05em; height: 1.05em;
  margin-inline-start: .5em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  animation: spin .75s linear infinite;
  vertical-align: -2px;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* 5) فیلد ورودی—حالت‌های موفق/خطا + AutoFill */
.input.success{
  border-color: #c6ebd5;
  box-shadow: 0 0 0 3px rgba(17, 98, 45, .18);
}
.input.error{
  border-color: #ffd2d2;
  box-shadow: 0 0 0 3px rgba(201, 46, 46, .18);
}
.input:-webkit-autofill{
  -webkit-text-fill-color: var(--text-main);
  transition: background-color 9999s ease-in-out 0s; /* حذف زرد مرورگر */
}

/* 6) هشدارها—آیکون ظریف با ::before (بدون HTML اضافه) */
.alert{ position: relative; padding-inline-start: 38px; }
.alert.ok::before,
.alert.err::before{
  content:"";
  position:absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor, 0 0 0 1px rgba(0,0,0,.04);
}
.alert.ok::before{ background: #dff5e7; color: #146e2a; }
.alert.err::before{ background: #ffe5e5; color: #9a1a1a; }

/* 7) کارت‌به‌کارت—تعامل انسانی‌تر */
.card-number{
  cursor: copy;
  transition: transform .08s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.card-number:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--color-gold) 38%, var(--border-color));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 24px rgba(0,0,0,.16);
  background: rgba(255,255,255,.06);
}
.card-number:active{ transform: translateY(0); }

/* 8) آیکون‌های پشتیبانی—ring & lift */
.support-icons a{
  filter: saturate(1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.support-icons a:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 3px color-mix(in oklab, var(--color-gold) 16%, transparent);
}

/* 9) خوانایی اعداد—monospaced tabular برای ترازبندی مبلغ‌ها */
.price-chip .amount{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "liga" 1;
}



/* 11) حرکت کمتر برای کاربران حساس به انیمیشن */
@media (prefers-reduced-motion: reduce){
  .glass-buy-card .btn,
  .support-icons a,
  .card-number{ transition: none; }
  .pay-btn.is-loading::after{ animation: none; }
}

/* 12) تم روشن—تقویت عمق بدون تغییر پالت */
body.light-theme .glass-content,
body.light-theme .course-cardpay{
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(49,74,110,.04), rgba(49,74,110,0) 60%),
    rgba(255,255,255,.82);
  border-color: rgba(49,74,110,.16);
}
body.light-theme .price-block{
  background: rgba(255,255,255,.92);
}


/* ====== Already Bought Badge ====== */
.already-bought {
  display: inline-block;
  margin: 0px;
  padding: 15px 18px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
  border: 1px solid rgba(245, 214, 122, .35);
 
  transition: transform .12s ease, box-shadow .18s ease;
  cursor: default;
}

/* حالت تم تاریک (پیش‌فرض) */
body:not(.light-theme) .already-bought {
  
  color: #f5d67a;
}

/* حالت تم روشن */
body.light-theme .already-bought {
  
  color: #1a237e; /* سورمه‌ای برای خوانایی */
  border-color: rgba(245, 214, 122, .5);
}

/* افکت hover (اختیاری) */
.already-bought:hover {
  transform: translateY(-1px);
 
}



    /* ====== Design Tokens ====== */
    :root{
      --rm-max: 1200px;
      --rm-gap: 24px;
      --rm-radius: 18px;
      --rm-text: #e9eef8;
      --rm-muted: #cdd6e6;
      --rm-accent: #d4af37; /* طلایی */
      --rm-card: color-mix(in oklab, #ffffff 10%, transparent);
      --rm-stroke: color-mix(in oklab, #ffffff 18%, transparent);
      --rm-shadow: 0 10px 30px rgba(0,0,0,.25);
    }
    .rm-root{color:var(--rm-text)}
    .rm-container{
      max-width:var(--rm-max);
      
     
    }
    .rm-section {
      margin-bottom: 40px;
    }
    /* ====== Section ====== */
   
    .rm-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--rm-gap);
      align-items:center;
    }
    /* در سکشن‌های زوج، جای تصاویر و متن عوض شود */
    .rm-section:nth-child(even) .rm-media{order:2}
    .rm-section:nth-child(even) .rm-content{order:1}

    /* ====== Media (Apollo Effect) ====== */
    .rm-media{position:relative; overflow:hidden; border-radius: var(--rm-radius)}
    .rm-media img{
      width:100%; height: clamp(260px, 38vw, 420px);
      object-fit: cover; display:block;
      transform: scale(1.01);
      transition: transform .6s cubic-bezier(.2,.65,.2,1);
      border-radius: 30px;
    }
    .rm-media:hover img{ transform: scale(1.06) }
    .rm-media .rm-overlay{
      position:absolute; inset:0; pointer-events:none; opacity:.0;
      background:
        radial-gradient(80% 70% at 50% 50%, color-mix(in oklab, #000 0%, transparent) 25%, transparent 70%) ,
        linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.0));
      transition: opacity .35s ease;
    }
    .rm-media:hover .rm-overlay{ opacity: .55 }

    /* ====== Title + Decor ====== */
    .rm-titlebox{ text-align:center; margin-block: 2px 2px }
    .rm-title{
      color: var(--color-shop-titel);
      font-size: clamp(18px, 2.2vw, 22px);
      font-weight: 800; letter-spacing:.1px; margin:0;
      display:inline-flex; align-items:center; gap: 12px;
      
    }
    .rm-dot, .rm-ring{
      display:inline-block; vertical-align:middle;
      border-radius:50%;
      box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.25);
    }
    .rm-dot{ width:8px; height:8px; background: var(--rm-accent) }
    .rm-ring{ width:12px; height:12px; border:2px solid var(--rm-accent); background: transparent }

    /* ====== Body text ====== */
    .rm-desc{ line-height: 3; color: var(--rm-muted); font-size: clamp(14px, 1.4vw, 16px) }
    .rm-desc p{ text-align: justify; font-size: 16px;line-height: 2.2; }

    /* ====== Responsive ====== */
     @media (max-width: 1280px){
       .rm-desc p{font-size: 14px;line-height: 2; }
        .rm-title{
      
      font-size: 16px;
      font-weight: 700;
      
      
    }
     }
    @media (max-width: 980px){
      .rm-desc p{font-size: 16px; }
      .rm-grid{ grid-template-columns: 1fr; gap: 16px }
      .rm-section:nth-child(even) .rm-media{order:1}
      .rm-section:nth-child(even) .rm-content{order:2}
      .rm-media img{ height: clamp(220px, 50vw, 340px) }
    }
   /* === Diamond status chip – refined === */
.diamond-status-chip{
  direction: rtl;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-color, rgba(255,255,255,.18));
  background: var(--color-bg-card, rgba(255,255,255,.07));
  color: var(--text-main, #e9edf6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 600;
  line-height: 1;
}

/* متن تاریخ بدون هیچ بک‌گراندی */
.diamond-status-chip .date{
  background: transparent !important;
  padding: 0;
  border-radius: 0;
}

/* لیبل «تا تاریخ» */
.diamond-status-chip .label{
  /* اگر رنگ طلایی برند تعریف شده، از آن استفاده می‌کنیم؛ در غیر این صورت fallback */
  color: var(--brand-gold, #d4b253);
}

/* آیکن تقویم */
.diamond-status-chip i{ opacity:.9; }

/* —— تم روشن —— */
html[data-theme="light"] .diamond-status-chip,
body.light-theme .diamond-status-chip{
  background: rgba(25,45,85,.14);                 /* روشن‌تر و تمیز */
  border-color: rgba(25,45,85,.22);
  color: #22324a;                                  /* کنتراست کافی روی پس‌زمینه‌ی روشن */
}

html[data-theme="light"] .diamond-status-chip .label,
body.light-theme .diamond-status-chip .label{
  color: #1b2b47;                                  /* خواناتر نسبت به پس‌زمینه‌ی آبی کم‌رنگ */
}

html[data-theme="light"] .diamond-status-chip i,
body.light-theme .diamond-status-chip i{
  opacity: .8;
}

  /* =========================
   Diamond Library – Card
   پیش‌فرض: تم تاریک | روشن با body.light-theme
   ========================= */
.diamond_library {
  --dl-radius-outer: 22px;
  --dl-radius-inner: 16px;
  --dl-shadow: 0 10px 30px rgba(0,0,0,.25);

  /* رنگ‌های تم تیره (پیش‌فرض) */
  --dl-bg: #2f3447;                 /* سطح کارت */
  --dl-bg-soft: #394057;            /* سطح دکمه */
  --dl-text: #e8ecf7;               /* متن اصلی */
  --dl-text-dim: #c7cddd;           /* متن ملایم */
  --dl-stroke: rgba(255,255,255,.08);
  --dl-gold: #d9b544;               /* طلایی برند */
  --dl-gold-soft: #f3de9a;

  font-family: IRANSansX;
}

/* تم روشن با همان الگوی سراسری سایت */
body.light-theme .diamond_library{
  --dl-bg: #ffffff;
  --dl-bg-soft: #fbf7ea;            /* طلایی روشنِ گرم برای دکمه */
  --dl-text: #1f2740;
  --dl-text-dim: #44506e;
  --dl-stroke: rgba(0,0,0,.06);
  --dl-gold: #c7a43a;
  --dl-gold-soft: #fdeeb8;
}

/* ===== کارت ===== */
.diamond_library-card{
  background: var(--dl-bg);
  color: var(--dl-text);
  border-radius: var(--dl-radius-outer);
  box-shadow: var(--dl-shadow);
  border: 1px solid var(--dl-stroke);
  padding: 18px 18px 20px;
  width: min(360px, 92vw);
  margin: 18px auto;
  position: relative;
  isolation: isolate;
}

/* شیشه‌ایِ لطیف روی تم تیره (در روشن خیلی کم) */
.diamond_library-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  opacity:.2; pointer-events:none;
}

/* ===== کاور ===== */
.diamond_library-cover{
  display:block;
  overflow:hidden;
  border-radius: var(--dl-radius-inner);
  aspect-ratio: 18/9;
  border: 1px solid var(--dl-stroke);
}
.diamond_library-cover2{
  display:block;
  overflow:hidden;
  border-radius: var(--dl-radius-inner);
  aspect-ratio: 16/9;
  border: 1px solid var(--dl-stroke);
}
.diamond_library-cover img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.02);
  transition: transform .45s ease, filter .45s ease;
}
.diamond_library-cover:hover img{
  transform: scale(1.06);
  filter: saturate(1.1);
}

/* ===== عنوان ===== */
.diamond_library-title{
  margin: 18px 8px 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--dl-text);
  letter-spacing: -.2px;
}

/* ===== دکمه CTA ===== */
/* .diamond_library-cta{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--dl-bg-soft);
  color: var(--dl-text);
  border: 1px solid rgba(217,181,68,.5);
  text-decoration:none; font-weight:700;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06);
}

.diamond_library-cta:active{ transform: translateY(1px); }
.diamond_library-cta-icon{
  width: 22px; height: 22px; flex: 0 0 22px;
} */

/* ===== سازگاری‌های ریسپانسیو ===== */
@media (max-width: 480px){
  .diamond_library-card{ padding: 14px; border-radius: 18px; }
  .diamond_library-cta{ border-radius: 14px; }
}
/* گرید کارت‌ها */
.diamond_library-grid {
  display: grid;
  gap: 24px;
  justify-content: center;   /* کارت‌ها در وسط */
  margin: 40px auto;
  padding: 0 20px;
}

/* حالت دسکتاپ بزرگتر از 1050px → سه ستون */
@media (min-width: 1051px) {
  .diamond_library-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;  /* وسط چین مرتب */
  }
}

/* حالت بین 768 تا 1050px → دو ستون */
@media (min-width: 768px) and (max-width: 1050px) {
  .diamond_library-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
  }
}

/* حالت زیر 768px → یک ستون */
@media (max-width: 767px) {
  .diamond_library-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    
  }
}

/* ===========================
   Course Design System (v1.2 PRO • Final)
   - RTL: justify فقط برای پاراگراف‌ها
   - Desktop: محتوای توضیحات تمام‌عرض
   - Mobile: تیترها/لیست‌ها 100%
   =========================== */
@layer course-reset, course-tokens, course-components, course-utilities;

/* --------------------------------
   0) Reset (scoped)
----------------------------------*/
@layer course-reset {
  :where(.section-course) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  .section-course, .section-course * { box-sizing: border-box; }
  .section-course :where(h1,h2,h3,h4,h5,h6,ul,ol,dl,p,blockquote){ font-size: inherit; }
}

/* --------------------------------
   1) Theme Tokens
----------------------------------*/
@layer course-tokens {
  .light-course, .dark-course {
    --course-font-size: clamp(15px, 1.6vw, 16.5px);
    --course-line-height: 1.9;

    /* برند با فالبک */
    --course-color-title: var(--color-shop-titel, #ffd966);
    --course-color-text:  var(--color-hero-titel, #1f2a44);

    --course-accent: #ffd369;

    /* Radii / Shadows / Spacing */
    --course-radius-sm: 10px;
    --course-radius-md: 12px;
    --course-radius-lg: 16px;

    --course-shadow-1: 0 1px 4px rgba(0,0,0,.06);
    --course-shadow-2: 0 6px 26px rgba(0,0,0,.10);

    --course-space-1: 5px;
    --course-space-2: 5px;
    --course-space-3: 5px;
    --course-space-4: 10px;
    --course-space-5: 20px;

    /* Motion */
    --course-ease: cubic-bezier(.2,.8,.2,1);
    --course-dur: .18s;

    /* Glass */
    --course-glass-bg: rgba(0,0,0,.05);
    --course-glass-border: rgba(0,0,0,.10);
    --course-glass-blur: 12px;

    /* Notes / Boxes */
    --course-success-bg: rgba(0,200,83,.12);
    --course-success-border: #00c853;
    --course-info-bg: rgba(2,136,209,.12);
    --course-info-border: #0288d1;
    --course-warn-bg: rgba(255,193,7,.16);
    --course-warn-border: #ffc107;

    --course-muted-bg: rgba(0,0,0,.04);
    --course-muted-border: rgba(0,0,0,.08);

    /* Cards / Divider / A11y */
    --course-card-bg: #f1f4fb;
    --course-card-border: #e1e8f5;
    --course-divider: rgba(0,0,0,.12);
    --course-success-text: #0e3a22;
  }

  .dark-course {
    --course-glass-bg: rgba(255,255,255,.06);
    --course-glass-border: rgba(255,255,255,.18);

    --course-success-bg: rgba(0,200,83,.15);
    --course-info-bg: rgba(2,136,209,.18);
    --course-warn-bg: rgba(255,193,7,.20);
    --course-muted-bg: rgba(255,255,255,.05);

    --course-card-bg: #1e2431;
    --course-card-border: rgba(255,255,255,.12);
    --course-divider: rgba(255,255,255,.15);
    --course-success-text: #eafff3;
  }

  .auto-course { color-scheme: light dark; }
}

/* --------------------------------
   2) Components
----------------------------------*/
@layer course-components {

  /* Layout & Typography */
  .section-course { font-size: var(--course-font-size); line-height: var(--course-line-height); }
  .rtl-course { direction: rtl; text-align: start; hyphens: auto; text-wrap: normal; }
  .ltr-course { direction: ltr; text-align: start; }

  /* فقط پاراگراف‌ها justify */
  .rtl-course :where(p, .p-course, .card-text-course, .blockquote-course) {
    text-align: justify; text-justify: inter-word; text-wrap: pretty;
  }
  /* تیترها و لیست‌ها start */
  .rtl-course :where(h1,h2,h3,h4,h5,h6, ul, ol, li) { text-align: start; }

  .p-course { margin: 0 0 18px; color: var(--course-color-text); hanging-punctuation: first allow-end; }
  .m-0-course { margin: 0 !important; }
  .mb-10-course { margin-bottom: 5px !important; }
  .mb-16-course { margin-bottom: 5px !important; }
  .mb-20-course { margin-bottom: 5px !important; }
  .mb-25-course { margin-bottom: 5px !important; }

  .highlight-course { color: var(--course-color-title); font-weight: 700; }

  /* Headings */
  .title-xl-course{
    font-size: clamp(22px,3.2vw,28px);
    font-weight: 900; margin: 0 0 var(--course-space-5);
    color: var(--course-color-title); text-align: center;
    max-width: 28ch; margin-inline: auto; text-wrap: normal;
  }
  .title-lg-course{
    font-size: clamp(20px,2.6vw,24px);
    font-weight: 800; margin: var(--course-space-5) 0 var(--course-space-3);
    color: var(--course-color-title);
    border-inline-start: 4px solid var(--course-accent);
    padding-inline-start: 10px;
    text-align: start; word-break: keep-all;
  }
  .title-md-course{
    font-size: clamp(18px,2.2vw,20px);
    font-weight: 800; margin: var(--course-space-4) 0 var(--course-space-2);
    color: var(--course-color-title);
    text-align: start; word-break: keep-all;
  }

  /* Divider */
  .divider-course{ height:1px; background:var(--course-divider); width:100%; margin:5px 0; border:0; display:block; }

  /* Glass Box */
  .glass-box-course{
    background:var(--course-glass-bg); border:1px solid var(--course-glass-border);
    backdrop-filter: blur(var(--course-glass-blur)); -webkit-backdrop-filter: blur(var(--course-glass-blur));
    border-radius:var(--course-radius-lg); padding:var(--course-space-3);
    transition: background var(--course-dur) var(--course-ease);
  }
  @supports not (backdrop-filter: blur(1px)){
    .glass-box-course{
      background: rgba(0,0,0,.06);
      background: color-mix(in srgb, var(--course-glass-bg), #fff 18%);
    }
  }

  /* Muted Box */
  .muted-box-course{
    background:var(--course-muted-bg); border:1px solid var(--course-muted-border);
    border-radius:var(--course-radius-lg); padding:var(--course-space-3);
  }

  /* Notes */
  .note-course{
    display:block; margin:var(--course-space-2) 0; padding:12px 15px;
    border-radius:var(--course-radius-md); color:var(--course-color-text);
    background:var(--course-muted-bg); border:1px solid transparent;
    border-inline-start:4px solid var(--course-accent); line-height:var(--course-line-height);
  }
  .note-success-course{ background:var(--course-success-bg); border-inline-start-color:var(--course-success-border); color:var(--course-success-text); }
  .note-info-course{    background:var(--course-info-bg);    border-inline-start-color:var(--course-info-border); }
  .note-warn-course{    background:var(--course-warn-bg);    border-inline-start-color:var(--course-warn-border); color: color-mix(in srgb,#000,var(--course-color-text) 40%); }
  .note-success-strong-course{ background:rgba(0,200,83,.25); border-inline-start-color:var(--course-success-border); color:var(--course-success-text); }
  .note-success-course p, .note-success-strong-course p{ margin:0; }

  /* Quote */
  .blockquote-course{
    margin:25px 0; padding:20px; background:var(--course-muted-bg);
    border:1px solid var(--course-muted-border); border-radius:var(--course-radius-md);
    font-size:17px; color:var(--course-color-text);
    border-inline-start:4px solid var(--course-accent);
  }

  /* Lists */
  .list-plain-course{ list-style:none; padding:0; margin:0; color:var(--course-color-text); }
  .list-plain-course>li{ margin:10px 0; }

  .list-check-course{ list-style:none; padding:0; margin:0; }
  .list-check-course>li{
    position:relative; margin:12px 0; padding:10px 14px 10px 38px;
    border-radius:var(--course-radius-md);
    background:var(--course-success-bg); border-inline-start:4px solid var(--course-success-border);
    color:var(--course-color-text); text-align:start;
  }
  .rtl-course .list-check-course>li{ padding-inline-start:38px; }
  .list-check-course>li::before{
    content:"✓"; position:absolute; inset-block-start:10px; inset-inline-start:12px;
    font-weight:900; color:var(--course-success-border);
  }

  .list-callout-course{ list-style:none; padding:0; margin:0; color:var(--course-color-text); }
  .list-callout-success-course>li{
    margin:12px 0; padding:12px 15px; border-radius:var(--course-radius-md);
    background:var(--course-success-bg); border-inline-start:4px solid var(--course-success-border);
    line-height:var(--course-line-height); text-align:start;
  }
  .list-callout-success-course>li strong{ color:var(--course-color-title); font-weight:800; }
  .list-callout-success-strong-course>li{ background:rgba(0,200,83,.25); border-inline-start:4px solid var(--course-success-border); }

  /* Cards (with container queries + fallback) */
  .card-grid-course{
    display:grid; gap:30px; grid-template-columns:repeat(12,1fr);
    container-type:inline-size; container-name:cards-course; justify-items:stretch;
  }
  .card-course{
    grid-column:span 6; background:var(--course-card-bg);
    border:1px solid var(--course-card-border); border-radius:var(--course-radius-lg);
    padding:var(--course-space-4); color:var(--course-color-text); box-shadow:var(--course-shadow-1);
  }
  @container cards-course (max-width: 900px){ .card-course{ grid-column:span 12; } }
  @supports not (container-type: inline-size){
    .card-grid-course{ grid-template-columns:1fr; }
    @media (min-width:900px){ .card-grid-course{ grid-template-columns:1fr 1fr; } }
  }

  .card-row-course{ display:flex; align-items:flex-start; gap:16px; }
  .card-thumb-course{
    inline-size:88px; block-size:88px; border-radius:12px; object-fit:cover; flex:0 0 auto;
    background:rgba(0,0,0,.04);
  }
  .dark-course .card-thumb-course{ background:rgba(255,255,255,.06); }

  .card-title-course{ margin:0 0 6px; font-size:18px; font-weight:800; color:var(--course-color-title); }
  .card-text-course{ margin:0; font-size:15px; line-height:2; } /* در RTL از بالا justify می‌گیرد */

  /* Badges */
  .badge-course{
    display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; line-height:1;
    border:1px solid var(--course-muted-border); background:var(--course-muted-bg); color:var(--course-color-text);
  }
  .badge-accent-course{ border-color:var(--course-accent); }

  /* Buttons */
  .btn-course{
    display:inline-block; padding:10px 16px; border-radius:var(--course-radius-md);
    font-weight:700; text-decoration:none; border:1px solid var(--course-muted-border);
    background:var(--course-muted-bg); color:var(--course-color-title);
    transition: transform var(--course-dur) var(--course-ease), opacity var(--course-dur) var(--course-ease), background var(--course-dur) var(--course-ease);
  }
  .btn-course:hover{ transform:translateY(-1px); opacity:.95; }
  .btn-course:active{ transform:translateY(0); opacity:.9; }
  .btn-course:disabled{ opacity:.6; pointer-events:none; }
  .btn-primary-course{ border-color:var(--course-accent); background: color-mix(in srgb, var(--course-accent), transparent 85%); }
  .btn-primary-course:hover{ background: color-mix(in srgb, var(--course-accent), transparent 70%); }

  /* Media Helpers */
  .img-responsive-course{ max-width:100%; height:auto; border-radius:12px; background:rgba(0,0,0,.04); }
  .dark-course .img-responsive-course{ background:rgba(255,255,255,.06); }
  .center-course{ display:flex; align-items:center; justify-content:center; }

  /* Stack */
  .stack-course > * + * { margin-block-start:5px; }
  .stack-lg-course > * + * { margin-block-start:5px; }
  .stack-xl-course > * + * { margin-block-start:5px; }

  /* Containers */
  .container-course{
    padding:5px; margin:5px auto; border-radius:20px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .container-plain-course{ padding:5px; margin:5px auto; border-radius:20px; }

  /* Focus */
  .section-course :where(a,button,.btn-course):focus-visible{
    outline:3px solid color-mix(in srgb, var(--course-accent), #000 15%);
    outline-offset:2px; border-radius: calc(var(--course-radius-sm) + 2px);
  }
  .card-course a:focus-visible{ outline:2px solid var(--course-accent); outline-offset:2px; }
}

/* --------------------------------
   3) Utilities & Responsiveness
----------------------------------*/
@layer course-utilities {
  /* Desktop: توضیحات تمام عرض کارت */
  .section-course.container-plain-course,
  .section-course.container-course{
    width:100%; max-width:none; margin-inline:auto;
  }
  /* تمام المان‌های متنی داخل سکشن، بدون محدودیت عرض در دسکتاپ */
  .section-course :where(.p-course, .list-check-course, .list-plain-course, .note-course, .blockquote-course){
    max-width:100%; width:100%;
  }

  /* Small screens */
  @media (max-width: 640px){
    .title-xl-course, .title-lg-course, .title-md-course, .maxw-60ch-course{ max-width:100%; width:100%; }
    .list-check-course, .list-plain-course{ max-width:100%; width:100%; }
    .title-lg-course, .title-md-course{ word-break: keep-all; white-space: normal; }
    .title-xl-course{ font-size:24px; }
    .title-lg-course{ font-size:20px; }
    .title-md-course{ font-size:18px; }
    .card-row-course{ flex-direction: row; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .section-course *{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
      scroll-behavior:auto !important;
    }
  }

  /* Forced colors */
  @media (forced-colors: active){
    .section-course *{ forced-color-adjust:auto; }
    .badge-course, .btn-course{ border:1px solid ButtonText; }
  }

  /* Utilities */
  .text-center-course{ text-align:center; }
  .maxw-60ch-course{ max-width:60ch; }
  .mx-auto-course{ margin-inline:auto; }
  .gap-12-course{ gap:12px; }
  .gap-16-course{ gap:16px; }

  /* Print */
  @media print{
    .section-course{ font-size:13pt; color:#000; }
    .glass-box-course, .muted-box-course, .note-course{
      background:#fff !important; box-shadow:none !important; border-color:#bbb !important;
    }
    .btn-course{ display:none !important; }
  }
}

/* 🌟 Desktop: حذف همه محدودیت‌های عرض در توضیحات دوره */
.section-course.container-plain-course,
.section-course.container-course {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
}

@media (min-width: 768px) {
  .section-course :is(
    .p-course,
    .list-check-course,
    .list-plain-course,
    .note-course,
    .blockquote-course,
    .title-xl-course,
    .title-lg-course,
    .title-md-course,
    .glass-box-course,
    .muted-box-course,
    .maxw-60ch-course
  ) {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }

  /* عناوین هم نباید وسط محدود شوند */
  .title-xl-course {
    text-align: start !important;
    margin-inline: 0 !important;
  }
}

/* 📱 Mobile: تیترها و لیست‌ها 100٪ */
@media (max-width: 640px) {
  .title-xl-course,
  .title-lg-course,
  .title-md-course,
  .maxw-60ch-course {
    max-width: 100% !important;
    width: 100% !important;
  }

  .title-lg-course,
  .title-md-course {
    word-break: keep-all;
    white-space: normal;
  }

  .list-check-course,
  .list-plain-course {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* 💡 در صورتی که کارت یا ستون والد flex/grid داشته باشد */
.section-course .card-course,
.section-course .card-row-course {
  align-self: stretch;
}

/* ===== Glass Contrast Patch for Dark Theme ===== */

/* 1) توکن‌های دارک را کمی پررنگ‌تر کن */
.dark-course {
  --course-glass-bg: rgba(255,255,255,0.10);    /* از 0.06 → 0.10 */
  --course-glass-border: rgba(255,255,255,0.28);/* از 0.18 → 0.28 */
  --course-shadow-2: 0 10px 30px rgba(0,0,0,.35);
}

/* 2) خود باکس‌ها: لایه‌ی گرادیانی برای خوانایی متن و سایه‌ی بیشتر */
.dark-course .glass-box-course {
  background:
    linear-gradient( to bottom, rgba(255,255,255,.10), rgba(255,255,255,.08) )
    , var(--course-glass-bg);
  border-color: var(--course-glass-border);
  backdrop-filter: saturate(120%) blur(var(--course-glass-blur));
  -webkit-backdrop-filter: saturate(120%) blur(var(--course-glass-blur));
}

/* 3) فالبک برای مرورگرهای بدون backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .dark-course .glass-box-course {
    background: color-mix(in srgb, #ffffff 14%, #000000 86%);
  }
}

/* 4) نسخه پرکنتراست اختیاری، اگر جای خاصی هنوز کم‌رنگ بود */
.glass-box-contrast-course {
  --course-glass-bg: rgba(255,255,255,.14);
  --course-glass-border: rgba(255,255,255,.34);
}

/* رفع مشکل شکست زودهنگام خطوط */
.rtl-course { 
  direction: rtl;
  text-align: start;
  hyphens: auto;
  text-wrap: normal;   /* قبلا balance بود */
}

/* تیترها اگر خواستی همچنان متعادل بمانند */
.title-xl-course,
.title-lg-course,
.title-md-course { 
  text-wrap: normal;
}

/* لیست‌ها و آیتم‌ها: پر کردن کامل عرض */
.list-plain-course > li,
.list-check-course > li {
  text-wrap: normal;
  word-break: normal;
  white-space: normal;
}

/* ⭐ Glass contrast for light theme */
.light-course {
  /* کمی تیره‌تر از مقدار مشترک تا گلس روی پس‌زمینه روشن دیده شود */
  --course-glass-bg: rgba(15, 23, 42, 0.06);
  --course-glass-border: rgba(15, 23, 42, 0.14);
}
/* لیست‌های کال‌اوت سبز: متن مثل پاراگراف‌ها باشد */
.list-callout-success-course > li,
.list-callout-success-strong-course > li {
  color: var(--course-color-text);
}


/* --- اصلاح مشکل منوی دراپ‌داون (Z-Index Fix) --- */

/* 1. اولویت‌دهی بسیار بالا به کل نوار هدر */
.header2, .menu, nav {
    position: relative; /* یا sticky اگر هدر چسبان است */
    z-index: 99998 !important; /* عدد بالا برای قرارگیری روی همه چیز */
}

/* 2. اطمینان از اینکه محتوای دراپ‌داون هم بالاترین لایه است */
.dropdown-content {
    z-index: 99998 !important; 
}

/* 3. کنترل لایه بخش Hero (برای اطمینان) */
/* اگر کلس بخش هیرو در main.css نیست، این بخش را نادیده بگیرید یا به استایل هیرو اضافه کنید */
.main-home-hero, .hero {
    position: relative;
    z-index: 1; /* اولویت پایین‌تر نسبت به هدر */
}

/* =========================================
   RM Home Hero — Final (Modular + Cross-browser)
   ========================================= */

/* 1) Variables */
:root{
  --h-text-main:#ffffff;
  --h-text-sub:#a0aec0;

  --h-btn-border:rgba(255,255,255,.2);
  --h-btn-text:#ffffff;
  --h-btn-hover-bg:#ffffff;
  --h-btn-hover-text:#000000;
  --h-btn-glow:rgba(255,255,255,.5);
  --h-line-grad:linear-gradient(90deg, transparent, #3b82f6, #ffd966, transparent);

  --h-brand-grad-start:rgba(255, 217, 102, 1);
  --h-brand-grad-end:#ffe8a3;
  --h-subtitle:#3b82f6;

  --h-orbit-1:rgba(59,130,246,.7);
  --h-orbit-2:rgba(255,217,102,.7);
  --h-orbit-3:rgba(255,255,255,.3);

  --orbit-size:520px;
}

body.light-theme{
  --h-text-main:#1f2937f7;
  --h-text-sub:#1f2937db;

  --h-btn-border:rgba(45,66,105,.3);
  --h-btn-text:#0f3a5f;
  --h-btn-hover-bg:rgba(45,66,105,1);
  --h-btn-hover-text:#ffffff;
  --h-btn-glow:rgba(45,66,105,.4);
  --h-line-grad:linear-gradient(90deg, transparent, #2563eb, #1e3a8a, transparent);

  --h-brand-grad-start: #0f3a5f;
  --h-brand-grad-end: #1291E6;
  --h-subtitle:#1f2937c4;

  --h-orbit-1:rgba(59,130,246,.5);
  --h-orbit-2:rgba(25, 194, 149, 0.5);
  --h-orbit-3:rgba(45,66,105,.5);
}

/* 2) Animations */
@-webkit-keyframes orbitSpin{
  from{ -webkit-transform:rotate(0deg); transform:rotate(0deg); }
  to  { -webkit-transform:rotate(360deg); transform:rotate(360deg); }
}
@keyframes orbitSpin{
  from{ -webkit-transform:rotate(0deg); transform:rotate(0deg); }
  to  { -webkit-transform:rotate(360deg); transform:rotate(360deg); }
}
@keyframes homeFadeUp{
  from{ opacity:0; transform:translateY(30px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes btnLineAnim{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

/* 3) Layout */
.main-home-hero{
  font-family: IRANYekanX  !important;
  position:relative;
  padding:40px 20px 50px 20px;
  min-height:500px;
  display:flex;
  align-items:center;
  background:transparent;
  overflow:visible;
  z-index:1;
}
.home-hero-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
  width:100%;
  flex-wrap:wrap;
  gap:40px;
}
.home-hero-text-col{
  flex:1 1 450px;
  z-index:10;
  padding-right:100px;
}
.home-hero-heading{
  font-size:clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight:900;
  color:var(--h-text-main);
  margin-bottom:30px;
  line-height:1.8;
  animation:homeFadeUp 1s ease-out;
}
.home-hero-caption{
  font-size:.9rem;
  color:var(--h-text-sub);
  line-height:2.2;
  margin-bottom:30px;
  animation:homeFadeUp 1s ease-out .3s backwards;
  font-weight:500;
}

/* CTA */
.home-cta-button.btn-special{
  position:relative;
  display:inline-block;
  padding:10px 35px;
  background:transparent;
  color:var(--h-btn-text);
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  overflow:hidden;
  transition:.4s;
  border:1px solid var(--h-btn-border);
  border-radius:50px;
  animation:homeFadeUp 1s ease-out .6s backwards;
}
.home-cta-button.btn-special:hover{
  background:var(--h-btn-hover-bg);
  color:var(--h-btn-hover-text);
  box-shadow:0 0 30px var(--h-btn-glow);
  letter-spacing:1px;
  border-color:transparent;
}
.home-btn-line{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:var(--h-line-grad);
  animation:btnLineAnim 2s linear infinite;
}

/* Visual */
.home-visual-col{
  flex:1 1 400px;
  min-width:300px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1;
  min-height:var(--orbit-size);
}

/* 4) Orbits (No fixed transform on orbit elements) */
.home-orbit-wrap{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.home-orbit-layer{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--orbit-size);
  height:var(--orbit-size);
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

/* Orbit base */
.home-orbit{
  position:absolute;
  border-radius:50%;
  border-style:solid;
  background:transparent;
  transform-origin:50% 50%;

  /* desktop-only will-change via media below */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  animation-play-state:running;
  -webkit-animation-play-state:running;
}

/* orbit sizes */
.orbit-1{
  width:var(--orbit-size);
  height:var(--orbit-size);
  border-width:2px;
  border-color:var(--h-orbit-1);
  border-top-color:transparent;
  border-bottom-color:transparent;
  -webkit-animation:orbitSpin 25s linear infinite;
  animation:orbitSpin 25s linear infinite;
}
.orbit-2{
  width:calc(var(--orbit-size) - 40px);
  height:calc(var(--orbit-size) - 40px);
  border-width:2px;
  border-color:var(--h-orbit-2);
  border-left-color:transparent;
  border-right-color:transparent;
  -webkit-animation:orbitSpin 20s linear infinite reverse;
  animation:orbitSpin 20s linear infinite reverse;
}
.orbit-3{
  width:calc(var(--orbit-size) - 100px);
  height:calc(var(--orbit-size) - 100px);
  border-width:1px;
  border-color:var(--h-orbit-3);
  border-style:dashed;
  opacity:.8;
  -webkit-animation:orbitSpin 30s linear infinite;
  animation:orbitSpin 30s linear infinite;
}

/* 5) Centered card */
.home-3d-card{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:var(--orbit-size);
  height:var(--orbit-size);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:transparent;
  border:none;
  box-shadow:none;
}

/* 6) Brand restore (must not be last-minute overridden) */
.home-brand-title{
  font-size:clamp(2.8rem, 6vw, 4.2rem);
  font-weight:900;
  margin:0 0 30px 0;
  line-height:1.2;
  display:inline-block;
  position:relative;
  z-index:5;
  color:var(--h-brand-grad-start);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .home-brand-title{
    background-image:linear-gradient(to left, var(--h-brand-grad-start), var(--h-brand-grad-end));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
}
.home-brand-subtitle{
  font-size:clamp(1rem, 2.5vw, 1.3rem);
  color:var(--h-subtitle);
  font-weight:600;
  min-height:1.5em;
  letter-spacing:-.5px;
}

/* 7) Responsive */
@media (max-width:1280px){
  .home-hero-heading{
  font-size:clamp(1.5rem, 3.5vw, 2.2rem);
  
}
  .home-hero-text-col{
  
  padding-right:50px;
}
  .home-hero-wrapper{
 
  max-width:950px;
  
}

  .home-visual-col{ transform:scale(.9); padding-top:10px; }
  .home-brand-title{ font-size:4rem;  }
 
}
@media (max-width:1050px){
  .home-brand-title{ font-size:3rem;  }
  .home-hero-caption{
  font-size:.8rem;
  font-weight:500;
  
}
  :root{ --orbit-size:450px; }
  
  
 
}
@media (max-width:950px){
  
.home-hero-wrapper{ flex-direction:column-reverse; text-align:center; gap:15px; }
.main-home-hero{ min-height:auto; padding:10px 20px 40px; }
 .home-hero-text-col{ flex:auto; padding-right:0; }
  .home-visual-col{ transform:scale(.9); padding-top:10px; }
  .home-brand-title{ font-size:3rem; margin-bottom:20px; }
  .home-hero-heading{ font-size:1.6rem; margin-bottom:10px; }
}
@media (max-width:500px){
  :root{ --orbit-size:380px; }

}
/* 8) Desktop 3D ON / Mobile 3D OFF */
@media (hover:hover) and (pointer:fine){
  .home-visual-col{ perspective:1200px; transform-style:preserve-3d; }
  .home-3d-card{ transform-style:preserve-3d; }
  .home-3d-inner{
    transform-style:preserve-3d;
    will-change:transform;
    transition:transform .08s linear;
  }
  /* Depth only on desktop */
  .home-brand-title{ transform:translateZ(70px); }
  .home-brand-subtitle{ transform:translateZ(35px); }

  /* will-change only on desktop for orbits */
  .home-orbit{ will-change:transform; }
}

/* Mobile: flatten all 3D transforms */
@media (hover:none), (pointer:coarse){
  .home-visual-col{ perspective:none !important; transform-style:flat !important; }
  .home-3d-card{ transform:translate(-50%,-50%) !important; transform-style:flat !important; }
  .home-3d-inner{ transform:none !important; transition:none !important; }
  .home-brand-title, .home-brand-subtitle{ transform:none !important; }
  .home-orbit{ will-change:auto !important; }
}

/* 9) Reduced Motion */
@media (prefers-reduced-motion: reduce){
  /* iOS sometimes gets weird with super-long durations; keep reasonable */
  .orbit-1{ -webkit-animation-duration:40s !important; animation-duration:40s !important; }
  .orbit-2{ -webkit-animation-duration:36s !important; animation-duration:36s !important; }
  .orbit-3{ -webkit-animation-duration:48s !important; animation-duration:48s !important; }
}


.dropdown-content, .dropdown-menu{ z-index:100003 !important; }
.sidebar_popup{ z-index:100005 !important; }
#sidebarBackdrop, .sidebar_backdrop{ z-index:100004 !important; }

.course-title {
  font-size: 2rem;
  
}

@media (max-width:1280px){
 .course-title {
  font-size: 1.5rem;
  
}

}
@media (max-width:768px){
 .course-title {
  font-size: 1.5rem;
  
}
.course-btn {
 
  font-size: 1rem;
  font-weight: 600;
}
}
 /* ===== Home GloryHall (Top10) — FINAL (Aligned with gloryhall.php) ===== */
#homeGloryHall{
  max-width: 900px;
  margin: 60px auto 60px;
  padding: 0 20px;
  direction: rtl;
  font-family: inherit;

  /* theme vars */
  --hg-text: var(--color-title, #fff);
  --hg-muted: var(--color-text-light, rgba(255,255,255,.65));
  --hg-card: rgba(30, 41, 59, 0.45);
  --hg-border: rgba(255,255,255,0.08);
  --hg-hover: rgba(30, 41, 59, 0.75);

  /* accent (like lg-senior) */
  --hg-accent: #ffd966;
   --hg-accent2: #ffd966;
  --hg-navy: #1e3a8a;
}

body.light-theme #homeGloryHall,
body.light-mode  #homeGloryHall{
  --hg-text: #1e293b;
  --hg-muted: #64748b;
  --hg-card: #ffffff;
  --hg-border: #e2e8f0;
  --hg-hover: #f8fafc;
  --hg-accent: #f59e0b;
  --hg-accent2: #314a6e; 
  --hg-navy: #fff;
}

/* ===== Title ===== */
#homeGloryHall .hg-title{
  font-family: IRANYekanX  !important;
  text-align:center;
  font-size: 2rem;
  font-weight: 900;
  color: var(--hg-text);
  margin: 0 0 30px;
}

/* ===== Tabs ===== */
#homeGloryHall .hg-tabs{
  font-family: IRANYekanX  !important;
  display:flex;
  justify-content:center;
  gap: 8px;
  margin: 0 auto 10px;
  width: fit-content;
  padding: 5px;
  border-radius: 999px;
  background: var(--hg-card);
  border: 1px solid var(--hg-border);
}

#homeGloryHall .hg-tab{
  border: 0;
  background: transparent;
  color: var(--hg-muted);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  transition: .2s;
  white-space: nowrap;
}

#homeGloryHall .hg-tab.active{
  background: var(--hg-accent);
  color: var(--hg-navy);
  box-shadow: 0 4px 15px rgba(255, 217, 102, 0.25);
}

/* ===== Panes ===== */
#homeGloryHall .hg-pane{ display:none; animation: hgFade .35s ease; }
#homeGloryHall .hg-pane.active{ display:block; }

@keyframes hgFade{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}

#homeGloryHall .hg-empty{
  text-align:center;
  padding: 30px 0;
  color: var(--hg-muted);
}

/* ===== Podium (Top 3) ===== */
#homeGloryHall .hg-podium{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap: 20px;
  height: 350px;
  margin-bottom: 30px;
}

#homeGloryHall .hg-col{
  width: 110px;
  display:flex;
  gap: 5px;
  flex-direction:column;
  align-items:center;
  position: relative;
  transition: transform .3s;
}

#homeGloryHall .hg-col:hover{ transform: translateY(-8px); }
#homeGloryHall .hg-col.r1{ order:2; z-index:2; margin-bottom: 26px; }
#homeGloryHall .hg-col.r2{ order:1; z-index:1; }
#homeGloryHall .hg-col.r3{ order:3; z-index:1; }

#homeGloryHall .hg-avatar{
  width: 80px; height: 80px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--hg-card);
  border: 4px solid rgba(255,255,255,0.22);
  color: var(--hg-muted);
  font-size: 3rem;
  box-shadow: 0 5px 15px rgba(0,0,0,.12);
  margin-bottom: 6px;
}

body.light-theme #homeGloryHall .hg-avatar,
body.light-mode  #homeGloryHall .hg-avatar{
  border-color: rgba(15,23,42,0.08);
}

#homeGloryHall .hg-avatar.main{
  width: 100px; height: 100px;
  font-size: 4rem;
}

#homeGloryHall .hg-name{
  max-width: 100%;
  color: var(--hg-text);
  font-weight: 800;
  font-size: .85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

#homeGloryHall .hg-crown{
  position:absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--hg-accent);
  font-size: 1.8rem;
  opacity: .95;
}

/* Badge under Top3 name (All-time only, HTML controlled) */
#homeGloryHall .hg-league-badge.senior{
  font-size: .7rem;
  background: var(--hg-accent);
  color: var(--hg-navy);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 900;
  margin-bottom: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.10);
  white-space: nowrap;
}

#homeGloryHall .hg-base{
  width:100%;
  border-radius: 16px 16px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding-bottom: 12px;
  color:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
}

#homeGloryHall .hg-base.b1{ height: 135px; background: linear-gradient(180deg, #ffca28 0%, #ff6f00 100%); }
#homeGloryHall .hg-base.b2{ height: 108px; background: linear-gradient(180deg, #cfd8dc 0%, #546e7a 100%); }
#homeGloryHall .hg-base.b3{ height: 82px;  background: linear-gradient(180deg, #d7ccc8 0%, #5d4037 100%); }

#homeGloryHall .hg-rank{
  position:absolute;
  top: 5px;
  font-size: 1.5rem;
  font-weight: 900;
  opacity: .28;
}

body.light-theme #homeGloryHall .hg-rank,
body.light-mode  #homeGloryHall .hg-rank{
  color: var(--hg-navy);
  opacity: .55;
}

#homeGloryHall .hg-coin{
  background: rgba(0,0,0,.22);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .8rem;
}

/* ===== List (4..10) — matches GloryHall layout ===== */
#homeGloryHall .hg-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

#homeGloryHall .hg-card{
  display:flex;
  align-items:center;
  gap: 12px;
  background: var(--hg-card);
  border: 1px solid var(--hg-border);
  border-radius: 14px;
  padding: 10px 14px;
  transition: .2s;
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
  animation: hgFade .35s ease both;
}

#homeGloryHall .hg-card:hover{
  transform: scale(1.01);
  background: var(--hg-hover);
}

#homeGloryHall .hg-idx{
  width: 25px;
  text-align:center;
  color: var(--hg-muted);
  font-weight: 900;
  font-size: 1rem;
}

#homeGloryHall .hg-user-icon{
  font-size: 1.9rem;
  color: var(--hg-muted);
}

/* Two-column info: right = name/badge, left = coins */
#homeGloryHall .hg-info{
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#homeGloryHall .hg-user-details{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#homeGloryHall .hg-name-sm{
  font-weight: 900;
  color: var(--hg-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* mini badge (All-time ranks 4..10, HTML controlled) */
#homeGloryHall .hg-mini-badge{
  font-size: .65rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.2px;
  width: fit-content;
  white-space: nowrap;
}

#homeGloryHall .hg-mini-badge.senior{
  background: var(--hg-accent);
  color: var(--hg-navy);
}

#homeGloryHall .hg-mini-badge.ambassador{
  background: rgba(0, 229, 255, 0.15);
  color: #00e5ff;
  border: 1px solid #00e5ff;
}

#homeGloryHall .hg-mini-badge.pioneer{
  background: rgba(207, 216, 220, 0.15);
  color: #cfd8dc;
  border: 1px solid #cfd8dc;
}

/* Coins: placed opposite the name (like GloryHall) */
#homeGloryHall .hg-coin-row{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  color: var(--hg-accent2);
  font-weight: 900;
  white-space: nowrap;
  flex: 0 0 auto;
}

#homeGloryHall .hg-coin-row .hg-coin-label{
  font-size: .72rem;
  color: var(--hg-muted);
  font-weight: 700;
  margin-right: 2px;
}

/* ===== Button under #10 ===== */
#homeGloryHall .hg-more-wrap{
  font-family: IRANYekanX  !important;
  margin-top: 30px;
  display:flex;
  justify-content:center;
}

#homeGloryHall .hg-more-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--hg-border);
  background: transparent;
  color: var(--hg-text);
  text-decoration:none;
  font-weight: 900;
  transition: .2s;
}

#homeGloryHall .hg-more-btn:hover{
  background: var(--hg-hover);
  transform: translateY(-1px);
}

/* ===== Responsive ===== */
@media (max-width: 520px){
  #homeGloryHall .hg-card{
  
  gap: 10px;
  
  padding: 10px 5px;
 
}
  #homeGloryHall .hg-name-sm{
  font-weight: 600;
  font-size: .7rem;
  
}
  #homeGloryHall .hg-col{ width: 98px; }
}
/* ✅ Fix: جای لقب و رویال‌کوین مثل gloryhall.php */
#homeGloryHall .hg-card,
#homeGloryHall .hg-info{
  direction: rtl;
}

#homeGloryHall .hg-info{
  flex-direction: row;           /* ترتیب طبیعی */
  justify-content: space-between;
}

#homeGloryHall .hg-user-details{ order: 0; } /* سمت راست */
#homeGloryHall .hg-coin-row{     order: 1; } /* سمت چپ */
.hg-coin-label { font-size: 0.7rem; color: var(--hg-muted); margin-right: 2px; font-weight: normal; }
.hg-coin-row { font-size: 0.85rem; color: var(--hg-navy); display: flex; align-items: center; gap: 4px; font-weight: bold; }
.testimonials-title {
  font-family: IRANYekanX  !important;
}
.shopbook-title{
  font-family: IRANYekanX  !important;
  font-size: 1.4em;
    font-weight: 800;
}
.shopbook-enter-btn{
  font-family: IRANYekanX  !important;
  font-weight: 800;
}