/* =========================================================
   Safarita – Single Tour UI (Clean, RTL, Fully Responsive)
   ========================================================= */

/* 0) Safety & base */
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
.vt-wrap{max-width:1100px;margin-inline:auto;padding:16px}
.vt-section{margin:16px 0}
.vt-hr{margin:32px 0;border:0;border-top:1px solid #e5e7eb;opacity:.25}

/* 1) Type & badges */
.vt-h2{font-size:1.35rem;margin:0 0 8px}
.vt-h3{font-size:1.1rem;margin:0 0 8px}
.vt-h4{font-size:1rem;margin:0 0 6px}
.vt-updated{color:#9ca3af;display:block;margin-top:4px}
.vt-pill{display:inline-block;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;background:#f8fafc}
.vt-badge{display:inline-block;padding:4px 8px;border-radius:8px;border:1px solid #ddd;font-size:.85rem}
.vt-badge--last{background:#ffefe6;border-color:#ffc3a1}

/* 2) Cards & lists */
.vt-card{width:100%;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;overflow:hidden}
.vt-subcard{width:100%;background:#fff;border:1px solid #eef2f7;border-radius:12px;padding:12px;overflow:hidden}
.vt-list{margin:0 0 6px;padding:0 0 0 1.1rem}
.vt-list li{margin:0 0 4px}

/* 3) Packages container (block to avoid grid-overflow) */
.vt-packages{display:block}
.vt-packages .vt-pkg+.vt-pkg{margin-top:12px}

/* 4) Package card */
.vt-pkg{transition:box-shadow .2s,transform .06s;border-radius:12px}
.vt-pkg:hover{box-shadow:0 6px 18px rgba(17,24,39,.06)}
.vt-pkg:active{transform:translateY(1px)}

/* 4.1) Head: title / meta / price as grid */
.vt-pkg-head{
  display:grid;gap:8px;margin-bottom:8px;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "title price"
    "meta  price";
  align-items:center
}
.vt-pkg-title{grid-area:title;display:flex;align-items:center;gap:10px;min-width:0}
.vt-pkg-title .vt-h4{margin:0;line-height:1.35;word-break:break-word}
.vt-pkg-meta{grid-area:meta;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:2px}
.vt-tag{display:inline-block;padding:4px 8px;border-radius:999px;background:#f7f9ff;border:1px solid #eef;font-size:.85rem;color:#374151}
.vt-priceblock{grid-area:price;margin-inline-start:16px;min-width:180px;text-align:start}
.vt-priceblock .vt-pricebig{display:block;font-size:1.2rem;font-weight:700}
.vt-priceblock .vt-sub{color:#6b7280;font-size:.85rem}

/* 4.2) Body: meta chips row */
.vt-pkg-body{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vt-metachips{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.vt-chip2{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #e5e7eb;color:#374151}
.vt-chip2 i{font-style:normal;opacity:.7}
.vt-divider{height:1px;background:#f1f5f9;margin:10px 0}

/* 4.3) Foot: CTAs */
.vt-pkg-foot{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.vt-ctas{display:flex;gap:8px;flex-wrap:wrap}
.btn{padding:8px 12px;border-radius:10px;border:1px solid #ddd;text-decoration:none;display:inline-block;background:#fff;color:inherit}
.btn.ghost{background:#f7f9ff}
.btn.sm{padding:7px 10px}

/* 5) Hotel media (avatar, horizontal strip, arrows) */
.vt-hotel-avatar{width:42px;height:42px;border-radius:10px;object-fit:cover;border:1px solid #e5e7eb;background:#fff;flex:0 0 42px}
.vt-strip-wrap{position:relative;margin:-2px 0 8px}
.vt-hotel-strip{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  padding:6px 36px;-ms-overflow-style:none;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity
}
.vt-hotel-strip::-webkit-scrollbar{height:6px}
.vt-hotel-strip::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px}
.vt-hotel-thumb{
  width:84px;height:64px;flex:0 0 auto;border-radius:8px;object-fit:cover;
  border:1px solid #e5e7eb;background:#fff;cursor:pointer;
  transition:transform .1s ease,box-shadow .15s ease;scroll-snap-align:start
}
.vt-hotel-thumb:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(17,24,39,.08)}
.vt-strip-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  inline-size:28px;block-size:28px;border-radius:50%;
  border:1px solid #e5e7eb;background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 10px rgba(17,24,39,.06);user-select:none
}
.vt-strip-nav[disabled]{opacity:.35;cursor:default}
.vt-strip-prev{inset-inline-start:6px}
.vt-strip-next{inset-inline-end:6px}

/* 6) Lightbox */
.vt-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;z-index:10000;align-items:center;justify-content:center;padding:20px}
.vt-lightbox.open{display:flex}
.vt-lightbox-img{max-width:min(96vw,1100px);max-height:84vh;border-radius:12px;background:#111;border:1px solid rgba(255,255,255,.15);object-fit:contain}
.vt-lightbox-ui{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.vt-lightbox-btn{pointer-events:auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);border:1px solid #e5e7eb;cursor:pointer}
.vt-lightbox-close{position:absolute;top:14px;inset-inline-end:14px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.95);border:1px solid #e5e7eb;cursor:pointer}
.vt-lightbox-caption{position:absolute;inset-inline:0;bottom:10px;text-align:center;color:#fff;font-size:.9rem;opacity:.9}

/* 7) Timeline */
.vt-timeline{position:relative;margin:0;padding:0 0 0 22px;list-style:none}
.vt-timeline::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:#e5e7eb}
.vt-tl-item{position:relative;margin:0 0 16px}
.vt-tl-dot{position:absolute;left:4px;top:6px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #3b82f6;box-shadow:0 0 0 3px #fff}
.vt-tl-card{margin-left:14px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px}
.vt-tl-head{font-weight:700;margin-bottom:6px}
.vt-tl-desc{color:#374151}

/* 8) FAQ */
.vt-acc{border:1px solid #e5e7eb;border-radius:12px;background:#fff;margin-bottom:8px;overflow:hidden}
.vt-acc-q{padding:10px 12px;cursor:pointer;background:#f7f9ff}
.vt-acc-a{padding:10px 12px}

/* 9) Responsive */

/* <= 1024px */
@media (max-width:1024px){
  .vt-wrap{padding:14px}
  .vt-priceblock{min-width:160px}
  .vt-priceblock .vt-pricebig{font-size:1.15rem}
  .vt-hotel-thumb{width:78px;height:58px}
}

/* <= 900px */
@media (max-width:900px){
  .vt-pkg-head{align-items:flex-start}
  .vt-hotel-avatar{width:40px;height:40px}
  .vt-hotel-strip{padding:6px 32px}
  .vt-strip-nav{width:26px;height:26px}
}

/* <= 768px */
@media (max-width:768px){
  .vt-h2{font-size:1.25rem}
  .vt-h3{font-size:1.05rem}
  .vt-h4{font-size:.98rem}
  .btn{padding:8px 10px}
  .btn.sm{padding:7px 9px}
  .vt-card,.vt-subcard{padding:12px}
  .vt-pkg{border-radius:12px}
  .vt-pkg-body{gap:8px}
  .vt-chip2{padding:6px 9px;font-size:.92rem}
  .vt-priceblock{min-width:auto}
  .vt-priceblock .vt-pricebig{font-size:1.08rem}
  .vt-timeline{padding-left:18px}
  .vt-timeline::before{left:8px}
  .vt-tl-dot{left:2px}
  .vt-tl-card{margin-left:12px}
}

/* <= 600px — SAFE MOBILE STACK (no overflow) */
@media (max-width:600px){
  .vt-wrap{padding:12px}
  /* Head → column grid */
  .vt-pkg-head{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "meta"
      "price";
  }
  .vt-priceblock{margin-inline-start:0;min-width:auto;text-align:start}
  /* Thumbs a bit larger for touch */
  .vt-hotel-thumb{width:86px;height:64px}
  .vt-strip-nav{top:54%;width:28px;height:28px}
  /* CTA row: two buttons without overflow */
  .vt-pkg-cta{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap}
  .vt-pkg-cta .btn{flex:1 1 calc(50% - 8px);min-width:140px;text-align:center}
  /* If only one button exists, let it fill width */
  .vt-pkg-cta .btn:only-child{flex-basis:100%}
}

/* <= 420px */
@media (max-width:420px){
  .vt-h2{font-size:1.18rem}
  .vt-h3{font-size:1rem}
  .vt-h4{font-size:.95rem}
  .vt-hotel-avatar{width:36px;height:36px;border-radius:8px}
  .vt-hotel-thumb{width:82px;height:60px;border-radius:7px}
}

/* RTL helpers for arrows */
html[dir="rtl"] .vt-strip-prev{inset-inline-start:6px}
html[dir="rtl"] .vt-strip-next{inset-inline-end:6px}

/* add to CSS file */
.vt-pricelead{display:flex;align-items:center;gap:10px}
.vt-hotel-avatar.vt-lg{width:64px;height:64px}

/* فاصله کمتر بین نام هتل و قیمت + ترازبندی */
.vt-pricelead{display:flex;align-items:center;gap:8px}
.vt-priceblock{margin-inline-start:8px;min-width:auto;text-align:start}
.vt-priceblock .vt-pricebig{font-size:1.18rem}

/* آواتار کمی بزرگ‌تر */
.vt-hotel-avatar.vt-lg{width:72px;height:72px;border-radius:12px}

/* در دسکتاپ، فاصله کلی هد را کمی سفت‌تر می‌کنیم */
.vt-pkg-head{gap:6px}

/* 1) Head: فشرده‌سازی فاصله‌ی عنوان و قیمت */
.vt-pkg-head{
  grid-template-columns: 1fr max-content;
  gap: 6px;
}
.vt-pkg-head .vt-priceblock{
  margin-inline-start: 6px;
  min-width: auto !important;
  text-align: start;
}
.vt-pricelead{
  display: flex;
  align-items: center;
  gap: 6px;
}
.vt-priceblock .vt-pricebig{ font-size: 1.16rem }

/* 2) آواتار کمی بزرگ‌تر (بدون اثر منفی روی لی‌اوت) */
.vt-hotel-avatar.vt-lg{
  width: 60px; height: 60px; border-radius: 12px;
}

/* 3) نوار انگشتی: اجباراً افقی و تک‌خطه */
.vt-hotel-strip{
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow-x: auto; overflow-y: hidden;
  align-items: center; gap: 8px;
}
.vt-hotel-thumb{
  flex: 0 0 auto;         /* مهم: جلوگیری از شکستن به خط بعد */
  width: 84px; height: 64px;
}

/* موبایل: حفظ فشردگی و عدم شکست */
@media (max-width:600px){
  .vt-pkg-head{
    grid-template-columns: 1fr;
    grid-template-areas: "title" "meta" "price";
  }
  .vt-pkg-head .vt-priceblock{ margin-inline-start: 0 }
  .vt-hotel-strip{ padding: 6px 32px }
}

.vt-sub{color:#6b7280}
.vt-filters{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.vt-filter-chips{display:flex;gap:8px;flex-wrap:wrap}
.vt-listing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vt-siblings{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.vt-relatedpaths{display:flex;gap:10px;flex-wrap:wrap}
.vt-path{display:inline-block;padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#f7f9ff;text-decoration:none}
@media (max-width:800px){ .vt-listing{grid-template-columns:1fr} }