/* =====================================================================
 * TEFFCO Steel Prices — ظاهر بخش عمومی
 * ایده: تابلوی قیمت انبار فولاد؛ عدد قهرمان صفحه است،
 * ساختار با خط‌های مویی و نوار لبه‌ی نارنجی نشان داده می‌شود، نه با کارت و سایه.
 * ===================================================================== */

.tsp,
.tsp-drawer,
.tsp-cartbar {
  --tsp-accent: #F48026;
  --tsp-accent-dark: #C96209;
  --tsp-accent-wash: #FFF6EE;
  --tsp-ink: #3C3F47;
  --tsp-ink-deep: #23262C;
  --tsp-muted: #6C7079;
  --tsp-faint: #9CA0A9;
  --tsp-line: #E4E6EB;
  --tsp-hair: #EFF1F4;
  --tsp-surface: #FAFAFB;
  --tsp-white: #fff;
  --tsp-up: #17794F;
  --tsp-up-wash: #EAF5EF;
  --tsp-down: #C0392B;
  --tsp-down-wash: #FBEDEB;

  --tsp-r-sm: 8px;
  --tsp-r: 12px;
  --tsp-gap: .6rem;
  --tsp-fs-sm: .82rem;
  --tsp-fs: .94rem;
  --tsp-fs-lg: 1.12rem;
  --tsp-cell-y: .8rem;
  --tsp-cell-x: 1rem;
  --tsp-shadow-sm: 0 1px 2px rgba(20, 22, 28, .06);
  --tsp-shadow: 0 20px 48px -18px rgba(20, 22, 28, .45);
  --tsp-focus: 0 0 0 2px #fff, 0 0 0 4px rgba(244, 128, 38, .55);
  --tsp-sticky-top: 0px;
}

.tsp {
  font-family: inherit;
  color: var(--tsp-ink);
  font-size: var(--tsp-fs);
  line-height: 1.75;
  margin: 0 0 2.75rem;
}
.tsp.is-compact {
  --tsp-cell-y: .3rem;
  --tsp-cell-x: .6rem;
  --tsp-fs: .85rem;
  --tsp-fs-lg: .96rem;
  --tsp-fs-sm: .76rem;
  line-height: 1.45;
}
.tsp *, .tsp *::before, .tsp *::after,
.tsp-drawer *, .tsp-drawer *::before, .tsp-drawer *::after { box-sizing: border-box; }
.tsp [hidden] { display: none !important; }

.tsp__amount,
.tsp__table td,
.tsp__chg,
.tsp-calc__out b { font-variant-numeric: tabular-nums; }

.tsp__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tsp :focus-visible,
.tsp-drawer :focus-visible { outline: none; box-shadow: var(--tsp-focus); }

/* ---------- سربرگ ---------- */
.tsp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .3rem 1.2rem;
  margin-bottom: 1rem;
}
.tsp__title {
  position: relative;
  margin: 0;
  padding-bottom: .6rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--tsp-ink-deep);
}
.tsp__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--tsp-accent);
}
.tsp__updated {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .4rem;
  font-size: var(--tsp-fs-sm);
  color: var(--tsp-muted);
}
.tsp__updated::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--tsp-accent);
}
.tsp__updated time { color: var(--tsp-ink); font-weight: 600; }
.tsp__desc { max-width: 68ch; margin: 0 0 1rem; color: var(--tsp-muted); }

/* ---------- جستجو و فیلتر ---------- */
.tsp__filters { margin-bottom: 1rem; }
.tsp__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tsp-gap); }

.tsp__search,
.tsp__f select,
.tsp__range input,
.tsp__buy-qty,
.tsp__buy-unit {
  font: inherit;
  font-size: var(--tsp-fs);
  min-height: 44px;
  padding: .45rem .8rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-ink);
  transition: border-color .15s ease;
}
.tsp__search:hover,
.tsp__f select:hover,
.tsp__range input:hover { border-color: #CBD0D8; }
.tsp__search { flex: 1 1 260px; }
.tsp__search::placeholder { color: var(--tsp-faint); }

.tsp__panel-toggle {
  display: none;
  align-items: center;
  gap: .45rem;
  font: inherit;
  font-size: var(--tsp-fs);
  min-height: 44px;
  padding: .45rem .9rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-ink);
  cursor: pointer;
}
.tsp__badge {
  min-width: 1.35em;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--tsp-accent);
  color: #fff;
  font-size: .72rem;
  line-height: 1.6;
  text-align: center;
}

