/* ----------------------------------------------------
   MODERN BOOKING FORM (SPA STYLE)
   FINAL VERSION – COLOR/TYPO VARIABLE BASED
---------------------------------------------------- */
/* -------------------------
   فونت ایران یکان
-------------------------- */
@font-face {
  font-family: "IRANYekanX";
  src: url("../fonts/IRANYekanX-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IRANYekanX";
  src: url("../fonts/IRANYekanX-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------
   Design Tokens
-------------------------- */
:root {
  /* Brand colors */

  /* Typography */
  --sb-font-family-base: "IRANYekanX", sans-serif;
  --sb-font-family-alt: "Inter", "Vazirmatn", sans-serif;
  --sb-tab-active-shadow-color: var(--sb-primary-color);

  --sb-font-weight-regular: 400;
  --sb-font-weight-bold: 700;

  --sb-font-size-sm: 14px;
  --sb-line-height-sm: 1.8;

  /* General text colors */
  --sb-text-color-body: #363d36;
  --sb-text-color-strong: var(--sb-primary-color-dark, #567a31);

  /* Surface colors */
  --sb-surface-summary-bg-start: rgba(255, 255, 255, 0.62);
  --sb-surface-summary-bg-end: rgba(255, 255, 255, 0.38);

  /* Borders */
  --sb-summary-border-color: rgba(139, 195, 74, 0.18);
  --sb-summary-divider-color: rgba(139, 195, 74, 0.12);

  /* Effects */
  --sb-summary-backdrop-blur: 12px;
  --sb-summary-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.75), 0 6px 18px rgba(0, 0, 0, 0.06);

  /* Radius */
  --sb-summary-radius: 18px;

  /* Spacing */
  --sb-wrapper-padding: 20px;
  --sb-summary-padding-y: 16px;
  --sb-summary-padding-x: 18px;
  --sb-summary-padding-y-desktop: 18px;
  --sb-summary-padding-x-desktop: 22px;
  --sb-summary-item-padding-y: 8px;

  /* Layout */
  --sb-wrapper-max-width: 1200px;
  --sb-summary-max-width: 500px;
  --sb-tabs-gap: 10px;
  --sb-tabs-margin-bottom: 9px;
  --sb-summary-margin-bottom: 25px;
  /* Page title */
  --sb-page-title-margin-top: 20px;
  --sb-tab-active-bg-start: var(--sb-primary-color);
  --sb-tab-active-bg-end: var(--sb-primary-color-dark);
}

.sb-modern-wrapper {
  font-family: var(--sb-font-family-base);
  max-width: var(--sb-wrapper-max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--sb-wrapper-padding);
}

body {
  font-family: var(--sb-font-family-base);
}

.page-title {
  margin-top: var(--sb-page-title-margin-top) !important;
}

.sb-summary-box {
  font-family: var(--sb-font-family-base) !important;
  margin: 0 auto var(--sb-summary-margin-bottom);
  padding: var(--sb-summary-padding-y) var(--sb-summary-padding-x);
  border-radius: var(--sb-summary-radius);
  background: linear-gradient(
    180deg,
    var(--sb-surface-summary-bg-start) 0%,
    var(--sb-surface-summary-bg-end) 100%
  );
  border: 1px solid var(--sb-summary-border-color);
  backdrop-filter: blur(var(--sb-summary-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--sb-summary-backdrop-blur));
  box-shadow: var(--sb-summary-shadow);
  color: var(--sb-text-color-body);
  width: 100%;
  max-width: var(--sb-summary-max-width);
}

.sb-summary-box div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sb-summary-item-padding-y) 0;
  font-size: var(--sb-font-size-sm);
  line-height: var(--sb-line-height-sm);
}

.sb-summary-box div + div {
  border-top: 1px solid var(--sb-summary-divider-color);
}

.sb-summary-box strong {
  color: var(--sb-text-color-strong);
  font-weight: var(--sb-font-weight-bold);
}

/* فقط دسکتاپ */
@media (min-width: 992px) {
  .sb-summary-box {
    max-width: var(--sb-summary-max-width);
    padding: var(--sb-summary-padding-y-desktop)
      var(--sb-summary-padding-x-desktop);
  }
}

/* ---------------------------------
   TABS
------------------------------------ */
.sb-modern-wrapper .sb-tabs {
  display: flex;
  gap: var(--sb-tabs-gap);
  margin-bottom: var(--sb-tabs-margin-bottom);
}
/* ---------------------------------
   TABS
------------------------------------ */

.sb-modern-wrapper {
  /* Tab typography */
  --sb-tab-font-family: "IRANYekanX", sans-serif;
  --sb-tab-font-size: 16px;
  --sb-tab-font-weight: 850;

  /* Tab spacing */
  --sb-tab-padding-y: 12px;
  --sb-tab-padding-x: 24px;
  --sb-tab-radius: 14px;

  /* Tab inactive */
  --sb-tab-text-color: #4b5563;
  --sb-tab-border-color: rgba(0, 0, 0, 0.08);
  --sb-tab-bg: rgba(255, 255, 255, 0.6);
  --sb-tab-backdrop-blur: 15px;
  --sb-tab-shadow:
    0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* Tab hover */
  --sb-tab-hover-text-color: #111827;
  --sb-tab-hover-bg: rgba(255, 255, 255, 0.9);
  --sb-tab-hover-border-color: rgba(0, 0, 0, 0.12);
  --sb-tab-hover-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
  --sb-tab-hover-translate-y: -2px;

  /* Tab active */
  --sb-tab-active-text-color: #ffffff;

  --sb-tab-active-border-color: rgba(255, 255, 255, 0.3);
  --sb-tab-active-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.15),
    0 8px 15px var(--sb-tab-active-shadow-color);
  --sb-tab-active-translate-y: -2px;
  --sb-tab-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.sb-modern-wrapper .sb-tab-btn {
  font-family: var(--sb-tab-font-family);
  padding: var(--sb-tab-padding-y) var(--sb-tab-padding-x);
  font-size: var(--sb-tab-font-size);
  font-weight: var(--sb-tab-font-weight);
  color: var(--sb-tab-text-color);
  border-radius: var(--sb-tab-radius);
  cursor: pointer;
  position: relative;
  border: 1px solid var(--sb-tab-border-color) !important;
  background: var(--sb-tab-bg) !important;
  backdrop-filter: blur(var(--sb-tab-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--sb-tab-backdrop-blur));
  transition: var(--sb-tab-transition);
  box-shadow: var(--sb-primary-tab-shadow);
}

.sb-modern-wrapper .sb-tab-btn:hover:not(.active) {
  background: var(--sb-tab-hover-bg) !important;
  color: var(--sb-tab-hover-text-color);
  --sb-tab-active-translate-y: -2px;
  box-shadow: var(--sb-tab-hover-shadow);
  border-color: var(--sb-tab-hover-border-color) !important;
}

.sb-modern-wrapper .sb-tab-btn.active {
  color: var(--sb-tab-active-text-color) !important;
  background: linear-gradient(
    135deg,
    var(--sb-tab-active-bg-start),
    var(--sb-tab-active-bg-end)
  ) !important;
  transform: translateY(var(--sb-tab-active-translate-y));
  border: 1px solid var(--sb-tab-active-border-color) !important;
  box-shadow: var(--sb-tab-active-shadow);
}
/* ---------------------------------
   TAB BUTTON STATES
------------------------------------ */

.sb-modern-wrapper {
  /* Tab active press state */
  --sb-tab-press-translate-y: 1px;
  --sb-tab-press-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);

  /* Tab focus */
  --sb-tab-focus-outline: none;

  /* Skeleton */
  --sb-skeleton-bg: #e6e6e6;
  --sb-skeleton-shimmer-color: rgba(255, 255, 255, 0.6);
  --sb-skeleton-shimmer-width: 150px;
  --sb-skeleton-img-radius: 10px;
  --sb-skeleton-text-radius: 6px;
  --sb-skeleton-text-height: 14px;

  /* Skeleton text widths */
  --sb-skeleton-text-width-small: 50px;
  --sb-skeleton-text-width-medium: 90px;
  --sb-skeleton-text-width-price: 110px;

  /* Skeleton animation */
  --sb-skeleton-shimmer-duration: 1.4s;
  --sb-skeleton-shimmer-start-x: -150px;
  --sb-skeleton-shimmer-end-x: 400px;
}

/* افکت کلیک (فشردگی تب) */
.sb-modern-wrapper .sb-tab-btn:active {
  transform: translateY(var(--sb-tab-press-translate-y));
  box-shadow: var(--sb-tab-press-shadow);
}

/* حذف خط تیره یا حاشیه فوکوس پیش‌فرض مرورگر */
.sb-modern-wrapper .sb-tab-btn:focus {
  outline: var(--sb-tab-focus-outline);
}

/* ---------------------------------
   TAB CONTENT
------------------------------------ */
.sb-modern-wrapper .sb-tab-content {
  display: none;
}

.sb-modern-wrapper .sb-tab-content.active {
  display: block;
}

/* ---------------------------------
   CARD – Unified Design (FINAL)
------------------------------------ */
/* skeleton card */

.sb-skeleton {
  pointer-events: none;
}

.sb-skeleton-img,
.sb-skeleton-text {
  position: relative;
  overflow: hidden;
  background: var(--sb-skeleton-bg);
}

.sb-skeleton-img::after,
.sb-skeleton-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--sb-skeleton-shimmer-width) * -1);
  height: 100%;
  width: var(--sb-skeleton-shimmer-width);
  background: linear-gradient(
    90deg,
    transparent,
    var(--sb-skeleton-shimmer-color),
    transparent
  );
  animation: shimmer var(--sb-skeleton-shimmer-duration) infinite;
}

/* image placeholder */

.sb-skeleton-img {
  width: 100%;
  height: 100%;
  border-radius: var(--sb-skeleton-img-radius);
}

/* text placeholders */

.sb-skeleton-text {
  height: var(--sb-skeleton-text-height);
  border-radius: var(--sb-skeleton-text-radius);
}

.sb-skeleton-text.small {
  width: var(--sb-skeleton-text-width-small);
}

.sb-skeleton-text.medium {
  width: var(--sb-skeleton-text-width-medium);
}

.sb-skeleton-text.price {
  width: var(--sb-skeleton-text-width-price);
}

