@import url(./iransans.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);

 
}
body.light-theme {
  /* main-colors */
 --color-title: rgba(45, 66, 105, 0.95);
 --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(255, 217, 102, 0.10);
 
  /* --- 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:  rgba(45, 66, 105, 1);
--color-course-desc:  rgba(45, 66, 105, 0.8);
--color-course-icon:  rgba(45, 66, 105, 1);
--color-course-btn:  rgba(45, 66, 105, 0.9);
--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: #314a6e;        /* متن‌ها */
  --text-muted:#5a6d8d;        /* توضیحات/کم‌رنگ */
  --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;

 
}




/* -------------------- 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: 3000;
  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);
}

/* Dropdown glass panel */
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 135%;
  min-width: 182px;
  z-index: 50;
  background: rgba(45, 66, 105, 0.88);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  border-radius: 20px;
  box-shadow: 0 10px 38px 0 rgba(40,60,120,0.18);
  border: 1.2px solid rgba(255,255,255,0.16);
  padding: 8px 0;
  animation: dropdown-fade-in 0.22s cubic-bezier(.33,.73,.71,.99);
}

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

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

/* Dropdown Links */
.dropdown-content a {
  color: #f7faff;
  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;
  position: relative;
}

.dropdown-content a:hover, 
.dropdown-content a:focus {
  background: rgba(255, 217, 102, 0.12);
  color: #ffd966;
  box-shadow: 0 0 0 2px #ffe69955;
  /* border-right: 3px solid #ffd966;  // برای تاکید بیشتر سمت راست */
}

/* تیک کوچک سمت راست برای آیتم انتخاب شده (اگر نیاز داری) */
.dropdown-content a.selected {
  font-weight: bold;
  color: #ffd966;
  background: rgba(255, 217, 102, 0.16);
  position: relative;
}
.dropdown-content a.selected::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffd966;
  font-size: 1em;
  opacity: 0.78;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 135%;
  min-width: 182px;
  z-index: 50;
  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(--dropdown-link-hover);
  box-shadow: 0 0 0 2px #ffe69955;
}


/* 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: 30000 !important;  /* بالاتر از header, dropdown-backdrop */
}
#sidebarBackdrop,
.sidebar_backdrop{
  z-index: 29950 !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: 12000; /* همیشه بالای بک‌دراپ */
}
.profile_dropdown {
  z-index: 10000; /* کانتینر بالای بک‌دراپ */
}

/* ================= 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: 11000;
  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: 10000;
}

@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: 9000;
  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: 11000;
  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 {
   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: 2rem;
  font-weight: 900;
  color: var(--color-hero-titel);
  line-height: 1.8;
  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(--color-hero-p);
  font-size: 1.13rem;
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 1.8;
}
/* ==================== 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: 2px 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.5rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 0px;
  }
  .hero-content3 {
    
    gap: 10px;
padding-top: 30px;
  }
  .hero-desc3 {
  
  font-size: .8rem;
  margin-bottom: 20px;
  line-height: 1.8;
}
  .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 {
  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-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.7rem;
  font-weight: 900;
  color: var(--color-hero-titel);
  line-height: 2;
  margin-bottom: 6px;
}

/* ==================== Hero Description ==================== */
.hero-desc2 {
  color: var(--color-hero-p);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 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: 2rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 6px;
  }
  .hero-desc2 {
    font-size: 1rem;
    margin-bottom: 12px;
    line-height: 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: 2.7rem;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 6px;
  }

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

