/* ==========================================================================
   Homepage promo popup — responsive ad using an admin-managed campaign image
   File: css/promo-popup.css

   - Shown once per browser session on the homepage only (see js/promo-popup.js)
   - Auto-dismisses after a 15-second on-screen countdown if untouched
   - "Get my website" -> contact.html#contactForm (exact contact form)
   - "Continue browsing" and the ✕ icon both dismiss immediately
   - Respects prefers-reduced-motion (no entrance animation for those users)
   ========================================================================== */

.promo-popup-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:220;
  background:rgba(7,17,31,.6);
  align-items:center;
  justify-content:center;
  padding:18px;
  backdrop-filter:blur(2px);
}
.promo-popup-backdrop:not([hidden]){display:flex}

.promo-popup{
  position:relative;
  width:100%;
  max-width:420px;
  max-height:92vh;
  overflow:auto;
  background:var(--white,#fff);
  border-radius:var(--radius,22px);
  box-shadow:0 30px 90px rgba(7,17,31,.45);
  display:flex;
  flex-direction:column;
}
@media (prefers-reduced-motion: no-preference){
  .promo-popup-backdrop:not([hidden]) .promo-popup{
    animation:promoPopIn .35s cubic-bezier(.2,.8,.2,1);
  }
}
@keyframes promoPopIn{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.promo-popup-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:rgba(7,17,31,.55);
  color:#fff;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.promo-popup-close:hover{background:rgba(7,17,31,.75)}

.promo-popup-media{
  width:100%;
  aspect-ratio:1/1;
  background:var(--soft,#f5f8fc) center/cover no-repeat;
  overflow:hidden;
}
.promo-popup-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.promo-popup-body{
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.promo-popup-body h3{
  font-family:Manrope,sans-serif;
  font-size:1.2rem;
  font-weight:800;
  line-height:1.3;
  margin:0;
  color:var(--ink,#0b1220);
}
.promo-popup-body p{
  margin:0;
  color:var(--muted,#5d6879);
  font-size:.92rem;
  line-height:1.5;
}

.promo-popup-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
}
.promo-popup-actions .cta{
  flex:1 1 180px;
  text-align:center;
  white-space:nowrap;
}
.promo-popup-secondary{
  flex:1 1 150px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line,#e6ebf2);
  background:#fff;
  color:var(--ink,#0b1220);
  font-weight:700;
  font-size:.92rem;
  cursor:pointer;
}
.promo-popup-secondary:hover{background:var(--soft,#f5f8fc)}

.promo-popup-timer{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:2px;
  font-size:.78rem;
  color:var(--muted,#5d6879);
}
.promo-popup-timer svg{flex:0 0 auto;transform:rotate(-90deg)}
.promo-popup-timer circle.track{fill:none;stroke:var(--line,#e6ebf2);stroke-width:3}
.promo-popup-timer circle.progress{
  fill:none;
  stroke:var(--brand,#2563eb);
  stroke-width:3;
  stroke-linecap:round;
}

@media (max-width:480px){
  .promo-popup{max-width:100%;border-radius:18px}
  .promo-popup-body{padding:16px 16px 18px}
  .promo-popup-body h3{font-size:1.08rem}
  .promo-popup-actions .cta,.promo-popup-secondary{flex-basis:100%}
}

.promo-popup-link{display:none;text-decoration:none;text-align:center}
.promo-popup-media[hidden],.promo-popup-actions [hidden],.promo-popup-timer[hidden]{display:none!important}
.promo-popup-actions .promo-popup-link:not([hidden]){display:flex;align-items:center;justify-content:center}