/* ============================================================
   AMIR SUITE — Countdown v1.8
   Flip clock: ONE digit div per flap, clipped with clip-path
   No height tricks, no line-height hacks.
   ============================================================ */

.as-cd-wrapper{display:block;width:100%;box-sizing:border-box;padding:32px;}
.as-cd-wrapper *{box-sizing:border-box;}
.as-cd-wrapper.as-cd-dir-rtl{direction:rtl;text-align:right;}
.as-cd-wrapper.as-cd-dir-ltr{direction:ltr;text-align:left;}

.as-cd-side-layout{display:flex;align-items:center;gap:24px;width:100%;}
.as-cd-side-right{flex-direction:row;}
.as-cd-side-left{flex-direction:row-reverse;}

.as-cd-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;}

/* Title */
.as-cd-title{font-size:22px;font-weight:700;color:#f0f6fc;}
.as-cd-title.has-deco::after{content:'';display:block;width:40px;height:3px;background:#4ee08a;border-radius:2px;margin:8px auto 0;}
.as-cd-title-top   {margin-bottom:16px;text-align:center;}
.as-cd-title-bottom{margin-top:16px;text-align:center;}
.as-cd-title-right {flex-shrink:0;text-align:right;}
.as-cd-title-left  {flex-shrink:0;text-align:left;}

/* Standard block */
.as-cd-block{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  min-width:100px;height:100px;
  background:rgba(255,255,255,.06);
  border-radius:14px;border:1px solid rgba(255,255,255,.1);
  padding:8px;position:relative;overflow:hidden;
  transition:border-color .25s;
}
.as-cd-block:hover{border-color:rgba(78,224,138,.4);}
.as-cd-block::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 60%);pointer-events:none;}

.as-cd-number{
  font-size:42px;font-weight:700;color:#f0f6fc;
  line-height:1;display:block;
  font-variant-numeric:tabular-nums;position:relative;z-index:1;
}

/* Label — supports top / bottom / left / right */
.as-cd-label{
  font-size:13px;font-weight:500;
  color:rgba(240,246,252,.6);white-space:nowrap;
  position:relative;z-index:1;
}
.as-cd-label-top   {margin-bottom:4px;}
.as-cd-label-bottom{margin-top:4px;}
.as-cd-label-left  {margin-right:10px;}
.as-cd-label-right {margin-left:10px;}

/* When label is left/right, the block becomes a flex row */
.as-cd-block.has-label-left,
.as-cd-block.has-label-right{
  flex-direction:row;
  align-items:center;
  gap:0;
}

/* Separator */
.as-cd-sep{font-size:32px;font-weight:700;color:rgba(240,246,252,.4);line-height:1;user-select:none;flex-shrink:0;align-self:center;}

.as-cd-expired{text-align:center;font-size:18px;font-weight:600;color:#f0f6fc;padding:16px;}

/* ============================================================
   FLIP CLOCK  — clip-path technique
   Each card = a fixed W×H box.
   Inside: ONE .fc-num div that fills the whole box and centers the digit.
   Clip-path cuts it in half.
   On change: top-half folds away (rotateX around its bottom edge),
              bottom-half unfolds from its top edge.
   ============================================================ */
.as-cd-flip-clock{
  /* reset standard block */
  background:none!important;border:none!important;
  box-shadow:none!important;padding:0!important;
  overflow:visible!important;min-width:unset!important;
  height:unset!important;

  /* Variables — overridable by Elementor */
  --fc-w:    90px;
  --fc-h:   110px;
  --fc-fs:   64px;
  --fc-rad:  10px;
  --fc-top:  #1e2530;
  --fc-bot:  #161b22;
  --fc-txt:  #f0f6fc;
  --fc-line: rgba(0,0,0,.55);
}

/* The card box */
.fc-wrap{
  position:relative;
  width:var(--fc-w);
  height:var(--fc-h);
  /* 3D perspective for rotateX */
  perspective:600px;
  perspective-origin:50% 50%;
}

/* Single digit layer — fills the whole card, centres the digit */
.fc-num{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fc-fs);
  font-weight:700;
  color:var(--fc-txt);
  font-variant-numeric:tabular-nums;
  line-height:1;
  white-space:nowrap;
  user-select:none;
}

