/* ==========================================================
   صفحهٔ اول — بازطراحی با سیستم توکن
   ==========================================================
   این فایل فقط صفحهٔ اول را ارتقا می‌دهد و بعد از style.css
   بارگذاری می‌شود. همهٔ مقادیر از tokens.css می‌آیند.
   ========================================================== */

/* ---------- آیکون‌های SVG ----------
   جایگزین ایموجی؛ ایموجی روی هر سیستم شکل متفاوتی دارد، اندازه‌اش
   قابل کنترل نیست و اسکرین‌ریدر آن را بلند می‌خواند. */
.ico-svg {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.15em;
}

/* ==========================================================
   هیرو
   ========================================================== */
.hero-inner { max-width: 700px; }

.hero-badge {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
  font-weight: var(--fw-medium);
  letter-spacing: .01em;
}

.hero h1 {
  font-size: clamp(1.9rem, 4.5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}

.hero-lead {
  font-size: clamp(var(--text-base), 1.6vw, var(--text-lg));
  line-height: var(--leading-normal);
  max-width: 56ch;
}

/* ==========================================================
   کارت اتاق — بازچینش سلسله‌مراتب
   ----------------------------------------------------------
   قیمت مهم‌ترین عنصر بعد از عکس است، پس بزرگ‌ترین وزن بصری را
   می‌گیرد. کل کارت کلیک‌پذیر است (نه فقط عنوان) تا ناحیهٔ لمسی
   بزرگ باشد، ولی دکمهٔ رزرو مسیر جداگانهٔ خودش را حفظ می‌کند.
   ========================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}

.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}

.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease);
}
.card:hover .card-media img { transform: scale(1.04); }

/* برچسب ظرفیت و تخفیف */
.card-badge {
  position: absolute;
  top: var(--space-3);
  inset-inline-end: var(--space-3);
  background: rgba(36, 27, 30, .78);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: 5px 11px;
  border-radius: var(--radius-full);
  line-height: 1;
}

/* برچسب تخفیف — طلایی با متن تیره (سفید روی طلایی ناخواناست) */
.card-badge.discount {
  top: auto;
  bottom: var(--space-3);
  inset-inline-end: auto;
  inset-inline-start: var(--space-3);
  background: var(--color-gold);
  color: var(--color-on-gold);
}

.card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  margin: 0;
}
.card-title a { color: var(--color-fg); text-decoration: none; }

/* کل کارت کلیک‌پذیر — ناحیهٔ لمسی بزرگ‌تر از خود متن عنوان */
.card-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}
.card-meta span { display: inline-flex; align-items: center; gap: 5px; }

.card-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-fg-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-foot {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.price-from {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  margin-bottom: 2px;
}

.price-original {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: line-through;
  line-height: 1.2;
}

/* قیمت = مهم‌ترین عدد کارت */
.price-main {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1.15;
  white-space: nowrap;
}
.price-unit {
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--color-fg-muted);
}

/* دکمهٔ رزرو باید روی لایهٔ لینکِ کارت باشد تا کلیکش جدا بماند */
.card-foot .btn { position: relative; z-index: 2; }

/* ==========================================================
   دکمه‌ها
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 11px 22px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-sm { min-height: 38px; padding: 8px 16px; font-size: var(--text-xs); }
.btn-lg { min-height: 52px; padding: 15px 32px; font-size: var(--text-base); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn-primary:focus-visible { box-shadow: var(--focus-ring); }

/* CTA اصلی رزرو — طلایی تیره، برای جلب توجه بیشتر از دکمهٔ برند */
.btn-book {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow);
}
.btn-book:hover {
  background: var(--color-accent-hover);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.btn-book:focus-visible { box-shadow: var(--focus-ring-accent); }

.btn-outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}
.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-50);
}

.btn-white { background: #fff; color: var(--color-fg); }
.btn-white:hover { background: var(--color-bg); }

/* حالت بارگذاری — بعد از کلیک، دکمه قفل و اسپینر نشان داده می‌شود
   تا کاربر نداند کلیکش ثبت نشده و دوباره نزند */
.btn.is-loading {
  pointer-events: none;
  opacity: .75;
  position: relative;
  color: transparent !important;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
  color: #fff;
}
.btn-outline.is-loading::after,
.btn-white.is-loading::after { color: var(--color-fg); }

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ==========================================================
   سرفصل بخش‌ها
   ========================================================== */
.section-head { text-align: center; margin-bottom: var(--space-6); }

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  color: var(--color-gold-text);
  margin-bottom: var(--space-2);
}

.section-head h2 {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}

.section-head p {
  color: var(--color-fg-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  max-width: 60ch;
  margin: 0 auto;
}

/* ==========================================================
   کارت امکانات
   ========================================================== */
.feature {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
.feature:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.feature .ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-50);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.feature .ico .ico-svg { width: 22px; height: 22px; }

.feature h3 {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-1);
}
.feature p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-fg-muted);
  margin: 0;
}

/* ==========================================================
   حالت خالی — وقتی اتاقی برای نمایش نیست
   ========================================================== */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.empty-state .ico-svg {
  width: 44px;
  height: 44px;
  color: var(--color-fg-muted);
  margin-bottom: var(--space-3);
}
.empty-state h3 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.empty-state p { color: var(--color-fg-muted); margin: 0 0 var(--space-4); }

/* ==========================================================
   ریسپانسیو
   ========================================================== */
@media (max-width: 720px) {
  .card-foot { flex-direction: column; align-items: stretch; }
  .card-foot .btn { width: 100%; }
  .price-main { font-size: var(--text-lg); }
}