.tsp__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .9rem 1.4rem;
  margin-top: .7rem;
  padding: .95rem 1rem;
  border: 1px solid var(--tsp-hair);
  border-radius: var(--tsp-r);
  background: var(--tsp-surface);
}
.tsp__f { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.tsp__f legend,
.tsp__f-label { padding: 0; font-size: var(--tsp-fs-sm); font-weight: 600; color: var(--tsp-muted); }
.tsp__f select { min-width: 175px; }
.tsp__f--chips { flex: 1 1 100%; }
.tsp__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.tsp__chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: inherit;
  font-size: var(--tsp-fs-sm);
  min-height: 36px;
  padding: .3rem .8rem;
  border: 1px solid var(--tsp-line);
  border-radius: 999px;
  background: var(--tsp-white);
  color: var(--tsp-ink);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tsp__chip:hover { border-color: var(--tsp-accent); color: var(--tsp-accent-dark); }
.tsp__chip[aria-pressed="true"] { background: var(--tsp-ink-deep); border-color: var(--tsp-ink-deep); color: #fff; }
.tsp__chip-n { font-size: .72rem; opacity: .6; }
.tsp__range { display: flex; gap: .4rem; }
.tsp__range input { width: 8.5rem; direction: ltr; text-align: right; }
.tsp__f--check { flex-direction: row; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.tsp__f--check input { width: 18px; height: 18px; accent-color: var(--tsp-accent); }

.tsp__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .6rem;
  font-size: var(--tsp-fs-sm);
  color: var(--tsp-muted);
}
.tsp__reset,
.tsp__reset-link {
  font: inherit;
  font-size: var(--tsp-fs-sm);
  padding: .2rem 0;
  border: 0;
  background: none;
  color: var(--tsp-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- کلید ارزش افزوده ---------- */
.tsp__vat {
  display: inline-flex;
  margin-inline-start: auto;
  padding: 3px;
  border: 1px solid var(--tsp-line);
  border-radius: 999px;
  background: var(--tsp-surface);
}
.tsp__vat-btn {
  font: inherit;
  font-size: var(--tsp-fs-sm);
  min-height: 38px;
  padding: .3rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tsp-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.tsp__vat-btn[aria-pressed="true"] {
  background: var(--tsp-white);
  color: var(--tsp-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(28, 30, 36, .12);
}

/* ---------- جدول ---------- */
.tsp__scroll {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r);
  background: var(--tsp-white);
  box-shadow: var(--tsp-shadow-sm);
}
/* جدولی که در عرض صفحه جا می‌شود: بدون قاب اسکرول، با سر چسبان */
.tsp__scroll.is-fits { overflow: visible; }
.tsp__table { width: 100%; border-collapse: collapse; margin: 0; border: 0; font-size: var(--tsp-fs); }
.tsp__table th {
  padding: .85rem var(--tsp-cell-x);
  border: 0;
  background: var(--tsp-ink-deep);
  color: rgba(255, 255, 255, .86);
  font-size: .8rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.tsp__table td {
  padding: var(--tsp-cell-y) var(--tsp-cell-x);
  border: 0;
  border-top: 1px solid var(--tsp-hair);
  text-align: right;
  vertical-align: middle;
  color: var(--tsp-ink);
}
.tsp__table tbody tr:first-child td { border-top: 0; }
.tsp__table tbody tr:hover td { background: var(--tsp-accent-wash); }
.tsp__table tbody tr[hidden] { display: none !important; }
.tsp__table td.tsp__td-name,
.tsp__table td.tsp__td-brand { font-weight: 600; }
.tsp__table td.tsp__td-location,
.tsp__table td.tsp__td-unit,
.tsp__table td.tsp__td-updated { color: var(--tsp-muted); }

.tsp__th-price { background: #2A2C32 !important; }
.tsp__price { white-space: nowrap; background: #FFFCF8; box-shadow: inset 1px 0 0 #F6E6D5, inset -1px 0 0 #F6E6D5; }
.tsp__amount { font-size: var(--tsp-fs-lg); font-weight: 700; letter-spacing: .01em; color: var(--tsp-ink-deep); }
.tsp__amount--sm { font-size: var(--tsp-fs); font-weight: 600; }
.tsp__piece { white-space: nowrap; color: var(--tsp-muted); }
.tsp__call { color: var(--tsp-muted); font-size: var(--tsp-fs-sm); }

.tsp__chg-cell { white-space: nowrap; }
.tsp__chg {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
}
.tsp__chg--up { color: var(--tsp-up); background: var(--tsp-up-wash); }
.tsp__chg--down { color: var(--tsp-down); background: var(--tsp-down-wash); }
.tsp__chg-pct { font-size: .72rem; opacity: .85; }
.tsp__flat { color: var(--tsp-faint); font-size: var(--tsp-fs-sm); }

.tsp__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #DCE0E6;
  transition: color .15s ease, border-color .15s ease;
}
.tsp__link:hover { color: var(--tsp-accent-dark); border-color: var(--tsp-accent); }

/* ---------- دکمه‌ها ---------- */
.tsp__cta-cell { text-align: left !important; width: 1%; }
.tsp__cta {
  display: inline-block;
  padding: .45rem 1rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-accent);
  color: #fff !important;
  text-decoration: none !important;
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.tsp__cta:hover { background: var(--tsp-accent-dark); }
.tsp__cta--lg { display: block; padding: .7rem 1.3rem; font-size: var(--tsp-fs); text-align: center; }
.tsp__cta--ghost { background: var(--tsp-white); color: var(--tsp-ink) !important; border: 1px solid var(--tsp-line); }
.tsp__cta--ghost:hover { background: var(--tsp-surface); }

.tsp__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
  min-height: 36px;
  padding: .35rem .85rem;
  border: 1px solid var(--tsp-accent);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-accent-dark);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.tsp__add:hover { background: var(--tsp-accent-wash); }
.tsp__add.is-in { background: var(--tsp-accent); border-color: var(--tsp-accent); color: #fff; }
.tsp__add--lg { width: 100%; min-height: 48px; font-size: var(--tsp-fs); background: var(--tsp-accent); color: #fff; }
.tsp__add--lg:hover { background: var(--tsp-accent-dark); color: #fff; }
.tsp__add--lg.is-in { background: var(--tsp-ink-deep); border-color: var(--tsp-ink-deep); }

.tsp__empty,
.tsp__none {
  margin: .8rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--tsp-line);
  border-radius: var(--tsp-r);
  color: var(--tsp-muted);
}

/* ---------- نمودار ---------- */
.tsp__chart-cell { width: 1%; text-align: center !important; }
.tsp__chart-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: inherit;
  font-size: var(--tsp-fs-sm);
  padding: .35rem .65rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.tsp__chart-btn:hover { border-color: var(--tsp-accent); color: var(--tsp-accent-dark); }
.tsp__chart-btn[aria-expanded="true"] { background: var(--tsp-ink-deep); border-color: var(--tsp-ink-deep); color: #fff; }
.tsp__table tbody tr.tsp__chart-row > td { padding: 0; border-top: 0; background: var(--tsp-surface) !important; }
.tsp__chart { padding: 1rem 1.1rem 1.1rem; border-top: 1px solid var(--tsp-line); }
.tsp__chart-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .6rem 1rem;
  margin-bottom: .8rem;
}
.tsp__chart-stats { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp__chart-stats b { color: var(--tsp-ink); font-variant-numeric: tabular-nums; }
.tsp__chart-stats b.is-up { color: var(--tsp-up); }
.tsp__chart-stats b.is-down { color: var(--tsp-down); }
.tsp__ranges {
  display: inline-flex;
  gap: .25rem;
  padding: 3px;
  border: 1px solid var(--tsp-line);
  border-radius: 999px;
  background: var(--tsp-white);
}
.tsp__ranges button {
  font: inherit;
  font-size: .78rem;
  padding: .3rem .75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tsp-muted);
  cursor: pointer;
}
.tsp__ranges button[aria-pressed="true"] { background: var(--tsp-ink-deep); color: #fff; }
.tsp__plot { position: relative; direction: ltr; }
.tsp__plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.tsp__grid { stroke: var(--tsp-hair); stroke-width: 1; }
.tsp__axis { fill: var(--tsp-faint); font-size: 12px; font-family: inherit; }
.tsp__area { fill: rgba(244, 128, 38, .1); }
.tsp__line { fill: none; stroke: var(--tsp-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tsp__cursor { stroke: var(--tsp-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.tsp__dot { fill: #fff; stroke: var(--tsp-accent); stroke-width: 2.5; }
.tsp__tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .4rem .7rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-ink-deep);
  color: #fff;
  font-size: .8rem;
  line-height: 1.6;
  white-space: nowrap;
  pointer-events: none;
  direction: rtl;
}
.tsp__tip b { font-size: .92rem; }
.tsp__chart-msg { margin: .6rem 0; color: var(--tsp-muted); font-size: var(--tsp-fs-sm); }

/* ---------- بلوک قیمت در صفحه‌ی محصول ---------- */
.tsp--single { margin: 1.2rem 0 1.8rem; }
.tsp__single {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--tsp-line);
  border-inline-start: 4px solid var(--tsp-accent);
  border-radius: var(--tsp-r);
  background: linear-gradient(180deg, #fff 0%, #FFFBF6 100%);
}
.tsp__single-main { display: flex; flex-direction: column; gap: .3rem; }
.tsp__single-label { font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp__single-price { display: inline-flex; align-items: baseline; gap: .45rem; }
.tsp__single-price .tsp__amount { font-size: 1.9rem; line-height: 1.25; }
.tsp__cur { font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp__single-side { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; min-width: 250px; }
.tsp__single-side .tsp__vat { margin: 0; justify-content: center; }
.tsp__single-h { margin: 1.8rem 0 .7rem; font-size: 1.05rem; font-weight: 700; color: var(--tsp-ink-deep); }
.tsp__auto-chart { border: 1px solid var(--tsp-line); border-radius: var(--tsp-r); background: var(--tsp-white); }
.tsp__auto-chart .tsp__chart { border-top: 0; }
.tsp-call-price { font-weight: 600; }

.tsp__buy { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.tsp__buy-f { display: flex; flex-direction: column; gap: .3rem; font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp__buy-qty { width: 5.5rem; text-align: center; }
.tsp__buy-unit { width: 8rem; }
.tsp__buy .tsp__add--lg { flex: 1 1 10rem; width: auto; }

/* ---------- ماشین‌حساب ---------- */
.tsp-calc { padding: 1rem 1.1rem; border: 1px solid var(--tsp-line); border-radius: var(--tsp-r); background: var(--tsp-white); }
.tsp-calc[hidden] { display: none; }
.tsp-calc__in { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
.tsp-calc__in label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1 1 140px;
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
  color: var(--tsp-muted);
}
.tsp-calc input,
.tsp-calc select {
  font: inherit;
  font-size: var(--tsp-fs);
  min-height: 44px;
  padding: .4rem .75rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-ink);
}
.tsp-calc__out {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  margin-top: 1rem;
  padding: .75rem .9rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-surface);
  font-size: var(--tsp-fs-sm);
  color: var(--tsp-muted);
}
.tsp-calc__out b { font-size: var(--tsp-fs-lg); font-weight: 700; color: var(--tsp-ink-deep); }
.tsp-calc__note { margin: .7rem 0 0; font-size: .78rem; color: var(--tsp-faint); }
.tsp-wcalc__tabs { flex-wrap: wrap; margin-bottom: .9rem; }

/* ---------- سبد شناور ---------- */
.tsp-cartbar {
  position: fixed;
  z-index: 99990;
  /* جایگاه از تنظیمات پنل می‌آید؛ مقدار پیش‌فرض ۲۲ پیکسل از چپ و پایین */
  bottom: var(--tsp-cart-y, 22px);
  left: var(--tsp-cart-l, 22px);
  right: var(--tsp-cart-r, auto);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: inherit;
  font-size: var(--tsp-fs);
  font-weight: 600;
  padding: .8rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--tsp-ink-deep);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--tsp-shadow);
  cursor: pointer;
  direction: rtl;
}
.tsp-cartbar[hidden] { display: none; }
.tsp-cartbar__n { min-width: 1.7em; padding: 0 .45em; border-radius: 999px; background: var(--tsp-accent); text-align: center; }
.tsp-cartbar.is-pulse { animation: tsp-pulse .45s ease; }
@keyframes tsp-pulse { 50% { transform: scale(1.07); } }

/* ---------- پنجره‌ی سبد استعلام ---------- */
html.tsp-lock { overflow: hidden; }
.tsp-drawer { position: fixed; inset: 0; z-index: 99995; font-family: inherit; color: var(--tsp-ink); }
.tsp-drawer[hidden] { display: none; }
.tsp-drawer__bg { position: absolute; inset: 0; background: rgba(28, 30, 36, .48); }
.tsp-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(470px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--tsp-white);
  box-shadow: var(--tsp-shadow);
}
.tsp-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--tsp-line);
}
.tsp-drawer__head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--tsp-ink-deep); }
.tsp-drawer__x {
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--tsp-r-sm);
  background: none;
  color: var(--tsp-muted);
  cursor: pointer;
}
.tsp-drawer__x:hover { background: var(--tsp-surface); color: var(--tsp-ink); }
.tsp-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.2rem 1.6rem; }
.tsp-drawer__item { padding: .85rem 0; border-bottom: 1px solid var(--tsp-hair); }
.tsp-drawer__label { font-weight: 600; margin-bottom: .5rem; }
.tsp-drawer__qty { display: flex; gap: .4rem; align-items: center; }
.tsp-drawer__qty input { flex: 1 1 90px; min-width: 0; text-align: center; }
.tsp-drawer__qty select { flex: 0 1 115px; }
.tsp-drawer input,
.tsp-drawer select,
.tsp-drawer textarea {
  font: inherit;
  font-size: var(--tsp-fs);
  width: 100%;
  min-height: 44px;
  padding: .45rem .75rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-ink);
}
.tsp-drawer__qty input,
.tsp-drawer__qty select { width: auto; }
.tsp-drawer__rm {
  font: inherit;
  font-size: var(--tsp-fs-sm);
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--tsp-down);
  cursor: pointer;
  padding: 0 .5rem;
}
.tsp-drawer__approx { font-size: .78rem; color: var(--tsp-faint); margin-top: .35rem; }
.tsp-drawer__approx:empty { display: none; }
.tsp-drawer__empty {
  padding: 1.5rem 1rem;
  border: 1px dashed var(--tsp-line);
  border-radius: var(--tsp-r);
  color: var(--tsp-muted);
  text-align: center;
}
.tsp-drawer__form { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .75rem; }
.tsp-drawer__form label,
.tsp-wt__ask label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
  color: var(--tsp-muted);
}
.tsp-drawer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.tsp-drawer__err {
  margin: 0;
  padding: .65rem .85rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-down-wash);
  color: var(--tsp-down);
  font-size: var(--tsp-fs-sm);
}
.tsp-drawer__err[hidden],
.tsp-drawer__done[hidden],
.tsp-drawer__form[hidden] { display: none; }
.tsp-drawer__send { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.tsp-drawer__send:disabled { opacity: .65; cursor: wait; }
.tsp-drawer__hint { margin: 0; font-size: .78rem; color: var(--tsp-faint); }
.tsp-drawer__done { text-align: center; padding: 2.5rem .5rem; }
.tsp-drawer__ok { font-size: var(--tsp-fs-lg); font-weight: 700; color: var(--tsp-up); }
.tsp-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important;
}

/* ---------- موبایل ---------- */
@media (max-width: 680px) {
  .tsp__title { font-size: 1.15rem; }
  .tsp__panel-toggle { display: inline-flex; }
  .tsp__search { flex-basis: 100%; }
  .tsp__panel { display: none; flex-direction: column; align-items: stretch; }
  .tsp__panel.is-open { display: flex; }
  .tsp__f select,
  .tsp__range input { width: 100%; min-width: 0; }
  .tsp__range { width: 100%; }
  .tsp__vat { margin-inline-start: 0; width: 100%; }
  .tsp__vat-btn { flex: 1; }
  .tsp__single-side { width: 100%; min-width: 0; }

  .tsp__scroll { border: 0; overflow: visible; background: none; }
  .tsp__table, .tsp__table tbody { display: block; }
  .tsp__table thead { display: none; }
  .tsp__table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .9rem;
    padding: .85rem .95rem;
    margin-bottom: .7rem;
    border: 1px solid var(--tsp-line);
    border-inline-start: 3px solid var(--tsp-accent);
    border-radius: var(--tsp-r);
    background: var(--tsp-white);
  }
  .tsp__table tbody tr:hover td { background: none; }
  .tsp__table td {
    border: 0;
    padding: 0;
    font-size: var(--tsp-fs-sm);
    background: none;
    box-shadow: none;
  }
  .tsp__table td::before {
    content: attr(data-label);
    display: block;
    font-size: .72rem;
    color: var(--tsp-faint);
  }
  .tsp__table td.tsp__price,
  .tsp__table td.tsp__chg-cell,
  .tsp__table td.tsp__cta-cell,
  .tsp__table td.tsp__chart-cell { grid-column: 1 / -1; }
  .tsp__table td.tsp__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .4rem;
    padding: .5rem .7rem;
    border-radius: var(--tsp-r-sm);
    background: var(--tsp-accent-wash);
  }
  .tsp__table td.tsp__price::before { margin: 0; }
  .tsp__table td.tsp__chg-cell::before,
  .tsp__table td.tsp__cta-cell::before,
  .tsp__table td.tsp__chart-cell::before { content: none; }
  .tsp__table td.tsp__cta-cell,
  .tsp__table td.tsp__chart-cell { width: auto; text-align: right !important; }
  .tsp__cta, .tsp__add { display: block; width: 100%; text-align: center; min-height: 44px; line-height: 2; }
  .tsp__chart-btn { width: 100%; justify-content: center; min-height: 40px; }
  .tsp__table tbody tr.tsp__chart-row {
    display: block;
    padding: 0;
    margin-top: -.45rem;
    border-inline-start-width: 1px;
  }
  .tsp__table tbody tr.tsp__chart-row > td { display: block; background: var(--tsp-white) !important; }
  .tsp__table tbody tr.tsp__chart-row > td::before { content: none; }
  .tsp__chart { padding: .85rem; }
  .tsp-drawer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tsp *, .tsp-drawer *, .tsp-cartbar { transition: none !important; animation: none !important; }
}

