/* ====== Vars & Base ====== */
.sht-cards-tabs{
  /* رنگ‌های کلی */
  --sht-primary:#0061ff;
  --sht-accent:#00e1ff;

  /* گرید افقی تب‌ها */
  --tabs-gap: 12px;         /* فاصله بین کارت‌های تب */
  --tab-min: 240px;         /* حداقل عرض هر تب برای ریسپانسیو */
  /*display:grid;*/
  grid-template-columns: repeat(auto-fit, minmax(var(--tab-min), 1fr));
  gap: var(--tabs-gap);
  align-items:start;

  /* کارت تب - حالت‌ها (Normal/Hover/Active) */
  --tab-bg: color-mix(in oklab, Canvas 92%, var(--sht-primary) 2%);
  --tab-color: CanvasText;
  --tab-border: color-mix(in oklab, var(--sht-primary) 20%, transparent);

  --tab-bg-h: color-mix(in oklab, Canvas 90%, var(--sht-primary) 6%);
  --tab-color-h: CanvasText;
  --tab-border-h: color-mix(in oklab, var(--sht-primary) 28%, transparent);

  --tab-bg-a: linear-gradient(135deg, var(--sht-primary), var(--sht-accent));
  --tab-color-a: #fff;
  --tab-border-a: transparent;

  /* ابعاد/لبه‌ها */
  --tab-radius:16px;
  --tab-border-w:1px;
  --tab-pad-b: .9rem;
  --tab-pad-i: 1rem;
  --tab-min-h: auto;

  /* آیکن تب */
  --icon-size:46px;
  --icon-bg: color-mix(in oklab, white 88%, transparent);
  --icon-color: currentColor;

  --icon-bg-h: var(--icon-bg);
  --icon-color-h: var(--icon-color);

  --icon-bg-a: color-mix(in oklab, white 20%, transparent);
  --icon-color-a: currentColor;

  /* کارت وایدِ محتوا */
  --sht-max-w: 1200px;
  --surface: color-mix(in oklab, Canvas 92%, var(--sht-primary) 2%);
  color: CanvasText;
  padding: clamp(.25rem,.6vw,.9rem);
}

@media (prefers-color-scheme: dark){
  .sht-cards-tabs{
    --tab-bg: color-mix(in oklab, Canvas 6%, var(--sht-primary) 16%);
    --tab-bg-h: color-mix(in oklab, Canvas 8%, var(--sht-primary) 22%);
    --surface: color-mix(in oklab, Canvas 6%, var(--sht-primary) 16%);
  }
}

/* هر تب + پنل زیرش داخل گرید، برای اینکه پنل تمام‌عرض شود: */
.sht-tab-item{ display: contents; }

/* ====== TAB CARD (header) ====== */
.sht-tab-card{
  display:flex; align-items:center; gap:.75rem; width:100%;
  padding: var(--tab-pad-b) var(--tab-pad-i);
  min-height: var(--tab-min-h);
  border-radius: var(--tab-radius);
  border: var(--tab-border-w) solid var(--tab-border);
  background: var(--tab-bg);
  color: var(--tab-color);
  cursor:pointer; text-align:start;
  transition: transform .16s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  text-transform: none;
}
.sht-tab-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in oklab, var(--sht-primary) 18%, transparent);
  background: var(--tab-bg-h);
  color: var(--tab-color-h);
  border-color: var(--tab-border-h);
}
.sht-tab-card.is-active{
  background: var(--tab-bg-a);
  color: var(--tab-color-a);
  border-color: var(--tab-border-a);
  box-shadow: 0 12px 28px color-mix(in oklab, var(--sht-primary) 28%, transparent);
}

.sht-icon{
  width: var(--icon-size); height: var(--icon-size); flex: 0 0 var(--icon-size);
  display:grid; place-items:center;
  border-radius: 12px;
  color: var(--icon-color);
  mix-blend-mode: luminosity;
}
.sht-tab-card:hover .sht-icon{ color: var(--icon-color-h); }
.sht-tab-card.is-active .sht-icon{ color: var(--icon-color-a); filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7483%) hue-rotate(259deg) brightness(106%) contrast(99%); }

