/* Site-visit announcement for the first merit list 2083.

   A bottom-anchored card, NOT a full-screen interstitial: it never covers the
   page content, so it stays clear of Google's intrusive-interstitial rule while
   still arriving as a "pop up". Bottom-left on desktop (away from the
   bottom-right sticky CTA), a full-width card above the sticky bar on phones.
   Hidden until public/js/merit-announce.js reveals it, at most once per
   visitor. Navy field + terracotta flag — the /merit-list "you have a seat"
   language, so a returning visitor recognises it. */

.merit-pop{
  position:fixed;left:16px;bottom:18px;z-index:60;
  width:min(360px,calc(100vw - 32px));
  opacity:0;transform:translateY(14px);
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.merit-pop.is-in{opacity:1;transform:none;pointer-events:auto}
.merit-pop[hidden]{display:none}

.merit-pop__card{
  position:relative;padding:18px 18px 16px;border-radius:14px;color:#fff;
  background-image:
    radial-gradient(420px 160px at 90% -30%,rgba(217,112,44,.22),transparent 60%),
    linear-gradient(155deg,var(--ice-palette-navy-800,#13234b),var(--ice-palette-navy-900,#0c1a38));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(4,9,36,.34);
}

.merit-pop__close{
  position:absolute;top:8px;right:8px;width:32px;height:32px;
  display:grid;place-items:center;border:0;border-radius:8px;cursor:pointer;
  color:rgba(255,255,255,.7);background:transparent;
}
.merit-pop__close:hover{color:#fff;background:rgba(255,255,255,.1)}
.merit-pop__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.merit-pop__title{
  margin:2px 30px 8px 0;font-size:1.15rem;font-weight:700;line-height:1.25;
  letter-spacing:-.01em;color:#fff;
}
.merit-pop__body{margin:0 0 15px;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.85)}

.merit-pop__acts{display:flex;align-items:center;gap:14px}
.merit-pop__go{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:8px;
  font-weight:600;font-size:.92rem;text-decoration:none;color:#fff;
  background:var(--ice-color-action,#c41e3a);box-shadow:0 8px 20px rgba(196,30,58,.3);
}
.merit-pop__go::after{content:"\2192";transition:transform .18s ease}
.merit-pop__go:hover{background:var(--ice-color-action-hover,#a5152c)}
.merit-pop__go:hover::after{transform:translateX(3px)}
.merit-pop__later{
  border:0;background:transparent;cursor:pointer;font-size:.9rem;font-weight:500;
  color:rgba(255,255,255,.7);
}
.merit-pop__later:hover{color:#fff;text-decoration:underline}

.merit-pop a:focus-visible,.merit-pop button:focus-visible{
  outline:2px solid var(--ice-palette-terracotta-300,#f0a97a);outline-offset:2px;border-radius:8px;
}

@media (max-width:640px){
  .merit-pop{left:12px;right:12px;width:auto;bottom:var(--merit-pop-bottom,86px)}
}

@media (prefers-reduced-motion:reduce){
  .merit-pop{transition:opacity .2s ease}
  .merit-pop.is-in{transform:none}
  .merit-pop__go::after{transition:none}
}

html[data-theme="dark"] .merit-pop__card{
  background-image:
    radial-gradient(420px 160px at 90% -30%,rgba(240,169,122,.16),transparent 60%),
    linear-gradient(155deg,var(--ice-palette-graphite-800,#313338),var(--ice-palette-graphite-950,#1e1f22));
  border-color:rgba(255,255,255,.1);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}