/* =========================================================================
   Telefon v úvodu produktových stránek (místo izometrických domů)
   Obsah je v HTML každé stránky (.pf), proklikávání řídí js/phone.js
   ========================================================================= */
.phero .scene.pf-stage{aspect-ratio:auto;min-height:480px;position:relative;display:grid;place-items:center}
/* jemná záře za telefonem */
.pf-stage:before{content:"";position:absolute;left:50%;top:50%;width:min(520px,100%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(50,187,0,.22),rgba(34,119,152,.12) 45%,transparent 70%);pointer-events:none}
.pf-stage:after{content:"";position:absolute;left:50%;top:50%;width:min(420px,90%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(11,70,93,.18);pointer-events:none}
html.night .pf-stage:after{border-color:rgba(255,255,255,.12)}

/* telefon: tmavý ve dne i v noci; barvy webu uvnitř přepsané na tmavé */
.pf{--card:#0d2832;--ink:#fff;--text:#cfe0e6;--muted:#8eaab4;--soft:rgba(255,255,255,.06);--line:rgba(255,255,255,.1);
  position:relative;z-index:1;width:290px;padding:16px 16px 18px;border-radius:38px;background:#0d2832;border:7px solid #1c3b47;box-shadow:0 50px 80px -34px rgba(11,70,93,.8),0 0 0 1px rgba(255,255,255,.04) inset;display:flex;flex-direction:column;gap:11px;color:#e4f0f3;animation:hl-float 7s ease-in-out infinite}
.pf:hover,.pf:focus-within{animation-play-state:paused}
.pf-notch{width:78px;height:6px;border-radius:9px;background:#1c3b47;margin:0 auto 2px}
.pf-h{display:flex;flex-direction:column;gap:3px}
.pf-h small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-yellow)}
.pf-h b{font-family:Quicksand,sans-serif;font-size:17px;line-height:1.25;color:#fff}
.pf-st{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#8eaab4}
.pf-badge{padding:2px 8px;border-radius:6px;background:var(--brand-yellow);color:#0f475e;font-weight:700;font-size:11px;white-space:nowrap}
.pf-badge.ok{background:var(--green);color:#fff}
.pf-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pf-steps li{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:13px;font-weight:600;color:#8eaab4;transition:all .35s}
.pf-steps li i{width:20px;height:20px;flex-shrink:0;border-radius:50%;border:2px solid #2f5563;display:grid;place-items:center;font-style:normal;font-size:11px;color:transparent;transition:all .35s}
.pf-steps li em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:#5f7c87;white-space:nowrap;transition:color .35s}
.pf-steps li.ok{color:#e4f0f3}
.pf-steps li.ok i{background:var(--green);border-color:var(--green);color:#fff}
.pf-steps li.ok em{color:#9be26f}
.pf-steps li.cur{border-color:var(--brand-yellow);color:#fff}
.pf-go{height:42px;border-radius:12px;border:0;background:var(--green);color:#fff;font:700 13.5px Montserrat,sans-serif;cursor:pointer;transition:background .2s}
.pf-go:hover{background:var(--green2)}
.pf-done{display:none;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:rgba(50,187,0,.14);font-size:12px;color:#cfe0e6}
.pf-done b{color:#9be26f;font-size:14px}
.pf-done b.stars{color:var(--brand-yellow);font-size:17px;letter-spacing:2px}
.pf.done .pf-done{display:flex;animation:ssb-in .4s ease both}
/* popisek pod telefonem (mimo tmavý rámeček, aby byl čitelný) */
.pf-stage{align-content:center;row-gap:16px}
.pf-note{position:relative;z-index:1;font-size:12.5px;font-weight:600;color:var(--muted);text-align:center}

/* hlasovací lístek uvnitř telefonu (Hlasování SVJ) */
.pf .ballot{position:static;width:auto;margin:0;padding:0;border:0;background:transparent;box-shadow:none;animation:none}

@media (max-width:900px){.phero .scene.pf-stage{min-height:0;padding:20px 0 10px}}
@media (max-width:420px){.pf{width:100%;max-width:300px}}

.pf-go{background:var(--action)}
.pf-go:hover{background:var(--action-hover)}