@keyframes shimmer {
  0% {
    transform: translateX(var(--sb-skeleton-shimmer-start-x));
  }
  100% {
    transform: translateX(var(--sb-skeleton-shimmer-end-x));
  }
}
/* ------------------------------------------------------------
   CARD: Glassmorphism & 3D Effect – VARIABLE BASED
   ------------------------------------------------------------ */

.sb-modern-wrapper {
  /* Blob Variables */
  --sb-blob-1-bg: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  --sb-blob-2-bg: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  --sb-blob-blur: 50px;
  --sb-blob-size: 350px;

  --sb-glass-bg: rgba(255, 255, 255, 0.18);
  --sb-glass-border: 1px solid rgba(255, 255, 255, 0.35);
  --sb-glass-blur: 25px;
  --sb-glass-radius: 30px;

  /* Card Variables */

  --sb-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --sb-card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  --sb-card-radius: 20px;
  --sb-card-border: 1px solid rgba(255, 255, 255, 0.4);
  /* Active State */
  --sb-card-active-border: 2px solid var(--sb-primary-color);
  --sb-card-active-bg: rgba(238, 244, 240, 0.8);
  --sb-card-active-shadow: 0 15px 35px rgba(139, 195, 74, 0.25);
}

/* ۱. آماده‌سازی کانتینر */
.sb-modern-wrapper #sb-tab-packages,
.sb-modern-wrapper #sb-tab-singles {
  position: relative;
  z-index: 1;
  padding: 15px;
  border-radius: 32px;
  overflow: hidden;
}

/* گوی نور اول */
.sb-modern-wrapper #sb-tab-packages::before,
.sb-modern-wrapper #sb-tab-singles::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  width: var(--sb-blob-size);
  height: var(--sb-blob-size);
  border-radius: 50%;
  background: var(--sb-blob-1-bg);
  filter: blur(var(--sb-blob-blur));
  z-index: -1;
  pointer-events: none;
  animation: floatBlobOne 12s infinite alternate ease-in-out;
}

/* گوی نور دوم */
.sb-modern-wrapper #sb-tab-packages::after,
.sb-modern-wrapper #sb-tab-singles::after {
  content: "";
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: var(--sb-blob-2-bg);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
  animation: floatBlobTwo 15s infinite alternate ease-in-out;
}

/* باکس شیشه‌ای اصلی */
.sb-modern-wrapper #sb-packages-list.sb-packages-grid,
.sb-modern-wrapper #sb-singles-list,
.sb-modern-wrapper .sb-singles-list {
  background: rgba(255, 255, 255, var(--sb-base-opacity, 0.18)) !important;
  backdrop-filter: blur(var(--sb-base-blur, 25px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--sb-base-blur, 25px)) saturate(150%);

  border: var(--sb-glass-border) !important;
  border-radius: var(--sb-glass-radius) !important;
  padding: 30px !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
/* ------------------------------------------------------------
   CARD TOKENS
------------------------------------------------------------ */
.sb-modern-wrapper {
  --sb-card-border: 1px solid rgba(255, 255, 255, 0.42);
  --sb-card-hover-bg: rgba(255, 255, 255, 0.62);
  --sb-card-hover-border: rgba(255, 255, 255, 0.82);
  --sb-badge-shadow-color: var(
    --sb-php-badge-shadow-color,
    rgba(139, 195, 74, 0.14)
  );
  --sb-badge-hover-shadow-color: var(
    --sb-php-badge-hover-shadow-color,
    rgba(139, 195, 74, 0.2)
  );
  --sb-card-transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease, border-color 0.35s ease;

  --sb-card-img-radius: 14px;
  --sb-card-img-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  --sb-card-img-transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);

  --sb-price-divider-color: rgba(0, 0, 0, 0.08);

  --sb-selection-badge-bg-start: rgba(255, 255, 255, 0.92);
  --sb-selection-badge-bg-end: rgba(211, 212, 211, 0.9);
  --sb-selection-badge-border: var(--sb-primary-color-dark);
  --sb-selection-badge-text: var(--sb-text-color);
  --sb-selection-badge-shadow:
    0 10px 22px var(--sb-badge-shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --sb-selection-badge-hover-shadow:
    0 14px 28px var(--sb-badge-hover-shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ------------------------------------------------------------
   CARD
------------------------------------------------------------ */
.sb-modern-wrapper .sb-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  background:
    var(
      --sb-card-gloss,
      linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0))
    ),
    var(--sb-card-bg-gradient, var(--sb-card-bg)) !important;

  border-radius: var(--sb-card-radius);
  border: var(--sb-card-border) !important;
  padding: 15px;
  gap: 15px;
  margin-bottom: 20px;
  overflow: hidden;
  direction: rtl;
  position: relative;
  transition: var(--sb-card-transition);
  box-shadow: var(--sb-card-shadow);
  will-change: transform, box-shadow;
  backdrop-filter: blur(var(--sb-card-blur));
  -webkit-backdrop-filter: blur(var(--sb-card-blur));
}

.sb-card:hover {
  transform: translateY(-8px) scale(1.012);
  background: var(--sb-card-hover-bg) !important;
  border-color: var(--sb-card-hover-border) !important;
  box-shadow:
    var(--sb-card-hover-shadow),
    inset 0 1px 2px rgba(255, 255, 255, 0.82);
}

.sb-card.active {
  border: var(--sb-card-active-border) !important;
  background: var(--sb-card-active-bg) !important;
  box-shadow:
    var(--sb-card-active-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transform: translateY(-6px);
}

/* ------------------------------------------------------------
   CARD IMAGE
------------------------------------------------------------ */
.sb-card-img {
  flex: 0 0 120px;
  width: 120px;
  height: 110px;
  border-radius: var(--sb-card-img-radius);
  overflow: hidden;
  box-shadow: var(--sb-card-img-shadow);
}

.sb-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--sb-card-img-transition);
  transform: scale(1);
}

.sb-card:hover .sb-card-img img {
  transform: scale(1.07);
}

/* ------------------------------------------------------------
   CARD BODY
------------------------------------------------------------ */
.sb-card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 10px 0 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ------------------------------------------------------------
   TITLE TAG (تبدیل به بج)
------------------------------------------------------------ */
.sb-modern-wrapper .title-tag {
  display: inline-flex; /* تغییر به این‌لاین فلکس برای فیت شدن بک‌گراند دور متن */
  align-items: center;
  justify-content: center;

  /* استایل بج */
  background: rgba(0, 0, 0, 0.05); /* یک پس‌زمینه ملایم */
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.03);

  margin-bottom: 10px;
  transition: all 0.3s ease;
}

/* هاور روی کارت باعث تغییر بج شود (اختیاری) */
.sb-modern-wrapper .sb-card:hover .title-tag {
  background: var(--sb-primary-color); /* یا هر رنگی که متغیر اصلی شماست */
  color: #fff !important;
}

.sb-modern-wrapper .sb-card:hover .sb-card-title {
  color: #fff !important;
}

.sb-modern-wrapper .sb-card-title {
  margin: 0 !important;
  font-size: 13px !important; /* سایز بج معمولاً کمی کوچک‌تر است */
  font-weight: 700 !important;
  color: var(--sb-card-title-color) !important;
  line-height: 1.2 !important;
}

/* ------------------------------------------------------------
   PRICE SIDE (اصلاح شده برای وسط‌چین کردن)
------------------------------------------------------------ */
.sb-modern-wrapper .price-side-section {
  flex: 0 0 130px; /* کمی عرض را بیشتر کردیم تا قیمت‌های طولانی نشکنند */
  width: 130px;
  border-right: 1px solid var(--sb-price-divider-color);
  padding-right: 12px;
  margin-right: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* وسط‌چین عمودی */
  align-items: center; /* وسط‌چین افقی - اضافه شد */
  gap: 12px; /* فاصله بین قیمت و دکمه */
}

.sb-modern-wrapper .sb-price {
  font-size: var(--sb-price-size) !important;
  font-weight: var(--sb-price-weight) !important;
  color: var(--sb-price-color) !important;
  font-family: var(--sb-card-font-family);
  line-height: 1.6;
  text-align: center; /* اطمینان از وسط‌چین بودن متن قیمت */
}

/* ------------------------------------------------------------
   SELECTION BADGE
------------------------------------------------------------ */
.sb-modern-wrapper .selection-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center; /* تغییر از flex-start به center برای وسط‌چین شدن */
  min-height: 34px;
  margin-top: 0; /* فاصله را از طریق gap والد کنترل می‌کنیم */
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer; /* تغییر شکل موس به دست - اضافه شد */
  user-select: none; /* جلوگیری از انتخاب شدن متن هنگام کلیک سریع */

  background: linear-gradient(
    135deg,
    var(--sb-selection-badge-bg-start),
    var(--sb-selection-badge-bg-end)
  );
  border: 1px solid var(--sb-selection-badge-border);
  color: var(--sb-selection-badge-text);
  font-family: var(--sb-card-font-family);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--sb-selection-badge-shadow);
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s ease,
    background 0.32s ease;
}

/* افکت هاور برای دکمه (اختیاری برای جذابیت بیشتر) */
.sb-modern-wrapper .selection-badge:hover {
  filter: brightness(1.05); /* کمی روشن‌تر شدن هنگام هاور */
  transform: translateY(-2px);
}

.sb-card:hover .selection-badge {
  transform: translateY(-2px);
  box-shadow: var(--sb-selection-badge-hover-shadow);
}