/* =====================================================================
 * سر چسبان، ستون ثابت، فشردگی و حالت‌های بارگذاری
 * ===================================================================== */

@media (min-width: 681px) {
  /* سر جدول هنگام اسکرول صفحه بالا می‌ماند */
  .tsp__scroll.is-fits .tsp__table thead th {
    position: sticky;
    top: var(--tsp-sticky-top, 0px);
    z-index: 3;
  }
  .tsp__scroll.is-fits .tsp__table thead th:first-child { border-top-right-radius: var(--tsp-r); }
  .tsp__scroll.is-fits .tsp__table thead th:last-child { border-top-left-radius: var(--tsp-r); }

  /* جدول پهن: ستون اول هنگام اسکرول افقی ثابت می‌ماند */
  .tsp__scroll.is-scrollable .tsp__table th:first-child,
  .tsp__scroll.is-scrollable .tsp__table td:first-child {
    position: sticky;
    right: 0;
    z-index: 2;
  }
  .tsp__scroll.is-scrollable .tsp__table th:first-child { background: var(--tsp-ink-deep); }
  .tsp__scroll.is-scrollable .tsp__table td:first-child {
    background: var(--tsp-white);
    box-shadow: -10px 0 14px -12px rgba(20, 22, 28, .45);
  }
  .tsp__scroll.is-scrollable .tsp__table tbody tr:hover td:first-child { background: var(--tsp-accent-wash); }
}

