/* KiwiSurf country pages: additions on top of the shared ../assets/site.css (kiwisurf-site).
   Waitlist badge + form, sample tags, hour-by-hour grid, empty scoreboard, captions. Tokens come from site.css. */

/* hero: "Live in Lisbon · Coming to X" */
.badge-soon{display:inline-flex;align-items:center;gap:8px;margin:0 auto 22px;padding:5px 12px 5px 10px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:700 13px/18px var(--sans);letter-spacing:.01em;color:var(--ink-100)}
.badge-soon .dot{width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 0 rgba(255,145,71,.6);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,145,71,.55)}70%,100%{box-shadow:0 0 0 8px rgba(255,145,71,0)}}

/* "Sample" tags: every number on these pages that looks like a forecast is a sample */
.sample{display:inline-block;padding:1px 8px;border-radius:999px;background:#fdeedd;color:#9a4a12;font:700 11px/18px var(--sans);letter-spacing:.02em;white-space:nowrap}
.post-h .t.sample{color:#9a4a12}
.cap.l{text-align:left}

/* hour-by-hour grid (HTML version of the app's overview graphic) */
.hgrid{border-radius:12px;background:#fff;box-shadow:var(--shadow-border);padding:14px 14px 12px;text-align:left}
.hg-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.hg-h b{font:700 14px/20px var(--sans)}
.hg-row{display:grid;grid-template-columns:112px repeat(var(--n),minmax(0,1fr));gap:4px}
.hg-row+.hg-row{margin-top:4px}
.hg-hours span{font:600 11px/16px var(--sans);color:var(--ink-500);text-align:center;white-space:nowrap}
.hg-n{align-self:center;font:700 12px/15px var(--sans);color:var(--ink-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hg-c{height:62px;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;padding:4px 0;border-radius:6px;background:var(--surface-300)}
.hg-c .k{font-size:10px;margin-top:1px}
.hg-c.best{background:#eef8e4;box-shadow:inset 0 0 0 1.5px var(--kiwi)}
.hg-key{margin-top:10px;font:400 12px/16px var(--sans);color:var(--ink-500)}

/* empty scoreboard */
.kpi b.none{color:var(--ink-400)}
.kpi em{color:var(--ink-500)}
.prog{margin-top:14px;height:8px;border-radius:4px;background:var(--surface-500);overflow:hidden}
.prog i{display:block;width:2%;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--flesh),var(--kiwi))}
.prog-l{margin-top:6px;font:600 12px/16px var(--sans);color:var(--ink-500)}

/* waitlist form in the sticky CTA */
.wl{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:760px;margin-top:26px}
.wl input,.wl select{height:44px;border:0;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--ink-300);font:500 16px/24px var(--sans);color:var(--ink-900);padding:0 14px;min-width:0}
.wl input:focus,.wl select:focus{outline:none;box-shadow:0 0 0 2px var(--teal)}
.wl input[type=email]{flex:1 1 280px;max-width:320px}
.wl select{flex:0 1 220px;appearance:none;-webkit-appearance:none;padding-right:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2399978f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center/14px no-repeat}
.wl select:invalid,.wl select option[value=""]{color:var(--ink-500)}
.wl .btn{height:44px;min-width:200px}
.wl .btn[disabled]{opacity:.6;cursor:progress}
.wl .tg{flex-basis:100%;max-width:320px;margin:0 auto}
.wl .tg[hidden]{display:none}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.wl-msg{position:relative;min-height:20px;margin-top:12px;max-width:560px;font:700 14px/20px var(--sans);color:var(--kiwi)}
.wl-msg.err{color:var(--berry)}
.wl-note{position:relative;max-width:560px;margin-top:4px;font:400 13px/19px var(--sans);color:var(--ink-500)}

/* bands: lift the picture so Kiwi stands above the card (focus per scene from tools/build.py; the gap it leaves is under the card) */
.band{background-position:var(--bx,50%) calc(-1px * var(--sy,0))}
.how h2{padding:0 16px}

/* nav: up to 5 regions in the breaks menu */
.drop.spots.many{min-width:520px}
@media (max-width:1100px){.drop.spots.many{min-width:440px}}
.cols{flex-wrap:wrap}
/* "Sample" over the hero chat mock and the chat example: these markets have no forecast yet */
.mock-tag{position:absolute;left:50%;top:-30px;transform:translateX(-50%);z-index:2}
.chats-tag{position:absolute;left:4%;top:-26px}
.wl-note a{color:var(--ink-600)}
.cols a[aria-current=page]{font-weight:800;opacity:1}

@media (max-width:760px){
  .band{background-position:var(--bx,50%) calc(-1px * var(--sym,0))}
  .badge-soon{margin-bottom:18px;font-size:12px}
  .hg-row{grid-template-columns:84px repeat(var(--n),minmax(0,1fr));gap:3px}
  .hg-n{font-size:11px}
  .hg-hours span{font-size:10px}
  .hg-c{height:56px}
  .hg-c .k{font-size:9px}
  .wl{flex-direction:column;align-items:stretch;max-width:342px;margin-top:20px}
  .wl input[type=email],.wl select{flex:none;max-width:none;width:100%}
  .wl .btn{min-width:0;width:100%}
  .wl .tg{max-width:none}
  .wl-note{max-width:342px;font-size:12px;line-height:17px}
  /* the form makes the sticky CTA taller than Lisbon's: the bottom chips would sit on the price line, keep the top two */
  .chipf:nth-child(n+3){display:none!important}
  /* footer: 9 countries in two columns so the card stays short and the scene shows */
  #countries{flex-basis:100%;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
  #countries .fh{grid-column:1/-1}
  .cta .lead{font-size:15px;line-height:22px}
}
@media (prefers-reduced-motion:reduce){.badge-soon .dot{animation:none}}