/* EV Doctor AIR – Banner Widget Styles
   Supports: Desktop (full) · Tablet (≤1024px) · Mobile (≤767px)
*/
:root {
  --evd-emerald:       #00A651;
  --evd-emerald-light: #00C960;
  --evd-emerald-dark:  #007A3C;
  --evd-emerald-glow:  rgba(0,166,81,.35);
  --evd-emerald-pale:  rgba(0,166,81,.08);
  --evd-radius:        22px;
  --evd-radius-btn:    11px;
  --evd-font:          'DM Sans','Inter',sans-serif;
}

/* ── WRAPPER (sticky sidebar) ─────────────────────────────── */
.evd-air-banner-wrap {
  position: sticky;
  top: 24px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  font-family: var(--evd-font);
  animation: evdFadeIn .8s cubic-bezier(.22,1,.36,1) both;
}

@keyframes evdFadeIn {
  from { opacity:0; transform:translateY(24px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}

/* ── CARD ────────────────────────────────────────────────────── */
.evd-air-card {
  position: relative;
  background: #fff;
  border-radius: var(--evd-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 0 40px rgba(0,166,81,.14);
  border: 1px solid rgba(0,166,81,.15);
  overflow: hidden;
}

/* animated glow border */
.evd-air-card::before {
  content:'';
  position:absolute; inset:-2px;
  border-radius:calc(var(--evd-radius) + 2px);
  background:linear-gradient(135deg, var(--evd-emerald), transparent 40%, transparent 60%, var(--evd-emerald-light));
  z-index:0; opacity:0;
  animation: evdBorderGlow 3s ease-in-out .8s infinite alternate;
  pointer-events:none;
}
@keyframes evdBorderGlow {
  0%   { opacity:.25; }
  100% { opacity:.85; }
}

/* ── BEST-SELLER RIBBON ───────────────────────────────────────── */
.evd-ribbon {
  position:absolute; top:16px; right:0; z-index:20;
  background:linear-gradient(135deg,#FF6B35,#FF4500);
  color:#fff; font-size:10px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
  padding:5px 14px 5px 10px;
  border-radius:4px 0 0 4px;
  box-shadow:0 2px 12px rgba(255,107,53,.45);
  animation: evdRibbonPulse 2s ease-in-out 1s infinite alternate;
}
.evd-ribbon::after {
  content:''; position:absolute; right:-7px; top:0;
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  border-left:8px solid #FF4500;
}
@keyframes evdRibbonPulse {
  0%   { box-shadow:0 2px 10px rgba(255,107,53,.45); }
  100% { box-shadow:0 4px 22px rgba(255,107,53,.70); }
}

/* ── IMAGE ZONE ──────────────────────────────────────────────── */
.evd-image-zone {
  position:relative;
  background:linear-gradient(180deg,#f0faf5 0%,#e6f7ee 65%,#fff 100%);
  padding:28px 20px 16px;
  display:flex; flex-direction:column; align-items:center;
  overflow:hidden;
}
.evd-image-zone::after {
  content:''; position:absolute; bottom:0; left:50%;
  transform:translateX(-50%);
  width:200px; height:110px;
  background:radial-gradient(ellipse, var(--evd-emerald-glow) 0%, transparent 70%);
  pointer-events:none;
}

/* featured badge */
.evd-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:linear-gradient(135deg, var(--evd-emerald), var(--evd-emerald-light));
  color:#fff; font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:5px 13px; border-radius:100px; margin-bottom:16px;
  box-shadow:0 2px 12px var(--evd-emerald-glow);
  animation: evdBadgePulse 2.5s ease-in-out infinite alternate;
}
@keyframes evdBadgePulse {
  0%   { box-shadow:0 2px 12px rgba(0,166,81,.35); }
  100% { box-shadow:0 2px 22px rgba(0,166,81,.65), 0 0 0 4px rgba(0,166,81,.12); }
}

/* floating product image */
.evd-img-wrap {
  position:relative; z-index:1;
  width:220px; height:180px;
  display:flex; align-items:center; justify-content:center;
  animation: evdFloat 4s ease-in-out infinite;
  cursor:pointer;
  transition:transform .3s ease;
}
.evd-img-wrap:hover {
  transform:scale(1.06) translateY(-4px);
  animation-play-state:paused;
}
@keyframes evdFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-10px); }
}
.evd-img-wrap img {
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.18));
  transition:filter .3s ease;
}
.evd-img-wrap:hover img {
  filter:drop-shadow(0 12px 32px rgba(0,166,81,.32)) drop-shadow(0 8px 24px rgba(0,0,0,.20));
}

