/* ==========================================================
   کامپوننت‌های مشترک سایت — بر پایهٔ سیستم توکن
   ==========================================================
   بعد از style.css بارگذاری می‌شود و آن را بازنویسی می‌کند.
   همهٔ مقادیر از tokens.css می‌آیند؛ هیچ رنگ یا اندازهٔ خامی
   مستقیم اینجا نوشته نشده تا تغییر برند فقط یک‌جا انجام شود.

   شامل: دکمه‌ها، کارت اتاق، کارت امکانات، سرفصل بخش، حالت خالی،
          فرم، هشدار، جدول، و حالت‌های loading/error.
   ========================================================== */

/* ---------- آیکون‌های 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: .8;
  position: relative;
}
/* آیکون معمولی دکمه جای خود را به اسپینر می‌دهد */
.btn.is-loading .ico-svg { display: none; }
.btn.is-loading::before {
  content: '';
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
/* دکمهٔ بدون برچسب متنی: متن پنهان شود تا فقط اسپینر بماند */
.btn.is-loading:not(:has(.btn-label)) { color: transparent; }
.btn.is-loading:not(:has(.btn-label))::before {
  position: absolute;
  color: #fff;
}
.btn-outline.is-loading:not(:has(.btn-label))::before,
.btn-white.is-loading:not(:has(.btn-label))::before { 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); }

/* ==========================================================
   صفحهٔ رزرو — ردیف اتاق و پلن
   ----------------------------------------------------------
   این کلاس‌ها در booking.css تعریف شده‌اند و اینجا فقط اندازه و
   رنگ آیکون SVG جایگزینِ ایموجی تنظیم می‌شود.
   ========================================================== */
.room-row-specs .spec .ico-svg {
  width: 16px;
  height: 16px;
  color: var(--color-gold-text);
  flex-shrink: 0;
}
.plan-name .ico-svg {
  width: 18px;
  height: 18px;
  color: var(--color-gold-text);
  flex-shrink: 0;
}
.chip .ico-svg { width: 13px; height: 13px; flex-shrink: 0; }

/* دایرهٔ نتیجه (پرداخت موفق/ناموفق، وضعیت رزرو) */
.result-icon .ico-svg { width: 40px; height: 40px; stroke-width: 2.2; }
.summary-item .ico-svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ==========================================================
   فهرست امکانات
   ========================================================== */
.group-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
}
/* خط طلایی کنار عنوان گروه — تزئینی، برای اسکرین‌ریدر بی‌معناست */
.group-title::before {
  content: '';
  width: 5px;
  height: 22px;
  border-radius: 3px;
  background: var(--color-gold);
  flex-shrink: 0;
}

.amenity-grid { gap: var(--space-3); }
.amenity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  min-height: 56px;
  transition: border-color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}
.amenity:hover { border-color: var(--color-gold-light); background: var(--brand-gold-50); }
.amenity .ico-svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-gold-text);
}

/* ==========================================================
   ردیف‌های صفحهٔ تماس
   ========================================================== */
.contact-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.contact-row.is-last { border-bottom: none; }
.contact-ico {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-ico .ico-svg { width: 20px; height: 20px; color: var(--color-primary); }

/* ==========================================================
   هدر و فوتر — آیکون‌های جایگزین ایموجی
   ========================================================== */
.topbar-links .ico-svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-inline-end: 4px;
}
.footer-contact li .ico-svg {
  width: 17px;
  height: 17px;
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 3px;
}
.social a .ico-svg { width: 19px; height: 19px; }

/* عنوان بخش‌های صفحهٔ قوانین — آیکون کنار تیتر */
.rule-block h3,
h3 > .ico-svg { vertical-align: middle; }
h3 > .ico-svg {
  width: 20px;
  height: 20px;
  color: var(--color-gold-text);
  margin-inline-end: 8px;
}

/* آیکون بزرگ تزئینی (کافه بازی، بلوک‌های تصویری) */
.big-ico .ico-svg {
  width: 56px;
  height: 56px;
  stroke-width: 1.4;
  color: var(--color-primary);
  opacity: .65;
}

/* ==========================================================
   فرم — نقطهٔ حساس رزرو
   ----------------------------------------------------------
   قواعد رعایت‌شده:
   • لیبل همیشه دیده شود (placeholder جای لیبل نیست — با تایپ محو
     می‌شود و کاربر یادش می‌رود این فیلد چه بود)
   • ارتفاع ورودی ≥ ۴۴px برای لمس راحت روی موبایل
   • حلقهٔ فوکوس واضح برای کاربر کیبورد
   • خطا کنار همان فیلد، نه فقط بالای فرم
   ========================================================== */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.form-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-4);
}

.form-group { margin-bottom: var(--space-4); }

