/* ===== Shengmilo Holiday Bar – styles ===== */
/* Inter Bold, self-hosted (GDPR-safe). Your theme only loads Inter 400/500, so bold was being faked. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-700.woff") format("woff");
}
.shb-bar {
  /* matched 1:1 to sheng-milo.com: Inter 16px / 700 / 0.96px / line-height 1.8 / padding 12px 24px / 45deg 400% ease */
  position: relative;
  z-index: 1000;
  overflow: hidden;
  padding: var(--shb-pad, 12px) 24px;
  background: var(--shb-bg, #e53835);
  background-size: 400% 400%;
  animation: shbMove var(--shb-speed, 5s) ease infinite;
  color: var(--shb-fg, #fff);
  font-family: Inter, sans-serif;
  font-size: var(--shb-size, 16px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .96px;
  text-align: center;
}
.shb-slot { position: relative; min-height: 1.8em; }
.shb-msg {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  opacity: 1;
  transition: opacity .35s ease;
}
.shb-msg[hidden] { display: none; }
.shb-msg.shb-fade { opacity: 0; }
.shb-link { color: inherit !important; text-decoration: none; }
.shb-link:hover { text-decoration: underline; }

.shb-code-wrap { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.shb-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 12px;
  border: 1.5px dashed currentColor;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: inherit;
  font: inherit;
  font-weight: 700;
  letter-spacing: .6px;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.shb-code:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
.shb-ico { width: .85em; height: .85em; }
.shb-code.shb-copied { border-style: solid; }
.shb-code.shb-copied .shb-ico { display: none; }
.shb-code.shb-copied::after { content: "✓"; }

.shb-cd {
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,.25);
  font-weight: 500;
}
.shb-cd[hidden] { display: none; }
.shb-cd-time { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .shb-bar { padding: var(--shb-pad, 12px) 12px; } /* same size as desktop, like sheng-milo.com */
  .shb-msg { gap: 4px 8px; }
  .shb-extra { display: none; } /* only the main part of the message on phones */
  /* never wrap to two lines on phones – cut with … if a message is still too long */
  .shb-msg { max-width: 100%; flex-wrap: nowrap; }
  .shb-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* compact countdown on phones: one line, no "Ends in" label, takes only the space it needs */
  .shb-msg { justify-content: center; gap: 8px; }
  .shb-cd { flex: none; padding: 1px 8px; border-radius: 6px; white-space: nowrap; line-height: 1.6; }
  .shb-cd-label { display: none; }
  .shb-code-wrap .shb-code-label { display: none; }
  .shb-code { padding: 1px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .shb-bar { animation: none; }
  .shb-msg { transition: none; }
}
@keyframes shbMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== Shengmilo Trust Slider – styles ===== */
.shb-trust-row { background: #fff; border-bottom: 1px solid #ececec; }
.shb-trust {
  /* text matched to sheng-milo.com's second bar: Inter 16px / 400 / 1px */
  display: flex;
  align-items: center;
  gap: 6px;
  width: 520px;                      /* fixed width: theme containers shrink-to-fit */
  max-width: calc(100vw - 24px);
  min-height: 48px;
  margin: 0 auto;
  color: #111;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.3;
}
.shb-tr-track { position: relative; flex: 1 1 auto; min-width: 0; width: 100%; height: 1.7em; overflow: hidden; }
.shb-tr-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .45s ease, transform .45s ease;
}
.shb-tr-item span { overflow: hidden; text-overflow: ellipsis; }
.shb-tr-item.is-active { opacity: 1; transform: none; }
.shb-tr-item.is-out { transform: translateX(-40px); }
.shb-tr-item svg { flex: none; width: 21px; height: 21px; color: #e53935; }
.shb-tr-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #666;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.shb-tr-btn:hover { background: #f1f1f1; color: #111; }
.shb-tr-btn svg { width: 18px; height: 18px; }
.shb-tr-single .shb-tr-btn { visibility: hidden; }
@media (max-width: 600px) {
  .shb-trust { min-height: 44px; }
  .shb-tr-item svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .shb-tr-item, .shb-tr-item.is-out { transform: none; }
}