/**
 * Smart Notification Bar — frontend styles.
 *
 * Every themable value is a CSS custom property written onto #snb-root as an
 * inline style. Nothing here hard-codes a colour, so the admin preview can
 * restyle the bar by rewriting variables alone.
 */

/* ------------------------------------------------------------------ */
/* Bar shell                                                           */
/* ------------------------------------------------------------------ */

.snb-bar {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: var(--snb-bg);
  color: var(--snb-text);
  font-family: var(--snb-font);
  font-size: var(--snb-font-size);
  font-weight: var(--snb-font-weight);
  line-height: var(--snb-line-height);
  letter-spacing: var(--snb-letter-spacing);
  text-transform: var(--snb-text-transform);
  border-style: var(--snb-border-style);
  border-color: var(--snb-border-color);
  border-top-width: var(--snb-border-top);
  border-bottom-width: var(--snb-border-bottom);
  border-left-width: var(--snb-border-side);
  border-right-width: var(--snb-border-side);
  border-radius: var(--snb-radius);
  box-shadow: var(--snb-shadow);
  z-index: var(--snb-z);
  overflow: hidden;
}

.snb-bar *,
.snb-bar *::before,
.snb-bar *::after {
  box-sizing: border-box;
}

.snb-bar[hidden] {
  display: none;
}

/* Positioning ------------------------------------------------------- */

.snb-behavior-fixed {
  position: fixed;
  left: 0;
  right: 0;
}

.snb-behavior-fixed.snb-pos-top {
  top: 0;
}

.snb-behavior-fixed.snb-pos-bottom {
  bottom: 0;
}

.snb-behavior-sticky {
  position: sticky;
  top: 0;
}

.snb-behavior-sticky.snb-pos-bottom {
  top: auto;
  bottom: 0;
}

/* `static` needs no rules — it flows in the footer where it is printed. */

/* Background image overlay ------------------------------------------ */

.snb-overlay {
  position: absolute;
  inset: 0;
  background: var(--snb-overlay);
  pointer-events: none;
}

/* Inner layout ------------------------------------------------------ */

.snb-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: var(--snb-justify);
  gap: var(--snb-gap);
  width: 100%;
  max-width: var(--snb-max-width);
  margin: 0 auto;
  padding: var(--snb-pad-y) var(--snb-pad-x);
}

.snb-content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* lets long text shrink instead of overflowing the flex row */
}

.snb-text {
  min-width: 0;
}

.snb-text > *:first-child { margin-top: 0; }
.snb-text > *:last-child  { margin-bottom: 0; }

.snb-text p {
  margin: 0;
}

.snb-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

/* Inherits currentColor, so it always tracks the bar's text colour. Sized in em
   so it scales with the font size rather than needing its own control. */
.snb-icon svg {
  width: 1.25em;
  height: 1.25em;
  display: block;
}

.snb-toggle-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.snb-toggle-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Links inside the message ------------------------------------------ */

.snb-text a {
  color: var(--snb-link);
  text-decoration: var(--snb-link-decoration);
  transition: color .18s ease;
}

.snb-text a:hover,
.snb-text a:focus {
  color: var(--snb-link-hover);
}

/* When the bar is centred, keep the close button pinned to the edge
   instead of letting it participate in the centring. */
.snb-align-center .snb-close,
.snb-align-left .snb-close,
.snb-align-right .snb-close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.snb-close-right .snb-close { right: var(--snb-pad-x); }
.snb-close-left  .snb-close { left:  var(--snb-pad-x); }

/* The close button is out of flow, so nothing else knows it is there. Without
   reserving its footprint the button row slides straight underneath it — which
   is exactly what happened to "Learn more" in testing. */
.snb-close-right .snb-inner {
  padding-right: calc(var(--snb-pad-x) + var(--snb-close-size) + 26px);
}

.snb-close-left .snb-inner {
  padding-left: calc(var(--snb-pad-x) + var(--snb-close-size) + 26px);
}

/* In space-between mode the close button IS a flex child, so it takes its own
   space and the reservation would double-count. */
.snb-align-space-between.snb-close-right .snb-inner { padding-right: var(--snb-pad-x); }
.snb-align-space-between.snb-close-left  .snb-inner { padding-left:  var(--snb-pad-x); }

