/* =========================================================
   سپید۲۴ — استایل صفحات اختصاصی (آرشیو تور/هتل، قطار، ویزا)
   سازگار با زبان طراحی sp-* صفحه اصلی — RTL
   v1.0.0
   ========================================================= */

:root {
  --spx-primary: #1f4bd8;
  --spx-primary-2: #16369c;
  --spx-accent: #ffb703;
  --spx-ink: #1b2559;
  --spx-muted: #5b6478;
  --spx-line: #e8ecf4;
  --spx-bg: #f4f7fd;
  --spx-card: #ffffff;
  --spx-green: #0d9f6e;
  --spx-shadow: 0 10px 30px rgba(27, 37, 89, .08);
}

/* ---------- اسکلت ---------- */
.spx { background: var(--spx-bg); padding-bottom: 8px; }
.spx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.spx-narrow { max-width: 860px; }

/* ---------- بنر بالا ---------- */
.spx-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--spx-primary) 0%, var(--spx-primary-2) 70%);
  padding: 34px 0 40px;
  margin-bottom: 18px;
}
.spx-hero::after {
  content: "";
  position: absolute; inset: auto 0 -1px 0; height: 26px;
  background: var(--spx-bg);
  border-radius: 26px 26px 0 0;
}
.spx-hero .spx-wrap { position: relative; z-index: 2; }
.spx-hero-bg .sp-blob {
  position: absolute; border-radius: 50%; filter: blur(10px); opacity: .18;
  background: radial-gradient(circle at 30% 30%, #9db9ff, transparent 60%);
}
.sp-blob-1 { width: 340px; height: 340px; top: -120px; left: -80px; }
.sp-blob-2 { width: 260px; height: 260px; bottom: -100px; right: -60px; background: radial-gradient(circle at 30% 30%, var(--spx-accent), transparent 60%); opacity: .22; }
.spx-hero-ico {
  position: absolute; left: 6%; top: 18px; font-size: 88px; opacity: .16;
  transform: rotate(-8deg);
}
.spx-crumb { display: flex; gap: 8px; align-items: center; font-size: 12.5px; opacity: .9; margin-bottom: 10px; }
.spx-crumb a { color: #cfe0ff; text-decoration: none; }
.spx-crumb a:hover { color: var(--spx-accent); }
.spx-crumb i { opacity: .5; font-style: normal; }
.spx-title { font-size: clamp(24px, 4vw, 38px); font-weight: 900; margin: 4px 0 10px; line-height: 1.5; }
.spx-sub { font-size: clamp(13.5px, 1.6vw, 16px); opacity: .93; max-width: 780px; line-height: 2; margin: 0 0 14px; }
.spx-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.spx-hchip {
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(4px);
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
}
.spx-hero-ctas { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* ---------- دکمه‌ها ---------- */
.spx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: 12px; font-weight: 700; font-size: 13.5px;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-family: inherit; line-height: 1.6;
}
.spx-btn:hover { transform: translateY(-2px); }
.spx-btn-gold { background: linear-gradient(135deg, #ffd35c, var(--spx-accent)); color: #3d2c00; box-shadow: 0 8px 20px rgba(255, 183, 3, .35); }
.spx-btn-blue { background: var(--spx-primary); color: #fff; box-shadow: 0 8px 20px rgba(31, 75, 216, .3); }
.spx-btn-ghost { background: transparent; color: inherit; border-color: rgba(27, 37, 89, .25); }
.spx-hero .spx-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.spx-btn-white { background: #fff; color: var(--spx-primary); }

/* ---------- نوار فیلتر ---------- */
.spx-filterbar { position: sticky; top: 64px; z-index: 40; margin: 0 0 18px; }
.spx-filterbar .spx-wrap {
  background: var(--spx-card); border-radius: 18px; box-shadow: var(--spx-shadow);
  padding: 14px 16px 12px; border: 1px solid var(--spx-line);
}
.spx-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.spx-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.spx-field-grow { flex: 1 1 220px; }
.spx-flabel { font-size: 11.5px; font-weight: 700; color: var(--spx-muted); display: flex; gap: 5px; align-items: center; }
.spx-filters input[type="text"], .spx-filters select,
.spx-tc-field input[type="text"], .spx-tc-field select {
  border: 1.5px solid var(--spx-line); border-radius: 11px; padding: 10px 12px;
  font-size: 13.5px; font-family: inherit; background: #fbfcff; color: var(--spx-ink);
  width: 100%; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.spx-filters input:focus, .spx-filters select:focus,
.spx-tc-field input:focus, .spx-tc-field select:focus {
  border-color: var(--spx-primary); box-shadow: 0 0 0 3px rgba(31, 75, 216, .12);
}
.spx-fgo {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: linear-gradient(135deg, #2f62ff, var(--spx-primary)); color: #fff;
  border: none; border-radius: 12px; padding: 11px 24px; font-weight: 800; font-size: 14px;
  font-family: inherit; cursor: pointer; box-shadow: 0 8px 20px rgba(31, 75, 216, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.spx-fgo:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31, 75, 216, .4); }
.spx-citychips { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--spx-line); }
.spx-citychips-label { font-size: 12px; color: var(--spx-muted); font-weight: 700; }
.spx-chip {
  display: inline-flex; gap: 5px; align-items: center; padding: 6px 13px; border-radius: 999px;
  background: #f2f6ff; border: 1px solid var(--spx-line); color: var(--spx-ink);
  font-size: 12.5px; font-weight: 600; text-decoration: none; transition: all .15s ease;
}
.spx-chip i { font-style: normal; color: var(--spx-primary); font-size: 11px; font-weight: 800; }
.spx-chip:hover { border-color: var(--spx-primary); color: var(--spx-primary); }
.spx-chip.is-active { background: var(--spx-primary); border-color: var(--spx-primary); color: #fff; }
.spx-chip.is-active i { color: var(--spx-accent); }

/* ---------- هدر نتایج ---------- */
.spx-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; }
.spx-results-title { font-size: 20px; font-weight: 900; color: var(--spx-ink); margin: 0; }
.spx-results-count { font-size: 12.5px; color: var(--spx-muted); background: #fff; border: 1px solid var(--spx-line); padding: 5px 12px; border-radius: 999px; }

/* ---------- گرید کارت تور (سازگاری کامل sepcard) ---------- */
.spx-grid { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.spx-grid .sepcard { display: flex; flex-direction: column; background: var(--spx-card); border: 1px solid var(--spx-line); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(27, 37, 89, .05); transition: transform .18s ease, box-shadow .18s ease; }
.spx-grid .sepcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(27, 37, 89, .12); }
.spx-grid .sepcard-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #eef2fb; }
.spx-grid .sepcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spx-grid .sepcard-badge { position: absolute; top: 10px; right: 10px; background: var(--spx-accent); color: #3d2c00; font-size: 11px; font-weight: 800; padding: 3px 11px; border-radius: 999px; }
.spx-grid .sepcard-stars { position: absolute; bottom: 8px; right: 10px; background: rgba(15, 23, 52, .72); color: var(--spx-accent); font-size: 11px; padding: 2px 9px; border-radius: 999px; letter-spacing: 1px; }
.spx-grid .sepcard-body { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px; flex: 1; }
.spx-grid .sepcard-title { display: block; font-size: 14px; font-weight: 800; color: var(--spx-ink); line-height: 1.8; min-height: 3.6em; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spx-grid .sepcard-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--spx-muted); }
.spx-grid .sepcard-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px dashed var(--spx-line); }
.spx-grid .sepcard-cta { font-size: 12px; font-weight: 700; color: var(--spx-primary); }
.spx-grid .sepcard-price { font-size: 14.5px; font-weight: 900; color: var(--spx-ink); }
.spx-grid .sepcard-price small { font-size: 10.5px; color: var(--spx-muted); font-weight: 600; }
.spx-grid .sepcard-price-inq { font-size: 12px; color: var(--spx-green); background: #e8f7f1; padding: 3px 10px; border-radius: 999px; font-weight: 800; }

/* ---------- کارت عریض هتل (سبک Booking) ---------- */
.spx-hlist { display: flex; flex-direction: column; gap: 14px; }
.spx-hcard {
  display: grid; grid-template-columns: 260px 1fr 200px; gap: 0;
  background: var(--spx-card); border: 1px solid var(--spx-line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(27, 37, 89, .05); transition: box-shadow .18s ease, transform .18s ease;
}
.spx-hcard:hover { box-shadow: 0 14px 30px rgba(27, 37, 89, .12); transform: translateY(-2px); }
.spx-hcard-img { position: relative; display: block; min-height: 190px; background: linear-gradient(135deg, #dfe8ff, #c8d8ff); }
.spx-hcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spx-hcard-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.spx-hcard-feat { position: absolute; top: 10px; right: 10px; background: var(--spx-accent); color: #3d2c00; font-size: 11px; font-weight: 800; padding: 3px 11px; border-radius: 999px; }
.spx-hcard-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.spx-hcard-top { display: flex; flex-direction: column; gap: 2px; }
.spx-hstars { color: var(--spx-accent); font-size: 13px; letter-spacing: 2px; line-height: 1; }
.spx-hcard-title { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.7; }
.spx-hcard-title a { color: var(--spx-ink); text-decoration: none; }
.spx-hcard-title a:hover { color: var(--spx-primary); }
.spx-hcard-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--spx-muted); }
.spx-hcard-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.spx-hb { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.spx-hb-blue { background: #e8efff; color: var(--spx-primary); }
.spx-hb-green { background: #e8f7f1; color: var(--spx-green); }
.spx-hb-gold { background: #fff4d6; color: #8a6300; }
.spx-hcard-foot { padding-top: 6px; }
.spx-hcard-price { border-right: 1px dashed var(--spx-line); padding: 14px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 6px; background: linear-gradient(180deg, #fbfcff, #f2f6ff); }
.spx-hprice { font-size: 17px; font-weight: 900; color: var(--spx-primary); }
.spx-hprice small { font-size: 11px; color: var(--spx-muted); font-weight: 600; }
.spx-hprice-inq { font-size: 14px; color: var(--spx-green); }
.spx-hpernight { font-size: 10.5px; color: var(--spx-muted); line-height: 1.7; }
.spx-hcard-price .spx-btn { margin-top: 4px; width: 100%; }

/* ---------- حالت خالی / پیجینیشن ---------- */
.spx-empty { grid-column: 1 / -1; text-align: center; background: var(--spx-card); border: 1.5px dashed var(--spx-line); color: var(--spx-muted); padding: 34px 18px; border-radius: 16px; font-size: 14px; line-height: 2.1; }
.spx-empty a { color: var(--spx-primary); font-weight: 700; }
.spx-pager { display: flex; justify-content: center; gap: 6px; margin: 22px 0 10px; flex-wrap: wrap; }
.spx-pager .page-numbers { display: inline-flex; min-width: 40px; justify-content: center; padding: 9px 14px; background: var(--spx-card); border: 1px solid var(--spx-line); border-radius: 11px; color: var(--spx-ink); font-weight: 700; font-size: 13px; text-decoration: none; transition: all .15s ease; }
.spx-pager .page-numbers:hover { border-color: var(--spx-primary); color: var(--spx-primary); }
.spx-pager .page-numbers.current { background: var(--spx-primary); border-color: var(--spx-primary); color: #fff; }

/* ---------- سکشن‌های محتوا ---------- */
.spx-seo { padding: 26px 0 8px; }
.spx-seo-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.spx-seo-card { background: var(--spx-card); border: 1px solid var(--spx-line); border-radius: 18px; padding: 22px 24px; box-shadow: 0 4px 14px rgba(27, 37, 89, .04); }
.spx-seo-card h2 { font-size: 18.5px; font-weight: 900; color: var(--spx-ink); margin: 0 0 12px; line-height: 1.8; }
.spx-seo-card h3 { font-size: 16px; font-weight: 800; color: var(--spx-ink); margin: 0 0 12px; }
.spx-seo-card p { font-size: 13.8px; color: #3c4257; line-height: 2.15; margin: 0 0 10px; text-align: justify; }
.spx-check { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.spx-check li { position: relative; padding-right: 26px; font-size: 13.5px; color: #3c4257; line-height: 1.9; }
.spx-check li::before { content: "✔"; position: absolute; right: 0; top: 1px; color: var(--spx-green); font-weight: 900; }
.spx-seo-cta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- FAQ ---------- */
.spx-faqsec { padding: 20px 0 30px; }
.spx-faqsec h2 { font-size: 19px; font-weight: 900; color: var(--spx-ink); margin: 0 0 14px; }
.spx-faq { background: var(--spx-card); border: 1px solid var(--spx-line); border-radius: 14px; margin-bottom: 9px; overflow: hidden; }
.spx-faq summary { cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: 14px; color: var(--spx-ink); list-style: none; position: relative; }
.spx-faq summary::-webkit-details-marker { display: none; }
.spx-faq summary::after { content: "+"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--spx-primary); font-weight: 900; transition: transform .2s ease; }
.spx-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.spx-faq > div { padding: 0 18px 15px; }
.spx-faq p { margin: 0; font-size: 13.5px; color: #3c4257; line-height: 2.1; }
.spx-faq a { color: var(--spx-primary); font-weight: 700; }

/* =========================================================
   قطار
   ========================================================= */
.spx-hero-train { padding-bottom: 4px; }
.spx-traincard {
  position: relative; z-index: 3;
  background: var(--spx-card); border-radius: 20px; box-shadow: 0 20px 50px rgba(27, 37, 89, .18);
  padding: 20px 20px 16px; margin: 26px auto -64px;
  border: 1px solid var(--spx-line);
}
.spx-tc-row { display: grid; grid-template-columns: 1fr auto 1fr 1fr 1fr; gap: 12px; align-items: start; }
.spx-tc-field { min-width: 0; }
.spx-tc-pax { max-width: 130px; }
.spx-swap {
  align-self: center; margin-top: 20px; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--spx-line); background: #f2f6ff; color: var(--spx-primary);
  font-size: 17px; cursor: pointer; transition: all .15s ease; font-family: inherit;
}
.spx-swap:hover { background: var(--spx-primary); color: #fff; transform: rotate(180deg); }
.spx-tc-go {
  width: 100%; margin-top: 14px; padding: 14px; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #2f62ff, var(--spx-primary)); color: #fff;
  font-family: inherit; font-size: 15.5px; font-weight: 800;
  box-shadow: 0 10px 24px rgba(31, 75, 216, .35); transition: transform .15s ease, box-shadow .15s ease;
}
.spx-tc-go:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(31, 75, 216, .45); }
.spx-tc-note { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--spx-muted); }

.spx-routes { padding: 96px 0 6px; }
.spx-sec-head { margin-bottom: 16px; }
.spx-sec-head h2 { font-size: 20px; font-weight: 900; color: var(--spx-ink); margin: 0 0 6px; }
.spx-sec-head p { margin: 0; font-size: 13px; color: var(--spx-muted); }
.spx-route-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 13px; }
.spx-route {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: right;
  background: var(--spx-card); border: 1px solid var(--spx-line); border-radius: 16px;
  padding: 16px 18px; cursor: pointer; font-family: inherit; position: relative; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.spx-route:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(27, 37, 89, .12); border-color: var(--spx-primary); }
.spx-route-ico { position: absolute; left: 14px; top: 14px; font-size: 30px; opacity: .85; }
.spx-route-cities { font-size: 15.5px; font-weight: 900; color: var(--spx-ink); display: flex; gap: 7px; align-items: center; }
.spx-route-cities i { font-style: normal; color: var(--spx-primary); }
.spx-route-dur { font-size: 12px; color: var(--spx-muted); }
.spx-route-price { font-size: 15px; font-weight: 900; color: var(--spx-primary); }
.spx-route-price small { font-size: 11px; color: var(--spx-muted); font-weight: 600; }
.spx-route-cta { font-size: 12px; font-weight: 800; color: var(--spx-accent); }

.spx-whyband { padding: 22px 0 8px; }
.spx-whyband-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.spx-why-item { background: var(--spx-card); border: 1px solid var(--spx-line); border-radius: 16px; padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.spx-why-item span { font-size: 26px; line-height: 1; }
.spx-why-item b { font-size: 14px; color: var(--spx-ink); font-weight: 800; }
.spx-why-item i { font-style: normal; font-size: 12.3px; color: var(--spx-muted); line-height: 1.9; }

.spx-trainform { padding: 24px 0 8px; }
.spx-formcard { background: var(--spx-card); border: 1px solid var(--spx-line); border-radius: 18px; padding: 22px 24px; box-shadow: 0 4px 14px rgba(27, 37, 89, .04); }
.spx-formcard .ff-el-form-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 14px; }
.spx-formcard .ff-el-input--label { margin-bottom: 2px; }
.spx-formcard .ff-el-form-control { border: 1.5px solid var(--spx-line) !important; border-radius: 11px !important; padding: 10px 12px !important; font-family: inherit !important; background: #fbfcff !important; }
.spx-formcard .ff-el-form-control:focus { border-color: var(--spx-primary) !important; box-shadow: 0 0 0 3px rgba(31, 75, 216, .12); outline: none; }
.spx-formcard .ff-btn { background: linear-gradient(135deg, #2f62ff, var(--spx-primary)) !important; border: none !important; border-radius: 12px !important; padding: 12px 26px !important; font-family: inherit !important; font-weight: 800 !important; box-shadow: 0 8px 20px rgba(31, 75, 216, .3) !important; }
.spx-formcard .ff-el-group-submit { grid-column: 1 / -1; text-align: center; margin-top: 6px; }
.spx-formcard .ff-el-form-bottom { grid-column: 1 / -1; }
.spx-formcard .ff-el-group { margin-bottom: 12px !important; }
.spx-formcard .ff_msg, .spx-formcard .ff-el-progress-bar { font-family: inherit; }

/* دیت‌پیکر جلالی */
.spx-jd { position: absolute; z-index: 90; background: #fff; border: 1px solid var(--spx-line); border-radius: 16px; box-shadow: 0 18px 44px rgba(27, 37, 89, .2); padding: 12px; width: 288px; }
.spx-jd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.spx-jd-nav { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--spx-line); background: #f7f9ff; color: var(--spx-primary); font-weight: 900; cursor: pointer; font-family: inherit; }
.spx-jd-title { font-weight: 800; font-size: 13.5px; color: var(--spx-ink); }
.spx-jd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.spx-jd-wd { text-align: center; font-size: 10.5px; color: var(--spx-muted); font-weight: 700; padding: 4px 0; }
.spx-jd-d { border: none; background: transparent; border-radius: 9px; padding: 7px 0; font-size: 12.5px; font-family: inherit; cursor: pointer; color: var(--spx-ink); }
.spx-jd-d:hover { background: #eef3ff; }
.spx-jd-d.is-today { border: 1px solid var(--spx-primary); color: var(--spx-primary); font-weight: 800; }
.spx-jd-d.is-sel { background: var(--spx-primary); color: #fff; font-weight: 800; }
.spx-jd-d:disabled { color: #c4ccdd; cursor: not-allowed; }
.spx-jd-foot { display: flex; justify-content: space-between; margin-top: 8px; }
.spx-jd-clear { border: none; background: transparent; color: #d94545; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.spx-jd-close { border: none; background: transparent; color: var(--spx-primary); font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; }

/* =========================================================
   ویزا
   ========================================================= */
.spx-vsec { padding: 24px 0 8px; }
.spx-vsec-alt { background: var(--spx-card); border-radius: 24px 24px 0 0; padding: 28px 0 16px; margin: 14px -0px 0; }
.spx-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; }
.spx-vcard {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  background: var(--spx-card); border: 1px solid var(--spx-line); border-radius: 18px; padding: 22px 16px 18px;
  box-shadow: 0 4px 14px rgba(27, 37, 89, .05); transition: transform .18s ease, box-shadow .18s ease;
}
.spx-vcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(27, 37, 89, .13); }
.spx-vhot { position: absolute; top: 12px; right: 12px; background: #fff1f1; color: #e04242; font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.spx-vflag { font-size: 44px; line-height: 1.15; }
.spx-vcard h3 { margin: 2px 0 0; font-size: 16px; font-weight: 900; color: var(--spx-ink); }
.spx-ven { font-style: normal; font-size: 11px; color: var(--spx-muted); letter-spacing: .5px; }
.spx-vtime { font-size: 12px; color: var(--spx-muted); }
.spx-vprice { font-size: 15px; font-weight: 900; color: var(--spx-primary); }
.spx-vprice small { font-size: 10.5px; color: var(--spx-muted); font-weight: 600; }
.spx-vcard-ctas { display: flex; gap: 7px; margin-top: 8px; }
.spx-vcard-ctas .spx-btn { padding: 8px 16px; font-size: 12.5px; }

.spx-steps { list-style: none; margin: 0; padding: 0; counter-reset: spxstep; display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; position: relative; }
.spx-steps::before { content: ""; position: absolute; top: 26px; right: 40px; left: 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--spx-primary) 0 8px, transparent 8px 16px); opacity: .35; }
.spx-step { position: relative; background: var(--spx-card); border: 1px solid var(--spx-line); border-radius: 16px; padding: 18px 14px 16px; text-align: center; display: flex; flex-direction: column; gap: 5px; align-items: center; box-shadow: 0 4px 14px rgba(27, 37, 89, .05); }
.spx-step-no { position: absolute; top: -12px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--spx-primary); color: #fff; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(31, 75, 216, .4); }
.spx-step-ico { font-size: 27px; }
.spx-step b { font-size: 13.5px; color: var(--spx-ink); }
.spx-step i { font-style: normal; font-size: 11.8px; color: var(--spx-muted); line-height: 1.85; }
.spx-vnote { font-size: 12.5px; color: var(--spx-muted); background: #f2f6ff; border-radius: 12px; padding: 10px 14px; margin: 4px 0 0 !important; text-align: right !important; }
.spx-vcontent { background: var(--spx-card); border: 1px solid var(--spx-line); border-radius: 18px; padding: 24px 28px; box-shadow: 0 4px 14px rgba(27, 37, 89, .04); }
.spx-vcontent h2, .spx-vcontent h3 { color: var(--spx-ink); font-weight: 900; font-size: 17px; margin: 18px 0 10px; }
.spx-vcontent h2:first-child, .spx-vcontent h3:first-child { margin-top: 0; }
.spx-vcontent p { font-size: 13.8px; color: #3c4257; line-height: 2.15; text-align: justify; }
.spx-vcontent ol, .spx-vcontent ul { padding-right: 20px; }
.spx-vcontent li { font-size: 13.5px; line-height: 2.1; color: #3c4257; margin-bottom: 6px; }

/* ---------- حالت بارگذاری زنده ---------- */
.spx-grid.is-loading, .spx-hlist.is-loading { position: relative; opacity: .55; pointer-events: none; min-height: 220px; }
.spx-grid.is-loading::after, .spx-hlist.is-loading::after {
  content: "⏳"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 34px; animation: spx-pulse 1s ease-in-out infinite;
}
@keyframes spx-pulse { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
.spx-toast {
  position: fixed; bottom: 22px; right: 50%; transform: translateX(50%) translateY(20px);
  background: var(--spx-ink); color: #fff; padding: 12px 22px; border-radius: 14px;
  font-size: 13.5px; font-weight: 700; box-shadow: 0 14px 34px rgba(27, 37, 89, .3);
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 999;
}
.spx-toast.is-on { opacity: 1; transform: translateX(50%) translateY(0); }

/* ---------- ریسپانسیو ---------- */
@media (max-width: 1024px) {
  .spx-whyband-in { grid-template-columns: repeat(2, 1fr); }
  .spx-steps { grid-template-columns: repeat(3, 1fr); }
  .spx-steps::before { display: none; }
  .spx-tc-row { grid-template-columns: 1fr 1fr; }
  .spx-swap { display: none; }
  .spx-tc-pax { max-width: none; }
}
@media (max-width: 768px) {
  .spx-hero { padding: 24px 0 34px; }
  .spx-hero-ico { font-size: 60px; }
  .spx-filterbar { position: static; }
  .spx-filters { flex-direction: column; align-items: stretch; }
  .spx-field { min-width: 0; }
  .spx-fgo { justify-content: center; width: 100%; }
  .spx-hcard { grid-template-columns: 1fr; }
  .spx-hcard-img { min-height: 200px; }
  .spx-hcard-price { border-right: none; border-top: 1px dashed var(--spx-line); flex-direction: row; flex-wrap: wrap; }
  .spx-hcard-price .spx-btn { width: auto; flex: 1; }
  .spx-seo-grid { grid-template-columns: 1fr; }
  .spx-steps { grid-template-columns: 1fr 1fr; }
  .spx-route-grid { grid-template-columns: 1fr; }
  .spx-traincard { padding: 16px 14px 14px; }
  .spx-tc-row { grid-template-columns: 1fr 1fr; }
  .spx-formcard { padding: 16px 14px; }
}
@media (max-width: 480px) {
  .spx-tc-row { grid-template-columns: 1fr; }
  .spx-steps { grid-template-columns: 1fr; }
  .spx-title { font-size: 22px; }
}