/* ============================================================
   Timer Styles — Additional visual styles for HurryTimer
   These styles are additive on top of the base main.css.
   The 'classic' style uses no extra class and relies on main.css.
   ============================================================ */

/* -----------------------------------------------------------
   ROUNDED STYLE
   Fully circular blocks with centered content.
   ----------------------------------------------------------- */
/* Three-class selector so it also wins over the Pro block rules (display,
   padding, radius). The diameter and fill come from css_template.php: it sizes
   the circle to its content so labels and digits always fit, and tints it from
   the digit color when no block background is set. */
.hurrytimer-campaign.hurryt-style-rounded .hurrytimer-timer-block {
    box-sizing: border-box;
    flex: 0 0 auto;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hurrytimer-campaign.hurryt-style-rounded .hurrytimer-timer-digit,
.hurrytimer-campaign.hurryt-style-rounded .hurrytimer-timer-label {
    line-height: 1.1;
    white-space: nowrap;
}

/* -----------------------------------------------------------
   MINIMAL STYLE
   No background, no border, just digits and small labels.
   ----------------------------------------------------------- */
.hurryt-style-minimal .hurrytimer-timer-block {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-left: 2px;
    margin-right: 2px;
    width: auto !important;
    height: auto !important;
}

.hurryt-style-minimal .hurrytimer-timer-digit {
    font-weight: 700;
}

.hurryt-style-minimal .hurrytimer-timer-label {
    font-weight: 400;
    opacity: 0.6;
}

.hurryt-style-minimal .hurrytimer-timer-sep {
    opacity: 0.4;
}

/* -----------------------------------------------------------
   CIRCLE PROGRESS STYLE
   SVG rings around each time unit.
   ----------------------------------------------------------- */
.hurryt-style-circle-progress .hurrytimer-timer-block {
    position: relative;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

.hurryt-style-circle-progress .hurryt-progress-block {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hurryt-style-circle-progress .hurryt-progress-ring {
    display: block;
}

.hurryt-style-circle-progress .hurryt-progress-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hurryt-style-circle-progress .hurryt-progress-bar {
    transition: stroke-dashoffset 1s linear;
}

.hurryt-style-circle-progress .hurrytimer-timer-sep {
    display: none;
}

/* -----------------------------------------------------------
   FLIP CLOCK STYLE
   One card per digit. A card is four half-height layers:
     .hurryt-flip-top          new value, revealed as the old top flap falls
     .hurryt-flip-bottom       old value, until the new bottom flap lands
     .hurryt-flip-leaf-top     old value, rotates 0 -> -90deg
     .hurryt-flip-leaf-bottom  new value, rotates 90deg -> 0
   Everything is sized in em, so the Digits size setting scales the whole
   clock. Card colors/border/radius come from the Block settings (see
   css_template.php); the digit color is the Digits color.
   ----------------------------------------------------------- */
.hurrytimer-campaign.hurryt-style-flip {
    --hurryt-flip-dur: .6s;
}

.hurrytimer-campaign.hurryt-style-flip .hurrytimer-timer {
    align-items: flex-start;
}

/* The unit wrapper only positions the cards and label; the cards carry the look. */
.hurrytimer-campaign.hurryt-style-flip .hurrytimer-timer-block {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    width: auto;
    height: auto;
}

.hurrytimer-campaign.hurryt-style-flip .hurrytimer-timer-digit {
    display: flex;
    justify-content: center;
    gap: .07em;
    line-height: 1;
    font-weight: 700;
}

.hurrytimer-campaign.hurryt-style-flip .hurrytimer-timer-sep {
    display: block;
    align-self: flex-start;
    line-height: 1.15;
    opacity: .55;
}

.hurryt-flip-digit {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: .72em;
    height: 1.15em;
    perspective: 9em;
    background-color: #f2f2f2;
    border-radius: var(--hurryt-flip-r, .1em);
}

.hurryt-flip-half {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    background-color: inherit;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* The glyph lives in a full-height box so each half shows its own side of it. */
.hurryt-flip-half > span {
    position: absolute;
    left: 0;
    right: 0;
    height: 200%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hurryt-flip-top,
.hurryt-flip-leaf-top {
    top: 0;
    border-radius: var(--hurryt-flip-r, .1em) var(--hurryt-flip-r, .1em) 0 0;
    background-image: linear-gradient(rgba(255, 255, 255, .08), rgba(0, 0, 0, .16));
}

.hurryt-flip-bottom,
.hurryt-flip-leaf-bottom {
    bottom: 0;
    border-radius: 0 0 var(--hurryt-flip-r, .1em) var(--hurryt-flip-r, .1em);
    background-image: linear-gradient(rgba(0, 0, 0, .24), rgba(0, 0, 0, .04));
}

.hurryt-flip-top > span,
.hurryt-flip-leaf-top > span { top: 0; }
.hurryt-flip-bottom > span,
.hurryt-flip-leaf-bottom > span { bottom: 0; }

/* Hinge line across the middle of the card. */
.hurryt-flip-digit::after {
    content: '';
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 50%;
    height: max(1px, .025em);
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .5);
}

.hurryt-flip-leaf {
    z-index: 2;
    visibility: hidden;
}

.hurryt-flip-digit.is-flipping .hurryt-flip-leaf {
    visibility: visible;
}

/* `both` matters: the bottom flap must sit edge-on until its delay is over and
   the top flap must stay folded once it has fallen. It has to be part of the
   shorthand, which would otherwise reset it. */
.hurryt-flip-digit.is-flipping .hurryt-flip-leaf-top {
    transform-origin: 50% 100%;
    animation: hurryt-flip-top calc(var(--hurryt-flip-dur, .6s) / 2) cubic-bezier(.5, 0, 1, .6) both;
}

.hurryt-flip-digit.is-flipping .hurryt-flip-leaf-bottom {
    transform-origin: 50% 0;
    animation: hurryt-flip-bottom calc(var(--hurryt-flip-dur, .6s) / 2) cubic-bezier(0, .4, .5, 1) calc(var(--hurryt-flip-dur, .6s) / 2) both;
}

/* The flaps darken as they turn away from the light. This is an overlay whose
   opacity animates rather than a filter on the flap: a filter re-rasterises the
   digit (jagged, dull while it moves, then a visible pop back to crisp). */
.hurryt-flip-leaf {
    will-change: transform;
}

.hurryt-flip-leaf::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
}

.hurryt-flip-digit.is-flipping .hurryt-flip-leaf-top::after {
    animation: hurryt-flip-shade-in calc(var(--hurryt-flip-dur, .6s) / 2) ease-in both;
}

.hurryt-flip-digit.is-flipping .hurryt-flip-leaf-bottom::after {
    animation: hurryt-flip-shade-out calc(var(--hurryt-flip-dur, .6s) / 2) ease-out calc(var(--hurryt-flip-dur, .6s) / 2) both;
}

@keyframes hurryt-flip-top {
    from { transform: rotateX(0); }
    to   { transform: rotateX(-90deg); }
}

@keyframes hurryt-flip-bottom {
    from { transform: rotateX(90deg); }
    to   { transform: rotateX(0); }
}

@keyframes hurryt-flip-shade-in {
    from { opacity: 0; }
    to   { opacity: .45; }
}

@keyframes hurryt-flip-shade-out {
    from { opacity: .45; }
    to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hurryt-flip-digit.is-flipping .hurryt-flip-leaf { animation: none; visibility: hidden; }
}

/* Screen-reader text; the animated cards are aria-hidden. */
.hurryt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}


/* ============================================================
   Responsive — Timer Styles
   Blocks shrink naturally via flex. Only tighten at very narrow.
   ============================================================ */

.hurryt-style-circle-progress .hurryt-progress-block {
  flex-shrink: 1;
  min-width: 0;
}

.hurryt-style-circle-progress .hurryt-progress-ring {
  max-width: 100%;
  height: auto;
}