/*
 * Vivo Countdown 2.0 — styling through custom properties only.
 *
 * The old asset wrote a <style> block with #countdown_<id> selectors for every
 * instance. Custom properties do the same job, cascade into a shadow root, and
 * cost no markup: the WPBakery panel and the Elementor sliders both end up
 * setting the same handful of values on the wrapper.
 */

.vivo_tmr_wrap {
  --vivo-cd-digit-size:    60px;
  --vivo-cd-digit-color:   currentColor;
  --vivo-cd-unit-size:     20px;
  --vivo-cd-unit-color:    currentColor;
  --vivo-cd-border-size:   1px;
  --vivo-cd-border-color:  rgba(0, 0, 0, 0.15);
  --vivo-cd-border-radius: 8px;
  --vivo-cd-back-color:    transparent;
  --vivo-cd-gap:           0.75rem;
  --vivo-cd-cell-padding:  0.75rem 1rem;
  --vivo-cd-title-gap:     0.75rem;
  --vivo-cd-cell-min-width: 4.5rem;

  display: block;
}

/*
 * An h2, and deliberately almost unstyled: size, weight and font come from the
 * theme, which knows its own scale better than we do. Only the spacing is ours
 * — the top margin because a heading arriving with one would push the whole
 * element down, the bottom one because the counter needs air.
 */
.vivo_tmr_title {
  margin-top: 0;
  margin-bottom: var(--vivo-cd-title-gap);
}

/*
 * Laid out inline, not as a flex row.
 *
 * A flex container ignores text-align, and text-align is what every builder's
 * alignment control writes — Elementor's `align` sets it on the wrapper. With
 * flex the title moved and the cells stayed on the left, which looks like the
 * control is broken. Inline blocks obey it, so one setting moves the whole
 * element.
 *
 * No whitespace to worry about between the cells: the markup is built in
 * JavaScript, so no text nodes come between them.
 */
.vivo_tmr {
  display: block;
}

.vivo_tmr_unit + .vivo_tmr_unit {
  margin-left: var(--vivo-cd-gap);
}

.vivo_tmr_unit {
  /* Inline towards the line it sits in, a flex column on the inside — that is
   * what stacks the number over the name and centres both. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  text-align: center;
  min-width: var(--vivo-cd-cell-min-width);
  padding: var(--vivo-cd-cell-padding);
  background: var(--vivo-cd-back-color);
  border: var(--vivo-cd-border-size) solid var(--vivo-cd-border-color);
  border-radius: var(--vivo-cd-border-radius);
}

/*
 * The invisible twin that fixes the cell's width.
 *
 * height: 0 with overflow: hidden takes it out of the visible box while it
 * still contributes its intrinsic width — that is the whole trick. Each child
 * is a block, so the twin is as wide as its widest line: the largest number
 * this unit can reach, and every plural form of its name.
 *
 * visibility: hidden rather than display: none, because display: none has no
 * intrinsic width to contribute. aria-hidden keeps it out of the screen reader.
 */
.vivo_tmr_ghost {
  /* Hidden from the accessibility tree by aria-hidden, and from a text
   * selection by this — otherwise copying the countdown copies it twice. */
  -webkit-user-select: none;
  user-select: none;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.vivo_tmr_ghost > span {
  display: block;
  white-space: nowrap;
}

.vivo_tmr_num {
  font-size: var(--vivo-cd-digit-size);
  line-height: 1.05;
  font-weight: 700;
  color: var(--vivo-cd-digit-color);
  /* Tabular figures: without them the row twitches sideways on every tick. */
  font-variant-numeric: tabular-nums;
}

.vivo_tmr_txt {
  font-size: var(--vivo-cd-unit-size);
  color: var(--vivo-cd-unit-color);
  opacity: 0.75;
  white-space: nowrap;
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/*
 * Two hooks for whoever decides what expiry means. The element sets them and
 * stops there — the page, the template or the proxy does the rest, which is
 * where that knowledge lived in the old plugin too.
 *
 *   .is-expired   the target has been reached
 *   .is-invalid   the target could not be read
 */

.vivo_tmr_note {
  font-size: 0.8125rem;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
}

/*
 * Flip rendering. Width and height come from the renderer: the tiles are sized
 * by --vivo-cd-digit-size and only shrink when the box is too narrow.
 *
 * inline-block for the same reason as the cells above — a block element would
 * ignore text-align and stay on the left however the editor aligns it.
 */
.vivo_tmr_canvas {
  display: inline-block;
  max-width: 100%;
}