.form-group label,
.field > label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-fg-secondary);
  margin-bottom: var(--space-2);
}

.form-control,
.field-input,
.inp {
  width: 100%;
  min-height: var(--touch-min);
  padding: 11px 14px;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-fg);
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}

.form-control:hover,
.field-input:hover,
.inp:hover { border-color: var(--color-border-strong); }

.form-control:focus,
.field-input:focus,
.inp:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.form-control::placeholder { color: var(--color-fg-muted); }

/* فیلد دارای خطا — .error نامی است که کد فعلی می‌سازد */
.form-control.error,
.form-control[aria-invalid="true"],
.field-input.error {
  border-color: var(--color-destructive);
  background: var(--color-destructive-bg);
}
.form-control.error:focus,
.form-control[aria-invalid="true"]:focus,
.field-input.error:focus {
  border-color: var(--color-destructive);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .18);
}

.form-group label .req { color: var(--color-destructive); margin-inline-start: 2px; }

/* پیام خطای زیر فیلد — کنار همان فیلد، نه فقط بالای فرم */
.form-error,
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 6px;
  /* ۱۲px کف خواناست؛ مقدار قبلی ۱۱.۸px بود */
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-destructive);
  line-height: var(--leading-snug);
}
.form-error .ico-svg,
.field-error .ico-svg { width: 14px; height: 14px; margin-top: 1px; flex-shrink: 0; }

/* پیام موفقیت زیر فیلد (مثلاً کد ملی معتبر) */
.form-success,
.field-ok {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-success);
}
.form-success .ico-svg,
.field-ok .ico-svg { width: 14px; height: 14px; flex-shrink: 0; }

.form-hint,
.field-hint {
  margin-top: 5px;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  line-height: var(--leading-snug);
}

.field { position: relative; }
.field-arrow {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 15px;
  color: var(--color-fg-muted);
  pointer-events: none;
  font-size: .7rem;
}
select.field-input,
select.inp { appearance: none; cursor: pointer; padding-inline-start: 34px; }

/* ==========================================================
   هشدارها
   ========================================================== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
}
.alert > span:first-child,
.alert .ico-svg { flex-shrink: 0; }
.alert .ico-svg { width: 18px; height: 18px; margin-top: 2px; }
.alert b { font-weight: var(--fw-semibold); }

.alert-info {
  background: var(--color-info-bg);
  border-color: var(--color-primary-100);
  color: var(--color-fg-secondary);
}
.alert-info .ico-svg { color: var(--color-primary); }

.alert-ok {
  background: var(--color-success-bg);
  border-color: #bfe3d0;
  color: var(--color-success-fg);
}
.alert-ok .ico-svg { color: var(--color-success); }

.alert-warn {
  background: var(--color-warning-bg);
  border-color: #f0dcb8;
  color: var(--color-warning-fg);
}
.alert-warn .ico-svg { color: var(--color-warning); }

.alert-bad {
  background: var(--color-destructive-bg);
  border-color: #f5cdc9;
  color: #8c1e17;
}
.alert-bad .ico-svg { color: var(--color-destructive); }

/* ==========================================================
   برچسب و چیپ
   ========================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  border: 1px solid transparent;
}
.badge.ok    { background: var(--color-success-bg); color: var(--color-success-fg); border-color: #bfe3d0; }
.badge.warn  { background: var(--color-warning-bg); color: var(--color-warning-fg); border-color: #f0dcb8; }
.badge.bad   { background: var(--color-destructive-bg); color: #8c1e17; border-color: #f5cdc9; }
.badge.muted { background: var(--color-border-light); color: var(--color-fg-muted); border-color: var(--color-border); }

.badge .ico-svg { width: 13px; height: 13px; flex-shrink: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  background: var(--color-primary-50);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-100);
}
.chip.gold  { background: var(--brand-gold-50); color: var(--color-gold-text); border-color: #f0e2b8; }
.chip.plain { background: var(--color-border-light); color: var(--color-fg-secondary); border-color: var(--color-border); }

/* ==========================================================
   کارت خلاصه (واچر، تسویه‌حساب)
   ========================================================== */
.summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.summary-card-head {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-4);
}
.summary-card-head h4 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
}
.summary-card-head .sub {
  font-size: var(--text-xs);
  opacity: .85;
  margin-top: 3px;
}
.summary-card-body { padding: var(--space-4); }

.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-light);
}
.summary-row:last-child { border-bottom: none; }
.summary-row .lbl { color: var(--color-fg-muted); }
.summary-row .val { font-weight: var(--fw-semibold); text-align: end; }

.summary-row.total {
  border-top: 1px solid var(--color-border);
  border-bottom: none;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  font-size: var(--text-lg);
}
.summary-row.total .val { color: var(--color-primary); font-weight: var(--fw-bold); }

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