.sb-card.active .selection-badge {
  background: linear-gradient(
    135deg,
    rgba(139, 195, 74, 0.98),
    rgba(104, 159, 56, 0.98)
  );
  border-color: rgba(104, 159, 56, 0.5);
  color: #ffffff;
  box-shadow:
    0 14px 28px rgba(139, 195, 74, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ------------------------------------------------------------
   DESCRIPTION
------------------------------------------------------------ */
.card-desc {
  color: var(--sb-card-desc-color);
  font-size: var(--sb-card-desc-size);
  font-weight: var(--sb-card-desc-weight);
  background: var(--sb-card-desc-bg);
  border: var(--sb-card-desc-border);
  backdrop-filter: blur(var(--sb-card-desc-blur));
  -webkit-backdrop-filter: blur(var(--sb-card-desc-blur));
  padding: 12px 16px;
  border-radius: var(--sb-card-desc-radius);
  margin-top: 10px;
  margin-bottom: 5px;
  text-align: justify;
  line-height: var(--sb-card-desc-line-height);
  box-shadow: var(--sb-card-desc-shadow);
}

.desc-section:empty {
  display: none !important;
  padding: 0 !important;
}

.desc-section {
  padding: 0;
}
/* ------------------------------------------------------------
   MOBILE STYLES (UNDER 768px)
------------------------------------------------------------ */
@media (max-width: 768px) {
  /* ۱. تغییر ساختار کارت به عمودی */
  .sb-modern-wrapper .sb-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    gap: 12px !important;
  }

  /* ۲. تصویر کارت در بالا قرار گرفته و تمام‌عرض می‌شود */
  .sb-modern-wrapper .sb-card-img {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 155px !important; /* ارتفاع متناسب برای نمایش هدر کارت */
    box-shadow: var(--sb-card-img-shadow);
  }

  /* ۳. تنظیم بدنه کارت */
  .sb-modern-wrapper .sb-card-body {
    display: flex;
    flex-direction: column;
    align-items: center; /* تمام محتوای بدنه شامل عنوان و دیسکریپشن وسط‌چین می‌شود */
    text-align: center;
    padding: 0 !important;
    width: 100% !important;
  }

  /* ۴. عنوان کارت */
  .sb-modern-wrapper .sb-card-title {
    text-align: right !important;
    font-size: calc(
      var(--sb-card-title-size) - 1px
    ) !important; /* کمی ظریف‌تر روی موبایل */
    align-self: center; /* اطمینان از وسط‌چین بودن بج عنوان */
    margin-top: 5px;
  }

  /* ۵. باکس توضیحات (افزایش خوانایی روی موبایل) */
  .sb-modern-wrapper .card-desc {
    margin-top: 10px !important;
    margin-bottom: 5px !important;
    padding: 10px 14px !important;
    font-size: calc(var(--sb-card-desc-size) - 1px) !important;
    text-align: justify;
  }

  /* ۶. تبدیل بخش قیمت به نوار پایینی کارت */
  .sb-modern-wrapper .price-side-section {
    flex: 0 0 auto !important;
    width: 100% !important;

    /* حذف مرز عمودی سمت راست و تبدیل به مرز افقی بالایی */
    border-right: none !important;
    border-top: 1px solid var(--sb-price-divider-color) !important;

    padding-right: 0 !important;
    padding-top: 14px !important;
    margin-right: 0 !important;

    /* چیدمان قیمت و دکمه کنار هم (چپ و راست) */
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* ۷. تراز کردن قیمت و دکمه انتخاب در یک خط */
  .sb-modern-wrapper .sb-price {
    font-size: calc(
      var(--sb-price-size) - 1px
    ) !important; /* سایز متناسب موبایل */
    margin: 0 !important;
  }

  .sb-modern-wrapper .selection-badge {
    margin-top: 0 !important; /* حذف فاصله بالا چون حالا کنار قیمت است */
    align-self: center !important;
  }
}

/* ------------------------------------------------------------
   CHECKBOX (Single Services) – Variable Based
   ------------------------------------------------------------ */

.sb-modern-wrapper {
  /* Checkbox positioning */
  --sb-checkbox-top: 14px;
  --sb-checkbox-right: 14px;
  --sb-checkbox-top-mobile: 10px;
  --sb-checkbox-right-mobile: 10px;

  /* Checkbox sizing */
  --sb-checkbox-size: 22px;
  --sb-checkbox-size-mobile: 18px;
  --sb-checkbox-radius: 6px;
  --sb-checkbox-border-width: 2px;

  /* Checkbox colors */
  --sb-checkbox-border-color: #8bc34a;
  --sb-checkbox-bg: #ffffff;
  --sb-checkbox-checked-bg: #8bc34a;
  --sb-checkbox-check-color: #ffffff;

  /* Checkmark */
  --sb-checkbox-check-font-size: 16px;
  --sb-checkbox-check-font-size-mobile: 13px;
  --sb-checkbox-check-font-family: Arial, sans-serif;
  --sb-checkbox-check-font-weight: 700;
  --sb-checkbox-check-offset: translate(-50%, -55%);

  /* Motion */
  --sb-checkbox-transition: 0.2s;
}

/* ---------------------------------
   CHECKBOX (Single Services)
------------------------------------ */

.sb-single-card {
  position: relative !important;
}

.sb-checkbox {
  position: absolute !important;
  top: var(--sb-checkbox-top) !important;
  right: var(--sb-checkbox-right) !important;
  z-index: 10 !important;
  line-height: 0 !important;
}

.sb-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: var(--sb-checkbox-size) !important;
  height: var(--sb-checkbox-size) !important;
  border: var(--sb-checkbox-border-width) solid var(--sb-checkbox-border-color) !important;
  border-radius: var(--sb-checkbox-radius) !important;
  cursor: pointer !important;
  transition: var(--sb-checkbox-transition) !important;
  background: var(--sb-checkbox-bg) !important;
  position: relative !important;
  display: block !important;
  margin: 0 !important;
}

.sb-checkbox input:checked {
  background: var(--sb-checkbox-checked-bg) !important;
}

/* checkmark */
.sb-checkbox input:checked::after {
  content: "✓" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: var(--sb-checkbox-check-offset) !important;
  font-family: var(--sb-checkbox-check-font-family) !important;
  font-size: var(--sb-checkbox-check-font-size) !important;
  color: var(--sb-checkbox-check-color) !important;
  font-weight: var(--sb-checkbox-check-font-weight) !important;
}

/* ---------------------------------
   MOBILE ADJUSTMENTS
------------------------------------ */

@media (max-width: 600px) {
  .sb-checkbox {
    top: var(--sb-checkbox-top-mobile) !important;
    right: var(--sb-checkbox-right-mobile) !important;
  }

  .sb-checkbox input {
    width: var(--sb-checkbox-size-mobile) !important;
    height: var(--sb-checkbox-size-mobile) !important;
  }

  .sb-checkbox input:checked::after {
    font-size: var(--sb-checkbox-check-font-size-mobile) !important;
    top: 50% !important;
    left: 50% !important;
    transform: var(--sb-checkbox-check-offset) !important;
  }
}
/* ------------------------------------------------------------
   BUTTONS – Variable Based
   ------------------------------------------------------------ */

.sb-modern-wrapper {
  /* Shared button typography */
  --sb-btn-font-family: "IRANYekanX", sans-serif;
  --sb-btn-font-size: 17px;
  --sb-btn-font-size-mobile: 16px;
  --sb-btn-font-weight: 600;

  /* Shared button sizing */
  --sb-btn-padding-y: 14px;
  --sb-btn-padding-x: 28px;
  --sb-btn-radius: 14px;
  --sb-btn-min-width: 180px;
  --sb-btn-width-mobile: 100%;

  /* Shared spacing */
  --sb-btn-margin-top: 20px;
  --sb-btn-margin-top-mobile: 14px;
  --sb-go-to-singles-margin-top: 20px;

  /* Shared border / blur */
  --sb-btn-border: 1px solid rgba(255, 255, 255, 0.35);
  --sb-btn-blur: 10px;

  /* Shared motion */
  --sb-btn-transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  --sb-btn-hover-transform: translateY(-4px) scale(1.03);
  --sb-btn-active-transform: translateY(1px);

  /* Shared highlight overlay */
  --sb-btn-shine-height: 55%;
  --sb-btn-shine-bg: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0)
  );

  /* Shared shadows */
  --sb-btn-shadow:
    0 12px 25px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -3px 6px rgba(0, 0, 0, 0.15);
  --sb-btn-hover-shadow:
    0 20px 35px rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.7),
    inset 0 -4px 10px rgba(0, 0, 0, 0.25);
  --sb-btn-active-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.25);

  /* Primary button */
  --sb-primary-btn-text: #ffffff;
  --sb-primary-btn-bg: linear-gradient(
    145deg,
    var(--sb-primary-color),
    var(--sb-primary-color-dark)
  );
  --sb-primary-btn-hover-bg: linear-gradient(
    145deg,
    var(--sb-primary-hover-start, #aee266),
    var(--sb-primary-hover-end, #71b846)
  );
  --sb-primary-btn-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.7),
    inset 0 -4px 10px rgba(0, 0, 0, 0.25);

  /* Secondary button */
  --sb-secondary-btn-text: #111827;
  --sb-secondary-btn-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.35) 100%
  );
  --sb-secondary-btn-hover-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
}

/* ---------------------------------
   BUTTONS
------------------------------------ */

.sb-modern-wrapper .sb-primary-btn,
.sb-modern-wrapper .sb-secondary-btn {
  position: relative;
  padding: var(--sb-btn-padding-y) var(--sb-btn-padding-x);
  border-radius: var(--sb-btn-radius);
  cursor: pointer;
  font-family: var(--sb-btn-font-family);
  font-size: var(--sb-btn-font-size);
  font-weight: var(--sb-btn-font-weight);
  margin-top: var(--sb-btn-margin-top);
  border: var(--sb-btn-border);

  backdrop-filter: blur(var(--sb-btn-blur));
  -webkit-backdrop-filter: blur(var(--sb-btn-blur));

  transition: var(--sb-btn-transition);
  box-shadow: var(--sb-btn-shadow);
}

.sb-modern-wrapper .sb-primary-btn {
  min-width: var(--sb-btn-min-width);
  color: var(--sb-primary-btn-text);
  background: var(--sb-primary-btn-bg) !important;
  box-shadow: var(--sb-primary-btn-shadow);
}

.sb-modern-wrapper .sb-secondary-btn {
  min-width: var(--sb-btn-min-width);
  color: var(--sb-secondary-btn-text);
  background: var(--sb-secondary-btn-bg) !important;
}

/* shine */
.sb-modern-wrapper .sb-primary-btn::before,
.sb-modern-wrapper .sb-secondary-btn::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: var(--sb-btn-shine-height);
  border-radius: inherit;
  background: var(--sb-btn-shine-bg);
  pointer-events: none;
}

/* hover */
.sb-modern-wrapper .sb-primary-btn:hover,
.sb-modern-wrapper .sb-primary-btn:focus-visible {
  transform: var(--sb-btn-hover-transform);
  background: var(--sb-primary-btn-hover-bg) !important;
  box-shadow: var(--sb-btn-hover-shadow);
}

.sb-modern-wrapper .sb-secondary-btn:hover,
.sb-modern-wrapper .sb-secondary-btn:focus-visible {
  transform: var(--sb-btn-hover-transform);
  background: var(--sb-secondary-btn-hover-bg) !important;
  box-shadow: var(--sb-btn-hover-shadow);
}

