/* =============================================================
   VANGUARD ANNIVERSARY COUNTDOWN v3.0.0
   Top Bar + Full Block — all animation styles
============================================================= */

/* ── SHARED CUSTOM PROPERTIES ─────────────────────────────── */
.vac-topbar, .vac-block {
  --vac-bg:  #1a1a1a;
  --vac-tc:  #ffffff;
  --vac-ac:  #2a9d50;
  --vac-bbg: #2a9d50;
  --vac-ac2: #4dd67e;
  --vac-lc:  #9ca3a0;
  --vac-ns:  64px;
  --vac-hs:  28px;
  --vac-pad: 48px;
}

/* =============================================================
   TOP BAR
============================================================= */
.vac-topbar {
  width: 100%;
  background: var(--vac-bg);
  color: var(--vac-tc);
  font-family: 'Segoe UI','Open Sans',Arial,sans-serif;
  z-index: 999999;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.3s ease;
}

.vac-topbar.vac-sticky {
  position: fixed;
  top: 0; left: 0; right: 0;
}

.vac-topbar.vac-hidden { transform: translateY(-100%); }

.vac-tb-spacer { width: 100%; display: block; }

/* Inner row */
.vac-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 40px 7px 14px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  min-height: 44px;
  flex-wrap: nowrap;
}

/* Badge */
.vac-tb-badge {
  display: flex; align-items: center; gap: 5px;
  background: var(--vac-bbg);
  border-radius: 4px; padding: 4px 10px;
  flex-shrink: 0; white-space: nowrap;
}
.vac-tb-badge__label {
  font-size: 9px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: #fff; line-height: 1;
}
.vac-tb-badge__years {
  font-size: 15px; font-weight: 900; color: #fff; line-height: 1;
}
.vac-tb-badge__years small {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  vertical-align: super; opacity: 0.85;
}