/* کلید فشردگی */
.tsp__density {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--tsp-line);
  border-radius: 999px;
  background: var(--tsp-surface);
}
.tsp__density-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tsp-faint);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.tsp__density-btn:hover { color: var(--tsp-ink); }
.tsp__density-btn[aria-pressed="true"] {
  background: var(--tsp-white);
  color: var(--tsp-ink-deep);
  box-shadow: var(--tsp-shadow-sm);
}
.tsp.is-compact .tsp__table td { line-height: 1.5; }
.tsp.is-compact .tsp__table th { padding-block: .5rem; }
.tsp.is-compact .tsp__chg { padding: 0 .4rem; gap: .25rem; }
.tsp.is-compact .tsp__chg-pct { display: none; }
.tsp.is-compact .tsp__chip { padding-block: .1rem; min-height: 30px; }
.tsp.is-compact .tsp__add,
.tsp.is-compact .tsp__chart-btn,
.tsp.is-compact .tsp__cta-cell .tsp__cta {
  min-height: 28px;
  padding: .1rem .55rem;
  font-size: .76rem;
}
.tsp.is-compact .tsp__chart-btn span { display: none; }
.tsp.is-compact .tsp__chart-btn { width: 32px; justify-content: center; }
.tsp.is-compact .tsp__price { line-height: 1.4; }

/* اسکلت بارگذاری نمودار */
.tsp__skel {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 180px;
  padding: 1rem .2rem .4rem;
}
.tsp__skel i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--tsp-hair) 25%, #F7F8FA 50%, var(--tsp-hair) 75%);
  background-size: 300% 100%;
  animation: tsp-shimmer 1.4s ease-in-out infinite;
}
.tsp__skel i:nth-child(1) { height: 42%; }
.tsp__skel i:nth-child(2) { height: 66%; }
.tsp__skel i:nth-child(3) { height: 54%; }
.tsp__skel i:nth-child(4) { height: 78%; }
.tsp__skel i:nth-child(5) { height: 60%; }
.tsp__skel i:nth-child(6) { height: 88%; }
.tsp__skel i:nth-child(7) { height: 70%; }
.tsp__skel-chip {
  display: inline-block;
  width: 84px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tsp-hair) 25%, #F7F8FA 50%, var(--tsp-hair) 75%);
  background-size: 300% 100%;
  animation: tsp-shimmer 1.4s ease-in-out infinite;
}
@keyframes tsp-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* دکمه‌ی در حال کار */
.is-busy { position: relative; pointer-events: none; }
.is-busy::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline-start: .5rem;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: tsp-spin .7s linear infinite;
}
@keyframes tsp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .tsp__skel i,
  .tsp__skel-chip { animation: none; background: var(--tsp-hair); }
  .is-busy::after { animation-duration: 2s; }
}

/* دکمه‌ی داخل ردیف آرام می‌ماند تا ستون قیمت شلوغ نشود */
.tsp__cta-cell .tsp__cta {
  background: var(--tsp-white);
  color: var(--tsp-ink) !important;
  border: 1px solid var(--tsp-line);
  box-shadow: var(--tsp-shadow-sm);
}
.tsp__cta-cell .tsp__cta:hover {
  background: var(--tsp-accent-wash);
  border-color: var(--tsp-accent);
  color: var(--tsp-accent-dark) !important;
}
.tsp.is-compact .tsp__cta-cell .tsp__cta { padding-block: .25rem; }

/* =====================================================================
 * پیگیری سفارش و کنترل کیفیت
 * ===================================================================== */