/* active */
.sb-modern-wrapper .sb-primary-btn:active,
.sb-modern-wrapper .sb-secondary-btn:active {
  transform: var(--sb-btn-active-transform);
  box-shadow: var(--sb-btn-active-shadow);
}

.sb-modern-wrapper #sb-go-to-singles {
  margin-top: var(--sb-go-to-singles-margin-top);
}

@media (max-width: 768px) {
  .sb-modern-wrapper .sb-primary-btn,
  .sb-modern-wrapper .sb-secondary-btn {
    width: var(--sb-btn-width-mobile);
    margin-top: var(--sb-btn-margin-top-mobile);
    font-size: var(--sb-btn-font-size-mobile);
  }

  .sb-modern-wrapper .sb-tab-btn {
    font-size: medium;
  }
}

/* ------------------------------------------------------------
   STEPS – Safe Variable Based
   ------------------------------------------------------------ */

.sb-modern-wrapper {
  /* Step header */
  --sb-step-header-margin-bottom: 24px;
  --sb-step-header-title-color: #111827;
  --sb-step-header-title-weight: 850;
  --sb-step-header-title-size: 20px;
  --sb-step-header-title-padding-bottom: 12px;
  --sb-step-header-title-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);

  /* Step underline */
  --sb-step-header-line-width: 50%;
  --sb-step-header-line-height: 3px;
  --sb-step-header-line-radius: 10px;
  --sb-step-header-line-bg: linear-gradient(
    90deg,
    transparent 0%,
    var(--sb-primary-color-dark, #8bc34a) 50%,
    transparent 100%
  );
}

/* ---------------------------------
   STEPS
------------------------------------ */
.sb-step {
  display: none;
}

.sb-step.active {
  display: block;
}

.sb-step-header {
  text-align: center;
  margin-bottom: var(--sb-step-header-margin-bottom);
  position: relative;
}

.sb-step-header h3 {
  display: inline-block;
  color: var(--sb-step-header-title-color);
  font-weight: var(--sb-step-header-title-weight);
  font-size: var(--sb-step-header-title-size);
  margin: 0;
  padding-bottom: var(--sb-step-header-title-padding-bottom);
  position: relative;
  text-shadow: var(--sb-step-header-title-shadow);
}

/* خط جداکننده زیر عنوان ساعت */
.sb-step-header h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--sb-step-header-line-width);
  height: var(--sb-step-header-line-height);
  background: var(--sb-step-header-line-bg);
  border-radius: var(--sb-step-header-line-radius);
}

/* ------------------------------------------------------------
   STEP 2 – DATE SELECTION (Variable Based)
   ------------------------------------------------------------ */

