/* ZeroShell – plans + coverage map (loaded on index.php and Broadband-Plans.php) */

/* ---------- controls ---------- */
.pctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px;margin:0 0 34px}
.pctl .seg{position:relative;margin:0;display:inline-grid;grid-template-columns:repeat(3,auto);padding:5px}
.pctl .seg button{position:relative;z-index:1;background:none!important;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pctl .seg button[aria-pressed=true]{color:#fff}
.pctl .seg button em{font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(25,188,229,.18);color:#0a6f8f;border-radius:8px;padding:3px 7px;transition:background .3s,color .3s}
.pctl .seg button[aria-pressed=true] em{background:rgba(255,255,255,.22);color:#fff}
.seg-pill{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:0;border-radius:8px;background:var(--grad-btn);box-shadow:0 6px 18px rgba(18,101,235,.35);transition:transform .45s var(--ease),width .45s var(--ease)}
.gsw{display:inline-flex;align-items:center;gap:10px;font:600 .9rem var(--font);color:var(--ink);cursor:pointer;user-select:none}
.gsw input{position:absolute;opacity:0;pointer-events:none}
.gsw .sw{width:44px;height:26px;border-radius:8px;background:#cfdcf1;position:relative;transition:background .3s}
.gsw .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:6px;background:#fff;box-shadow:0 2px 6px rgba(7,27,58,.25);transition:transform .35s var(--ease)}
.gsw input:checked+.sw{background:var(--mag)}.gsw input:checked+.sw::after{transform:translateX(18px)}
.gsw input:focus-visible+.sw{outline:3px solid rgba(18,101,235,.35);outline-offset:2px}

/* ---------- plan cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:20px}
.pcard{--mx:50%;--my:0%;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:8px;padding:30px 22px 24px;text-align:center;
  opacity:0;transform:translateY(34px) scale(.97);transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .3s,border-color .3s;transition-delay:calc(var(--i)*.09s)}
.pcard.in{opacity:1;transform:none}
.pcard.in:hover{transform:translateY(-8px);box-shadow:var(--sh2);border-color:#a9c8fa;transition-delay:0s}
.pcard::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) calc(var(--i)*.09s + .3s)}
.pcard.in::before{transform:none}
.pcard .glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(40,123,255,.16),transparent 70%)}
.pcard:hover .glow{opacity:1}
.ribbon{position:absolute;top:16px;right:-44px;transform:rotate(38deg);width:170px;padding:5px 0;background:var(--grad);color:#fff;font:700 .62rem/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 12px rgba(18,101,235,.35);opacity:0;transition:opacity .4s;overflow:hidden}
.ribbon::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 2.6s infinite}
[data-term=y] .bestsave .ribbon{opacity:1}
@keyframes shimmer{to{transform:translateX(100%)}}
.ring{position:relative;width:128px;height:128px;margin:0 auto 14px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring .bg{stroke:#e6eefb}
.ring .fg{stroke:#1265EB;stroke-dasharray:276.46;stroke-dashoffset:276.46;transition:stroke-dashoffset 1.4s var(--ease) calc(var(--i)*.09s + .35s)}
.pcard.in .ring .fg{stroke-dashoffset:var(--off)}
.ring .sp{position:absolute;inset:0;display:grid;place-content:center;line-height:1}
.ring .sp b{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.ring .sp small{font-size:.74rem;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.pcard:hover .ring{animation:ringpop .7s var(--ease)}
@keyframes ringpop{40%{transform:scale(1.06)}}
.pr{display:flex;justify-content:center;align-items:baseline;gap:2px;color:var(--ink);font-variant-numeric:tabular-nums}
.pr .cur{font-size:1.3rem;font-weight:700}.pr b{font-size:2.5rem;font-weight:800;letter-spacing:-.03em}
.pr.tick b{animation:pricepop .5s var(--ease)}
@keyframes pricepop{30%{transform:translateY(-4px);color:var(--mag)}}
.per{font-size:.82rem;color:var(--muted);margin-top:2px}
.eff{min-height:1.5em;font-size:.84rem;font-weight:600;color:var(--mag-ink);margin-top:8px}
.sav{display:inline-block;margin:8px auto 0;font-size:.76rem;font-weight:700;color:#0a6a43;background:#e3f6ec;border-radius:8px;padding:5px 10px}
.sav[hidden]{display:none}
.pcard ul{list-style:none;margin:18px 0 20px;padding:16px 0 0;border-top:1px dashed var(--line);display:grid;gap:9px;text-align:left;font-size:.88rem}
.pcard li{display:flex;gap:9px;align-items:flex-start}
.pcard li .ico{width:16px;height:16px;flex:none;margin-top:3px;color:var(--ok)}
.pcard .btn{width:100%;justify-content:center;padding:13px 16px}
.pcard.rec{border-color:var(--mag);box-shadow:0 0 0 3px rgba(18,101,235,.18),var(--sh2);animation:recpulse 1.6s var(--ease) 2}
@keyframes recpulse{50%{box-shadow:0 0 0 9px rgba(18,101,235,.12),var(--sh2)}}
.pnote{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin:30px auto 0;max-width:900px;font-size:.84rem;color:var(--muted)}
.pcta{text-align:center;margin-top:30px}

/* ---------- plans page hero ---------- */
.phero.plans-hero{background:radial-gradient(900px 420px at 85% -10%,rgba(40,123,255,.55),transparent 60%),radial-gradient(700px 380px at 0% 110%,rgba(25,188,229,.28),transparent 60%),linear-gradient(160deg,#071B3A,#0A2A5E 70%);padding-bottom:clamp(60px,8vw,104px)}
.plans-hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.plans-hero .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.plans-hero .badges span{display:inline-flex;gap:8px;align-items:center;font-size:.86rem;font-weight:600;color:#e8f1ff;padding:9px 14px;border-radius:8px;border:1px solid rgba(143,220,243,.28);background:rgba(255,255,255,.06);backdrop-filter:blur(4px)}
.plans-hero .badges .ico{width:16px;height:16px;color:#8fdcf3}
.speedviz{position:relative;height:300px}
.speedviz .orb{position:absolute;left:50%;top:50%;border-radius:50%;border:2px solid rgba(143,220,243,.35);transform:translate(-50%,-50%);animation:orb 5s ease-in-out infinite}
.speedviz .o1{width:120px;height:120px;background:radial-gradient(circle,rgba(25,188,229,.55),rgba(18,101,235,.25));border-color:#19BCE5}
.speedviz .o2{width:200px;height:200px;animation-delay:-1s}.speedviz .o3{width:280px;height:280px;animation-delay:-2s}.speedviz .o4{width:360px;height:360px;animation-delay:-3s;opacity:.6}
@keyframes orb{50%{transform:translate(-50%,-50%) scale(1.06);border-color:rgba(143,220,243,.7)}}
.speedviz .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;line-height:1}
.speedviz .core b{display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.04em}.speedviz .core small{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#8fdcf3;font-weight:700}
.speedviz .sp-chip{position:absolute;padding:7px 12px;border-radius:8px;font:700 .8rem var(--font);color:#fff;background:rgba(7,27,58,.7);border:1px solid rgba(143,220,243,.35);backdrop-filter:blur(4px);animation:bob 6s ease-in-out infinite}
.sp-chip.c1{left:2%;top:14%}.sp-chip.c2{right:0;top:6%;animation-delay:-1.2s}.sp-chip.c3{left:-2%;bottom:20%;animation-delay:-2.4s}.sp-chip.c4{right:2%;bottom:14%;animation-delay:-3.6s}.sp-chip.c5{left:38%;bottom:-2%;animation-delay:-4.8s}

/* ---------- speed helper ---------- */
.helper{background:linear-gradient(160deg,#071B3A,#0B3F8F);color:#c5d4ec;border-radius:8px;padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.helper h2{color:#fff;margin-bottom:.3em}.helper p{margin:0;color:#c5d4ec}
.helper fieldset{border:0;margin:0 0 16px;padding:0}.helper legend{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8fdcf3;margin-bottom:10px;padding:0}
.helper .opts{display:flex;flex-wrap:wrap;gap:8px}
.helper .opts label{cursor:pointer}.helper .opts input{position:absolute;opacity:0}
.helper .opts span{display:inline-block;padding:9px 14px;border-radius:8px;border:1px solid rgba(143,220,243,.35);font:600 .88rem var(--font);color:#e8f1ff;transition:background .25s,border-color .25s,transform .25s}
.helper .opts label:hover span{transform:translateY(-2px)}
.helper .opts input:checked+span{background:#fff;color:var(--ink);border-color:#fff}
.helper .opts input:focus-visible+span{outline:3px solid #8fdcf3}
.helper .out{margin-top:6px;font-size:1.05rem;color:#fff;min-height:3em}.helper .out b{color:#8fdcf3;font-size:1.5rem}

/* ---------- comparison ---------- */
.ptable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-variant-numeric:tabular-nums}
.ptable th,.ptable td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line)}
.ptable thead th{background:var(--ink);color:#fff;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border:0}
.ptable tbody tr{transition:background .25s}.ptable tbody tr:hover{background:#f1f6ff}.ptable tr:last-child td,.ptable tr:last-child th{border-bottom:0}
.ptable tbody th{font-weight:750;color:var(--ink);white-space:nowrap}
.ptable small{display:block;color:var(--muted);font-size:.76rem;font-weight:500}
.sbar{display:block;height:6px;border-radius:8px;background:#e6eefb;margin-top:8px;overflow:hidden;min-width:110px}
.sbar i{display:block;height:100%;width:0;border-radius:8px;background:var(--grad);transition:width 1.2s var(--ease)}
.in .sbar i,.sbar.in i{width:var(--w)}
.cmpwrap{overflow-x:auto;border-radius:8px}
.ptable .good{color:#0a6a43;font-weight:700}

/* ---------- included / steps ---------- */
.inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;counter-reset:s;position:relative}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 22px;counter-increment:s}
.step::before{content:counter(s);display:grid;place-content:center;width:42px;height:42px;border-radius:8px;background:var(--grad-btn);color:#fff;font-weight:800;margin-bottom:14px;box-shadow:0 8px 20px rgba(18,101,235,.3)}
.step h3{font-size:1.1rem}.step p{margin:0;color:var(--muted);font-size:.94rem}

/* ---------- coverage map ---------- */
.covgrid{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:22px;align-items:stretch}
.covlist{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh);min-height:0;max-height:620px}
.covtools{padding:16px;border-bottom:1px solid var(--line);display:grid;gap:12px}
.covtools input{width:100%;font:500 .95rem var(--font);padding:12px 14px 12px 40px;border:1.5px solid var(--line);border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6f86' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px 50%/18px no-repeat;color:var(--ink);transition:border-color .25s,box-shadow .25s}
.covtools input:focus{outline:0;border-color:var(--mag);box-shadow:0 0 0 4px rgba(18,101,235,.14)}
.covchips{display:flex;flex-wrap:wrap;gap:8px}
.covchips button{font:600 .8rem var(--font);padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:all .25s}
.covchips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.covchips button span{opacity:.7;margin-left:4px}
.covul{list-style:none;margin:0;padding:8px;overflow:auto;flex:1;scrollbar-width:thin}
.covul li{margin:0}
.covul button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;font:600 .94rem var(--font);color:var(--ink);background:none;border:0;border-radius:8px;padding:11px 12px;cursor:pointer;transition:background .2s,transform .2s}
.covul button:hover{background:#eef4ff;transform:translateX(3px)}
.covul button.on{background:var(--ink);color:#fff}
.covul .dot{width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(25,188,229,.2);flex:none}
.covul .nopin .dot{background:#b9c6dc;box-shadow:none}
.covul small{margin-left:auto;font-weight:500;font-size:.74rem;color:var(--muted)}.covul button.on small{color:#9fb4d6}
.covempty{padding:22px;text-align:center;color:var(--muted);font-size:.9rem}
.covmap{position:relative;border-radius:8px;overflow:hidden;min-height:460px;background:radial-gradient(circle at 30% 20%,#0B3F8F,#071B3A);box-shadow:var(--sh2)}
#zsmap{position:absolute;inset:0;background:transparent;font-family:var(--font)}
.covbadge{position:absolute;z-index:500;left:16px;top:16px;display:flex;gap:10px;pointer-events:none}
.covbadge div{background:rgba(7,27,58,.82);backdrop-filter:blur(6px);border:1px solid rgba(143,220,243,.3);color:#fff;border-radius:8px;padding:10px 14px;line-height:1.1}
.covbadge b{display:block;font-size:1.5rem;font-weight:800}.covbadge span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#8fdcf3;font-weight:700}
.covreset{position:absolute;z-index:500;right:16px;top:16px;font:600 .82rem var(--font);color:#fff;background:rgba(7,27,58,.82);border:1px solid rgba(143,220,243,.35);border-radius:8px;padding:10px 14px;cursor:pointer;backdrop-filter:blur(6px);transition:background .25s}
.covreset:hover{background:var(--mag)}
.covfall{position:absolute;inset:0;display:none;place-content:center;text-align:center;color:#c5d4ec;padding:30px}
.nomap .covfall{display:grid}
.leaflet-container{background:transparent}
.zs-pin{position:relative;width:20px;height:20px}
.zs-pin i{position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#19BCE5 45%,#1265EB);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 10px rgba(0,0,0,.4)}
.zs-pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #19BCE5;animation:pinpulse 2.4s ease-out infinite;animation-delay:var(--pd,0s)}
.zs-pin.on i{background:radial-gradient(circle at 35% 30%,#fff,#ffd36b 50%,#ff9b2f);transform:scale(1.35)}
.zs-pin.on::after{border-color:#ffb347}
@keyframes pinpulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.leaflet-tooltip.zs-tip{background:#071B3A;color:#fff;border:0;border-radius:8px;font:600 .8rem var(--font);padding:6px 10px;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.leaflet-tooltip.zs-tip::before{border-top-color:#071B3A}
.leaflet-popup-content-wrapper{border-radius:8px;box-shadow:0 14px 36px rgba(7,27,58,.35)}
.leaflet-popup-content{margin:14px 16px;font-family:var(--font)}
.zs-pop b{display:block;font-size:1.05rem;color:var(--ink)}.zs-pop span{display:block;color:var(--muted);font-size:.82rem;margin-bottom:10px}
.zs-pop a{display:inline-flex;gap:6px;align-items:center;font-weight:700;font-size:.85rem;color:#fff!important;background:var(--grad-btn);padding:8px 12px;border-radius:8px}
.leaflet-control-zoom a{border-radius:8px!important;color:var(--ink)}
.leaflet-control-attribution{font-size:.65rem;background:rgba(7,27,58,.7)!important;color:#9fb4d6!important}.leaflet-control-attribution a{color:#8fdcf3!important}

@media(max-width:900px){
 .plans-hero .wrap{grid-template-columns:1fr}.speedviz{display:none}
 .helper{grid-template-columns:1fr}
 .covgrid{grid-template-columns:1fr}.covlist{max-height:380px}.covmap{min-height:380px;order:-1}
}
@media(max-width:560px){.pctl .seg{grid-template-columns:1fr}.seg-pill{display:none}.pctl .seg button[aria-pressed=true]{background:var(--mag)!important}}
@media(prefers-reduced-motion:reduce){.pcard,.pcard::before,.ring .fg{opacity:1;transform:none;stroke-dashoffset:var(--off)}.pcard::before{transform:none}.sbar i{width:var(--w)}}

/* OpenStreetMap tiles recoloured to match the navy theme (no API key needed) */
.zs-tiles{filter:invert(1) hue-rotate(198deg) saturate(.55) brightness(.9) contrast(.92)}