.tsp-track__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .7rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r);
  background: var(--tsp-surface);
}
.tsp-track__form label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1 1 200px;
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
  color: var(--tsp-muted);
}
.tsp-track__form input {
  font: inherit;
  font-size: var(--tsp-fs);
  min-height: 46px;
  padding: .45rem .8rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-ink);
}
.tsp-track__form button { flex: 0 1 190px; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.tsp-track__err {
  margin: .8rem 0 0;
  padding: .7rem .9rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-down-wash);
  color: var(--tsp-down);
  font-size: var(--tsp-fs-sm);
}
.tsp-track__panel { margin-top: 1.2rem; }
.tsp-track__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  border: 1px solid var(--tsp-line);
  border-inline-start: 4px solid var(--tsp-accent);
  border-radius: var(--tsp-r);
  background: var(--tsp-white);
}
.tsp-track__head > div { display: flex; flex-direction: column; }
.tsp-track__head .tsp__cta { margin-inline-start: auto; }
.tsp-track__label { font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp-track__num { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.tsp-track__status { color: var(--tsp-accent-dark); }
.tsp-track__qc {
  margin-top: 1.2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r);
  background: var(--tsp-white);
}
.tsp-track__qc h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 700; color: var(--tsp-ink-deep); }
.tsp-track__qcstatus {
  display: inline-block;
  margin: 0 0 .8rem;
  padding: .25rem .8rem;
  border-radius: 999px;
  background: var(--tsp-surface);
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
}
.tsp-track__qc.is-pending .tsp-track__qcstatus { background: var(--tsp-accent-wash); color: var(--tsp-accent-dark); }
.tsp-track__qc.is-approved .tsp-track__qcstatus,
.tsp-track__qc.is-auto .tsp-track__qcstatus { background: var(--tsp-up-wash); color: var(--tsp-up); }
.tsp-track__qc.is-rejected .tsp-track__qcstatus { background: var(--tsp-down-wash); color: var(--tsp-down); }
.tsp-track__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: .8rem 0; }
.tsp-track__gallery img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: var(--tsp-r-sm);
  border: 1px solid var(--tsp-line);
}
.tsp-track__qcnote, .tsp-track__qcintro { margin: .4rem 0; font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp-track__deadline {
  margin: .6rem 0;
  padding: .6rem .8rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-surface);
  font-size: var(--tsp-fs-sm);
  color: var(--tsp-ink);
}
.tsp-track__notef { display: flex; flex-direction: column; gap: .3rem; font-size: var(--tsp-fs-sm); font-weight: 600; color: var(--tsp-muted); }
.tsp-track__note {
  font: inherit;
  font-size: var(--tsp-fs);
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  color: var(--tsp-ink);
}
.tsp-track__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 0; }
.tsp-track__actions .tsp__cta { flex: 1 1 180px; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.tsp-track__actions .tsp__cta--ghost { border: 1px solid var(--tsp-line); }
.tsp-track__msg {
  margin: .8rem 0 0;
  padding: .7rem .9rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-up-wash);
  color: var(--tsp-up);
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
}
@media (max-width: 680px) {
  .tsp-track__form label, .tsp-track__form button { flex-basis: 100%; }
  .tsp-track__head .tsp__cta { margin-inline-start: 0; width: 100%; text-align: center; }
}

.tsp-drawer__sum {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  margin-top: .9rem;
  padding: .75rem .9rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-surface);
  font-size: var(--tsp-fs-sm);
  color: var(--tsp-muted);
}
.tsp-drawer__sum b { font-size: var(--tsp-fs-lg); color: var(--tsp-ink-deep); font-variant-numeric: tabular-nums; }

/* شاخص بازار */
.tsp-mindex__stats {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  margin-bottom: .9rem;
  padding: .85rem 1rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-surface);
}
.tsp-mindex__stats span { display: flex; flex-direction: column; gap: .1rem; }
.tsp-mindex__stats i { font-style: normal; font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp-mindex__stats b { font-size: 1.15rem; font-weight: 700; color: var(--tsp-ink-deep); font-variant-numeric: tabular-nums; }
.tsp-mindex__stats b.is-up { color: var(--tsp-up); }
.tsp-mindex__stats b.is-down { color: var(--tsp-down); }
.tsp-mindex .tsp-market-chart { border: 1px solid var(--tsp-line); border-radius: var(--tsp-r); background: var(--tsp-white); padding: .8rem; }
.tsp-mindex .tsp-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; }
.tsp-mindex .tsp-key--market { background: var(--tsp-ink); }
.tsp-mindex .tsp-key--ours { background: var(--tsp-accent); }
.tsp-mindex .description { font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }

/* جدول مشخصات و لینک‌های مرتبط در توضیح محصول */
.woocommerce table.tsp-spec, table.tsp-spec { border-collapse: collapse; margin: 1rem 0; }
table.tsp-spec th, table.tsp-spec td { border: 1px solid #E4E6EB; padding: .5rem .9rem; text-align: right; font-size: .95rem; }
table.tsp-spec th { background: #FAFAFB; font-weight: 600; width: 180px; }
ul.tsp-related { margin: .5rem 1.2rem 1rem 0; }

/* پرسش‌های متداول در توضیح محصول */
.tsp-faq h3 { font-size: 1rem; font-weight: 700; margin: 1.1rem 0 .3rem; color: var(--tsp-ink-deep, #23262C); }
.tsp-faq p { margin: 0 0 .5rem; }

/* بخش حمل و تحویل در صفحه‌ی پیگیری */
.tsp-track__ship .tsp-ship__table { width: 100%; border-collapse: collapse; margin: .6rem 0; }
.tsp-track__ship .tsp-ship__table th,
.tsp-track__ship .tsp-ship__table td { border: 1px solid var(--tsp-hair); padding: .45rem .7rem; text-align: right; font-size: var(--tsp-fs-sm); }
.tsp-track__ship .tsp-ship__table th { background: var(--tsp-surface); font-weight: 600; width: 40%; color: var(--tsp-muted); }

/* نزدیک‌ترین سایزهای موجود روی کالای ناموجود */
.tsp-alt { margin: 1rem 0; padding: .9rem 1.1rem; border: 1px solid var(--tsp-line); border-inline-start: 4px solid var(--tsp-accent); border-radius: var(--tsp-r); background: var(--tsp-white); }
.tsp-alt h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--tsp-ink-deep); }

/* خط زمانی سفارش */
.tsp-steps { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid var(--tsp-line); border-radius: var(--tsp-r); background: var(--tsp-white); }
.tsp-steps__item { display: flex; align-items: center; gap: .45rem; font-size: var(--tsp-fs-sm); color: var(--tsp-faint); }
.tsp-steps__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tsp-line); }
.tsp-steps__item.is-done { color: var(--tsp-ink); }
.tsp-steps__item.is-done .tsp-steps__dot { background: var(--tsp-up); }
.tsp-steps__item.is-active { color: var(--tsp-accent-dark); font-weight: 600; }
.tsp-steps__item.is-active .tsp-steps__dot { background: var(--tsp-accent); box-shadow: 0 0 0 3px var(--tsp-accent-wash); }
.tsp-steps__time { color: var(--tsp-faint); font-size: .72rem; }
.tsp-track__validity { margin: 0 0 1rem; padding: .6rem .9rem; border-radius: var(--tsp-r-sm); background: var(--tsp-surface); font-size: var(--tsp-fs-sm); }
.tsp-track__validity.is-expired { background: var(--tsp-down-wash); color: var(--tsp-down); display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tsp-track__history { margin-top: 1.2rem; }
.tsp-track__history h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--tsp-ink-deep); }
.tsp-track__history .tsp__cta { border: 0; cursor: pointer; font: inherit; font-size: var(--tsp-fs-sm); }

/* تخفیف پلکانی و هشدار قیمت */
.tsp-tiers, .tsp-alert { margin: 1rem 0; padding: .9rem 1.1rem; border: 1px solid var(--tsp-line); border-radius: var(--tsp-r); background: var(--tsp-white); }
.tsp-tiers h3, .tsp-alert h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--tsp-ink-deep); }
.tsp-tiers__note { margin: .5rem 0 0; font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp-alert__form { display: flex; flex-wrap: wrap; gap: .5rem; }
.tsp-alert__form input { flex: 1 1 200px; min-height: 44px; padding: .45rem .8rem; border: 1px solid var(--tsp-line); border-radius: var(--tsp-r-sm); font: inherit; color: var(--tsp-ink); }
.tsp-alert__form button { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.tsp-alert__msg { margin: .6rem 0 0; font-size: var(--tsp-fs-sm); color: var(--tsp-up); font-weight: 600; }
.tsp-track__checks { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: var(--tsp-fs-sm); color: var(--tsp-up); }

/* گزارش بازار */
.tsp-report__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.tsp-report__cols h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--tsp-ink-deep); }
.tsp-report__list { list-style: none; margin: 0; padding: 0; }
.tsp-report__list li { display: flex; align-items: baseline; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--tsp-hair); font-size: var(--tsp-fs-sm); }
.tsp-report__list span { flex: 1; }
.tsp-report__list b { font-variant-numeric: tabular-nums; }
.tsp-report__list b.is-up { color: var(--tsp-up); }
.tsp-report__list b.is-down { color: var(--tsp-down); }
.tsp-report__list small { color: var(--tsp-muted); }