/* ── BODY ─────────────────────────────────────────────────── */
.evd-body {
  padding:18px 22px 0;
}
.evd-headline {
  font-size:22px; font-weight:800;
  color:#0D1117; letter-spacing:-.03em; line-height:1.15;
  margin:0 0 8px;
}
.evd-headline span { color:var(--evd-emerald); }
.evd-sub {
  font-size:12.5px; font-weight:400;
  color:#4A5568; line-height:1.55; margin:0 0 18px;
}

/* ── FEATURES ─────────────────────────────────────────────── */
.evd-features {
  list-style:none; padding:13px 15px; margin:0 0 0;
  background:var(--evd-emerald-pale);
  border-radius:14px; border:1px solid rgba(0,166,81,.10);
  display:flex; flex-direction:column; gap:7px;
}
.evd-features li {
  display:flex; align-items:center; gap:9px;
  font-size:12px; font-weight:500; color:#0D1117;
}
.evd-check {
  width:18px; height:18px; flex-shrink:0;
  background:linear-gradient(135deg, var(--evd-emerald), var(--evd-emerald-light));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:#fff; font-weight:900;
  box-shadow:0 2px 6px rgba(0,166,81,.30);
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.evd-cta {
  display:flex; flex-direction:column; gap:10px;
  padding:18px 22px 18px;
}
.evd-btn-primary, .evd-btn-secondary {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px; border-radius:var(--evd-radius-btn);
  font-family:var(--evd-font); font-size:14px; font-weight:700;
  text-decoration:none; cursor:pointer; border:none;
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative; overflow:hidden;
}
.evd-btn-primary {
  background:linear-gradient(135deg, var(--evd-emerald-dark), var(--evd-emerald), var(--evd-emerald-light));
  color:#fff;
  box-shadow:0 4px 20px var(--evd-emerald-glow);
  animation: evdCtaGlow 2s ease-in-out 1.5s infinite alternate;
}
@keyframes evdCtaGlow {
  0%   { box-shadow:0 4px 20px rgba(0,166,81,.40); }
  100% { box-shadow:0 6px 32px rgba(0,166,81,.70), 0 0 0 4px rgba(0,166,81,.10); }
}
.evd-btn-primary::before {
  content:''; position:absolute;
  top:-50%; left:-75%; width:50%; height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-15deg);
  animation:evdShimmer 3.5s ease-in-out 2s infinite;
}
@keyframes evdShimmer {
  0%   { left:-75%; }
  100% { left:125%; }
}
.evd-btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 36px rgba(0,166,81,.60);
}
.evd-btn-secondary {
  background:transparent; color:var(--evd-emerald-dark);
  font-size:13px;
  border:1.5px solid rgba(0,166,81,.35);
}
.evd-btn-secondary:hover {
  background:var(--evd-emerald-pale); border-color:var(--evd-emerald);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,166,81,.15);
}

/* ── TRUST FOOTER ─────────────────────────────────────────── */
.evd-trust {
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 22px 16px;
  border-top:1px solid rgba(0,0,0,.055);
}
.evd-lightning { font-size:15px; animation:evdLightning 1.8s ease-in-out infinite; }
@keyframes evdLightning {
  0%,90%,100% { opacity:1; transform:scale(1); }
  95%          { opacity:.45; transform:scale(1.35); }
}
.evd-trust-text { font-size:11px; font-weight:600; color:#718096; letter-spacing:.02em; }
.evd-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--evd-emerald);
  animation:evdDotPulse 2s ease-in-out infinite;
}
@keyframes evdDotPulse {
  0%,100% { transform:scale(1); opacity:1; }
  50%      { transform:scale(1.5); opacity:.55; }
}

/* ── TABLET (≤1024px) ─────────────────────────────────────── */
@media (max-width:1024px) {
  .evd-air-banner-wrap {
    position:static; max-width:100%;
  }
  .evd-air-card { border-radius:18px; }
  .evd-headline  { font-size:20px; }
  .evd-img-wrap  { width:190px; height:155px; }
}

/* ── MOBILE (≤767px) ──────────────────────────────────────── */
@media (max-width:767px) {
  .evd-air-banner-wrap { max-width:100%; }
  .evd-air-card { border-radius:16px; }
  .evd-image-zone { padding:20px 16px 12px; }
  .evd-img-wrap  { width:160px; height:130px; }
  .evd-headline  { font-size:18px; }
  .evd-sub       { font-size:12px; }
  .evd-body, .evd-cta { padding-left:16px; padding-right:16px; }
  .evd-features  { padding:11px 13px; }
  .evd-btn-primary, .evd-btn-secondary { font-size:13px; padding:12px 16px; }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}