/* ---- Static halves (always visible, no animation) ---- */
/* Upper static: bg=top colour, clip to TOP 50% */
.fc-static-top{
  position:absolute;
  top:0;left:0;right:0;
  height:50%;
  background:var(--fc-top);
  border-radius:var(--fc-rad) var(--fc-rad) 0 0;
  border-bottom:1px solid var(--fc-line);
  overflow:hidden;                /* clips bottom half of .fc-num */
}

/* Lower static: bg=bot colour, clip to BOTTOM 50% */
.fc-static-bot{
  position:absolute;
  bottom:0;left:0;right:0;
  height:50%;
  background:var(--fc-bot);
  border-radius:0 0 var(--fc-rad) var(--fc-rad);
  border-top:1px solid var(--fc-line);
  overflow:hidden;
}
/* Push .fc-num inside lower-static DOWN so its bottom half shows */
.fc-static-bot .fc-num{
  top:auto;
  bottom:0;
  height:var(--fc-h);   /* full card height → bottom half visible through overflow:hidden */
}

/* ---- Animated flaps ---- */
.fc-flap-top{
  position:absolute;
  top:0;left:0;right:0;
  height:50%;
  background:var(--fc-top);
  border-radius:var(--fc-rad) var(--fc-rad) 0 0;
  overflow:hidden;
  transform-origin:center bottom;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
  z-index:10;
}

.fc-flap-bot{
  position:absolute;
  bottom:0;left:0;right:0;
  height:50%;
  background:var(--fc-bot);
  border-radius:0 0 var(--fc-rad) var(--fc-rad);
  overflow:hidden;
  transform-origin:center top;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
  z-index:10;
  transform:rotateX(90deg);   /* hidden initially */
}

/* fc-num inside flap-bot: same trick as static-bot */
.fc-flap-bot .fc-num{
  top:auto;bottom:0;
  height:var(--fc-h);
}

/* Shading overlays for depth */
.fc-flap-top::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.35));
  pointer-events:none;
}
.fc-flap-bot::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,transparent 40%,rgba(0,0,0,.3));
  pointer-events:none;
}

/* Centre divider */
.fc-wrap::after{
  content:'';position:absolute;left:0;right:0;
  top:calc(50% - 1px);height:2px;
  background:var(--fc-line);z-index:20;
}

/* Box shadow for each card */
.fc-wrap .fc-static-top,
.fc-wrap .fc-static-bot{
  box-shadow:0 2px 12px rgba(0,0,0,.4);
}

/* ---- Flip keyframes — smooth cubic-bezier ---- */
@keyframes fc-fold{
  0%  {transform:rotateX(0deg);}
  100%{transform:rotateX(-90deg);}
}
@keyframes fc-unfold{
  0%  {transform:rotateX(90deg);}
  100%{transform:rotateX(0deg);}
}
/* smooth & slightly bouncy */
.fc-flap-top.go{animation:fc-fold   .28s cubic-bezier(.55,0,.45,1) both;}
.fc-flap-bot.go{animation:fc-unfold .28s cubic-bezier(.4,0,.2,1.3) .28s both;}

/* ============================================================
   DROPDOWN
   ============================================================ */
@keyframes cd-drop{
  0%  {transform:translateY(-18px);opacity:0;}
  60% {transform:translateY(4px);  opacity:1;}
  100%{transform:translateY(0);    opacity:1;}
}
.as-cd-number.anim-drop{animation:cd-drop .42s cubic-bezier(.34,1.56,.64,1) both;}

/* ============================================================
   FADE
   ============================================================ */
@keyframes cd-fade{
  from{opacity:0;transform:scale(.85);}
  to  {opacity:1;transform:scale(1);}
}
.as-cd-number.anim-fade{animation:cd-fade .32s ease both;}

/* ---- Responsive ---- */
@media(max-width:767px){
  .as-cd-block{min-width:72px;height:72px;}
  .as-cd-number{font-size:28px;}
  .as-cd-label{font-size:11px;}
  .as-cd-sep{font-size:22px;}
  .as-cd-flip-clock{--fc-w:70px;--fc-h:86px;--fc-fs:50px;}
  .as-cd-side-layout{flex-direction:column!important;}
  .as-cd-title-right,.as-cd-title-left{text-align:center;}
}
@media(prefers-reduced-motion:reduce){
  .fc-flap-top.go,.fc-flap-bot.go,
  .as-cd-number.anim-drop,.as-cd-number.anim-fade{animation:none!important;}
}