/* ورود با کد پیامکی */
.tsp-otp__form, .tsp-otp__verify {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .7rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r);
  background: var(--tsp-surface);
}
.tsp-otp__verify { margin-top: .8rem; }
.tsp-otp__form label, .tsp-otp__verify label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1 1 220px;
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
  color: var(--tsp-muted);
}
.tsp-otp__form input, .tsp-otp__verify input {
  font: inherit;
  font-size: var(--tsp-fs);
  min-height: 46px;
  padding: .45rem .8rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-ink);
  letter-spacing: .08em;
}
.tsp-otp__form button, .tsp-otp__verify button { flex: 0 1 180px; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.tsp-otp__verify .tsp__cta--ghost { border: 1px solid var(--tsp-line); }
.tsp-otp__sent { flex: 1 1 100%; margin: 0; font-size: var(--tsp-fs-sm); color: var(--tsp-up); font-weight: 600; }
.tsp-track__legacy { margin-top: .9rem; font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp-track__legacy summary { cursor: pointer; padding: .4rem 0; }
.tsp-track__list h3 { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 700; color: var(--tsp-ink-deep); }
.tsp-track__list .tsp__cta { border: 0; cursor: pointer; font: inherit; font-size: var(--tsp-fs-sm); }
.tsp-track__logout { margin-top: .8rem; }
.tsp-track__exit { border: 0; background: none; color: var(--tsp-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: var(--tsp-fs-sm); }
.tsp-track__back { margin-bottom: .8rem; }
.tsp-track__back .tsp__cta { border: 1px solid var(--tsp-line); cursor: pointer; font: inherit; }

/* =====================================================================
 * پنل حساب کاربری مشتری
 * ===================================================================== */
.tsp-acc__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r);
  background: linear-gradient(180deg, var(--tsp-accent-wash), var(--tsp-surface));
}
.tsp-acc__hero > div { display: flex; flex-direction: column; gap: .15rem; }
.tsp-acc__hero .tsp__cta {
  margin-inline-start: auto;
  border: 1px solid var(--tsp-line);
  background: var(--tsp-white);
  box-shadow: 0 1px 2px rgba(20, 22, 26, .06);
}
.tsp-acc__hero .tsp__cta:hover { background: var(--tsp-surface); border-color: var(--tsp-accent); }
.tsp-acc__name { font-size: 1.2rem; font-weight: 800; color: var(--tsp-ink-deep); }
.tsp-acc__phone {
  font-size: var(--tsp-fs-sm);
  color: var(--tsp-muted);
  font-variant-numeric: tabular-nums;
}
.tsp-acc__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
  margin-top: .9rem;
}
.tsp-acc__card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .85rem .95rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
}
.tsp-acc__card span { font-size: var(--tsp-fs-sm); color: var(--tsp-muted); font-weight: 600; }
.tsp-acc__card strong { font-size: 1.1rem; color: var(--tsp-ink-deep); font-variant-numeric: tabular-nums; }
.tsp-acc__card small { font-size: var(--tsp-fs-sm); font-weight: 600; color: var(--tsp-muted); }
.tsp-acc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.2rem 0 .9rem;
  border-bottom: 1px solid var(--tsp-line);
}
.tsp-acc__tab {
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--tsp-muted);
  cursor: pointer;
  padding: .55rem .95rem;
  border-radius: var(--tsp-r-sm) var(--tsp-r-sm) 0 0;
  margin-bottom: -1px;
}
.tsp-acc__tab:hover { color: var(--tsp-accent-dark); }
.tsp-acc__tab.is-active {
  background: var(--tsp-white);
  border-color: var(--tsp-line);
  color: var(--tsp-ink-deep);
  box-shadow: inset 0 3px 0 var(--tsp-accent);
}
.tsp-acc__pane[hidden] { display: none; }
.tsp-acc__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .8rem 1rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r);
  background: var(--tsp-surface);
}
.tsp-acc__form label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
  color: var(--tsp-muted);
}
.tsp-acc__form input[type="text"],
.tsp-acc__form input[type="email"] {
  font: inherit;
  font-size: var(--tsp-fs);
  min-height: 46px;
  padding: .45rem .8rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-ink);
}
.tsp-acc__check,
.tsp-acc__bar,
.tsp-acc__msg { grid-column: 1 / -1; }
.tsp-acc__check {
  flex-direction: row !important;
  align-items: flex-start;
  gap: .5rem;
  font-weight: 600;
  color: var(--tsp-ink);
  line-height: 1.6;
}
.tsp-acc__check input { margin-top: .25rem; flex: 0 0 auto; }
.tsp-acc__bar { margin: 0; }
.tsp-acc__msg {
  margin: 0;
  padding: .65rem .85rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-up-wash);
  color: var(--tsp-up);
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
}
.tsp-acc__msg.is-bad { background: var(--tsp-down-wash); color: var(--tsp-down); }
@media (max-width: 520px) {
  .tsp-acc__hero .tsp__cta { margin-inline-start: 0; width: 100%; }
}

/* =====================================================================
 * باشگاه مشتریان
 * ===================================================================== */
