/* ════════════════════════════════════════════════════════
   EDT Widget — Scoped Styles  v1.4
   Architecture: ALL visual properties driven by CSS vars.
   Elementor controls write the vars via `selectors`.
   JS only handles: inner-card gradient, icon sizes,
   labels, countdown, and GSAP animation.
   ════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

/* ── Scoped box-model reset — NO font-family on * ── */
.edt *, .edt *::before, .edt *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Root element: default font + all CSS variable fallbacks ──
   Elementor's `selectors` entries write vars here, overriding
   these fallbacks instantly in the live editor. */
.edt {
  /* Font — cascades to all children; Elementor typography
     controls override per-element via higher-specificity selectors */
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;

  /* ── Colour vars (fallbacks; Elementor selectors override) ── */
  --c-accent:       #22c55e;
  --c-accent-muted: #dcfce7;
  --c-bar:          #374151;
  --c-msg-text:     #111827;
  --c-step-name:    #111827;
  --c-step-date:    #6b7280;
  --c-countdown:    #22c55e;
  --c-muted:        #6b7280;
  --c-border:       #e5e7eb;
  --c-card:         #ffffff;

  /* ── Layout vars ── */
  --radius:         14px;
  --border-width:   1px;

  /* ── Clock vars — written by Elementor selectors ── */
  --clock-size:     16px;
  --clock-color:    #6b7280;

  /* ── Rest shadow (overridden by Elementor Group_Control_Box_Shadow) ── */
  --shadow-rest:    0 1px 4px rgba(0,0,0,.07), 0 6px 24px rgba(0,0,0,.07);

  width: 100%;
  max-width: 590px; /* overridden by Elementor selectors */
  opacity: 0;       /* GSAP entrance fades this in */
  display: block;
}


/* ── Outer card ── */
.edt__card {
  background:    var(--c-card);
  border:        var(--border-width) solid var(--c-border);
  border-radius: var(--radius);
  padding:       18px 22px 22px;
  box-shadow:    var(--shadow-rest);
  overflow:      hidden;
  position:      relative;
  will-change:   transform, box-shadow;
  isolation:     isolate;
}


/* ── Banner row ── */
.edt__banner {
  display:       flex;
  align-items:   flex-start;
  gap:           9px;
  margin-bottom: 14px;
}

/* Clock — size and color entirely from CSS vars */
.edt__clock {
  flex-shrink:      0;
  width:            var(--clock-size, 16px);
  height:           var(--clock-size, 16px);
  color:            var(--clock-color, #6b7280);
  transform-origin: 50% 50%;
  will-change:      transform;
  /* Vertical nudge so it aligns with first text line at any size */
  margin-top:       max(0px, calc((var(--clock-size, 16px) - 16px) * 0.15));
}

/* Message text */
.edt__banner-msg {
  font-size:   13.5px;
  line-height: 1.6;
  color:       var(--c-msg-text, #111827);
  flex: 1;
}
.edt__banner-msg strong { font-weight: 700; }


/* ── Countdown ── */
.edt__cd {
  display:              inline-flex;
  align-items:          center;
  gap:                  0;
  font-weight:          700;
  font-variant-numeric: tabular-nums;
  letter-spacing:       .04em;
  color:                var(--c-countdown, #22c55e);
}
.edt__cd-d {
  display:   inline-block;
  min-width: .58em;
  text-align: center;
}
.edt__cd-sep {
  opacity: .7;
  color:   var(--c-muted, #6b7280);
}


/* ── Inner card ── */
.edt__inner {
  border-radius: calc(var(--radius) - 4px);
  padding:       16px 18px 18px;
  /* background set by JS (gradient logic) */
}


/* ── Timeline row ── */
.edt__tl {
  display:     flex;
  align-items: flex-start;
  width:       100%;
}


/* ── Step ── */
.edt__step {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            7px;
  flex-shrink:    0;
}

/* Icon wrapper — JS controls size via inline-style
   for preset/custom modes; color from --c-bar var */
.edt__icon {
  width:           24px;
  height:          24px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--c-bar, #374151);
  transform-origin: 50% 100%;
  will-change:     transform;
  position:        relative;
  z-index:         1;
  flex-shrink:     0;
}
.edt__icon > * { flex-shrink: 0; }
/* Font-icon sizing default — JS overrides per step */
.edt__icon i,
.edt__icon [class*="fa-"] { font-size: 22px; line-height: 1; display: block; }
.edt__icon svg             { display: block; }

/* Delivered step — accent icon color (wins over JS-applied --c-bar) */
.edt__step--del .edt__icon { color: var(--c-accent, #22c55e); }


/* Step name */
.edt__step-name {
  display:     block;
  font-size:   11.5px;
  font-weight: 700;
  color:       var(--c-step-name, #111827);
  text-align:  center;
}
/* Step date */
.edt__step-date {
  display:    block;
  font-size:  11px;
  color:      var(--c-step-date, #6b7280);
  text-align: center;
  white-space: nowrap;
  margin-top: 1px;
}

/* Delivered step accent overrides — uses higher specificity (.edt__step--del)
   so it wins over both the CSS-var rules above AND Elementor's color selectors
   which only target .edt__step:not(.edt__step--del) */
.edt__step--del .edt__step-name { color: var(--c-accent, #22c55e); }
.edt__step--del .edt__step-date { color: var(--c-accent, #22c55e); font-weight: 600; }


/* ── Connector (dots + line) ── */
.edt__conn {
  flex:         1;
  display:      flex;
  align-items:  center;
  padding-top:  9px;      /* recalculated by JS after icons render */
  padding-bottom: 36px;   /* space for step text below */
}

.edt__dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--c-bar, #374151);
  flex-shrink:   0;
  transform-origin: center;
}

.edt__line {
  flex:             1;
  height:           1.5px;
  background:       var(--c-bar, #374151);
  transform-origin: left center;
  min-width:        5px;
}


/* ── Responsive ── */
@media (max-width: 480px) {
  .edt__card       { padding: 14px 14px 16px; }
  .edt__inner      { padding: 13px 10px 15px; }
  .edt__banner-msg { font-size: 12.5px; }
  .edt__step-name  { font-size: 10.5px; }
  .edt__step-date  { font-size: 10px;   }
}
@media (max-width: 360px) {
  .edt__banner-msg { font-size: 11.5px; }
  .edt__step-name  { font-size: 9.5px;  }
  .edt__step-date  { font-size: 9px;    }
}