/* Base */
#wp-sb-root{
  position:fixed; left:0; right:0; z-index:999999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 700;
}
#wp-sb-inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--sb-gap, 10px); padding: var(--sb-pad-v, 24px) var(--sb-pad-h, 20px);
  width:100%;
  font-size: var(--sb-font, 24px);
}
#wp-sb-inner.has-btn{ padding-top: calc(var(--sb-pad-v,24px) - 2px); padding-bottom: calc(var(--sb-pad-v,24px) - 2px); }

#wp-sb-content{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sb-gap, 10px); }
#wp-sb-row{ display:flex; align-items:center; justify-content:center; gap: var(--sb-gap, 10px); width:auto; }
#wp-sb-timer{ min-width: var(--sb-timer-min, 200px); text-align:center; font-variant-numeric: tabular-nums; }
#wp-sb-text{ text-align:left; }

/* Close ('X') */
#wp-sb-close{
  position:absolute; right:12px; top:12px;
  width: var(--sb-close, 30px); height: var(--sb-close, 30px);
  border:0; border-radius:6px;
  background: rgba(255,255,255,0.2); color: inherit; cursor:pointer;
  font-weight:700; line-height: var(--sb-close, 30px); text-align:center;
}
#wp-sb-close:hover{ background: rgba(255,255,255,0.3); }
#wp-sb-close:focus{ outline:2px solid rgba(255,255,255,0.6); outline-offset:2px; }

/* CTA Button */
#wp-sb-btn{ display:inline-block; padding: var(--sb-btn-pad-v, 10px) var(--sb-btn-pad-h, 18px); border-radius: var(--sb-btn-radius, 10px); font-weight:700; text-decoration:none; border:0; }
#wp-sb-btn-wrap{ display:flex; align-items:center; justify-content:center; margin-top:6px; width:auto; }

/* Size presets */
.wp-sb-size-compact{
  --sb-font: 20px;
  --sb-pad-v: 16px; --sb-pad-h: 16px;
  --sb-gap: 8px;
  --sb-timer-min: 170px;
  --sb-btn-pad-v: 8px; --sb-btn-pad-h: 14px; --sb-btn-radius: 8px;
  --sb-close: 26px;
}
.wp-sb-size-medium{
  --sb-font: 24px;
  --sb-pad-v: 24px; --sb-pad-h: 20px;
  --sb-gap: 10px;
  --sb-timer-min: 200px;
  --sb-btn-pad-v: 10px; --sb-btn-pad-h: 18px; --sb-btn-radius: 10px;
  --sb-close: 30px;
}
.wp-sb-size-large{
  --sb-font: 28px;
  --sb-pad-v: 30px; --sb-pad-h: 24px;
  --sb-gap: 12px;
  --sb-timer-min: 220px;
  --sb-btn-pad-v: 12px; --sb-btn-pad-h: 22px; --sb-btn-radius: 12px;
  --sb-close: 34px;
}

/* Boxed animated countdown style */
#wp-sb-timer.boxed { display:flex; align-items:center; gap:4px; font-family: 'DejaVu Sans Mono', ui-monospace, Menlo, Consolas, monospace; }
#wp-sb-timer.boxed .digit { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:10px; background: rgba(255,255,255,0.14); box-shadow: inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12); font-weight:700; }
#wp-sb-inner.wp-sb-size-compact #wp-sb-timer.boxed .digit { min-width:32px; padding:5px 7px; border-radius:10px; }
#wp-sb-inner.wp-sb-size-large #wp-sb-timer.boxed .digit { min-width:56px; padding:12px 14px; border-radius:14px; }
#wp-sb-timer.boxed .sep { padding:0 3px; opacity:.85; font-weight:700; }
#wp-sb-timer.boxed .unit { margin-left:4px; opacity:.9; font-weight:700; }
#wp-sb-timer.boxed .digit.tick { animation: sb-pop .32s ease-out; }
@keyframes sb-pop { 0%{ transform: scale(.9); filter:brightness(1.05);} 50%{ transform: scale(1.06); filter:brightness(1.2);} 100%{ transform: scale(1); filter:none;} }