.sb-modern-wrapper {
  /* Calendar & Slots Main Container */
  --sb-cal-bg: rgba(255, 255, 255, 0.15);
  --sb-cal-blur: 40px;
  --sb-cal-border: 1px solid rgba(255, 255, 255, 0.3);
  --sb-cal-radius: 24px;
  --sb-cal-padding: 20px;
  --sb-cal-shadow:
    0 15px 35px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.3);

  /* Error State styling */
  --sb-cal-error-bg: #f8f9fa;
  --sb-cal-error-border: 1px dashed #e0e0e0;
  --sb-cal-error-radius: 12px;
  --sb-cal-error-color: #b42318;
  --sb-cal-error-font-size: 15px;

  /* Date Card (Dates grid alternative cards) */
  --sb-date-card-bg: #d9e3de;
  --sb-date-card-text: #000000;
  --sb-date-card-radius: 14px;
  --sb-date-card-padding: 16px 10px;
  --sb-date-card-shadow: 0 4px 10px rgba(139, 195, 74, 0.25);
  --sb-date-card-active-border: #8bc34a;
  --sb-date-card-active-shadow: 0 4px 18px rgba(139, 195, 74, 0.45);

  /* Grids & Layout */
  --sb-dates-grid-columns: repeat(5, 1fr);
  --sb-dates-grid-columns-mobile: repeat(2, 1fr);
  --sb-dates-grid-gap: 14px;

  /* Day Cell (Base Layout) */
  --sb-day-min-height: 42px;
  --sb-day-padding: 10px 8px 14px;
  --sb-day-radius: 14px;
  --sb-day-border: 1px solid rgba(255, 255, 255, 0.42);
  --sb-day-blur: 10px;
  --sb-day-shadow:
    0 8px 18px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  --sb-day-transition:
    transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

  /* Day Cell (Shine Overlay) */
  --sb-day-shine-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );

  /* Day Cell - AVAILABLE State (روزهای در دسترس) */
  --sb-day-avail-bg: var(
    --sb-php-calendar-avail-bg,
    linear-gradient(
      180deg,
      rgba(139, 195, 74, 0.18) 0%,
      rgba(139, 195, 74, 0.1) 100%
    )
  );

  /* متغیرهای هاور و فعال تقویم با Fallbackهای پیش‌فرض */
  --sb-calendar-active-bg: var(--sb-php-calendar-active-bg, #8bc34a);
  --sb-calendar-hover-bg: var(
    --sb-php-calendar-hover-bg,
    rgba(139, 195, 74, 0.15)
  );
  --sb-day-avail-border: var(
    --sb-php-calendar-avail-border,
    rgba(139, 195, 74, 0.55)
  );
  --sb-day-avail-text: #111827; /* رنگ فونت در حالت عادی */

  /* Day Cell - AVAILABLE HOVER State */
  --sb-day-avail-hover-shadow:
    0 14px 24px var(--sb-php-calendar-hover-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  --calendar_active_bg: rgba(86, 140, 40, 0.14);
  /* Day Cell - SELECTED State (روز انتخاب‌شده) */
  --sb-day-selected-bg: linear-gradient(
    180deg,
    var(--sb-php-calendar-selected-bg-start, #3b82f6) 0%,
    var(--sb-php-calendar-selected-bg-end, #1d4ed8) 100%
  );
  --sb-day-selected-border: var(--sb-php-calendar-selected-border, #28a745);
  --sb-day-selected-shadow-color: var(
    --sb-php-calendar-selected-shadow-color,
    rgba(40, 167, 69, 0.26)
  );
  --sb-day-selected-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 12px 24px var(--sb-day-selected-shadow-color);

  --sb-day-selected-text: #ffffff;

  /* Day Cell - DISABLED State (روزهای غیرفعال) */
  --sb-day-disabled-bg: linear-gradient(
    180deg,
    rgba(245, 245, 245, 0.72) 0%,
    rgba(235, 235, 235, 0.55) 100%
  );
  --sb-day-disabled-border: rgba(0, 0, 0, 0.08);
  --sb-day-disabled-opacity: 0.9;

  /* Typography & Labels inside Day Cell */
  --sb-day-number-size: 15px;
  --sb-day-label-size: 9px;
  --sb-day-label-bg: rgba(255, 255, 255, 0.35);
  --sb-day-label-text: #666;
  --sb-day-label-bg-selected: rgba(255, 255, 255, 0.16);

  /* Next Buttons Animation */
  --sb-btn-next-shadow:
    8px 8px 16px rgba(0, 0, 0, 0.18), -4px -4px 10px rgba(255, 255, 255, 0.8);
  --sb-nav-btn-bg: linear-gradient(
    180deg,
    var(--sb-php-nav-btn-bg-start, #8bc34a) 0%,
    var(--sb-php-nav-btn-bg-end, #689f38) 100%
  );

  --sb-nav-btn-hover-bg: linear-gradient(
    180deg,
    var(--sb-php-nav-btn-hover-start, #9ccc65) 0%,
    var(--sb-php-nav-btn-hover-end, #7cb342) 100%
  );

  --sb-nav-btn-border: var(--sb-php-nav-btn-border, rgba(139, 195, 74, 0.45));
  --sb-nav-btn-shadow: 0 10px 22px
    var(--sb-php-nav-btn-shadow, rgba(139, 195, 74, 0.28));
  --sb-nav-btn-hover-shadow: 0 14px 28px
    var(--sb-php-nav-btn-hover-shadow, rgba(139, 195, 74, 0.38));
}

/* ---------------------------------
   STEP 2 – DATE SELECTION
------------------------------------ */
.sb-modern-wrapper #sb-calendar,
.sb-modern-wrapper .sb-time-slots {
  background: var(--sb-cal-bg) !important;
  backdrop-filter: blur(var(--sb-cal-blur));
  -webkit-backdrop-filter: blur(var(--sb-cal-blur));
  border: var(--sb-cal-border) !important;
  border-radius: var(--sb-cal-radius) !important;
  padding: var(--sb-cal-padding) !important;
  box-shadow: var(--sb-cal-shadow);
}

/* Error state */
.sb-modern-wrapper #sb-calendar .sb-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 24px;
  background: var(--sb-cal-error-bg);
  border: var(--sb-cal-error-border);
  border-radius: var(--sb-cal-error-radius);
  color: var(--sb-cal-error-color);
  font-family: "IRANYekanX", sans-serif;
  font-size: var(--sb-cal-error-font-size);
  font-weight: 500;
  text-align: center;
}

.sb-modern-wrapper #sb-calendar .sb-error::before {
  content: "⚠";
  display: block;
  font-size: 28px;
  margin-bottom: 10px;
}

.sb-modern-wrapper .sb-date-card {
  background: var(--sb-date-card-bg);
  color: var(--sb-date-card-text);
  border-radius: var(--sb-date-card-radius);
  padding: var(--sb-date-card-padding);
  text-align: center;
  cursor: pointer;
  transition: 0.25s;
  font-family: "IRANYekanX", sans-serif;
  font-weight: 600;
  box-shadow: var(--sb-date-card-shadow);
  border: 2px solid transparent;
}

.sb-modern-wrapper .sb-dates-grid {
  display: grid;
  grid-template-columns: var(--sb-dates-grid-columns);
  gap: var(--sb-dates-grid-gap);
}

.sb-modern-wrapper .sb-date-card.active {
  border-color: var(--sb-date-card-active-border);
  box-shadow: var(--sb-date-card-active-shadow);
}

.sb-modern-wrapper .sb-date-card.disabled {
  opacity: var(--sb-day-disabled-opacity);
  cursor: not-allowed;
}

.sb-modern-wrapper .sb-date-card.disabled:hover {
  background: none;
}

.sb-modern-wrapper .sb-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sb-day-min-height);
  padding: var(--sb-day-padding);
  border-radius: var(--sb-day-radius);
  overflow: hidden;
  border: var(--sb-day-border);
  backdrop-filter: blur(var(--sb-day-blur));
  -webkit-backdrop-filter: blur(var(--sb-day-blur));
  box-shadow: var(--sb-day-shadow);
  transition: var(--sb-day-transition);
}

.sb-modern-wrapper .sb-day::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 48%;
  border-radius: 12px;
  background: var(--sb-day-shine-bg);
  pointer-events: none;
}

/* available */
.sb-modern-wrapper .sb-day.available {
  background: var(--sb-day-avail-bg) !important;
  border-color: var(--sb-day-avail-border) !important;
  color: var(--sb-day-avail-text);
}

/* hover available */
.sb-modern-wrapper .sb-day.available:hover {
  transform: translateY(-2px);
  background: var(--sb-calendar-hover-bg) !important;
  box-shadow: var(--sb-day-avail-hover-shadow);
}

/* disabled */
.sb-modern-wrapper .sb-day.disabled {
  background: var(--sb-day-disabled-bg) !important;
  border-color: var(--sb-day-disabled-border) !important;
  opacity: var(--sb-day-disabled-opacity);
  cursor: not-allowed;
}

.sb-modern-wrapper .sb-day-number {
  position: relative;
  z-index: 2;
  font-size: var(--sb-day-number-size);
  font-weight: 600;
}

.sb-modern-wrapper .sb-day-label {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: var(--sb-day-label-size);
  padding: 2px 4px;
  border-radius: 6px;
  background: var(--sb-day-label-bg);
  color: var(--sb-day-label-text);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* selected */
.sb-modern-wrapper .sb-day.available.selected {
  background: var(--sb-day-selected-bg) !important;
  border-color: var(--sb-day-selected-border) !important;
  color: var(--sb-day-selected-text) !important;
  transform: scale(1.06);
  box-shadow: var(--sb-day-selected-shadow);
}

.sb-modern-wrapper .sb-day.available.selected .sb-day-number,
.sb-modern-wrapper .sb-day.available.selected .sb-day-label {
  color: var(--sb-day-selected-text) !important;
}

.sb-modern-wrapper .sb-day.available.selected .sb-day-label {
  background: var(--sb-day-label-bg-selected);
}
.sb-modern-wrapper .sb-nav-btn {
  background: var(--sb-nav-btn-bg);
  border: 1px solid var(--sb-nav-btn-border);
  color: #fff;
  box-shadow: var(--sb-nav-btn-shadow);
  transition: all 0.25s ease;
}

.sb-modern-wrapper .sb-nav-btn:hover {
  background: var(--sb-nav-btn-hover-bg);
  box-shadow: var(--sb-nav-btn-hover-shadow);
  transform: translateY(-1px);
}

.sb-modern-wrapper .sb-nav-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px var(--sb-php-nav-btn-shadow, rgba(139, 195, 74, 0.24));
}

.sb-modern-wrapper .sb-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Next Buttons */
.sb-modern-wrapper #sb-date-next,
.sb-modern-wrapper #sb-time-next {
  display: block !important;
  opacity: 0.5;
  animation: fadeInBtn 0.4s ease forwards;
  transform: translateY(-2px);
  box-shadow: var(--sb-btn-next-shadow);
}

/* responsive */
@media (max-width: 768px) {
  .sb-modern-wrapper .sb-dates-grid {
    grid-template-columns: var(--sb-dates-grid-columns-mobile);
  }

  .sb-modern-wrapper .sb-packages-grid,
  .sb-modern-wrapper .sb-singles-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 14px;
  }

  .sb-modern-wrapper .sb-day-label {
    display: none;
  }
}

@keyframes fadeInBtn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------
   STEP 3 – TIME SELECTION (Variable Based)
   ------------------------------------------------------------ */

.sb-modern-wrapper {
  /* Time grid */
  --sb-time-slots-columns: repeat(6, 1fr);
  --sb-time-slots-columns-mobile: repeat(3, 1fr);
  --sb-time-slots-gap: 12px;
  --sb-time-btn-gap: 10px;

  /* Time cell base sizing */
  --sb-time-item-width: auto;
  --sb-time-item-min-width: 0;
  --sb-time-item-radius: 16px;
  --sb-time-item-padding-y: 10px;
  --sb-time-item-padding-x: 0;
  --sb-time-item-font-size-mobile: 15px;
  --sb-time-item-font-weight: 700;

  /* --- Dynamic Color Engine --- */

  /* ۱. رنگ فعال پایه (از PHP یا پیش‌فرض سبز شما) */
  --sb-time-main-color: var(--sb-php-time-active-bg, #8bc34a);
  --sb-time-item-rgb: var(--sb-php-time-item-rgb, 139, 195, 74);

  /* ۲. رنگ هوشمند متن سلول‌های معمولی (خوانایی بر اساس رنگ انتخابی) */

  --sb-time-item-text: color-mix(
    in srgb,
    var(--sb-time-main-color) 80%,
    #1c3305
  );
  /* ۳. استایل شیشه و بک‌گراند سلول در حالت عادی */
  --sb-time-item-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--sb-time-main-color) 15%, transparent),
    color-mix(in srgb, var(--sb-time-main-color) 5%, transparent)
  );
  --sb-time-item-border: 1px solid rgba(var(--sb-time-item-rgb), 0.35);

  --sb-time-item-blur: 12px;
  --sb-time-item-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    0 4px 10px rgba(var(--sb-time-item-rgb), 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);

  /* ۴. افکت هاور (Hover) */
  --sb-time-item-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --sb-time-item-hover-transform: translateY(-2px);
  --sb-time-item-hover-bg: linear-gradient(
    180deg,
    rgba(var(--sb-time-item-rgb), 0.28) 0%,
    rgba(var(--sb-time-item-rgb), 0.14) 100%
  );
  --sb-time-item-hover-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 8px 16px rgba(var(--sb-time-item-rgb), 0.18);

  /* ۵. حالت انتخاب شده (Selected) - متن به صورت هوشمند کنتراست می‌گیرد */
  --sb-time-item-selected-bg: linear-gradient(
    135deg,
    var(--sb-time-main-color) 0%,
    color-mix(in srgb, var(--sb-time-main-color) 80%, black) 100%
  );
  --sb-time-item-selected-text: var(--sb-php-time-contrast-text, #ffffff);
  --sb-time-item-selected-border: 1px solid rgba(255, 255, 255, 0.3);
  --sb-time-item-selected-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 4px 15px rgba(var(--sb-time-item-rgb), 0.4);

  /* ۶. حالت فعال موقت / فوکوس (Active Focus) */
  --sb-time-item-active-border: var(--sb-time-main-color);
  --sb-time-item-active-bg: color-mix(
    in srgb,
    var(--sb-time-main-color) 12%,
    #ffffff
  );
  /* Disabled */
  --sb-time-item-disabled-opacity: 0.4;
  --sb-time-item-disabled-bg: var(--sb-php-time-disabled-bg, #f0b2b2);
  --sb-time-item-disabled-border: 1px solid
    rgba(var(--sb-php-time-disabled-rgb, 239, 83, 80), 0.2);
  --sb-time-item-disabled-text-decoration: line-through;

  /* Single-only */
  --sb-time-item-single-only-bg: color-mix(
    in srgb,
    var(--sb-time-main-color) 12%,
    #ffffff
  );
  --sb-time-item-single-only-border: 2px dashed
    color-mix(in srgb, var(--sb-time-main-color) 70%, #000000);
  --sb-time-item-single-only-text: color-mix(
    in srgb,
    var(--sb-time-main-color) 55%,
    #000000
  );
  --sb-time-item-single-only-after-bg: color-mix(
    in srgb,
    var(--sb-time-main-color) 70%,
    #000000
  );

  /* Break */
  --sb-time-item-break-bg: color-mix(
    in srgb,
    var(--sb-time-item-disabled-bg) 25%,
    #ffffff
  );
  --sb-time-item-break-text: color-mix(
    in srgb,
    var(--sb-time-item-disabled-bg) 45%,
    #000000
  );
  --sb-primary-btn-disabled-opacity: 0.6;
}

/* ---------------------------------
   STEP 3 – TIME SELECTION
------------------------------------ */
/* استایل اصلی سلول زمان - حالت شیشه‌ای مدرن */
.sb-time-item {
  width: var(--sb-time-item-width) !important;
  min-width: var(--sb-time-item-min-width);
  position: relative;
  color: var(--sb-time-item-text);
  font-weight: var(--sb-time-item-font-weight);
  border-radius: var(--sb-time-item-radius);
  padding: var(--sb-time-item-padding-y) var(--sb-time-item-padding-x);
  text-align: center;
  cursor: pointer;
  transition: var(--sb-time-item-transition);

  background: var(--sb-time-item-bg);
  backdrop-filter: blur(var(--sb-time-item-blur));
  -webkit-backdrop-filter: blur(var(--sb-time-item-blur));

  border: var(--sb-time-item-border);
  box-shadow: var(--sb-time-item-shadow);
}

/* افکت هاور (حس برجستگی) */
.sb-time-item:hover {
  background: color-mix(in srgb, var(--sb-time-main-color) 25%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(var(--sb-php-time-item-rgb), 0.15);
}

/* وضعیت انتخاب شده (سبز شیشه‌ای عمیق) */
.sb-time-item.selected {
  background: var(--sb-time-item-selected-bg) !important;
  color: var(--sb-time-item-selected-text) !important;
  border: var(--sb-time-item-selected-border);
  box-shadow: var(--sb-time-item-selected-shadow);
  transform: translateY(0);
}

/* اصلاح وضعیت غیرفعال (ظریف‌تر) */
.sb-time-item.disabled:not(.single-only) {
  opacity: var(--sb-time-item-disabled-opacity);
  pointer-events: none;
  background: var(--sb-time-item-disabled-bg);
  border: var(--sb-time-item-disabled-border);
  color: var(--sb-time-item-disabled-text, #666);
  text-decoration: var(--sb-time-item-disabled-text-decoration);
}

.sb-time-slots {
  display: grid !important;
  grid-template-columns: var(--sb-time-slots-columns);
  gap: var(--sb-time-slots-gap);
}

.sb-time-slots > .sb-time-item {
  width: unset !important;
}

.sb-time-item.active {
  border-color: var(--sb-time-item-active-border);
  background: var(--sb-time-item-active-bg);
}

@media (max-width: 768px) {
  .sb-time-slots {
    grid-template-columns: var(--sb-time-slots-columns-mobile);
  }

  .sb-time-item {
    padding: var(--sb-time-item-padding-y) var(--sb-time-item-padding-x);
    font-size: var(--sb-time-item-font-size-mobile);
  }
}

.sb-time-btn {
  display: flex;
  gap: var(--sb-time-btn-gap);
}

/* SINGLE ONLY */
.sb-time-item.single-only {
  background: var(--sb-time-item-single-only-bg);
  border: var(--sb-time-item-single-only-border);
  color: var(--sb-time-item-single-only-text);
  cursor: not-allowed;
}

.sb-time-item.single-only::after {
  background: var(--sb-time-item-single-only-after-bg);
}

.sb-primary-btn:disabled {
  background: var(--sb-primary-btn-disabled-bg);
  cursor: not-allowed;
  opacity: var(--sb-primary-btn-disabled-opacity);
}

.sb-time-item.disabled.sb-break {
  background: var(--sb-time-item-break-bg) !important;
  color: var(--sb-time-item-break-text);
  text-decoration: line-through;
  cursor: not-allowed;
}
/* ------------------------------------------------------------
   STEP 4 – USER INFO (Safe Variable Based)
   ------------------------------------------------------------ */

.sb-modern-wrapper {
  /* Step 4 container */
  --sb-step4-max-width: 500px;
  --sb-step4-margin: 0 auto;
  --sb-step4-padding: 22px 24px;
  --sb-step4-bg: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.78),
    rgba(255, 255, 255, 0.38)
  );
  --sb-step4-backdrop: blur(18px) saturate(160%);
  --sb-step4-radius: 22px;
  --sb-step4-border: 1px solid rgba(255, 255, 255, 0.65);
  --sb-step4-shadow:
    0 24px 60px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -18px 35px rgba(255, 255, 255, 0.22);

  /* Step 4 glow */
  --sb-step4-before-bg: radial-gradient(
    circle at 18% 12%,
    rgba(255, 255, 255, 0.85),
    transparent 40%
  );
  --sb-step4-before-opacity: 0.9;

  /* Form group */
  --sb-step4-form-group-margin-bottom: 16px;

  /* Labels */
  --sb-step4-label-color: #111827;
  --sb-step4-label-font-weight: 700;
  --sb-step4-label-font-size: 15px;
  --sb-step4-label-margin-bottom: 7px;

  /* Inputs */
  --sb-step4-input-height: 54px;
  --sb-step4-input-bg: rgba(255, 255, 255, 0.62);
  --sb-step4-input-backdrop: blur(12px);
  --sb-step4-input-border: 1px solid rgba(255, 255, 255, 0.82);
  --sb-step4-input-radius: 16px;
  --sb-step4-input-padding-x: 18px;
  --sb-step4-input-text: #111827;
  --sb-step4-input-font-size: 16px;
  --sb-step4-input-font-family: "IRANYekanX", sans-serif;
  --sb-step4-input-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -8px 18px rgba(255, 255, 255, 0.35),
    0 10px 26px rgba(15, 23, 42, 0.06);
  --sb-step4-input-transition: all 0.25s ease;

  /* Placeholder */
  --sb-step4-placeholder-color: rgba(17, 24, 39, 0.45);
  --sb-step4-placeholder-font-weight: 600;

  /* Input focus */
  --sb-step4-input-focus-border: rgba(
    var(--sb-primary-rgb, 139, 195, 74),
    0.75
  );
  --sb-step4-input-focus-bg: rgba(255, 255, 255, 0.78);
  --sb-step4-input-focus-shadow:
    0 0 0 4px rgba(var(--sb-primary-rgb, 139, 195, 74), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 30px rgba(15, 23, 42, 0.08);

  /* Step actions */
  --sb-step-actions-gap: 10px;
  --sb-step-actions-gap-mobile: 12px;

  /* Title */
  --sb-step4-title-color: #111827;
  --sb-step4-title-font-weight: 850;
  --sb-step4-title-font-size: 20px;
  --sb-step4-title-margin: 0 auto 24px auto;
  --sb-step4-title-padding-bottom: 12px;
  --sb-step4-title-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);

  /* Title underline */
  --sb-step4-title-line-width: 60px;
  --sb-step4-title-line-height: 3px;
  --sb-step4-title-line-bg: rgba(139, 195, 74, 0.3);
  --sb-step4-title-line-radius: 10px;

  /* User next button */
  --sb-user-next-text: #ffffff;
  --sb-user-next-border: 1px solid rgba(255, 255, 255, 0.55);
  --sb-user-next-shadow:
    0 14px 32px rgba(var(--sb-primary-rgb, 139, 195, 74), 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -10px 18px rgba(var(--sb-primary-dark-rgb, 36, 98, 25), 0.18);
  --sb-user-next-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  --sb-user-next-hover-transform: translateY(-2px);
  --sb-user-next-hover-shadow:
    0 14px 32px rgba(var(--sb-primary-rgb, 139, 195, 74), 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -10px 18px rgba(var(--sb-primary-dark-rgb, 36, 98, 25), 0.18);
  /* Mobile buttons */
  --sb-step-actions-btn-width-mobile: 100%;
  --sb-step-actions-btn-height-mobile: 52px;
  --sb-step-actions-btn-font-size-mobile: 16px;
  --sb-step-actions-btn-radius-mobile: 10px;
}

/* ---------------------------------
   STEP 4 – USER INFO
------------------------------------ */
#sb-step-4 {
  display: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  max-width: var(--sb-step4-max-width);
  margin: var(--sb-step4-margin);
  padding: var(--sb-step4-padding);
  background: var(--sb-step4-bg);
  backdrop-filter: var(--sb-step4-backdrop);
  -webkit-backdrop-filter: var(--sb-step4-backdrop);
  border-radius: var(--sb-step4-radius);
  border: var(--sb-step4-border);
  box-shadow: var(--sb-step4-shadow);
}

#sb-step-4::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--sb-step4-before-bg);
  opacity: var(--sb-step4-before-opacity);
}

#sb-step-4 .sb-form-group {
  margin-bottom: var(--sb-step4-form-group-margin-bottom);
}

#sb-step-4 .sb-form-group label {
  display: block;
  margin-bottom: var(--sb-step4-label-margin-bottom);
  color: var(--sb-step4-label-color);
  font-weight: var(--sb-step4-label-font-weight);
  font-size: var(--sb-step4-label-font-size);
}

