/* Jamii Connect captive portal (design matched to the approved video).
   --p  = portal primary (Connect button, plan badges, welcome banner)
   --s  = portal secondary (buy bar pinned to the bottom) — both from Settings › Captive portal */
@font-face{font-family:"Jakarta";src:url(/fonts/jakarta-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jakarta";src:url(/fonts/jakarta-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Jakarta";src:url(/fonts/jakarta-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Jakarta";src:url(/fonts/jakarta-800.woff2) format("woff2");font-weight:800;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Jakarta",system-ui,-apple-system,"Segoe UI",sans-serif;background:#F3F4F8;color:#14161F;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
:focus-visible{outline:3px solid var(--s);outline-offset:2px}
.page{max-width:460px;margin:0 auto;padding:18px 16px 110px}

/* Brand */
.logo{display:flex;justify-content:center;align-items:center;margin:6px 0 14px;min-height:32px}
/* Height chosen by staff (--logo-h); never wider than the screen allows */
.logo img{height:var(--logo-h,72px);width:auto;max-width:min(86%,340px);object-fit:contain}
.logo .name{font-size:calc(var(--logo-h,72px) * .38);font-weight:800;line-height:1.1}

/* Announcements: right under the logo, full text, clear label */
.notices{display:grid;gap:8px;margin-bottom:14px}
.notice{display:flex;gap:11px;align-items:flex-start;border-radius:14px;padding:12px 14px;background:#EAF1FF;color:#12325E;border:1px solid #D3E1FB}
.notice .ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#2F6FE4;color:#fff;font-weight:800;font-size:15px}
.notice .tx{min-width:0}
.notice .tx b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em;margin-bottom:1px;opacity:.85}
.notice .tx span{font-size:14.5px;font-weight:600;line-height:1.5;word-wrap:break-word}
.notice.promo{background:#FFF1E3;color:#5A2E00;border-color:#FBDDBE}.notice.promo .ic{background:#F28C1B}
.notice.warning{background:#FFF4D6;color:#5C4100;border-color:#F6E2A6}.notice.warning .ic{background:#D99A00}
.status{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 14px;width:fit-content;max-width:100%;background:#ECEDF1;border:1px solid #DADCE3;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:500;color:#3A3F4E}
.status i{width:8px;height:8px;border-radius:50%;background:#22C55E;flex:none}
.status.off i{background:#E5484D}

/* Welcome banner */
.banner{background:var(--p);color:var(--on-p);border-radius:16px;padding:16px 18px;font-weight:600;font-size:15px;line-height:1.55;margin-bottom:14px}

/* Voucher card */
.vcard{background:#fff;border:1px solid #E4E6EC;border-radius:18px;padding:18px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.vcard .label{font-size:11px;font-weight:800;letter-spacing:.09em;color:#14161F;margin:0 0 10px}
/* 8 code boxes: one digit each */
.boxes{display:flex;justify-content:center;gap:5px}
.boxes input{flex:1 1 0;min-width:0;max-width:46px;height:54px;padding:0;border:1px solid #DADCE3;border-radius:11px;background:#F6F7F9;text-align:center;font-size:22px;font-weight:800;color:#14161F;caret-color:var(--p)}
.boxes input:nth-child(5){margin-left:7px}
.boxes input:focus{outline:none;border:2px solid var(--p);background:#fff}
.boxes input.filled{background:#fff;border-color:#BFC3CD}
.boxes.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.clear{display:block;margin:6px 0 0 auto;background:none;border:0;color:#8A8F9C;font-size:12.5px;font-weight:700;cursor:pointer;padding:2px 4px}
@media (max-width:350px){.boxes{gap:3px}.boxes input{height:46px;font-size:19px}.boxes input:nth-child(5){margin-left:4px}}
@media (prefers-reduced-motion:reduce){.boxes.shake{animation:none}}
.btn{width:100%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:800}
.btn-connect{height:50px;margin-top:8px;border-radius:999px;background:var(--p);color:var(--on-p);font-size:15px;letter-spacing:.01em}
.btn-connect[disabled]{opacity:.7;cursor:wait}
.btn-find{height:50px;margin-top:10px;border-radius:999px;background:#fff;color:#14161F;border:1px solid #DADCE3;font-weight:700;font-size:14.5px}
.hint{text-align:center;color:#8A8F9C;font-size:12.5px;margin:12px 0 0}
.msg{display:none;margin-top:12px;border-radius:12px;padding:10px 12px;font-size:13.5px;font-weight:600;background:#FDECEC;color:#9B1C1C}
.msg.show{display:block}
.msg.ok{background:#E8F7EE;color:#11643A}

/* Divider + plans */
.divider{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:#9AA0AC;font-size:11px;font-weight:800;letter-spacing:.12em}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:#E1E3E9}
.plans-h{font-size:17px;font-weight:800;margin:0}
.plans-s{color:#7A7F8C;font-size:13px;margin:3px 0 12px}
.plans{display:grid;gap:10px}
.plan{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1.5px solid #E4E6EC;border-radius:14px;padding:12px 14px;cursor:pointer;color:inherit}
.plan.on{border:2px solid var(--p);padding:11.5px 13.5px}
.plan .badge{width:34px;height:34px;flex:none;border-radius:9px;background:#EEEFF3;display:grid;place-items:center;font-size:10.5px;font-weight:800;color:#2A2E3A}
.plan .info{flex:1;min-width:0}
.plan .info b{display:block;font-size:14.5px;font-weight:700}
.plan .info small{color:#8A8F9C;font-size:12px}
.plan .price{text-align:right}
.plan .price b{display:block;font-size:16.5px;font-weight:800;font-variant-numeric:tabular-nums}
.plan .price small{display:block;font-size:9.5px;font-weight:700;color:#A4A8B4;letter-spacing:.06em}

/* Adverts (only shown when an advert is running) */
.ads{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:12/5;background:#E4E6EC;margin-top:14px}
.ads a{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.ads a.on{opacity:1;z-index:1}
.ads img{width:100%;height:100%;object-fit:cover;display:block}
.ads .dots{position:absolute;bottom:8px;left:0;right:0;z-index:2;display:flex;justify-content:center;gap:5px}
.ads .dots b{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6)}
.ads .dots b.on{background:#fff;width:16px;border-radius:999px}

/* Footer */
.foot{text-align:center;font-size:12.5px;color:#4A4F5C;margin-top:22px;line-height:1.7}
.foot a{color:inherit;text-decoration:none}
.foot .brand{color:#9AA0AC;font-size:11.5px}

/* Buy bar pinned to the bottom */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(243,244,248,0),#F3F4F8 35%)}
.buybar button{max-width:428px;margin:0 auto;height:52px;border-radius:999px;background:var(--s);color:var(--on-s);display:flex;align-items:center;gap:12px;padding:0 20px;font-size:14.5px;font-weight:800;box-shadow:0 8px 20px -8px var(--s)}
.buybar .what{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.buybar .how{flex:none;font-weight:600;opacity:.9}

/* Bottom sheet (find voucher / pay) */
.sheet-bg{position:fixed;inset:0;background:rgba(10,12,20,.45);z-index:30;display:none}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;background:#fff;border-radius:22px 22px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));max-width:460px;margin:0 auto;transform:translateY(105%);transition:transform .22s ease}
.sheet.open{transform:none}
.sheet-bg.open{display:block}
.sheet .grab{width:42px;height:5px;border-radius:9px;background:#DADCE3;margin:0 auto 14px}
.sheet h2{margin:0 0 4px;font-size:18px;font-weight:800}
.sheet p{margin:0 0 14px;color:#6A6F7C;font-size:13.5px}
.sheet .sum{display:flex;justify-content:space-between;background:#F6F7F9;border-radius:12px;padding:12px 14px;margin-bottom:12px;font-weight:700}
.sheet .tinput{width:100%;height:50px;border:1px solid #DADCE3;border-radius:12px;padding:0 14px;font-size:16px;font-weight:600}
.sheet .tinput:focus{outline:none;border-color:var(--p)}
.sheet .btn-pay{height:50px;margin-top:12px;border-radius:999px;background:var(--s);color:var(--on-s)}
.sheet .btn-close{height:44px;margin-top:8px;border-radius:999px;background:transparent;color:#6A6F7C;font-weight:700}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}.ads a{transition:none}}

/* Welcome page */
.ok-ring{width:64px;height:64px;border-radius:50%;background:var(--p);color:var(--on-p);display:grid;place-items:center;margin:4px auto 12px}
.details{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:4px 0 0}
.details dt{color:#8A8F9C}.details dd{margin:0;font-weight:700}
.tip{background:#fff;border:1px dashed #DADCE3;border-radius:14px;padding:12px 14px;font-size:13px;color:#4A4F5C;margin-top:14px}
.tip b{display:block;color:#14161F}

/* Computers: slightly larger logo and column, read from further away */
@media (min-width:900px){
  .page{max-width:500px;padding-top:32px}
  .logo img{height:calc(var(--logo-h,72px) * 1.25)}
  .logo .name{font-size:calc(var(--logo-h,72px) * .47)}
}

/* Free internet button */
.btn-free{height:50px;margin-top:10px;border-radius:999px;background:#E8F7EE;color:#11643A;border:1px solid #BFE8CF;font-weight:800;font-size:14.5px;gap:8px}

/* Payment providers */
.provs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.prov{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:84px;border:2px solid #E4E6EC;border-radius:14px;background:#fff;cursor:pointer;font-weight:700;font-size:13px;color:#14161F;padding:8px}
.prov img{max-height:34px;max-width:100%;object-fit:contain}
.prov.on{border-color:var(--s);box-shadow:0 0 0 3px color-mix(in srgb,var(--s) 18%,transparent)}
.paybox{display:none;text-align:center;padding:8px 0 4px}
.paybox.show{display:block}
.spinner{width:40px;height:40px;border-radius:50%;border:4px solid #E4E6EC;border-top-color:var(--s);margin:6px auto 12px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.codebig{font-size:30px;font-weight:800;letter-spacing:.14em;margin:6px 0}

/* Advert player */
.player{position:fixed;inset:0;z-index:40;background:rgba(5,6,10,.92);display:none;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:14px}
.player.open{display:flex}
.player .media{width:100%;max-width:460px;border-radius:16px;overflow:hidden;background:#000;line-height:0}
.player video,.player img{width:100%;max-height:70vh;object-fit:contain}
.player .bar{width:100%;max-width:460px;height:6px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
.player .bar span{display:block;height:100%;width:0;background:#22C55E}
.player .count{color:#fff;font-weight:700;font-size:14px}
.player .go{max-width:460px;height:52px;border-radius:999px;background:#22C55E;color:#06210F;display:none}
.player .go.show{display:flex}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}