/* Timer background pill for text style */
#wp-sb-timer.has-bg { background: var(--timer-bg); color: var(--timer-fg); padding: 6px 10px; border-radius: 12px; }
#wp-sb-inner.wp-sb-size-compact #wp-sb-timer.has-bg { padding: 4px 8px; border-radius: 10px; }
#wp-sb-inner.wp-sb-size-large   #wp-sb-timer.has-bg { padding: 10px 14px; border-radius: 14px; }

/* Use timer variables on boxed & flip digits */
#wp-sb-timer.boxed .digit, #wp-sb-timer.flipstyle .card { position:relative; width:48px; height:64px; border-radius:10px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12); overflow:hidden; text-align:center; font-weight:700; }

/* Flip style */
#wp-sb-timer.flipstyle { display:flex; align-items:center; gap:3px; font-family: 'DejaVu Sans Mono', ui-monospace, Menlo, Consolas, monospace; perspective: 800px; }
#wp-sb-timer.flipstyle .card { position:relative; width:48px; height:64px; border-radius:10px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12); overflow:hidden; text-align:center; font-weight:700; }
#wp-sb-inner.wp-sb-size-compact #wp-sb-timer.flipstyle .card { width:38px; height:52px; border-radius:9px; }
#wp-sb-inner.wp-sb-size-large   #wp-sb-timer.flipstyle .card { width:60px; height:76px; border-radius:12px; }
#wp-sb-timer.flipstyle .card .face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; transform-origin:center; }
#wp-sb-inner.wp-sb-size-compact #wp-sb-timer.flipstyle .card .face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; transform-origin:center; }
#wp-sb-inner.wp-sb-size-large   #wp-sb-timer.flipstyle .card .face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; transform-origin:center; }
#wp-sb-timer.flipstyle .card .front { transform: rotateX(0deg); }
#wp-sb-timer.flipstyle .card .back  { transform: rotateX(180deg); }
#wp-sb-timer.flipstyle .card.flipped .front { transform: rotateX(-180deg); }
#wp-sb-timer.flipstyle .card.flipped .back  { transform: rotateX(0deg); }
#wp-sb-timer.flipstyle .sep { padding:0 2px; font-weight:700; opacity:.9; }
#wp-sb-timer.flipstyle .unit { margin-left:3px; font-weight:700; opacity:.9; }


#wp-sb-timer.flipstyle .card.anim .face { transition: transform .45s ease; }

/* Flip timer background + auto text color */
#wp-sb-timer.flipstyle .card { background: var(--timer-bg, rgba(255,255,255,0.14)); }
#wp-sb-timer.flipstyle .card .face { color: var(--timer-fg, currentColor); }

/* Shortcode CTA alignment */
#wp-sb-btn-wrap .wp-sb-cta.is-shortcode{ display:flex; justify-content:center; align-items:center; gap:.5rem; }
#wp-sb-btn-wrap .wp-sb-cta.is-shortcode > * { margin:0; }
/* --- 2025-08: container-aligned centering + mobile timer centering --- */
#wp-sb-inner{ margin-left:auto; margin-right:auto; max-width: var(--sb-max, none); text-align:center; }
#wp-sb-btn-wrap{ margin-left:auto; margin-right:auto; }

@media (max-width: 560px){
  #wp-sb-row{ flex-wrap: wrap; }
  #wp-sb-text, #wp-sb-timer{ flex: 1 0 100%; }
  #wp-sb-text{ text-align:center; }
  #wp-sb-timer{ display:flex; justify-content:center; margin-top:6px; width:100%; }
}
/* Center bar content to the theme's container when available */
#wp-sb-inner{
  width:100%;
  box-sizing:border-box;
  margin-left:auto; margin-right:auto;   /* fallback */
  margin-inline:auto;                    /* modern logical centering */
  max-width: min(
    var(--wp--style--global--wide-size, var(--wp--style--global--content-size, var(--wp-sb-max, 1200px))),
    100%
  );
}

/* Mobile: stack and center timer when it wraps */
@media (max-width: 560px){
  #wp-sb-row{ flex-wrap: wrap; }
  #wp-sb-text, #wp-sb-timer{ flex:1 0 100%; text-align:center; }
  #wp-sb-timer{ display:flex; justify-content:center; }
}


/* Hide bar until display trigger fires */
#wp-sb-root.wpsb-hidden{display:none!important}

/* Hide bar globally while waiting for trigger */
.wpsb-wait #wp-sb-root{display:none!important}