#sb-step-4 .sb-form-group input {
  width: 100%;
  height: var(--sb-step4-input-height);
  box-sizing: border-box;
  background: var(--sb-step4-input-bg);
  backdrop-filter: var(--sb-step4-input-backdrop);
  -webkit-backdrop-filter: var(--sb-step4-input-backdrop);
  border: var(--sb-step4-input-border);
  border-radius: var(--sb-step4-input-radius);
  padding: 0 var(--sb-step4-input-padding-x);
  color: var(--sb-step4-input-text);
  font-size: var(--sb-step4-input-font-size);
  font-family: var(--sb-step4-input-font-family);
  box-shadow: var(--sb-step4-input-shadow);
  outline: none;
  transition: var(--sb-step4-input-transition);
}

#sb-step-4 .sb-form-group input::placeholder {
  color: var(--sb-step4-placeholder-color);
  font-weight: var(--sb-step4-placeholder-font-weight);
}

#sb-step-4 .sb-form-group input:focus {
  border-color: var(--sb-step4-input-focus-border);
  background: var(--sb-step4-input-focus-bg);
  box-shadow: var(--sb-step4-input-focus-shadow);
}

.sb-step-actions {
  display: flex;
  gap: var(--sb-step-actions-gap);
  align-items: center;
  justify-content: center;
}

#sb-step-4 .sb-step-title {
  color: var(--sb-step4-title-color);
  font-weight: var(--sb-step4-title-font-weight);
  font-size: var(--sb-step4-title-font-size);
  text-align: center;
  margin: var(--sb-step4-title-margin);
  padding-bottom: var(--sb-step4-title-padding-bottom);
  position: relative;
  display: block;
  text-shadow: var(--sb-step4-title-shadow);
}

/* اضافه کردن یک خط جداکننده شیشه‌ای و ظریف زیر تایتل */
#sb-step-4 .sb-step-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--sb-step-header-line-width);
  height: var(--sb-step-header-line-height);
  background: var(--sb-step-header-line-bg);
  border-radius: var(--sb-step-header-line-radius);
}

#sb-user-next {
  color: var(--sb-user-next-text);
  border: var(--sb-user-next-border) !important;
  box-shadow: var(--sb-user-next-shadow);
  text-shadow: var(--sb-user-next-text-shadow);
}

#sb-user-next:hover {
  transform: var(--sb-user-next-hover-transform);
  box-shadow: var(--sb-user-next-hover-shadow);
}

@media (max-width: 600px) {
  .sb-step-actions {
    flex-direction: column;
    gap: var(--sb-step-actions-gap-mobile);
  }

  .sb-step-actions button {
    width: var(--sb-step-actions-btn-width-mobile);
    height: var(--sb-step-actions-btn-height-mobile);
    font-size: var(--sb-step-actions-btn-font-size-mobile);
    border-radius: var(--sb-step-actions-btn-radius-mobile);
  }
}
/* ------------------------------------------------------------
   STEP 5 – CONFIRMATION (Safe Variable Based)
   ------------------------------------------------------------ */

