/* ── Root design tokens (merge with your existing vars) ───────── */
/* ── Section shell ────────────────────────────────────────────── */
.countdown-section {
  position       : relative;
  width          : 100%;
  padding        : clamp(5rem, 15vh, 12rem) 1.5rem;
  overflow       : hidden;
  background     : transparent !important;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

/* Particle canvas */
.countdown-particles {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  pointer-events: none;
  opacity   : .35;
}

/* ── Wrapper ──────────────────────────────────────────────────── */
.countdown-wrapper {
  position  : relative;
  z-index   : 2;
  width     : 100%;
  max-width : 1080px;
  text-align: center;

  /* Fade-in on load */
  opacity   : 0;
  transform : translateY(32px);
  animation : cdFadeUp .9s cubic-bezier(.22,1,.36,1) .2s forwards;
}

/* ── Eyebrow / title ──────────────────────────────────────────── */
.countdown-eyebrow {
  font-size     : .75rem;
  font-weight   : 700;
  letter-spacing: .4em;
  color         : #ed952b;
  text-transform: uppercase;
  margin-bottom : 1rem;
  opacity       : 0.9;
}

.countdown-title span {
  font-size     : clamp(2rem, 5vw, 4.5rem);
  font-weight   : 900;
  color         : #fff;
  margin-bottom : 3rem;
  letter-spacing: 0.02em;
  position      : relative;
  background: linear-gradient(105deg, #003cff 0%, #facc15 50%, #ff6b00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.countdown-title::after {
  content    : '';
  display    : block;
  width      : 60px;
  height     : 3px;
  margin     : .9rem auto 0;
  background : #4f73eb;
  border-radius: 999px;
  box-shadow : 0 0 12px #ed952b;
}

/* ── Card column animation delay ─────────────────────────────── */
.cd-col:nth-child(1) { animation-delay: .3s; }
.cd-col:nth-child(2) { animation-delay: .45s; }
.cd-col:nth-child(3) { animation-delay: .6s; }
.cd-col:nth-child(4) { animation-delay: .75s; }

.cd-col {
  opacity  : 0;
  transform: translateY(24px);
  animation: cdFadeUp .8s cubic-bezier(.22,1,.36,1) forwards;
}

/* ── Card ─────────────────────────────────────────────────────── */
.cd-card {
  position      : relative;
  border-radius : 20px;
  padding       : clamp(1.4rem, 3vw, 2.2rem) 1rem;
  background    : var(--bg-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);

  /* Gradient border via pseudo + clip */
  border        : 1px solid rgba(255,255,255,.08);
  overflow      : hidden;
  cursor        : default;

  /* Floating */
  animation     : cdFloat 6s ease-in-out infinite;
  transition    : transform .35s ease, box-shadow .35s ease;
}

/* Stagger float offsets */
.cd-col:nth-child(1) .cd-card { animation-delay: 0s;    }
.cd-col:nth-child(2) .cd-card { animation-delay: 1.5s;  }
.cd-col:nth-child(3) .cd-card { animation-delay: 3s;    }
.cd-col:nth-child(4) .cd-card { animation-delay: 4.5s;  }

.cd-card:hover {
  transform : translateY(-5px);
  box-shadow: 0 15px 35px rgba(237, 149, 43, 0.25);
  border-color: rgba(237, 149, 43, 0.4);
}

/* Gradient glow overlay (bottom edge) */
.cd-card__glow {
  position     : absolute;
  bottom       : 0;
  left         : 0;
  width        : 100%;
  height       : 4px;
  background   : linear-gradient(90deg, transparent, #ed952b, transparent);
  opacity      : 0.6;
  transition   : opacity 0.3s;
}
.cd-card:hover .cd-card__glow { opacity: 1; }

/* Animated corner rings (decorative) */
.cd-card__ring {
  position     : absolute;
  border-radius: 50%;
  border       : 1px solid transparent;
  pointer-events: none;
  opacity      : .15;
}
.cd-card__ring--1 {
  width  : 120%;
  padding-top: 120%;
  top    : -60%;
  left   : -10%;
  background: transparent;
  border-color: rgba(255, 138, 0, 0.2);
  animation: cdRingSpin 12s linear infinite;
}
.cd-card__ring--2 {
  width  : 90%;
  padding-top: 90%;
  bottom : -55%;
  right  : -10%;
  border-color: rgba(255, 107, 0, 0.15);
  animation: cdRingSpin 18s linear infinite reverse;
}

/* Top gradient streak */
.cd-card__inner {
  position: relative;
  z-index : 1;
}

/* ── Number track (contains the animating digit) ──────────────── */
.cd-track {
  display        : flex;
  align-items    : center;
  justify-content: center;
  height         : calc(clamp(3.2rem, 7vw, 5.5rem) * 1.2);
  overflow       : hidden;
}

/* ── Number ───────────────────────────────────────────────────── */
.cd-digit {
  font-size     : clamp(3.2rem, 7vw, 5.5rem);
  font-weight   : 900;
  line-height   : 1;
  letter-spacing: -.02em;

  /* Gradient text */
  background    : linear-gradient(135deg, #001b76 0%, #ed952b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  display       : inline-block;
  will-change   : transform, opacity;
  transition    : none; /* JS controls animation */
}

/* Tick animation class (added/removed by JS) */
.cd-digit.is-ticking {
  animation: cdTick .35s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Seconds pulse (different color cycle) */
[data-unit="seconds"] .cd-digit {
  background: #ed952b;
  -webkit-background-clip: text;
  background-clip: text;
}
[data-unit="seconds"] .cd-card__glow {
  background: #ed952b;
}

/* ── Label ────────────────────────────────────────────────────── */
.cd-label {
  display       : block;
  margin-top    : .5rem;

  font-size     : clamp(.65rem, 1.2vw, .8rem);
  font-weight   : 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color         : #475569;
}

/* ── Divider ──────────────────────────────────────────────────── */
.countdown-divider {
  width     : 100%;
  max-width : 480px;
  height    : 1px;
  margin    : 2.8rem auto 1.4rem;
  background: linear-gradient(90deg,
    transparent,
    #ed952b 25%,
    rgba(33, 64, 154, 0.4) 75%,
    transparent
  );
}

/* ── Date label ───────────────────────────────────────────────── */
.countdown-date-label span {
 
  font-size     : .85rem;
  font-weight   : 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color         : #475569;
}

/* ── Glow pulse (applied to section every second via JS) ─────── */
@keyframes cdPulseGlow {
  0%,100% { text-shadow: 0 0 40px rgba(255, 123, 0, 0.74), 0 0 80px rgba(250, 204, 21, 0.25); }
  50%     { text-shadow: 0 0 60px rgb(187, 93, 39),  0 0 100px rgba(250, 204, 21, 0.45); }
}
.countdown-title.pulse-glow {
  animation: cdPulseGlow .5s ease-out;
}

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes cdFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cdFloat {
  0%,100% { transform: translateY(0px);  }
  50%     { transform: translateY(-8px); }
}

@keyframes cdTick {
  0%   { transform: scale(.7) translateY(8px); opacity: 0; }
  60%  { transform: scale(1.1) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0);   opacity: 1; }
}

@keyframes cdRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Responsive tweaks ────────────────────────────────────────── */
@media (max-width: 767px) {
  .cd-card { padding: 1.4rem 1.2rem; }
  /* On xs, show 2-up side by side */
  .col-12.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 420px) {
  /* On very small phones stack fully */
  .col-12.col-sm-6 { flex: 0 0 100%; max-width: 100%; }
}


/* CTA container */
.countdown-actions {
  margin-top: 3.5rem;
  display: flex !important;
  justify-content: center !important;
  gap: 20px;
  flex-wrap: wrap;
}

/* Base button - Premium Styling */
.cd-btn {
  position: relative;
  padding: 18px 42px;
  border-radius: 60px;
  font-weight: 800;
  letter-spacing: 0.8px;
  font-size: 15px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.cd-btn span {
  position: relative;
  z-index: 2;
  color: #fff !important;
}

/* Remove all problematic pseudo-elements completely */
.cd-btn::before,
.cd-btn::after {
  display: none !important;
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Sponsor button (Premium Gold/Orange) */
.cd-btn-sponsor {
  background: linear-gradient(135deg, #ed952b 0%, #ff6b00 100%) !important;
}
.cd-btn-sponsor:hover {
  background: linear-gradient(135deg, #ff6b00 0%, #ed952b 100%) !important;
  box-shadow: 0 12px 35px rgba(237, 149, 43, 0.4) !important;
  transform: translateY(-4px) !important;
}

/* Exhibitor button (Lively Red-Orange) */
.cd-btn-exhibitor {
  background: linear-gradient(135deg, #002fff 0%, #004cff 100%) !important;
}
.cd-btn-exhibitor:hover {
  background: linear-gradient(135deg, #096cff 0%, #000dff 100%) !important;
  box-shadow: 0 15px 45px rgba(0, 21, 249, 0.4) !important;
  transform: translateY(-6px) !important;
}

/* Visitor button (AJS Deep Blue) */
.cd-btn-visitor {
  background: linear-gradient(135deg, #4f73eb 0%, #3b82f6 100%) !important;
}
.cd-btn-visitor:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #4f73eb 100%) !important;
  box-shadow: 0 15px 45px rgba(33, 64, 154, 0.4) !important;
  transform: translateY(-6px) !important;
}

/* Disable the scale effect that causes 'decalage' in other files */
.cd-btn:active {
  transform: translateY(-2px) scale(0.98) !important;
}

@media (max-width: 576px) {
  .cd-btn{
    width: 100%;
    justify-content: center;
  }
}