/* ==========================================================================
   Akadverse Pro — Countdown Widget
   Fully isolated & responsive. Colors default to dark on dark bg.
   ========================================================================== */

/* ── Wrapper ─────────────────────────────────────────────────────────── */
.akv-countdown-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Grid ────────────────────────────────────────────────────────────── */
.akv-countdown-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 12px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Each Item ───────────────────────────────────────────────────────── */
.akv-cd-item {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* Inner card — default block (number atas, label bawah) */
.akv-cd-item > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vw, 18px) clamp(14px, 4vw, 24px);
  border-radius: 16px;
  min-width: clamp(58px, 14vw, 84px);
  /* Default: glassmorphism dark card sehingga angka putih terlihat */
  background: linear-gradient(
    145deg,
    rgba(45, 18, 72, 0.75) 0%,
    rgba(192, 96, 138, 0.45) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  width: 100%;
}

/* ── Number ──────────────────────────────────────────────────────────── */
.akv-cd-num {
  display: block;
  font-size: clamp(1.8rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: clamp(4px, 1vw, 8px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* ── Label ───────────────────────────────────────────────────────────── */
.akv-cd-label {
  display: block;
  font-size: clamp(0.6rem, 1.8vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  line-height: 1;
}

/* ── Inline mode ─────────────────────────────────────────────────────── */
.akv-label-inline .akv-cd-item > div {
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
}
.akv-label-inline .akv-cd-num { margin-bottom: 0; }

/* ── Expired Message ─────────────────────────────────────────────────── */
.akv-cd-expired-msg {
  display: none;
  text-align: center;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  font-weight: 600;
  color: #c0608a;
  margin-top: 12px;
  padding: 8px 16px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Responsive: tablet ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .akv-countdown-grid { gap: 8px; }
  .akv-cd-item > div  { min-width: clamp(52px, 18vw, 76px); }
}

/* ── Responsive: mobile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .akv-countdown-grid { gap: 6px; }
  .akv-cd-item > div  {
    min-width: clamp(46px, 20vw, 68px);
    padding: 10px 10px;
    border-radius: 12px;
  }
  .akv-cd-num         { font-size: clamp(1.4rem, 7vw, 2rem); }
}

/* ── Elementor Editor ────────────────────────────────────────────────── */
.elementor-editor-active .akv-cd-expired-msg {
  display: block !important;
  opacity: 0.5;
}

/* ==========================================================================
   akv-khitan-countdown-layout (Custom turquoise glassmorphism countdown style)
   ========================================================================== */
.akv-khitan-countdown-layout .akv-cd-item > div {
  background: linear-gradient(
    145deg,
    rgba(32, 139, 144, 0.45) 0%,
    rgba(46, 176, 181, 0.25) 100%
  ) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(227, 177, 90, 0.3) !important;
  box-shadow: 0 8px 32px rgba(22, 90, 93, 0.15) !important;
}

.akv-khitan-countdown-layout .akv-cd-num {
  color: #e3b15a !important;
  font-family: 'Italiana', serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.akv-khitan-countdown-layout .akv-cd-label {
  color: #faf8f5 !important;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1.5px;
  font-weight: 600;
}