/* In space-between mode the close button is a real flex child. */
.snb-align-space-between .snb-close {
  position: static;
  transform: none;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.snb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.snb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-style: solid;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

.snb-btn:hover {
  transform: translateY(-1px);
}

.snb-btn:active {
  transform: translateY(0);
}

.snb-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.snb-btn-link {
  text-decoration: underline;
}

/* Per-button variables. Ten slots covers the repeater's hard cap. */
.snb-btn-idx-0 { background: var(--snb-btn0-bg); color: var(--snb-btn0-text); border-color: var(--snb-btn0-border); border-width: var(--snb-btn0-border-width); border-radius: var(--snb-btn0-radius); font-size: var(--snb-btn0-font-size); font-weight: var(--snb-btn0-font-weight); padding: var(--snb-btn0-pad-y) var(--snb-btn0-pad-x); letter-spacing: var(--snb-btn0-letter-spacing); text-transform: var(--snb-btn0-text-transform); box-shadow: var(--snb-btn0-shadow); }
.snb-btn-idx-0:hover { background: var(--snb-btn0-hover-bg); color: var(--snb-btn0-hover-text); border-color: var(--snb-btn0-hover-border); }

.snb-btn-idx-1 { background: var(--snb-btn1-bg); color: var(--snb-btn1-text); border-color: var(--snb-btn1-border); border-width: var(--snb-btn1-border-width); border-radius: var(--snb-btn1-radius); font-size: var(--snb-btn1-font-size); font-weight: var(--snb-btn1-font-weight); padding: var(--snb-btn1-pad-y) var(--snb-btn1-pad-x); letter-spacing: var(--snb-btn1-letter-spacing); text-transform: var(--snb-btn1-text-transform); box-shadow: var(--snb-btn1-shadow); }
.snb-btn-idx-1:hover { background: var(--snb-btn1-hover-bg); color: var(--snb-btn1-hover-text); border-color: var(--snb-btn1-hover-border); }

.snb-btn-idx-2 { background: var(--snb-btn2-bg); color: var(--snb-btn2-text); border-color: var(--snb-btn2-border); border-width: var(--snb-btn2-border-width); border-radius: var(--snb-btn2-radius); font-size: var(--snb-btn2-font-size); font-weight: var(--snb-btn2-font-weight); padding: var(--snb-btn2-pad-y) var(--snb-btn2-pad-x); letter-spacing: var(--snb-btn2-letter-spacing); text-transform: var(--snb-btn2-text-transform); box-shadow: var(--snb-btn2-shadow); }
.snb-btn-idx-2:hover { background: var(--snb-btn2-hover-bg); color: var(--snb-btn2-hover-text); border-color: var(--snb-btn2-hover-border); }

.snb-btn-idx-3 { background: var(--snb-btn3-bg); color: var(--snb-btn3-text); border-color: var(--snb-btn3-border); border-width: var(--snb-btn3-border-width); border-radius: var(--snb-btn3-radius); font-size: var(--snb-btn3-font-size); font-weight: var(--snb-btn3-font-weight); padding: var(--snb-btn3-pad-y) var(--snb-btn3-pad-x); letter-spacing: var(--snb-btn3-letter-spacing); text-transform: var(--snb-btn3-text-transform); box-shadow: var(--snb-btn3-shadow); }
.snb-btn-idx-3:hover { background: var(--snb-btn3-hover-bg); color: var(--snb-btn3-hover-text); border-color: var(--snb-btn3-hover-border); }

.snb-btn-idx-4 { background: var(--snb-btn4-bg); color: var(--snb-btn4-text); border-color: var(--snb-btn4-border); border-width: var(--snb-btn4-border-width); border-radius: var(--snb-btn4-radius); font-size: var(--snb-btn4-font-size); font-weight: var(--snb-btn4-font-weight); padding: var(--snb-btn4-pad-y) var(--snb-btn4-pad-x); letter-spacing: var(--snb-btn4-letter-spacing); text-transform: var(--snb-btn4-text-transform); box-shadow: var(--snb-btn4-shadow); }
.snb-btn-idx-4:hover { background: var(--snb-btn4-hover-bg); color: var(--snb-btn4-hover-text); border-color: var(--snb-btn4-hover-border); }

.snb-btn-idx-5 { background: var(--snb-btn5-bg); color: var(--snb-btn5-text); border-color: var(--snb-btn5-border); border-width: var(--snb-btn5-border-width); border-radius: var(--snb-btn5-radius); font-size: var(--snb-btn5-font-size); font-weight: var(--snb-btn5-font-weight); padding: var(--snb-btn5-pad-y) var(--snb-btn5-pad-x); letter-spacing: var(--snb-btn5-letter-spacing); text-transform: var(--snb-btn5-text-transform); box-shadow: var(--snb-btn5-shadow); }
.snb-btn-idx-5:hover { background: var(--snb-btn5-hover-bg); color: var(--snb-btn5-hover-text); border-color: var(--snb-btn5-hover-border); }

.snb-btn-idx-6 { background: var(--snb-btn6-bg); color: var(--snb-btn6-text); border-color: var(--snb-btn6-border); border-width: var(--snb-btn6-border-width); border-radius: var(--snb-btn6-radius); font-size: var(--snb-btn6-font-size); font-weight: var(--snb-btn6-font-weight); padding: var(--snb-btn6-pad-y) var(--snb-btn6-pad-x); letter-spacing: var(--snb-btn6-letter-spacing); text-transform: var(--snb-btn6-text-transform); box-shadow: var(--snb-btn6-shadow); }
.snb-btn-idx-6:hover { background: var(--snb-btn6-hover-bg); color: var(--snb-btn6-hover-text); border-color: var(--snb-btn6-hover-border); }

.snb-btn-idx-7 { background: var(--snb-btn7-bg); color: var(--snb-btn7-text); border-color: var(--snb-btn7-border); border-width: var(--snb-btn7-border-width); border-radius: var(--snb-btn7-radius); font-size: var(--snb-btn7-font-size); font-weight: var(--snb-btn7-font-weight); padding: var(--snb-btn7-pad-y) var(--snb-btn7-pad-x); letter-spacing: var(--snb-btn7-letter-spacing); text-transform: var(--snb-btn7-text-transform); box-shadow: var(--snb-btn7-shadow); }
.snb-btn-idx-7:hover { background: var(--snb-btn7-hover-bg); color: var(--snb-btn7-hover-text); border-color: var(--snb-btn7-hover-border); }

.snb-btn-idx-8 { background: var(--snb-btn8-bg); color: var(--snb-btn8-text); border-color: var(--snb-btn8-border); border-width: var(--snb-btn8-border-width); border-radius: var(--snb-btn8-radius); font-size: var(--snb-btn8-font-size); font-weight: var(--snb-btn8-font-weight); padding: var(--snb-btn8-pad-y) var(--snb-btn8-pad-x); letter-spacing: var(--snb-btn8-letter-spacing); text-transform: var(--snb-btn8-text-transform); box-shadow: var(--snb-btn8-shadow); }
.snb-btn-idx-8:hover { background: var(--snb-btn8-hover-bg); color: var(--snb-btn8-hover-text); border-color: var(--snb-btn8-hover-border); }

.snb-btn-idx-9 { background: var(--snb-btn9-bg); color: var(--snb-btn9-text); border-color: var(--snb-btn9-border); border-width: var(--snb-btn9-border-width); border-radius: var(--snb-btn9-radius); font-size: var(--snb-btn9-font-size); font-weight: var(--snb-btn9-font-weight); padding: var(--snb-btn9-pad-y) var(--snb-btn9-pad-x); letter-spacing: var(--snb-btn9-letter-spacing); text-transform: var(--snb-btn9-text-transform); box-shadow: var(--snb-btn9-shadow); }
.snb-btn-idx-9:hover { background: var(--snb-btn9-hover-bg); color: var(--snb-btn9-hover-text); border-color: var(--snb-btn9-hover-border); }

/* ------------------------------------------------------------------ */
/* Close button                                                        */
/* ------------------------------------------------------------------ */

.snb-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(var(--snb-close-size) + 14px);
  height: calc(var(--snb-close-size) + 14px);
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--snb-close-bg);
  color: var(--snb-close-color);
  border-radius: var(--snb-close-radius);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.snb-close:hover,