.tsp-club {
  margin-top: .9rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r);
  background: var(--tsp-white);
}
.tsp-club__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
}
.tsp-club__top > div { display: flex; flex-direction: column; gap: .2rem; }
.tsp-club__points { margin-inline-start: auto; text-align: start; }
.tsp-club__points strong { font-size: 1.15rem; color: var(--tsp-ink-deep); font-variant-numeric: tabular-nums; }
.tsp-club__points small { font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp-club__tier {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .35rem;
  padding: .25rem .8rem;
  border-radius: 999px;
  font-size: 1.02rem;
  font-weight: 800;
  border: 1px solid var(--tsp-line);
  background: var(--tsp-surface);
  color: var(--tsp-ink-deep);
}
.tsp-club__tier::before { content: "★"; font-size: .9em; line-height: 1; }
.tsp-club--silver { background: #eef1f4; border-color: #d3dae1; color: #4b5563; }
.tsp-club--gold { background: #fdf3dc; border-color: #e6c877; color: #8a6206; }
.tsp-club--platinum { background: #eef2fb; border-color: #b9c6e6; color: #34467a; }
.tsp-club__perks { margin: .7rem 0 0; font-size: var(--tsp-fs-sm); color: var(--tsp-muted); line-height: 1.8; }
.tsp-club__pct {
  margin: .6rem 0 0;
  font-size: var(--tsp-fs-sm);
  color: var(--tsp-accent-dark);
  font-weight: 700;
}
.tsp-club__bar {
  margin-top: .85rem;
  height: 8px;
  border-radius: 999px;
  background: var(--tsp-surface);
  border: 1px solid var(--tsp-line);
  overflow: hidden;
}
.tsp-club__bar span {
  display: block;
  height: 100%;
  background: var(--tsp-accent);
  transition: width .3s ease;
}
.tsp-club__next { margin: .55rem 0 0; font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp-club__next strong { color: var(--tsp-ink-deep); }
@media (max-width: 520px) {
  .tsp-club__points { margin-inline-start: 0; }
}

/* =====================================================================
 * کیف پول و اعتبار
 * ===================================================================== */
.tsp-wallet {
  margin-top: .9rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r);
  background: var(--tsp-white);
}
.tsp-wallet.is-debt { border-color: var(--tsp-down); background: var(--tsp-down-wash); }
.tsp-wallet__top {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
}
.tsp-wallet__top > div { display: flex; flex-direction: column; gap: .2rem; }
.tsp-wallet__top strong { font-size: 1.1rem; color: var(--tsp-ink-deep); font-variant-numeric: tabular-nums; }
.tsp-wallet__top small { font-size: var(--tsp-fs-sm); font-weight: 600; color: var(--tsp-muted); }
.tsp-wallet.is-debt .tsp-wallet__bal { color: var(--tsp-down); }
.tsp-wallet__over {
  margin: .8rem 0 0;
  padding: .65rem .85rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-down);
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
  line-height: 1.8;
}
.tsp-wallet__more { margin-top: .85rem; }
.tsp-wallet__more > summary {
  cursor: pointer;
  font-size: var(--tsp-fs-sm);
  font-weight: 700;
  color: var(--tsp-accent-dark);
  list-style: none;
  padding: .35rem 0;
}
.tsp-wallet__more > summary::-webkit-details-marker { display: none; }
.tsp-wallet__more > summary::before { content: "▾"; margin-inline-end: .4rem; }
.tsp-wallet__more[open] > summary::before { content: "▴"; margin-inline-end: .4rem; }
.tsp-wallet__more .tsp__table { margin-top: .5rem; }
.tsp-wallet__pos { color: var(--tsp-up); font-weight: 700; font-variant-numeric: tabular-nums; }
.tsp-wallet__neg { color: var(--tsp-down); font-weight: 700; font-variant-numeric: tabular-nums; }

/* =====================================================================
 * معرفی مشتری و نظرسنجی
 * ===================================================================== */
.tsp-ref {
  margin-top: .9rem;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--tsp-accent);
  border-radius: var(--tsp-r);
  background: var(--tsp-accent-wash);
}
.tsp-ref > div { display: flex; flex-direction: column; gap: .2rem; }
.tsp-ref__code {
  align-self: flex-start;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--tsp-accent-dark);
}
.tsp-ref__hint { margin: .6rem 0 0; font-size: var(--tsp-fs-sm); color: var(--tsp-ink); line-height: 1.9; }
.tsp-ref__link { margin: .7rem 0 0; }
.tsp-ref__link input {
  width: 100%;
  font: inherit;
  font-size: var(--tsp-fs-sm);
  min-height: 42px;
  padding: .4rem .7rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-muted);
}

.tsp-survey__form {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r);
  background: var(--tsp-surface);
}
.tsp-survey__stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: .15rem;
  margin-bottom: .9rem;
}
.tsp-survey__stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.tsp-survey__stars label {
  font-size: 2.1rem;
  line-height: 1;
  color: var(--tsp-line);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.tsp-survey__stars label:hover,
.tsp-survey__stars label:hover ~ label,
.tsp-survey__stars input:checked ~ label { color: var(--tsp-accent); }
.tsp-survey__stars label:hover { transform: scale(1.12); }
.tsp-survey__stars input:focus-visible + label { outline: 2px solid var(--tsp-accent-dark); outline-offset: 2px; }
.tsp-survey__note {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
  color: var(--tsp-muted);
}
.tsp-survey__note textarea {
  font: inherit;
  font-size: var(--tsp-fs);
  padding: .55rem .8rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-ink);
  resize: vertical;
}
.tsp-survey__msg {
  margin: .6rem 0 0;
  padding: .65rem .85rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-up-wash);
  color: var(--tsp-up);
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
}
.tsp-survey__msg.is-bad { background: var(--tsp-down-wash); color: var(--tsp-down); }

/* =====================================================================
 * سبد استعلام: نسخه‌ی یکپارچه
 * ===================================================================== */
.tsp-cartbar__w {
  font-size: var(--tsp-fs-sm);
  font-weight: 700;
  opacity: .9;
  padding-inline-start: .45rem;
  border-inline-start: 1px solid rgba(255, 255, 255, .35);
  margin-inline-start: .2rem;
}
.tsp-drawer__tag {
  display: inline-block;
  margin-inline-start: .45rem;
  padding: .08rem .45rem;
  border-radius: 999px;
  background: var(--tsp-accent-wash);
  color: var(--tsp-accent-dark);
  font-size: .72rem;
  font-weight: 700;
  vertical-align: middle;
}
.tsp-drawer__spec {
  font-size: var(--tsp-fs-sm);
  color: var(--tsp-muted);
  margin-top: .15rem;
  line-height: 1.7;
}
.tsp-drawer__step {
  flex: 0 0 auto;
  width: 34px;
  min-height: 42px;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-surface);
  color: var(--tsp-ink-deep);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.tsp-drawer__step:hover { background: var(--tsp-accent-wash); border-color: var(--tsp-accent); }