/* Mobile View (max-width: 550px) */
@media (max-width: 550px) {
  .hero-title2 {
    font-size: 1.5rem;
   
  }
   .hero-desc2 {
    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-size: 1.5rem;
  color: var(--color-course-titel);
  font-weight: bold;
  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 {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  background: transparent;
  color: var(--color-course-btn);
  border: 1.4px solid #4f6baa;
  padding: 0.56em 1.6em;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 500;
  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.2rem;
  }

  .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 {
  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: 800;
  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 .6em;
  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: 0.9em;
  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 {
  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;
}
.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: 230px;
  max-width: 300px;
}



.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: 1200px) {
  .rm-footer-main { flex-wrap: wrap; gap: 18px; }
  .rm-footer-col { min-width: 130px; max-width: 100%; }
}
@media (max-width: 900px) {
  .rm-footer-main { flex-direction: column; gap: 38px; align-items: stretch;}
  .rm-footer-col, .rm-footer-col.about { max-width: 100%; min-width: 0; }
  .rm-footer-socials { margin-top: 18px;}
}







/* ---------- 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 {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(22, 28, 48, 0.6);
  backdrop-filter: blur(8px);
  z-index: 50000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s cubic-bezier(.55,1.15,.5,1.12);
}

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

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

.search-modal {
  background: rgba(34, 40, 66, 0.8);
  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.2rem;
  animation: modalUp 0.34s cubic-bezier(.55,1.12,.47,1.19);
}
@keyframes modalUp {
  from { transform: translateY(40px) scale(0.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.search-close {
  position: absolute;
  top: 20px; left: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.13s;
  z-index: 1;
}
.search-close:hover { color: rgb(250, 209, 3); }

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

.search-input {
  width: 100%;
  padding: 1.2em 1em;
  border-radius: 1.1em;
  border: none;
  font-size: 1.09em;
  font-family: inherit;
  background: rgba(255,255,255,0.11);
  color: #fff;
  box-shadow: 0 1px 9px #3c58a110;
  margin-bottom: 1.2em;
  transition: background 0.13s;
  outline: none;
}
.search-input:focus { background: rgba(255,255,255,0.15); }

.search-submit-btn {
  width: 100%;
  padding: 0.9em 0;
  border-radius: 1em;
  background: linear-gradient(90deg,#5c95e5,#7fd1d1);
  color: #fff;
  font-size: 1.12em;
  font-weight: 800;
  border: none;
  cursor: pointer;
  margin-bottom: 1.1em;
  transition: background 0.18s;
  box-shadow: 0 3px 8px #2c466910;
}
.search-submit-btn:hover {
  background: linear-gradient(90deg,#3661b2,#57c1c1);
}

.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;
}
.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%;
}
.search-show-all:hover { background: rgba(44,56,111,0.10); }

@media (max-width: 600px) {
  .search-modal {
    padding: 2rem 0.7rem 1rem 0.7rem;
    border-radius: 1.2rem;
    max-width: 97vw;
  }
  .search-close { top: 8px; left: 8px; }
  .search-input { font-size: 1em; }
}


.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;
  cursor: pointer;
  transition: background 0.18s;
  box-shadow: 0 2px 8px rgba(68,103,168,0.09);
  margin-right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar_search_btn:hover {
  background: rgba(36, 109, 243, 0.4);
  color: #f9f9fb;
}




/* ========== گرید واکنش‌گرا برای مجموعه کارت‌ها ========== */
.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-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 {
  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;
  margin-bottom: 18px;
  min-height: 70px;
  text-align: justify;
}

/* ----------- دکمه اصلی ----------- */
.course-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 7px;
  
  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 40px;
  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; }

.custom-video {
  width: 100%;
  max-width: 800px; /* حداکثر عرض */
  border-radius: 20px; /* گوشه‌های گرد */
  overflow: hidden; /* برای اعمال درست گردی لبه‌ها */
  
  
  
  /* افکت‌های انیمیشنی هنگام هاور */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}





/* ==================== 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: 1.07em;
  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;
  }
}

/* ============================================================
=                        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: 700;             /* ارث‌بری از فونت والد */
  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;
  font-weight: 700;
  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;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 900;
  color: var(--color-title);
  letter-spacing: -.2px;
}
.course-name{ color: var(--color-title-golden); }

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

/* قیمت + 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: 800;
  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: 700;
  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: 700;
  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 120px 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(--color-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: 20px;
    }
    .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: 6px 16px }
    .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: 2; color: var(--rm-muted); font-size: clamp(14px, 1.4vw, 16px) }
    .rm-desc p{ margin: 0 0 12px; text-align: justify; font-size: 14px; }

    /* ====== Responsive ====== */
    @media (max-width: 980px){
      .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: 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: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  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:hover{
  background: linear-gradient(180deg, var(--dl-gold-soft), var(--dl-bg-soft));
  color: #1e2233;
  box-shadow: 0 6px 18px rgba(217,181,68,.25);
}
.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;
  }
}