.snb-close:focus {
  background: var(--snb-close-hover-bg);
  color: var(--snb-close-hover);
}

.snb-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.snb-close svg {
  width: var(--snb-close-size);
  height: var(--snb-close-size);
  display: block;
}

/* ------------------------------------------------------------------ */
/* Countdown                                                           */
/* ------------------------------------------------------------------ */

.snb-countdown {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: 4px;
}

.snb-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  padding: 4px 6px;
  background: var(--snb-countdown-bg);
  color: var(--snb-countdown-color);
  border-radius: 6px;
  line-height: 1.1;
}

.snb-cd-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1em;
}

.snb-cd-label {
  font-size: .68em;
  opacity: .8;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.snb-countdown-expired[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Toggle tab (close_behavior = toggle)                                */
/* ------------------------------------------------------------------ */

.snb-toggle {
  position: fixed;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  background: var(--snb-toggle-bg);
  color: var(--snb-toggle-color);
  font-family: var(--snb-font);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  z-index: var(--snb-z);
  -webkit-appearance: none;
  appearance: none;
}

.snb-toggle[hidden] {
  display: none;
}

.snb-toggle-top {
  top: 0;
  border-radius: 0 0 8px 8px;
}

.snb-toggle-bottom {
  bottom: 0;
  border-radius: 8px 8px 0 0;
}

.snb-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Animations                                                          */
/* ------------------------------------------------------------------ */

/* `.snb-in` is added by JS one frame after the bar is un-hidden, which is what
   actually triggers the transition. */

.snb-anim-fade:not(.snb-in),
.snb-anim-slide-fade:not(.snb-in),
.snb-anim-zoom:not(.snb-in) {
  opacity: 0;
}

.snb-anim-fade,
.snb-anim-slide,
.snb-anim-slide-fade,
.snb-anim-zoom {
  transition:
    opacity var(--snb-anim-duration) ease,
    transform var(--snb-anim-duration) cubic-bezier(.22, .61, .36, 1);
}

.snb-anim-slide.snb-pos-top:not(.snb-in),
.snb-anim-slide-fade.snb-pos-top:not(.snb-in) {
  transform: translateY(-100%);
}

.snb-anim-slide.snb-pos-bottom:not(.snb-in),
.snb-anim-slide-fade.snb-pos-bottom:not(.snb-in) {
  transform: translateY(100%);
}

.snb-anim-zoom:not(.snb-in) {
  transform: scale(.92);
}

.snb-anim-fade.snb-in,
.snb-anim-slide.snb-in,
.snb-anim-slide-fade.snb-in,
.snb-anim-zoom.snb-in {
  opacity: 1;
  transform: none;
}

.snb-anim-bounce.snb-in {
  animation: snb-bounce-in var(--snb-anim-duration) cubic-bezier(.28, 1.55, .5, 1) both;
}

@keyframes snb-bounce-in {
  0%   { opacity: 0; transform: scale(.86); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

/* Bar leaving on dismiss. */
.snb-bar.snb-out {
  opacity: 0;
  transition:
    opacity var(--snb-anim-duration) ease,
    transform var(--snb-anim-duration) ease;
}

.snb-bar.snb-out.snb-pos-top    { transform: translateY(-100%); }
.snb-bar.snb-out.snb-pos-bottom { transform: translateY(100%); }

@media (prefers-reduced-motion: reduce) {
  .snb-bar,
  .snb-btn,
  .snb-close,
  .snb-toggle {
    transition: none !important;
    animation: none !important;
  }
  .snb-bar:not(.snb-in) {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

/* Desktop/mobile message swap. The mobile copy only exists in the DOM when a
   separate mobile message is configured; `.snb-has-mobile-text` is added to the
   bar by the JS in that case, and is what tells the desktop copy to step aside
   below the breakpoint. */
.snb-text-mobile { display: none; }

@media (max-width: 782px) {
  .snb-bar {
    font-size: var(--snb-font-size-mobile);
  }

  .snb-hide-mobile {
    display: none !important;
  }

  .snb-has-mobile-text .snb-text-desktop { display: none; }
  .snb-has-mobile-text .snb-text-mobile  { display: block; }

  .snb-stack-mobile .snb-inner {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .snb-stack-mobile .snb-content {
    flex-direction: column;
    gap: 8px;
  }

  /* The message must be free to use the full width. Left as a flex item with a
     countdown beside it, it gets crushed into a one-word-per-line column — which
     is precisely what the mobile preview was showing. */
  .snb-stack-mobile .snb-text {
    width: 100%;
    max-width: 100%;
  }

  .snb-stack-mobile .snb-countdown {
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
  }

  .snb-stack-mobile .snb-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Stacked layout has no vertical centre to pin to — park the close button
     in the top corner instead. The horizontal reservation made for the
     side-mounted button is now wrong, so trade it for vertical room. */
  .snb-stack-mobile.snb-close-right .snb-inner,
  .snb-stack-mobile.snb-close-left .snb-inner {
    padding-left: var(--snb-pad-x);
    padding-right: var(--snb-pad-x);
    padding-top: calc(var(--snb-pad-y) + 16px);
  }

  .snb-stack-mobile .snb-close {
    position: absolute;
    top: 6px;
    transform: none;
  }

  .snb-stack-mobile.snb-close-right .snb-close { right: 6px; }
  .snb-stack-mobile.snb-close-left  .snb-close { left: 6px; }
}

/* ------------------------------------------------------------------ */
/* Inline (shortcode) rendering                                        */
/* ------------------------------------------------------------------ */

.snb-inline-wrap .snb-bar {
  position: static;
}