/* ==========================================================================
   Zhwan Shop — countdown bar (Modules/Countdown)

   Kept out of `zhwan.css` on purpose: the admin form renders a live preview of
   the same bar, and the admin panel does not load the storefront theme. One
   file both sides include is the only way the preview cannot drift from what
   the customer sees.

   Every colour comes in as a custom property set inline by the admin, so the
   rules below never hard-code a brand colour. The fallbacks are the Zhwan
   palette, for the case where the bar is rendered without a timer behind it.
   ========================================================================== */

.zh-cd{
  --cd-from:      #ff4c6c;
  --cd-to:        #e23458;
  --cd-text:      #ffffff;
  --cd-box-bg:    #ffffff;
  --cd-box-text:  #1f2430;

  position:relative;
  overflow:hidden;
  color:var(--cd-text);
  background:linear-gradient(120deg, var(--cd-from), var(--cd-to));
  font-family:"Vazir", "Vazirmatn", Tahoma, sans-serif;
  direction:rtl;
}

/* Pinned above the header. `z-index` clears Bagisto's sticky header (z-50). */
.zh-cd.is-sticky{position:sticky;top:0;z-index:60}

/**
 * A slow diagonal sheen. It is a sibling overlay rather than a background
 * animation so the gradient itself stays static — animating a gradient forces a
 * repaint of the whole bar on every frame.
 */
.zh-cd::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform:translateX(-60%);
  animation:zh-cd-sheen 6s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
}

@keyframes zh-cd-sheen{
  0%,      60% {transform:translateX(-60%)}
  100%         {transform:translateX(60%)}
}

.zh-cd__inner{
  position:relative;z-index:1;
  max-width:1240px;margin:0 auto;
  padding:10px 16px;
  display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;
}

/* ---------- message ---------- */

.zh-cd__msg{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:500;line-height:1.7;
}

.zh-cd__msg svg{flex:0 0 20px;width:20px;height:20px;opacity:.9}

/* ---------- clock ---------- */

.zh-cd__clock{
  display:flex;align-items:center;gap:6px;
  /* Latin digits would otherwise reorder around the ':' separators in RTL. */
  direction:ltr;
}

.zh-cd__unit{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:52px;
  padding:5px 8px 6px;
  border-radius:11px;
  background:var(--cd-box-bg);
  color:var(--cd-box-text);
  box-shadow:0 3px 10px rgba(0,0,0,.13);
}

.zh-cd__num{
  font-size:19px;font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums;
  /* Persian digits are variable-width; a fixed line box stops the jitter. */
  min-height:22px;
  display:block;
}

.zh-cd__label{font-size:10.5px;font-weight:500;opacity:.65;line-height:1.3}

.zh-cd__sep{
  font-size:17px;font-weight:700;opacity:.55;
  margin-bottom:12px;
  animation:zh-cd-blink 1s steps(1, end) infinite;
}

@keyframes zh-cd-blink{50%{opacity:.15}}

/**
 * The tick. A class is added for one frame on every second change and removed
 * on `animationend`, so the animation restarts cleanly each time instead of
 * running continuously.
 */
.zh-cd__unit.is-tick .zh-cd__num{animation:zh-cd-tick .38s cubic-bezier(.34,1.56,.64,1)}

/**
 * Never touches `opacity`. Fading in from zero looks good in isolation, but the
 * seconds box replays this every second — for a quarter of every second the
 * digit is invisible, and the clock reads as broken.
 */
@keyframes zh-cd-tick{
  0%   {transform:translateY(-32%) scale(.9)}
  60%  {transform:translateY(0)    scale(1.05)}
  100% {transform:translateY(0)    scale(1)}
}

/**
 * Under an hour to go the bar breathes. Deliberately slow and low-contrast —
 * a fast flash on every page of the shop is punishing to look at.
 */
.zh-cd.is-urgent{animation:zh-cd-urgent 2.4s ease-in-out infinite}

@keyframes zh-cd-urgent{
  50%{filter:brightness(1.09) saturate(1.12)}
}

/* ---------- call to action ---------- */

.zh-cd__cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 18px;border-radius:999px;
  background:var(--cd-box-bg);color:var(--cd-box-text);
  font-size:13.5px;font-weight:700;text-decoration:none;
  box-shadow:0 3px 10px rgba(0,0,0,.13);
  transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}

.zh-cd__cta:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.2)}

/* ---------- dismiss ---------- */

.zh-cd__close{
  position:absolute;top:50%;transform:translateY(-50%);
  inset-inline-start:10px;
  width:26px;height:26px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:var(--cd-text);
  font-size:17px;line-height:1;cursor:pointer;
  transition:background .2s cubic-bezier(.4,0,.2,1);
}

.zh-cd__close:hover{background:rgba(255,255,255,.32)}

/* Room for the close button so it never sits on top of the message. */
.zh-cd.is-dismissible .zh-cd__inner{padding-inline-start:44px}

/* ---------- finished ---------- */

.zh-cd__ended{font-size:15px;font-weight:700}

/* ---------- small screens ---------- */

/**
 * Two rows on a phone — the message above, the clock and the button together
 * below. Every size here is tuned so that second row still fits on a 360px
 * screen: let the button wrap onto a third row and the bar eats a quarter of
 * the viewport before the shop has said anything.
 */
@media (max-width: 767px){
  .zh-cd__inner{gap:8px;padding:8px 12px}
  .zh-cd.is-dismissible .zh-cd__inner{padding-inline-start:34px}

  .zh-cd__msg{font-size:12.5px;width:100%;justify-content:center;text-align:center}
  .zh-cd__msg svg{flex-basis:17px;width:17px;height:17px}

  .zh-cd__clock{gap:4px}
  .zh-cd__unit{min-width:40px;padding:3px 5px 4px;border-radius:9px}
  .zh-cd__num{font-size:15px;min-height:18px}
  .zh-cd__label{font-size:9px}
  .zh-cd__sep{font-size:14px;margin-bottom:11px}

  .zh-cd__cta{padding:5px 12px;font-size:12px}

  .zh-cd__close{inset-inline-start:6px;width:23px;height:23px;font-size:15px}
}

@media (prefers-reduced-motion: reduce){
  .zh-cd::after,
  .zh-cd.is-urgent,
  .zh-cd__sep,
  .zh-cd__unit.is-tick .zh-cd__num{animation:none}
  .zh-cd::after{opacity:0}
}