/* ══ WHALE AD SYSTEM — OVERLAY CSS ══ */
#wha-overlay{
  display:none;position:fixed;inset:0;z-index:99999;
  background:rgba(12,45,72,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:16px;
  font-family:'Afacad',sans-serif;
}
#wha-overlay.wha-show{display:flex;animation:whaIn .22s ease-out both}
@keyframes whaIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* ── Card shell (shared by display + video) ── */
#wha-card{
  background:#fff;border-radius:18px;
  width:min(480px,96vw);
  overflow:hidden;box-shadow:0 24px 64px rgba(12,45,72,.35);
  display:flex;flex-direction:column;
}

/* Video mode: wider card */
#wha-card.wha-video-mode{
  width:min(640px,96vw);
}

/* ── Topbar ── */
#wha-topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 17px 9px;border-bottom:1px solid #e8f0f5;background:#f4f8fb;
  flex-shrink:0;
}
#wha-label{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7a96a8}
#wha-countdown{
  font-size:.72rem;font-weight:700;color:#0c2d48;
  background:#e8f0f5;border-radius:99px;padding:3px 12px;min-width:52px;text-align:center;
}
#wha-progress{height:3px;background:#e8f0f5;flex-shrink:0}
#wha-progress-fill{height:100%;background:linear-gradient(90deg,#1a6fa3,#1e7a52);transition:none;width:0%}

/* ── Ad slot (display) ── */
#wha-ad-slot{
  min-height:120px;display:flex;align-items:center;justify-content:center;
  padding:18px;background:#f9fbfc;flex-shrink:0;
}

/* ── Video container (IMA SDK) ── */
#wha-video-wrap{
  display:none;position:relative;width:100%;
  background:#000;flex-shrink:0;
}
#wha-video-wrap.wha-active{display:block}
/* 16:9 ratio container */
#wha-video-ratio{position:relative;width:100%;padding-top:56.25%}
#wha-content-video{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:none; /* hidden — only used as IMA content element */
}
#wha-ima-container{
  position:absolute;top:0;left:0;width:100%;height:100%;
}

/* ── Footer ── */
#wha-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 17px;border-top:1px solid #e8f0f5;gap:10px;flex-shrink:0;
}
#wha-skip-btn{
  font-family:'Afacad',sans-serif;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#1a6fa3;
  background:#e8f3fa;border:none;border-radius:9px;padding:9px 17px;
  cursor:pointer;transition:background .15s;display:none;
}
#wha-skip-btn:hover{background:#c3dff0}
#wha-skip-btn.wha-ready{display:inline-flex;animation:whaFade .3s both}
@keyframes whaFade{from{opacity:0}to{opacity:1}}
#wha-resume-note{font-size:.7rem;color:#7a96a8;flex:1;text-align:right}

/* ── Test mode badge ── */
#wha-test-badge{
  display:none;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:#fef8ec;color:#b8914d;border:1px solid #f5e6c6;border-radius:99px;
  padding:2px 9px;
}
#wha-test-badge.wha-show-badge{display:inline-block}