.sb-modern-wrapper {
  /* Confirmation Card Base (First definition variables) */
  --sb-confirm-bg-gradient-1: linear-gradient(180deg, #8bc34a, #5f8f2f);
  --sb-confirm-text-color: #ffffff;

  /* Primary Action Button (Submit) */
  --sb-submit-bg: linear-gradient(135deg, #8bc34a, #7cb342);
  --sb-submit-shadow: 0 12px 28px rgba(139, 195, 74, 0.45);

  /* Confirmation Card Refined (Second definition variables) */
  --sb-confirm-max-width: 520px;
  --sb-confirm-margin: 20px auto;
  --sb-confirm-bg-gradient-2: linear-gradient(135deg, #7fbf3f, #5fa12e);
  --sb-confirm-radius: 14px;
  --sb-confirm-padding: 20px 22px;
  --sb-confirm-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

  /* Service Item Title */
  --sb-confirm-title-size: 18px;
  --sb-confirm-title-weight: 700;
  --sb-confirm-title-margin: 0 0 14px;
  --sb-confirm-title-letter-spacing: 0.5px;

  /* Rows */
  --sb-confirm-row-font-size: 14px;
  --sb-confirm-row-padding: 6px 0;
  --sb-confirm-row-label-opacity: 0.85;
  --sb-confirm-row-value-weight: 600;

  /* Deposit Highlight Box */
  --sb-confirm-deposit-bg: rgba(255, 255, 255, 0.15);
  --sb-confirm-deposit-radius: 8px;
  --sb-confirm-deposit-padding: 8px 12px;
  --sb-confirm-deposit-margin-top: 8px;

  /* Divider & Final Details Section */
  --sb-confirm-final-margin-top: 18px;
  --sb-confirm-final-padding-top: 14px;
  --sb-confirm-final-border-top: 1px dashed rgba(255, 255, 255, 0.35);
  --sb-confirm-final-font-size: 14px;
  --sb-confirm-final-line-height: 1.7;
  --sb-confirm-final-weight: 600;

  /* Responsive Variables */
  --sb-confirm-padding-mobile: 16px;
  --sb-confirm-title-size-mobile: 16px;
}

/* ---------------------------------
   STEP 5 – CONFIRMATION
------------------------------------ */
#sb-confirmation-details {
  background: var(--sb-confirm-bg-gradient-1);
  color: var(--sb-confirm-text-color);
}

#sb-submit-booking {
  background: var(--sb-submit-bg);
  box-shadow: var(--sb-submit-shadow);
}

/* ================================
   Booking Confirmation Card
================================ */
#sb-confirmation-details {
  max-width: var(--sb-confirm-max-width);
  margin: var(--sb-confirm-margin);
  background: var(--sb-confirm-bg-gradient-2);
  border-radius: var(--sb-confirm-radius);
  padding: var(--sb-confirm-padding);
  color: var(--sb-confirm-text-color);
  box-shadow: var(--sb-confirm-shadow);
}

/* Service item */
.sb-confirm-item h4 {
  font-size: var(--sb-confirm-title-size);
  font-weight: var(--sb-confirm-title-weight);
  margin: var(--sb-confirm-title-margin);
  letter-spacing: var(--sb-confirm-title-letter-spacing);
}

/* Rows */
.sb-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--sb-confirm-row-font-size);
  padding: var(--sb-confirm-row-padding);
}

.sb-confirm-row span {
  opacity: var(--sb-confirm-row-label-opacity);
}

.sb-confirm-row strong {
  font-weight: var(--sb-confirm-row-value-weight);
}

/* Deposit highlight */
.sb-deposit-info {
  background: var(--sb-confirm-deposit-bg);
  border-radius: var(--sb-confirm-deposit-radius);
  padding: var(--sb-confirm-deposit-padding);
  margin-top: var(--sb-confirm-deposit-margin-top);
}

/* Divider + final date time */
.sb-confirm-final {
  margin-top: var(--sb-confirm-final-margin-top);
  padding-top: var(--sb-confirm-final-padding-top);
  border-top: var(--sb-confirm-final-border-top);
  font-size: var(--sb-confirm-final-font-size);
  line-height: var(--sb-confirm-final-line-height);
}

.sb-confirm-final strong {
  font-weight: var(--sb-confirm-final-weight);
}

/* Responsive */
@media (max-width: 480px) {
  #sb-confirmation-details {
    padding: var(--sb-confirm-padding-mobile);
  }

  .sb-confirm-item h4 {
    font-size: var(--sb-confirm-title-size-mobile);
  }
}

/* ------------------------------------------------------------
   VERIFY / SUCCESS MODAL
------------------------------------------------------------ */

.sb-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sb-modal[style*="display: block"],
.sb-modal.is-open {
  display: flex !important;
}

.sb-modal-content {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 22px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(139, 195, 74, 0.18);
  animation: sbFadeUp 0.28s ease;
}

.sb-modal-content h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: #1e293b;
}

.sb-modal-content p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 2;
  color: #475569;
}

#sb-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid var(--sb-primary-color-dark, #6ea62d);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    var(--sb-primary-hover-start, #9ad95a) 0%,
    var(--sb-primary-hover-end, #8bc34a) 100%
  );
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 10px 24px rgba(71, 78, 62, 0.28);
}

#sb-modal-close:hover {
  background: linear-gradient(
    180deg,
    var(--sb-primary-color, #8bc34a) 0%,
    var(--sb-primary-color-dark, #74a93a) 100%
  );
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(74, 80, 68, 0.34);
}

#sb-modal-close:active {
  transform: translateY(0);
}

@keyframes sbFadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ------------------------------------------------------------
   STEP 5 — PAYMENT (PRO UI / Safe Variable Based)
   ------------------------------------------------------------ */

.sb-modern-wrapper {
  /* Payment content */
  --sb-payment-content-margin-top: 24px;

  /* Payment box */
  --sb-payment-box-z-index: 5;
  --sb-payment-box-max-width: 680px;
  --sb-payment-box-margin: 0 auto;
  --sb-payment-box-bg: rgba(255, 255, 255, 0.45);
  --sb-payment-box-backdrop: blur(15px);
  --sb-payment-box-radius: 20px;
  --sb-payment-box-padding: 28px 32px 32px;
  --sb-payment-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);

  /* Payment box paragraph */
  --sb-payment-box-text-margin: 0 0 20px;
  --sb-payment-box-text-font-size: 16px;
  --sb-payment-box-text-color: #333;

  /* Payment methods wrapper */
  --sb-payment-methods-gap: 14px;
  --sb-payment-methods-margin-bottom: 24px;

  /* Payment method card */
  --sb-payment-method-label-padding: 18px 20px;
  --sb-payment-method-label-radius: 14px;
  --sb-payment-method-label-border: 2px solid #e5e7eb;
  --sb-payment-method-label-bg: #fafafa;
  --sb-payment-method-label-font-size: 16px;
  --sb-payment-method-label-transition: all 0.25s ease;
  /* Radio */
  --sb-payment-radio-size: 20px;

  --sb-user-next-shadow:
    0 14px 32px rgba(var(--sb-primary-rgb, 139, 195, 74), 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -10px 18px rgba(var(--sb-primary-dark-rgb, 36, 98, 25), 0.18);

  --sb-payment-radio-accent: var(--sb-primary-color, #8bc34a);
  --sb-payment-method-selected-border: var(--sb-primary-color, #8bc34a);
  --sb-payment-method-selected-bg: linear-gradient(
    0deg,
    color-mix(in srgb, var(--sb-primary-color, #8bc34a) 12%, white),
    #ffffff
  );
  /* Checked state */
  --sb-payment-radio-checked-transform: scale(1.1);
  /* Paid button */
  --sb-card-paid-btn-cursor: pointer;
}

/* =========================================================
   STEP 5 — PAYMENT (PRO UI ✅)
========================================================= */

#sb-payment-content {
  margin-top: var(--sb-payment-content-margin-top);
}

/* -------------------------------
   payment box
-------------------------------- */

.sb-payment-box {
  position: relative !important;
  z-index: var(--sb-payment-box-z-index) !important;
  max-width: var(--sb-payment-box-max-width);
  margin: var(--sb-payment-box-margin);
  background: var(--sb-payment-box-bg) !important;
  backdrop-filter: var(--sb-payment-box-backdrop) !important;
  -webkit-backdrop-filter: var(--sb-payment-box-backdrop) !important;
  border-radius: var(--sb-payment-box-radius);
  padding: var(--sb-payment-box-padding);
  box-shadow: var(--sb-payment-box-shadow);
}

.sb-payment-box p {
  margin: var(--sb-payment-box-text-margin);
  font-size: var(--sb-payment-box-text-font-size);
  color: var(--sb-payment-box-text-color);
}

/* -------------------------------
   payment methods (cards)
-------------------------------- */

#sb-payment-methods {
  display: flex;
  flex-direction: column;
  gap: var(--sb-payment-methods-gap);
  margin-bottom: var(--sb-payment-methods-margin-bottom);
}

#sb-payment-methods label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sb-payment-method-label-padding);
  border-radius: var(--sb-payment-method-label-radius);
  border: var(--sb-payment-method-label-border);
  background: var(--sb-payment-method-label-bg);
  cursor: pointer;
  transition: var(--sb-payment-method-label-transition);
  font-size: var(--sb-payment-method-label-font-size);
}

/* hover */
#sb-payment-methods label:hover {
  border-color: var(--sb-payment-method-selected-border);
  background: var(--sb-payment-method-selected-bg);
}

/* radio */
#sb-payment-methods input[type="radio"] {
  width: var(--sb-payment-radio-size);
  height: var(--sb-payment-radio-size);
  accent-color: var(--sb-payment-radio-accent);
  cursor: pointer;
}

/* selected state */
#sb-payment-methods input[type="radio"]:checked {
  transform: var(--sb-payment-radio-checked-transform);
}

#sb-payment-methods input[type="radio"]:checked + span,
#sb-payment-methods label:has(input:checked) {
  border-color: var(--sb-payment-method-selected-border);
  background: var(--sb-payment-method-selected-bg);
}

#sb-card-paid-btn {
  cursor: var(--sb-card-paid-btn-cursor);
  font-family: var(--sb-font-family-base);
}

/* ------------------------------------------------------------
   CONTINUE BUTTON (GATEWAY) - 3D LIQUID GLASS (Safe Variable Based)
   + CARD TO CARD BOX (Safe Variable Based)
   NOTE: selector logic unchanged ✅
------------------------------------------------------------ */