.tsp-drawer__note {
  width: 100%;
  margin-top: .45rem;
  font: inherit;
  font-size: var(--tsp-fs-sm);
  min-height: 38px;
  padding: .3rem .6rem;
  border: 1px dashed var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: transparent;
  color: var(--tsp-ink);
}
.tsp-drawer__note:focus { background: var(--tsp-white); border-style: solid; }
.tsp-drawer__unit {
  font-size: var(--tsp-fs-sm);
  font-weight: 700;
  color: var(--tsp-muted);
  align-self: center;
}
.tsp-drawer__totals {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: .9rem 0 .2rem;
  padding: .75rem .95rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r);
  background: var(--tsp-surface);
}
.tsp-drawer__totals > span { display: flex; flex-direction: column; gap: .1rem; }
.tsp-drawer__totals i { font-style: normal; font-size: var(--tsp-fs-sm); color: var(--tsp-muted); font-weight: 600; }
.tsp-drawer__totals b { font-size: 1.02rem; color: var(--tsp-ink-deep); font-variant-numeric: tabular-nums; }
.tsp-drawer__totnote {
  flex: 1 0 100%;
  font-style: normal;
  font-size: var(--tsp-fs-sm);
  color: var(--tsp-muted);
  line-height: 1.7;
}
.tsp-drawer__tools {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .6rem 0 .2rem;
}
.tsp-drawer__tool {
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-ink);
  font: inherit;
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
  padding: .4rem .8rem;
  cursor: pointer;
}
.tsp-drawer__tool:hover { background: var(--tsp-surface); border-color: var(--tsp-accent); }
.tsp-drawer__undobar {
  margin: 0 0 .7rem;
  padding: .6rem .85rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-accent-wash);
  color: var(--tsp-ink-deep);
  font-size: var(--tsp-fs-sm);
}
.tsp-drawer__undo {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 800;
  color: var(--tsp-accent-dark);
  cursor: pointer;
  text-decoration: underline;
}
.tsp-drawer__me {
  margin: 0 0 .7rem;
  padding: .55rem .8rem;
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-up-wash);
  color: var(--tsp-up);
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
}
.tsp-drawer__calcbox { margin-top: 1rem; border-top: 1px solid var(--tsp-line); padding-top: .8rem; }
.tsp-drawer__calcbox h4 {
  margin: 0 0 .6rem;
  font-size: var(--tsp-fs-sm);
  font-weight: 700;
  color: var(--tsp-muted);
}
.tsp-wt__opencart {
  border: 1px solid var(--tsp-accent);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-accent-wash);
  color: var(--tsp-accent-dark);
  font: inherit;
  font-weight: 700;
  padding: .5rem 1rem;
  cursor: pointer;
}
.tsp-wt__opencart:hover { background: var(--tsp-accent); color: #fff; }

/* ---------- نشان گرید کنترل کیفیت ---------- */
.tsp-grade {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .18rem .5rem .18rem .18rem;
  border: 1px solid color-mix(in srgb, var(--g, #43454d) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--g, #43454d) 8%, #fff);
  vertical-align: middle;
  line-height: 1.6;
}
.tsp-grade b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1em;
  height: 1.85em;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--g, #43454d);
  color: #fff;
  font-weight: 800;
  font-size: .92em;
  letter-spacing: .02em;
  /* کد گرید لاتین است؛ بدون این، «A+» در متن فارسی «+A» دیده می‌شود */
  direction: ltr;
  unicode-bidi: isolate;
}
.tsp-grade > span { color: var(--tsp-ink, #33353c); font-size: .86em; }
.tsp-grade--sm { padding: 0; border: 0; background: transparent; }
.tsp-grade--sm b { font-size: .84em; }
.tsp-track__grade { margin: .7rem 0 .2rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* پیش‌نمایش گریدها در پیشخوان */
.tsp-qc-gpreview { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }

/* =====================================================================
 * فرم درخواست تماس — [teffco_call]
 * ===================================================================== */
.tsp-call__form {
  padding: 1.2rem 1.2rem 1rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r);
  background: var(--tsp-surface);
}
.tsp-call__title { margin: 0 0 .3rem; font-size: var(--tsp-fs-lg); color: var(--tsp-ink-deep); }
.tsp-call__intro { margin: 0 0 1rem; font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp-call__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .8rem;
}
.tsp-call__f {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  font-size: var(--tsp-fs-sm);
  font-weight: 600;
  color: var(--tsp-muted);
}
.tsp-call__f--wide { grid-column: 1 / -1; }
.tsp-call__f b { color: var(--tsp-accent-dark); }
.tsp-call__f input,
.tsp-call__f select,
.tsp-call__f textarea {
  font: inherit;
  font-size: var(--tsp-fs);
  font-weight: 400;
  width: 100%;
  min-height: 46px;
  padding: .45rem .8rem;
  border: 1px solid var(--tsp-line);
  border-radius: var(--tsp-r-sm);
  background: var(--tsp-white);
  color: var(--tsp-ink);
}
.tsp-call__f textarea { min-height: 84px; line-height: 1.9; resize: vertical; }
.tsp-call__f input[type="checkbox"] { width: auto; min-height: 24px; }
.tsp-call__f :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--tsp-accent-dark);
  outline-offset: 1px;
  border-color: var(--tsp-accent);
}
.tsp-call__consent {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .9rem;
  font-size: var(--tsp-fs-sm);
  color: var(--tsp-muted);
  cursor: pointer;
}
.tsp-call__consent input { margin-top: .35rem; }
.tsp-call__hp { position: absolute; inset-inline-start: -9999px; height: 0; overflow: hidden; }
.tsp-call__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
}
.tsp-call__send {
  flex: 0 1 220px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 48px;
}
.tsp-call__send[disabled] { opacity: .6; cursor: default; }
.tsp-call__msg { margin: 0; font-size: var(--tsp-fs-sm); font-weight: 600; }
.tsp-call__msg.is-err { color: var(--tsp-down); }
.tsp-call__msg:empty { display: none; }
.tsp-call__hours { margin: .9rem 0 0; font-size: var(--tsp-fs-sm); color: var(--tsp-muted); }
.tsp-call__done {
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--tsp-up);
  border-radius: var(--tsp-r);
  background: var(--tsp-up-wash, #e8f6ec);
  color: var(--tsp-up);
  font-weight: 700;
  line-height: 2;
}
@media (max-width: 600px) {
  .tsp-call__grid { grid-template-columns: 1fr; }
  .tsp-call__send { flex: 1 1 100%; }
}

/* =====================================================================
 * کپچا — مشترک همه‌ی فرم‌ها
 * ===================================================================== */
.tsp-cap { margin-top: .9rem; }
.tsp-cap[hidden] { display: none; }
.tsp-cap--hidden .tsp-cap__note {
  margin: 0;
  font-size: var(--tsp-fs-sm, .86rem);
  color: var(--tsp-muted, #6c7079);
}
.tsp-cap__row { display: flex; align-items: center; gap: .5rem; }
.tsp-cap__pic {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 56px;
  padding: .2rem;
  border: 1px solid var(--tsp-line, #e1e4e9);
  border-radius: var(--tsp-r-sm, 10px);
  background: var(--tsp-white, #fff);
  overflow: hidden;
}
.tsp-cap__pic img { display: block; max-width: 100%; height: auto; }
.tsp-cap__q {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--tsp-ink-deep, #23262c);
}
.tsp-cap__wait, .tsp-cap__err {
  font-size: var(--tsp-fs-sm, .86rem);
  color: var(--tsp-muted, #6c7079);
  padding: .3rem .5rem;
  text-align: center;
}
.tsp-cap__err { color: var(--tsp-down, #c0392b); }
.tsp-cap__again {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tsp-line, #e1e4e9);
  border-radius: var(--tsp-r-sm, 10px);
  background: var(--tsp-white, #fff);
  color: var(--tsp-ink, #33353c);
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.tsp-cap__again:hover { border-color: var(--tsp-accent, #f48026); color: var(--tsp-accent-dark, #c2600f); }
.tsp-cap__lb {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: .5rem;
  font-size: var(--tsp-fs-sm, .86rem);
  font-weight: 600;
  color: var(--tsp-muted, #6c7079);
}
.tsp-cap__lb b { color: var(--tsp-accent-dark, #c2600f); }
.tsp-cap__in {
  font: inherit;
  font-size: var(--tsp-fs, .95rem);
  font-weight: 400;
  width: 100%;
  max-width: 240px;
  min-height: 46px;
  padding: .45rem .8rem;
  border: 1px solid var(--tsp-line, #e1e4e9);
  border-radius: var(--tsp-r-sm, 10px);
  background: var(--tsp-white, #fff);
  color: var(--tsp-ink, #33353c);
  letter-spacing: .25em;
  text-align: center;
  direction: ltr;
}
.tsp-cap__in:focus-visible { outline: 2px solid var(--tsp-accent-dark, #c2600f); outline-offset: 1px; }
.tsp-cap__g { min-height: 78px; }
@media (max-width: 420px) {
  .tsp-cap__pic { min-width: 0; }
  .tsp-cap__in { max-width: none; }
}