:root {
  --badge-hot: #fff5f7;
  --badge-sitewide: #eef6ff;
  --badge-limited: #f7f3ff;
  --badge-flash: #fffbea;
}
/* ===== Grid for coupons list (3-up desktop) ===== */
.sb-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 640px) { .sb-grid { gap: 20px; } }
@media (min-width: 768px) { .sb-grid { gap: 24px; } }
.sb-grid > .sb-card { grid-column: span 12; }
@media (min-width: 640px) { .sb-grid > .sb-card { grid-column: span 6; } }
@media (min-width: 1024px){ .sb-grid > .sb-card { grid-column: span 4; } }

/* ===== Base card ===== */
.sb-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.sb-card--compact{padding:12px;border-radius:14px;gap:8px}
.sb-card--wide{padding:20px;border-radius:18px;gap:14px}

/* === Neon-style coupon card (Dealspotr-like) ============================== */
.sb-card--neo{background:#fff;border:1px solid var(--sb-line,#e9ecf1);border-radius:14px;padding:16px 16px 14px;transition:box-shadow .25s ease,transform .08s ease,border-color .2s ease}
.sb-card--neo:hover{transform:translateY(-1px);border-color:transparent;box-shadow:0 0 0 1px color-mix(in oklab,#f97316 55%,transparent),0 0 0 3px color-mix(in oklab,#f97316 35%,transparent),0 10px 22px rgba(138,92,255,.10)}

/* шапка карты: одинаковая высота на десктопе */
@media (min-width: 1024px){
  .sb-card-header{
    align-items: flex-start;   /* чтобы 2 строки не «толкали» по центру */
    min-height: 56px;          /* под 2 строки brand-name + паддинги pill */
  }
}
/* Бейджи выравниваются по правой границе блока действий */
.sb-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  position: relative;
}
.sb-brand-pill{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--sb-line,#e9ecf1);padding:6px 10px;border-radius:999px}
.sb-brand-logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;               /* не сжимается */
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-brand-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;          /* не обрезать и не искажать */
}
.sb-brand-letter{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff}
.sb-brand-name {
  font-weight: 600;
  margin-left: 6px;
  font-size: 12px;              /* немного меньше */
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* максимум 2 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;      /* троеточие */
  max-width: 120px;             /* ограничиваем ширину, чтобы не распирало */
}

.sb-badges {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
  max-width: calc(100% - 120px); /* примерно ширина кнопки + поля */
  justify-content: flex-end;     /* прижать к правому краю */
}
.sb-badge{font-size:12px;padding:4px 8px;border:1px solid var(--sb-line,#e9ecf1);border-radius:999px}
.sb-badge--hot{background:#fff5f7;color:#b42356}
.sb-badge--flash{background:#fffbea;color:#a16207}
.sb-badge--limited{background:#f7f3ff;color:#6d28d9}

.sb-card__title{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:6px 0 4px}
.sb-card__sub{color:#6a7280;margin-bottom:10px}

/* Code row */
/* === Reveal chip (в код‑строке): оранжевый ховер, чтобы текст не пропадал === */
.sb-code-row .sb-code-mask{
  cursor: pointer;
  user-select: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

/* убираем любой "принудительный" белый при ховере, если где-то задан */
.sb-code-row .sb-code-mask:hover,
.sb-code-row .sb-code-mask:focus{
  color: #f97316;           /* оранжевый, как крестик */
  background: #fff7ed;      /* лёгкий фон (необязательно, но приятно) */
  outline: none;
}

/* если есть обводка у чипа — гармоничный цвет границы на ховере */
.sb-code-row:hover{
  border-color: #fed7aa;    /* светло‑оранжевая пунктирная рамка при ховере всей строки */
}
.sb-code-row{display:flex;align-items:center;gap:10px;border:1px dashed #dbe1ea;border-radius:10px;padding:8px 8px 8px 12px}
.sb-code-value,.sb-code-mask{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.05em;background:#f2f5fa;padding:6px 10px;border-radius:8px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Buttons */
.sb-btn{border:1px solid #e7e3ff;background:#fff;color:#5b34ff;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;transition:filter .2s ease,transform .04s ease,background .2s ease; text-decoration: none;}
.sb-btn:hover{filter:saturate(1.05)}
.sb-btn--copy{white-space:nowrap}
.sb-btn--grad{background:linear-gradient(90deg,#00c853,#64dd17);color:#fff;border:none}
.sb-btn--grad:hover{filter:brightness(1.06);box-shadow:0 10px 22px rgba(0,200,83,.18)}
.sb-btn--ghost{background:#fff}

/* Meta + Metrics */
.sb-meta{margin-top:10px;display:flex;align-items:center;gap:12px;color:#6a7280;font-size:12px;flex-wrap:wrap}
.sb-dot::before{content:"•";margin:0 2px;color:#c6ccd6}
.sb-verify.is-ok{color:#16a34a;font-weight:700}
.sb-verify.is-not{color:#a3a3a3;font-weight:700}

.sb-metrics{display:grid;gap:8px;margin-top:12px}
.sb-metric{display:grid;gap:6px}
.sb-metric__head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#6a7280}
.sb-metric__bar{height:10px;background:#edf1f7;border-radius:999px;overflow:hidden}
.sb-metric__bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#84cc16);width:var(--w,40%);transition:width .6s ease}
.sb-metric__bar--time>i{background:linear-gradient(90deg,#fde047,#fb923c)}

/* Brand letter palette — shared with stores (оставим дубли, чтобы cards был самодостаточен) */
.sb-logo--c1{background:#ff7a59}.sb-logo--c2{background:#14b8a6}.sb-logo--c3{background:#6366f1}
.sb-logo--c4{background:#0ea5e9}.sb-logo--c5{background:#22c55e}.sb-logo--c6{background:#f97316}

/* Mobile full-width helpers (только для карточек) */
@media (max-width:768px){
  .sb-grid{grid-template-columns:1fr}
}
/* Название купона: серый, нежирный, меньше, 2 строки */
.sb-card__title.sb-card__title--name{
  font-size:14px;
  font-weight:400;
  color:#6a7280;
  margin:4px 0 6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.4;
  min-height:calc(1.4em * 2);
}

/* Скидка как «боди»: жирный чёрный, крупнее */
.sb-card__deal{
  font-size:24px;
  font-weight:700;
  color:#111827;
  margin-bottom:8px;
}

.verify {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  color: #16a34a; /* зелёный */
  font-size: 13px;
}

.verify svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.verify.not {
  color: #a3a3a3;
  font-weight: 600;
}

/* === Badges for coupons (compact) === */
.badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;          /* немного больше вертикальный отступ */
  border-radius: 6px;
  display: inline-flex;      /* иконка + текст в линию */
  align-items: center;       /* центрируем по вертикали */
  gap: 3px;                  /* расстояние между иконкой и текстом */
  line-height: 1;            /* убираем "лишний воздух" */
  vertical-align: middle;    /* выравнивание в строке */
}

/* Контейнер для бейджей */
.sb-badges {
  display: flex;
  flex-wrap: wrap;     /* бейджи переносятся на новую строку */
  gap: 4px;            /* расстояние между бейджами */
  margin-top: 4px;     /* чуть ниже логотипа/названия */
  max-width: 100%;     /* не выползают за пределы карточки */
}

/* Specific badges */
.badge.hot {
  background: var(--badge-hot, #fff5f7);
  color: #b42356;
}
.badge.sitewide {
  background: var(--badge-sitewide, #eef6ff);
  color: #1e40af;
}
.badge.limited {
  background: var(--badge-limited, #f7f3ff);
  color: #6d28d9;
}
.badge.flash {
  background: var(--badge-flash, #fffbea);
  color: #a16207;
}

/* For icons (emoji / svg / img) */
.badge svg,
.badge img {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ===== META LINE (без точек) ===== */
.sb-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;                  /* расстояние между блоками */
  color: #6b7280;
  font-size: 11px;
  line-height: 1.3;
  margin: 6px 0 10px;
}

/* Каждый кусочек */
.sb-meta-line .meta-chunk {
  display: inline-flex;
  align-items: center;
  gap: 2px;                   /* иконка + текст компактно */
  white-space: nowrap;
  font-size: 11px;
}

/* Verified блок */
.verify {
  display: inline-flex;
  align-items: center;
  gap: 2px;                   /* галочка ближе к тексту */
  font-weight: 600;
  color: #16a34a;
  font-size: 11px;
}

.verify svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.verify.not {
  color: #a3a3a3;
  font-weight: 600;
}

/* === Reveal mask over code === */
.sb-code-row { position: relative; }
.sb-code-value { display: none; }                      /* скрыто по умолчанию */
.sb-card.is-revealed .sb-code-value { display: inline-block; }
.sb-card.is-revealed .sb-code-mask { display: none; }

.sb-code-mask{
  border:1px dashed #d3d9e4;
  background: linear-gradient(90deg,#f3f4f6 0%, #ffffff 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: sbShimmer 2s linear infinite;
  color:#111827;
  border-radius:8px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
@keyframes sbShimmer{0%{background-position:0% 0}100%{background-position:-200% 0}}

/* === Modal === */
.sb-reveal[hidden]{display:none}
.sb-reveal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.sb-reveal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
}
.sb-reveal__dialog{
  position:relative;
  background:#fff;
  width:min(560px, 92vw);
  border-radius:16px;
  padding:22px 22px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  z-index:1;
  text-align:center;
}
.sb-reveal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--sb-orange);
  border: 2px solid var(--sb-orange);
  border-radius: 999px;
  font-size: 18px;          /* хорошо видно на мобиле */
  font-weight: 700;
  line-height: 1;           /* чтобы X не "плавал" по вертикали */
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  cursor: pointer;
}
.sb-reveal__brand{margin-top:6px; margin-bottom:10px;}
.sb-reveal__logo img{width:76px; height:76px; border-radius:12px; object-fit:cover}
.sb-reveal__letter{display:inline-grid; place-items:center; width:76px; height:76px; border-radius:12px; color:#fff; font-weight:800; font-size:28px; background:#6366f1}

.sb-reveal__title{font-size:22px; font-weight:800; margin:12px 0 8px}
.sb-reveal__toast{display:inline-block; background:#111827; color:#fff; padding:8px 12px; border-radius:10px; margin:2px 0 10px}
.sb-reveal__code{margin:8px 0 12px}
.sb-reveal__code-value{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  display:inline-block; padding:14px 20px; border-radius:12px;
  background:#f2f5fa; font-weight:800; letter-spacing:.06em; font-size:24px;
}

.sb-reveal__actions{display:flex; gap:10px; justify-content:center; margin:8px 0 12px}
.sb-reveal__shop{min-width:260px}

.sb-reveal__poll-q{margin-top:8px; color:#374151; font-weight:700}
.sb-reveal__poll-a{display:flex; gap:10px; justify-content:center; margin-top:8px}
.sb-poll{border:1px solid #e5e7eb; background:#fff; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700}
.sb-poll--yes{color:#16a34a}
.sb-poll--no {color:#ef4444}

/* 0) брендовый оранжевый (если уже есть – можно пропустить) */
:root { --sb-orange: #f97316; } /* как в бренде Sale (оранжевый) */

/* 1) Кнопка-крестик: видимый, в центре, не "прыгает" */
.sb-reveal__dialog { position: relative; }

/* Диалог — опора для абс. позиционирования */
.sb-reveal__dialog,
.sb-reveal_dialog,
.sb-reveal__box {
  position: relative;
}

/* Крестик: таргетируем обе версии класса на всякий случай */
.sb-reveal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;               /* шире, чем высота */
  height: 28px;              /* пониже */
  border-radius: 8px;        /* плавные углы */
  border: 2px solid #f97316; /* оранжевая рамка */
  color: #f97316;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;   /* крест по центру */
  cursor: pointer;
  box-sizing: border-box;
}

/* hover */
.sb-reveal__close:hover {
  background: #f97316;
  color: #fff;
}

/* 2) Экшены: более компактная высота и понятная сетка на мобиле */
.sb-reveal__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 12px;
}

/* Copy again – дать больше места на мобиле */
.sb-reveal__actions [data-reveal-copy]{
  padding: 12px 16px;
  min-width: 44%;
}

/* Use at store/Shop with code – не растягивать по высоте */
.sb-reveal__actions .sb-reveal__shop{
  width: 100%;
  padding: 12px 16px;      /* ниже дефолта, чтобы не "вытягивалась" */
  min-width: 0;            /* отмена прежнего min-width */
}

/* На экранах >= 480px – две колонки выглядят аккуратнее */
@media (min-width: 480px){
  .sb-reveal__actions [data-reveal-copy]{ min-width: 200px; }
  .sb-reveal__actions .sb-reveal__shop{
    width: auto;
    min-width: 260px;
  }
}

.sb-card .sb-code-row .sb-code-mask:hover{
  color:#f97316 !important;
}

/* 1) Дадим кнопке Reveal управляемый размер шрифта */
.sb-code-mask[data-reveal]{
  font-size: var(--reveal-fs, 16px);
}

/* 1) Дадим кнопке Reveal управляемый размер шрифта */
.sb-code-mask[data-reveal]{
  font-size: var(--reveal-fs, 16px);
}

/* Desktop-only: уменьшить шрифт у Reveal, не ломая мобильные */
@media (min-width: 1024px){
  .sb-card{ --reveal-fs:12px; }                 /* был 16px */
  .sb-code-row .sb-code-mask[data-reveal]{ 
    padding: 6px 10px;                          /* компактнее, чтобы Copy не съезжал */
  }
}