/* Promo text */
.vac-tb-promo {
  display: flex; flex-direction: column;
  line-height: 1.25; flex-shrink: 1; min-width: 0;
}
.vac-tb-promo__main {
  font-size: 13px; font-weight: 700; color: var(--vac-tc);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vac-tb-promo__sub {
  font-size: 10.5px; color: rgba(255,255,255,0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Units row */
.vac-tb-units {
  display: flex; align-items: center; gap: 3px; flex-shrink: 0;
}
.vac-tb-unit {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px; padding: 4px 8px; min-width: 42px;
}
.vac-tb-unit__num {
  font-size: 17px; font-weight: 900; color: var(--vac-ac);
  line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.vac-tb-unit__num.vac-tick { animation: vacTbTick .25s ease forwards; }
@keyframes vacTbTick {
  0%   { transform: translateY(0);    opacity: 1; }
  40%  { transform: translateY(-5px); opacity: 0; }
  60%  { transform: translateY(5px);  opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.vac-tb-unit__lbl {
  font-size: 8px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,0.40); margin-top: 1px;
}
.vac-tb-colon {
  font-size: 15px; font-weight: 900; color: var(--vac-ac);
  opacity: .7; animation: vacBlink 1s step-end infinite; padding-bottom: 10px;
}
@keyframes vacBlink { 0%,100%{opacity:.7} 50%{opacity:.2} }

.vac-tb-expired {
  font-size: 13px; font-weight: 700; color: var(--vac-ac);
}

/* Close btn */
.vac-tb-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.55); border-radius: 4px;
  width: 24px; height: 24px; font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s; padding: 0; line-height: 1;
}
.vac-tb-close:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Top Bar responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .vac-tb-promo__sub { display: none; }
  .vac-tb-promo__main { font-size: 12px; }
  .vac-tb-unit { min-width: 36px; padding: 3px 6px; }
  .vac-tb-unit__num { font-size: 15px; }
}

/* Mobile: keep promo visible but smaller */
@media (max-width: 600px) {
  .vac-topbar__inner { gap: 7px; padding: 6px 32px 6px 8px; }
  .vac-tb-promo__main { font-size: 10px; white-space: normal; line-height: 1.3; max-width: 120px; }
  .vac-tb-badge { padding: 3px 7px; }
  .vac-tb-badge__label { font-size: 8px; }
  .vac-tb-badge__years { font-size: 12px; }
  .vac-tb-unit { min-width: 32px; padding: 3px 4px; }
  .vac-tb-unit__num { font-size: 14px; }
  .vac-tb-unit__lbl { font-size: 7px; }
  .vac-tb-colon { font-size: 12px; }
}

@media (max-width: 380px) {
  .vac-tb-badge { display: none; }
  .vac-tb-promo__main { font-size: 9px; max-width: 90px; }
  .vac-tb-unit { min-width: 28px; padding: 2px 3px; }
  .vac-tb-unit__num { font-size: 13px; }
  .vac-topbar__inner { gap: 5px; padding: 5px 28px 5px 6px; }
}

/* =============================================================
   TOP BAR — ANIMATION STYLES
============================================================= */
/* Glow */
.vac-bar-glow .vac-tb-unit { box-shadow:0 0 10px rgba(42,157,80,.20); border-color:rgba(42,157,80,.35); animation:vacBarGlow 2.5s ease-in-out infinite; }
.vac-bar-glow .vac-tb-unit__num { text-shadow:0 0 10px rgba(42,157,80,.65); }
.vac-bar-glow .vac-tb-badge { box-shadow:0 0 12px rgba(42,157,80,.50); }
@keyframes vacBarGlow { 0%,100%{box-shadow:0 0 10px rgba(42,157,80,.20)} 50%{box-shadow:0 0 20px rgba(42,157,80,.45)} }

/* Gradient */
.vac-bar-gradient .vac-tb-promo__main { background:linear-gradient(90deg,var(--vac-ac),#4dd67e,#f0c040,var(--vac-ac));background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vacGT 4s linear infinite; }
.vac-bar-gradient .vac-tb-unit__num   { background:linear-gradient(135deg,#4dd67e,#f0c040);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
@keyframes vacGT { 0%{background-position:0% center}100%{background-position:300% center} }

/* Pulse */
.vac-bar-pulse .vac-tb-unit__num { animation:vacTbPulse 1s ease-in-out infinite; }
.vac-bar-pulse .vac-tb-unit:nth-child(2) .vac-tb-unit__num { animation-delay:.25s; }
.vac-bar-pulse .vac-tb-unit:nth-child(4) .vac-tb-unit__num { animation-delay:.5s; }
.vac-bar-pulse .vac-tb-unit:nth-child(6) .vac-tb-unit__num { animation-delay:.75s; }
.vac-bar-pulse .vac-tb-badge { animation:vacTbBadge 2s ease-in-out infinite; }
@keyframes vacTbPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes vacTbBadge { 0%,100%{box-shadow:0 0 0 0 rgba(42,157,80,.6)} 70%{box-shadow:0 0 0 7px rgba(42,157,80,0)} }

/* Luxury */
.vac-bar-luxury.vac-topbar { background:linear-gradient(90deg,#0a0a0a,#1a1200,#0a0a0a); }
.vac-bar-luxury .vac-tb-unit { border-color:rgba(212,175,55,.35); background:rgba(212,175,55,.06); }
.vac-bar-luxury .vac-tb-unit__num { background:linear-gradient(180deg,#f0c040,#c8960a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.vac-bar-luxury .vac-tb-promo__main { background:linear-gradient(90deg,#f0c040,#fff,#f0c040);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vacGold 3s linear infinite; }
.vac-bar-luxury .vac-tb-badge { background:linear-gradient(135deg,#d4af37,#c8960a); }
.vac-bar-luxury .vac-tb-colon { color:#d4af37; }
@keyframes vacGold { from{background-position:0% center}to{background-position:200% center} }

/* Modern */
.vac-bar-modern.vac-topbar { background:#0d1f10; border-bottom:1px solid rgba(42,157,80,.25); }
.vac-bar-modern .vac-tb-unit { background:transparent; border-color:rgba(42,157,80,.30); border-radius:3px; }
.vac-bar-modern .vac-tb-colon { animation:none; opacity:.4; }
.vac-bar-modern .vac-tb-badge { background:transparent; border:1px solid var(--vac-ac); }
.vac-bar-modern .vac-tb-badge__label,
.vac-bar-modern .vac-tb-badge__years { color:var(--vac-ac); }

/* =============================================================
   FULL BLOCK
============================================================= */
.vac-block {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: var(--vac-pad);
  background: var(--vac-bg);
  border-radius: 16px;
  overflow: hidden;
  font-family: 'Segoe UI','Open Sans',sans-serif;
  box-sizing: border-box;
  text-align: center;
}

/* Decorative circles */
.vac-block__deco { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.vac-block__circle { position:absolute;border-radius:50%;background:radial-gradient(circle,var(--vac-ac),transparent 70%);opacity:.08; }
.vac-block__circle--1 { width:400px;height:400px;top:-150px;right:-100px; }
.vac-block__circle--2 { width:300px;height:300px;bottom:-120px;left:-80px; }

/* Header */
.vac-block__header { position:relative;z-index:2;margin-bottom:36px; }

.vac-block__cross {
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  color:var(--vac-ac);margin:0 auto 20px;
}

.vac-block__badge {
  display:inline-flex;align-items:center;gap:6px;
  background:var(--vac-ac);border-radius:30px;padding:6px 20px;margin-bottom:18px;
}
.vac-block__badge-num { font-size:22px;font-weight:900;color:#fff;line-height:1; }
.vac-block__badge-txt { font-size:11px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:2px; }

.vac-block__headline { font-size:var(--vac-hs);font-weight:800;color:var(--vac-tc);line-height:1.2;margin:0 0 10px;letter-spacing:-.5px; }
.vac-block__subline  { font-size:calc(var(--vac-hs)*.55);color:rgba(255,255,255,.60);margin:0 0 8px; }
.vac-block__tagline  { font-size:calc(var(--vac-lc, 12px));font-size:12px;color:var(--vac-ac);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin:0; }

/* Countdown row */
.vac-block__countdown {
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:wrap;margin-bottom:32px;
}

/* Unit card */
.vac-block__unit { display:flex;flex-direction:column;align-items:center;gap:10px; }
.vac-block__card {
  position:relative;
  min-width:calc(var(--vac-ns)*1.4);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  padding:16px 12px;overflow:hidden;
}
.vac-block__card::after { content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.06); }

.vac-block__num {
  font-size:var(--vac-ns);font-weight:900;color:var(--vac-tc);
  line-height:1;font-variant-numeric:tabular-nums;
  transition:transform .2s,opacity .2s;
}
.vac-block__num.vac-flip { animation:vacFlip .3s ease forwards; }
@keyframes vacFlip {
  0%  { transform:rotateX(0);    opacity:1; }
  50% { transform:rotateX(-90deg);opacity:0; }
  100%{ transform:rotateX(0);    opacity:1; }
}

.vac-block__lbl { font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--vac-lc); }

/* Separator */
.vac-block__sep { display:flex;align-items:center;padding-bottom:28px; }
.vac-block__sep span { font-size:calc(var(--vac-ns)*.6);font-weight:900;color:var(--vac-ac);opacity:.7;animation:vacBlink 1s step-end infinite; }

/* Expired */
.vac-block__expired { font-size:calc(var(--vac-hs)*.9);font-weight:800;color:var(--vac-ac);padding:20px;position:relative;z-index:2; }

/* Footer strip */
.vac-block__footer {
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  gap:12px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(255,255,255,.25);border-top:1px solid rgba(255,255,255,.06);
  padding-top:16px;margin-top:4px;flex-wrap:wrap;
}
.vac-block__dot { width:4px;height:4px;border-radius:50%;background:var(--vac-ac);opacity:.5; }

/* ── Light theme ── */
.vac-block-theme-light { --vac-bg:#f5fdf7; --vac-tc:#0f1f12; --vac-lc:#5f8a6a; }
.vac-block-theme-light .vac-block__card    { background:#fff;border-color:#c3e8cf;box-shadow:0 4px 16px rgba(42,157,80,.10); }
.vac-block-theme-light .vac-block__subline { color:rgba(15,31,18,.55); }
.vac-block-theme-light .vac-block__footer  { color:rgba(15,31,18,.30);border-top-color:#c3e8cf; }
.vac-block-theme-light .vac-block__cross   { background:rgba(42,157,80,.08);border-color:rgba(42,157,80,.20); }

/* =============================================================
   FULL BLOCK — ANIMATION STYLES
============================================================= */
/* Glow */
.vac-block-glow .vac-block__card  { box-shadow:0 0 24px rgba(42,157,80,.25),0 0 60px rgba(42,157,80,.08);border-color:rgba(42,157,80,.40);animation:vacBlockGlow 2.5s ease-in-out infinite; }
.vac-block-glow .vac-block__num   { color:var(--vac-ac2);text-shadow:0 0 20px rgba(77,214,126,.6); }
.vac-block-glow .vac-block__headline { text-shadow:0 0 30px rgba(42,157,80,.35); }
.vac-block-glow .vac-block__badge { box-shadow:0 0 20px rgba(42,157,80,.50); }
@keyframes vacBlockGlow { 0%,100%{box-shadow:0 0 24px rgba(42,157,80,.25),0 0 60px rgba(42,157,80,.08)} 50%{box-shadow:0 0 40px rgba(42,157,80,.45),0 0 80px rgba(42,157,80,.15)} }

/* Gradient */
.vac-block-gradient .vac-block__headline { background:linear-gradient(90deg,var(--vac-ac),var(--vac-ac2),#f0c040,var(--vac-ac));background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vacBlockGrad 4s linear infinite; }
.vac-block-gradient .vac-block__num      { background:linear-gradient(135deg,var(--vac-ac2),#f0c040);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.vac-block-gradient .vac-block__card     { background:linear-gradient(135deg,rgba(42,157,80,.12),rgba(77,214,126,.06));border-color:rgba(77,214,126,.30); }
@keyframes vacBlockGrad { 0%{background-position:0% center}100%{background-position:300% center} }

/* Slide */
.vac-block-slide .vac-block__headline  { animation:vacBlockSlide .9s cubic-bezier(.22,1,.36,1) both; }
.vac-block-slide .vac-block__subline   { animation:vacBlockSlide .9s .15s cubic-bezier(.22,1,.36,1) both; }
.vac-block-slide .vac-block__countdown { animation:vacBlockSlide .9s .3s cubic-bezier(.22,1,.36,1) both; }
.vac-block-slide .vac-block__num       { color:var(--vac-ac2); }
.vac-block-slide .vac-block__num.vac-flip { animation:vacBlockSlideFlip .35s ease forwards; }
@keyframes vacBlockSlide     { from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)} }
@keyframes vacBlockSlideFlip { 0%{transform:translateY(0);opacity:1}40%{transform:translateY(-12px);opacity:0}60%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:1} }

/* Float */
.vac-block-float .vac-block__badge { animation:vacBlockFloat 3s .5s ease-in-out infinite; }
.vac-block-float .vac-block__card  { animation:vacBlockFloatCard 3s ease-in-out infinite;border-color:rgba(42,157,80,.35); }
.vac-block-float .vac-block__unit:nth-child(3) .vac-block__card { animation-delay:.3s; }
.vac-block-float .vac-block__unit:nth-child(5) .vac-block__card { animation-delay:.6s; }
.vac-block-float .vac-block__unit:nth-child(7) .vac-block__card { animation-delay:.9s; }
@keyframes vacBlockFloat     { 0%,100%{transform:translateY(0)}    50%{transform:translateY(-8px)} }
@keyframes vacBlockFloatCard { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-6px) scale(1.02)} }

/* Fade */
.vac-block-fade .vac-block__header    { animation:vacBlockFade 1s ease both; }
.vac-block-fade .vac-block__countdown { animation:vacBlockFade 1s .3s ease both; }
.vac-block-fade .vac-block__card      { animation:vacBlockFadePulse 3s ease-in-out infinite;border-color:rgba(42,157,80,.30); }
.vac-block-fade .vac-block__unit:nth-child(3) .vac-block__card { animation-delay:.4s; }
.vac-block-fade .vac-block__unit:nth-child(5) .vac-block__card { animation-delay:.8s; }
.vac-block-fade .vac-block__unit:nth-child(7) .vac-block__card { animation-delay:1.2s; }
@keyframes vacBlockFade      { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }
@keyframes vacBlockFadePulse { 0%,100%{opacity:1}50%{opacity:.75} }

/* Pulse */
.vac-block-pulse .vac-block__num { color:var(--vac-ac2);animation:vacBlockPulse 1s ease-in-out infinite; }
.vac-block-pulse .vac-block__unit:nth-child(3) .vac-block__num { animation-delay:.25s; }
.vac-block-pulse .vac-block__unit:nth-child(5) .vac-block__num { animation-delay:.5s; }
.vac-block-pulse .vac-block__unit:nth-child(7) .vac-block__num { animation-delay:.75s; }
.vac-block-pulse .vac-block__badge { animation:vacBlockBadgePulse 2s ease-in-out infinite; }
.vac-block-pulse .vac-block__card  { border-color:rgba(42,157,80,.40);animation:vacBlockCardPulse 2s ease-in-out infinite; }
@keyframes vacBlockPulse      { 0%,100%{transform:scale(1)}50%{transform:scale(1.06)} }
@keyframes vacBlockBadgePulse { 0%,100%{box-shadow:0 0 0 0 rgba(42,157,80,.6)}70%{box-shadow:0 0 0 14px rgba(42,157,80,0)} }
@keyframes vacBlockCardPulse  { 0%,100%{border-color:rgba(42,157,80,.40)}50%{border-color:rgba(42,157,80,.80)} }

/* Modern */
.vac-block-modern { background:linear-gradient(160deg,#0d1f10 0%,#1a3020 60%,#0d1f10 100%); }
.vac-block-modern .vac-block__card    { background:rgba(255,255,255,.04);border:none;border-radius:8px;box-shadow:0 2px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06); }
.vac-block-modern .vac-block__num     { font-family:'Georgia',serif;letter-spacing:-2px; }
.vac-block-modern .vac-block__headline { font-family:'Georgia',serif; }
.vac-block-modern .vac-block__badge   { background:transparent;border:1px solid var(--vac-ac); }
.vac-block-modern .vac-block__badge-num,
.vac-block-modern .vac-block__badge-txt { color:var(--vac-ac); }
.vac-block-modern .vac-block__sep span  { animation:none;opacity:.4; }

/* Luxury */
.vac-block-luxury { background:linear-gradient(135deg,#0a0a0a 0%,#1a1200 50%,#0a0a0a 100%); }
.vac-block-luxury .vac-block__card    { background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(212,175,55,.03));border:1px solid rgba(212,175,55,.30);box-shadow:0 0 30px rgba(212,175,55,.08); }
.vac-block-luxury .vac-block__num     { background:linear-gradient(180deg,#f0c040,#c8960a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:900;letter-spacing:-2px; }
.vac-block-luxury .vac-block__headline { background:linear-gradient(90deg,#f0c040,#fff,#f0c040);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vacBlockLuxHead 3s linear infinite;font-family:'Georgia',serif; }
.vac-block-luxury .vac-block__badge   { background:linear-gradient(135deg,#d4af37,#c8960a);box-shadow:0 4px 20px rgba(212,175,55,.40); }
.vac-block-luxury .vac-block__tagline { color:#d4af37; }
.vac-block-luxury .vac-block__sep span { color:#d4af37;animation:none; }
.vac-block-luxury .vac-block__footer  { border-top-color:rgba(212,175,55,.15);color:rgba(255,255,255,.20); }
.vac-block-luxury .vac-block__circle  { background:radial-gradient(circle,rgba(212,175,55,.3),transparent 70%); }
@keyframes vacBlockLuxHead { from{background-position:0% center}to{background-position:200% center} }

/* =============================================================
   FULL BLOCK — RESPONSIVE
============================================================= */
@media (max-width:700px) {
  .vac-block { --vac-ns:48px; --vac-hs:22px; --vac-pad:28px; }
  .vac-block__card { min-width:calc(var(--vac-ns)*1.3);padding:12px 8px; }
  .vac-block__sep span { font-size:32px; }
}
@media (max-width:480px) {
  .vac-block { --vac-ns:36px; --vac-hs:17px; --vac-pad:20px; }
  .vac-block__card { min-width:calc(var(--vac-ns)*1.25);padding:10px 6px; }
  .vac-block__sep span { font-size:24px; }
  .vac-block__footer { font-size:9px;gap:8px; }
  .vac-block__dot { display:none; }
}
@media (max-width:360px) {
  .vac-block { --vac-ns:28px; --vac-hs:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .vac-topbar *, .vac-topbar *::before, .vac-topbar *::after,
  .vac-block  *, .vac-block  *::before, .vac-block  *::after {
    animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;
  }
}