.sht-content{ display:flex; flex-direction:column; gap:2px; }
.sht-title{ font-weight:800; line-height:1.15; font-size:clamp(1rem,.9rem + .25vw,1.15rem); }
.sht-text{ opacity:.8; text-transform:none; }

/* چِورون */
.sht-chevron{
  margin-inline-start:auto; width:12px; height:12px;
  border-inline-end: 2px solid currentColor;
  border-block-end:  2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease; opacity:.8;
}
.sht-tab-card.is-active .sht-chevron{ transform: rotate(135deg); }
:root:dir(rtl) .sht-chevron{ transform: rotate(225deg); }
:root:dir(rtl) .sht-tab-card.is-active .sht-chevron{ transform: rotate(45deg); }

/* ====== PANEL (opens under clicked card, full width) ====== */
.sht-tab-panel{
  grid-column: 1 / -1;
  margin-top: .5rem;
  border-radius: var(--tab-radius);
  background: var(--surface);
  overflow:hidden;
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.sht-tab-panel.is-open{ grid-template-rows: 1fr; }
.sht-tab-panel > *{ min-height:0; }

/* ====== Wide card ====== */
.sht-wide-card{
  position:relative;
  max-width: var(--sht-max-w);
  width: 100%;
  background: var(--surface-strong);
  border-radius: var(--tab-radius);
  overflow: clip; isolation:isolate;
  border: 1px solid color-mix(in oklab, var(--sht-primary) 15%, transparent);
}
.sht-wide-card::before{
  content:""; position:absolute; inset:0;
  background-image: var(--sht-bg-img, none);
  background-size:cover; background-position:center;
  opacity:.08; pointer-events:none; z-index:0;
}
.sht-card-body{ position:relative; z-index:1; padding:clamp(16px,2vw,32px); line-height:1.7; }

/* ====== LOGOS (3 rows marquee) ====== */
.sht-logos{ display:grid; gap:14px; }
.sht-logos-row{ display:flex; gap:30px; align-items:center; animation: sht-marquee var(--speed,30s) linear infinite; }
.sht-logos-row.dir-rev{ animation-direction: reverse; }
@keyframes sht-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.sht-logo-item{ display:inline-grid; place-items:center; filter:saturate(.9) contrast(1.05); opacity:.9; }
.sht-logo-item img{ height:100px; max-width: 250px; display:block; }

/* ====== INFO BOX ====== */
.sht-info{ display:grid; grid-template-columns: 64px 1fr; gap:14px; align-items:flex-start; }
.sht-info-icon{ width:64px; height:64px; display:grid; place-items:center; border-radius:14px; }
.sht-info-title{ margin:0; font-size:clamp(1.1rem,1rem + .4vw,1.4rem); }
.sht-info-text{ color: color-mix(in oklab, CanvasText 70%, transparent); }

/* ====== TIMELINE (horizontal) ====== */
.sht-timeline{ display:grid; grid-auto-flow: column; grid-auto-columns: minmax(180px,1fr); gap:24px; overflow:auto; padding-bottom:4px; }
.sht-tl-item{ position:relative; }
.sht-tl-year{ font-weight:800; margin-bottom:8px; text-align:center; }
.sht-tl-dot{ height:10px; width:10px; border-radius:50%; background:linear-gradient(135deg,var(--sht-primary),var(--sht-accent)); margin:0 auto 10px; box-shadow:0 0 0 4px color-mix(in oklab, var(--sht-primary) 25%, transparent); }
.sht-tl-content{ background: color-mix(in oklab, Canvas 98%, var(--sht-primary) 4%); border:1px solid color-mix(in oklab, var(--sht-primary) 18%, transparent); border-radius:12px; padding:12px; }
.sht-tl-desc{ color: color-mix(in oklab, CanvasText 70%, transparent); margin-top:6px; }

/* ====== MAP ====== */
.sht-map{
  position: relative;
  width: 100%;
  max-width: var(--sht-max-w);
  margin: 0 auto;
  aspect-ratio: 2 / 1;           /* مهم */
  overflow: hidden;
}

.sht-map-canvas{
  position: absolute;
  inset: 0;
  background-size: 100% 100%;    /* نه cover */
  background-position: 50% 50%;
  border-radius: 12px;
}

.sht-map{ aspect-ratio: 2 / 1; }
.sht-map-canvas{ background-size: 100% 100%; background-position: 50% 50%; }

/* لازمِ مارکرها: اگر نداری اضافه کن */
.sht-map-markers{ position:absolute; inset:0; pointer-events:none; }
.sht-map-marker{ position:absolute; translate:-50% -50%; border-radius:999px; background-color: #fff;
    border: 2px solid blue; }
.sht-map-marker.size-1{ width:22px; height:22px; }
.sht-map-marker.size-2{ width:18px; height:18px; }
.sht-map-marker.size-3{ width:14px; height:14px; }
.sht-map-marker.size-4{ width:10px; height:10px; }
/* ==== TIMELINE as Carousel (no scroll) ==== */
.sht-timeline-carousel{
  position:relative;
  --spv: 3;                 /* will be set by JS */
  --tl-gap: 24px;           /* will be set by JS / control */
  --tl-h: auto;             /* JS equalizes heights */
}
.sht-tl-viewport{
  overflow:hidden;
  height: var(--tl-h);
}
.sht-tl-track{
  display:flex;
  gap: var(--tl-gap);
  will-change: transform;
  transition: transform .4s ease;
}
.sht-tl-slide{
  flex: 0 0 calc((100% - (var(--spv) - 1)*var(--tl-gap)) / var(--spv));
  box-sizing: border-box;
  height: 100%;
}
.sht-tl-item{ position:relative; height:100%; display:flex; flex-direction:column; }
.sht-tl-year{ font-weight:800; margin-bottom:8px; text-align:center; }
.sht-tl-dot{ height:10px; width:10px; border-radius:50%;
  background:linear-gradient(135deg,var(--sht-primary,#0061ff),var(--sht-accent,#00e1ff));
  margin:0 auto 10px;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--sht-primary,#0061ff) 25%, transparent);
}
.sht-tl-content{
  background: color-mix(in oklab, Canvas 98%, var(--sht-primary,#0061ff) 4%);
  border:1px solid color-mix(in oklab, var(--sht-primary,#0061ff) 18%, transparent);
  border-radius:12px; padding:12px; flex:1 1 auto;
  display:flex; flex-direction:column;
}
.sht-tl-desc{ color: color-mix(in oklab, CanvasText 70%, transparent); margin-top:6px; }

/* Nav buttons */
.sht-tl-prev, .sht-tl-next{
  position:absolute; top:50%; translate:0 -50%;
  width:36px; height:36px; border-radius:999px; border:0;
  background: color-mix(in oklab, Canvas 92%, var(--sht-primary,#0061ff) 6%);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  cursor:pointer; font-size:20px; line-height:36px; text-align:center;
}
.sht-tl-prev{ left: -6px; }
.sht-tl-next{ right: -6px; }
.sht-tl-prev[disabled], .sht-tl-next[disabled]{ opacity:.4; cursor:default; }

/* Dots */
.sht-tl-dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.sht-tl-dots button{
  width:8px; height:8px; border-radius:999px; border:0; background: color-mix(in oklab, CanvasText 35%, transparent);
  cursor:pointer;
}
.sht-tl-dots button[aria-current="true"]{ background: linear-gradient(135deg,var(--sht-primary,#0061ff),var(--sht-accent,#00e1ff)); }