.sb-modern-wrapper {
  /* ===============================
     CONTINUE BUTTON TOKENS
  =============================== */

  --sb-continue-btn-width: 100%;
  --sb-continue-btn-height: 54px;

  --sb-continue-btn-font-family: "IRANYekanX", "IRANSans", sans-serif;
  --sb-continue-btn-font-size: 16px;
  --sb-continue-btn-font-weight: 850;

  --sb-continue-btn-radius: 14px;
  --sb-continue-btn-gap: 8px;

  --sb-continue-btn-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  --sb-continue-btn-text-color: #ffffff;
  --sb-continue-btn-border: 1px solid rgba(255, 255, 255, 0.25);

  /* Base background */
  --sb-continue-btn-bg: linear-gradient(
    145deg,
    var(--sb-primary-color),
    var(--sb-primary-color-dark)
  );

  /* 3D shadows */
  --sb-continue-btn-shadow: var(
    --sb-php-badge-hover-shadow-color,
    rgba(139, 195, 74, 0.2)
  );

  /* Liquid glare overlay */
  --sb-continue-btn-glare-left: -50%;
  --sb-continue-btn-glare-width: 200%;
  --sb-continue-btn-glare-height: 100%;
  --sb-continue-btn-glare-bg: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  --sb-continue-btn-glare-skew: skewX(-25deg);
  --sb-continue-btn-glare-transition: 0.75s;
  --sb-continue-btn-glare-hover-left: 125%;

  /* Hover */
  --sb-continue-btn-hover-transform: translateY(-2px);
  --sb-continue-btn-hover-bg: var(
    --sb-php-badge-hover-shadow-color,
    rgba(139, 195, 74, 0.2)
  );
  --sb-continue-btn-hover-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 0 rgba(0, 0, 0, 0.2),
    0 12px 24px rgba(110, 124, 99, 0.45);

  /* Active */
  --sb-continue-btn-active-transform: translateY(2px);
  --sb-continue-btn-active-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.15), 0 3px 10px rgba(102, 168, 50, 0.25);

  /* Disabled */
  --sb-continue-btn-disabled-opacity: 0.55;
  --sb-continue-btn-disabled-cursor: not-allowed;
  --sb-continue-btn-disabled-bg: #ccc;
  --sb-continue-btn-disabled-border-color: transparent;
  --sb-continue-btn-disabled-shadow: none;

  /* ===============================
     CARD TO CARD TOKENS
  =============================== */

  --sb-card-to-card-margin-top: 28px;

  /* Card container */
  --sb-card-info-radius: 16px;
  --sb-card-info-padding: 22px;
  --sb-card-info-bg: #f9fbfc;
  --sb-card-info-border: 1px dashed #cfd8dc;

  /* Info text */
  --sb-card-info-text-size: 15px;
  --sb-card-info-text-color: #333;
  --sb-card-info-text-margin-bottom: 14px;

  /* Card number row */
  --sb-card-number-gap: 14px;
  --sb-card-number-padding: 14px 16px;
  --sb-card-number-radius: 12px;
  --sb-card-number-bg: #ffffff;
  --sb-card-number-border: 1px solid #e0e0e0;
  --sb-card-number-margin-bottom: 16px;
  --sb-card-number-font-size: 16px;
  --sb-card-number-font-weight: 500;

  /* Copy button */
  --sb-card-copy-btn-bg: #eef6e5;
  --sb-card-copy-btn-border: 1px solid #7fbf3f;
  --sb-card-copy-btn-text: #4f8a1d;
  --sb-card-copy-btn-padding: 8px 14px;
  --sb-card-copy-btn-radius: 10px;
  --sb-card-copy-btn-font-size: 14px;
  --sb-card-copy-btn-font-weight: 500;
  --sb-card-copy-btn-transition: all 0.2s ease;

  --sb-card-copy-btn-hover-bg: #7fbf3f;
  --sb-card-copy-btn-hover-text: #ffffff;

  /* Textarea */
  --sb-card-desc-width: 100%;
  --sb-card-desc-min-height: 100px;
  --sb-card-desc-resize: vertical;
  --sb-card-desc-padding: 14px;
  --sb-card-desc-radius: 12px;
  --sb-card-desc-border: 1px solid #d1d5db;
  --sb-card-desc-font-size: 14px;
  --sb-card-desc-margin: 14px 0;

  /* Paid button (only values; selector must remain) */
  --sb-card-paid-btn-width: 100%;
  --sb-card-paid-btn-height: 52px;
  --sb-card-paid-btn-font-size: 15px;
  --sb-card-paid-btn-font-weight: 600;
  --sb-card-paid-btn-radius: 14px;

  --sb-card-paid-btn-disabled-opacity: 0.45;
  --sb-card-paid-btn-disabled-cursor: not-allowed;

  /* ===============================
     RESPONSIVE TOKENS (<=600px)
  =============================== */

  --sb-payment-box-padding-mobile: 22px;

  --sb-card-number-mobile-direction: column;
  --sb-card-number-mobile-align-items: stretch;

  --sb-card-copy-btn-mobile-width: 100%;
  --sb-card-copy-btn-mobile-text-align: center;
}

/* -------------------------------
   CONTINUE BUTTON (GATEWAY) - 3D LIQUID GLASS
-------------------------------- */

#sb-continue-btn {
  width: var(--sb-continue-btn-width);
  height: var(--sb-continue-btn-height);

  font-family: var(--sb-continue-btn-font-family);
  font-size: var(--sb-continue-btn-font-size);
  font-weight: var(--sb-continue-btn-font-weight);

  border-radius: var(--sb-continue-btn-radius);
  cursor: pointer;
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sb-continue-btn-gap);

  transition: var(--sb-continue-btn-transition);

  color: var(--sb-continue-btn-text-color);
  border: var(--sb-continue-btn-border);

  background: var(--sb-continue-btn-bg) !important;

  box-shadow: var(--sb-continue-btn-shadow);
}

#sb-continue-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sb-continue-btn-glare-left);
  width: var(--sb-continue-btn-glare-width);
  height: var(--sb-continue-btn-glare-height);
  background: var(--sb-continue-btn-glare-bg);
  transform: var(--sb-continue-btn-glare-skew);
  transition: var(--sb-continue-btn-glare-transition);
  pointer-events: none;
}

#sb-continue-btn:hover {
  transform: var(--sb-continue-btn-hover-transform);
  background: var(--sb-continue-btn-hover-bg);
  box-shadow: var(--sb-continue-btn-hover-shadow);
}

#sb-continue-btn:hover::before {
  left: var(--sb-continue-btn-glare-hover-left);
}

#sb-continue-btn:active {
  transform: var(--sb-continue-btn-active-transform);
  box-shadow: var(--sb-continue-btn-active-shadow);
}

#sb-continue-btn:disabled {
  opacity: var(--sb-continue-btn-disabled-opacity);
  cursor: var(--sb-continue-btn-disabled-cursor);
  transform: none !important;
  background: var(--sb-continue-btn-disabled-bg) !important;
  border-color: var(--sb-continue-btn-disabled-border-color);
  box-shadow: var(--sb-continue-btn-disabled-shadow) !important;
}

/* =========================================================
   CARD TO CARD BOX
========================================================= */

#sb-card-to-card-box {
  margin-top: var(--sb-card-to-card-margin-top);
}

/* card container */
.sb-card-info {
  border-radius: var(--sb-card-info-radius);
  padding: var(--sb-card-info-padding);
  background: var(--sb-card-info-bg);
  border: var(--sb-card-info-border);
}

/* info text */
.sb-card-info p {
  font-size: var(--sb-card-info-text-size);
  color: var(--sb-card-info-text-color);
  margin-bottom: var(--sb-card-info-text-margin-bottom);
}

/* card number */
.sb-card-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sb-card-number-gap);
  padding: var(--sb-card-number-padding);
  border-radius: var(--sb-card-number-radius);
  background: var(--sb-card-number-bg);
  border: var(--sb-card-number-border);
  margin-bottom: var(--sb-card-number-margin-bottom);
  font-size: var(--sb-card-number-font-size);
  font-weight: var(--sb-card-number-font-weight);
}

/* copy button */
.sb-card-number button,
.sb-copy-card {
  background: linear-gradient(
    180deg,
    var(--sb-primary-hover-start),
    var(--sb-primary-hover-end)
  );
  border: 1px solid var(--sb-primary-color-dark);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--sb-font-family-base);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.sb-card-number button:hover {
  background: var(--sb-card-copy-btn-hover-bg);
  color: var(--sb-card-copy-btn-hover-text);
}

/* textarea */
#sb-card-desc {
  width: var(--sb-card-desc-width);
  min-height: var(--sb-card-desc-min-height);
  resize: var(--sb-card-desc-resize);
  padding: var(--sb-card-desc-padding);
  border-radius: var(--sb-card-desc-radius);
  border: var(--sb-card-desc-border);
  font-size: var(--sb-card-desc-font-size);
}

/* file input */
#sb-card-proof {
  font-size: var(--sb-card-proof-font-size);
}

/* paid button */
#sb-card-paid-btn {
  width: var(--sb-card-paid-btn-width);
  height: var(--sb-card-paid-btn-height);
  font-size: var(--sb-card-paid-btn-font-size);
  font-weight: var(--sb-card-paid-btn-font-weight);
  border-radius: var(--sb-card-paid-btn-radius);
}

#sb-card-paid-btn:disabled {
  opacity: var(--sb-card-paid-btn-disabled-opacity);
  cursor: var(--sb-card-paid-btn-disabled-cursor);
}
.sb-file-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 10px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  direction: rtl;
  flex-wrap: wrap;
}

.sb-file-input {
  display: none !important;
}

.sb-file-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    var(--sb-primary-hover-start),
    var(--sb-primary-hover-end)
  );
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 10px 24px rgba(145, 151, 140, 0.28);
}

.sb-file-upload-btn:hover {
  background: linear-gradient(
    180deg,
    var(--sb-primary-hover-start),
    var(--sb-primary-color-dark)
  );
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(162, 165, 158, 0.34);
}

.sb-file-upload-btn:active {
  transform: translateY(0);
}

.sb-file-name {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  line-height: 1.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #e2e8f0;
}

/* -------------------------------
   responsive
-------------------------------- */

@media (max-width: 600px) {
  .sb-payment-box {
    padding: var(--sb-payment-box-padding-mobile);
  }

  .sb-card-number {
    flex-direction: var(--sb-card-number-mobile-direction);
    align-items: var(--sb-card-number-mobile-align-items);
  }

  .sb-card-number button {
    width: var(--sb-card-copy-btn-mobile-width);
    text-align: var(--sb-card-copy-btn-mobile-text-align);
  }
}
/* تعریف انیمیشن شیمر */
@keyframes sb-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.sb-shimmer-item {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: sb-shimmer 1.5s infinite linear;
  border-radius: 12px;
}

/* استایل کانتینر اسکلت تقویم */
.sb-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 10px;
}

.sb-skeleton-day {
  height: 50px;
  background-color: rgba(255, 255, 255, 0.15); /* هماهنگ با حالت Liquid Glass */
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

.sb-skeleton-day::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: sb-shimmer 1.5s infinite;
}

.sb-skeleton-header {
  height: 40px;
  width: 150px;
  margin: 10px auto 20px;
  background-color: rgba(255, 255, 255, 0.15);
}