/* giveawaybar.css — the site-wide offer callout.
 *
 * One thin row directly below the hero on every page. It must never become the
 * loudest thing on a page it does not own, and it must never cause horizontal
 * overflow at any width (the house gate is "no horizontal spill, ever"), which
 * is why every child is allowed to shrink and the digits never wrap mid-unit.
 *
 * Loaded site-wide, so it stays small. */

.giveawaybar{
  background:linear-gradient(100deg,var(--accent) 0%,var(--primary) 62%,#3a49a5 100%);
  color:#fff;
  border-top:2px solid var(--secondary);
  position:relative;
  z-index:2;
}

.giveawaybar-in{
  display:flex;
  align-items:center;
  gap:clamp(10px,2.2vw,26px);
  padding-top:11px;
  padding-bottom:11px;
  flex-wrap:wrap;
}

/* ---------- offer text ---------- */
.giveawaybar-offer{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 260px;
  min-width:0;                 /* lets the text shrink instead of pushing the row wide */
  font-size:14.5px;
  line-height:1.35;
}
.giveawaybar-tag{
  flex:0 0 auto;
  font-family:var(--head);
  font-weight:800;
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  background:var(--secondary);
  color:#fff;
  padding:4px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.giveawaybar-text{ min-width:0 }
.giveawaybar-text b{ color:#fff; font-weight:700 }
.giveawaybar-free{
  color:#ffd7d9;
  font-weight:700;
  white-space:nowrap;
}

/* ---------- countdown ---------- */
.giveawaybar-clock{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 1 auto;
  min-width:0;
}
.giveawaybar-clock-label{
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:var(--head);
  font-weight:700;
  color:#b9c8e8;
  white-space:nowrap;
}
.giveawaybar-digits{ display:flex; gap:6px; align-items:flex-end }
.giveawaybar-digits[hidden]{ display:none }
.sb-u{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  padding:3px 7px 2px;
  min-width:38px;
}
.sb-u b{
  font-family:var(--head);
  font-weight:800;
  font-size:16px;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.sb-u i{
  font-style:normal;
  font-size:9.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#a9bcdd;
  line-height:1.3;
}

/* ---------- cta ---------- */
.giveawaybar-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--secondary);
  color:#fff !important;
  font-family:var(--head);
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  padding:10px 20px;
  border-radius:999px;
  border:2px solid transparent;
  white-space:nowrap;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.giveawaybar-cta:hover,
.giveawaybar-cta:focus-visible{
  background:var(--secondary-alt);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(206,35,41,.36);
}
.giveawaybar-cta .icon{ width:16px; height:16px; flex:0 0 auto }

/* Closed state: the bar stops selling and starts informing. */
.giveawaybar.is-closed{ background:linear-gradient(100deg,#20304a,#33415c) }
.giveawaybar.is-closed .giveawaybar-tag{ background:#5b6b85 }
.giveawaybar.is-closed .giveawaybar-cta{ background:transparent; border-color:rgba(255,255,255,.4) }

/* ---------- responsive ----------
 * Below 900px the countdown moves to its own line so the CTA never gets
 * squeezed to a two-line button; below 560px seconds are dropped (they force a
 * repaint every second for no informational value on a multi-day countdown)
 * and the CTA goes full width as the row's primary action. */
@media (max-width:900px){
  .giveawaybar-in{ gap:9px 14px }
  .giveawaybar-offer{ flex:1 1 100% }
  .giveawaybar-clock{ flex:1 1 auto }
  .giveawaybar-cta{ margin-left:auto }
}
@media (max-width:560px){
  .giveawaybar-in{ padding-top:10px; padding-bottom:10px }
  .giveawaybar-offer{ font-size:13.5px; gap:8px }
  .giveawaybar-clock-label{ font-size:10.5px }
  .sb-sec{ display:none }
  .sb-u{ min-width:34px; padding:2px 6px 1px }
  .sb-u b{ font-size:15px }
  .giveawaybar-cta{ flex:1 1 100%; justify-content:center; margin-left:0; padding:11px 16px }
}

@media (prefers-reduced-motion:reduce){
  .giveawaybar-cta{ transition:none }
  .giveawaybar-cta:hover,.giveawaybar-cta:focus-visible{ transform:none }
}