/* Okno „Zapytaj o bilety VIP” na stronie kibica (assets/vip-dialog.js). Podstawę okna (<dialog>: wysokość z --vvh,
   przewijanie, animacja wejścia tylko w CSS) daje styl strony; tu — układ formularza i barwy klubu w nagłówku. */
#vipDialog:focus{outline:none}
#vipDialog .dlg-head{padding:14px 16px 18px}
#vipDialog .dlg-head h3{font-size:22px}
#vipDialog .vip-tricolor{position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,#fff 0 33.34%,var(--navy) 33.34% 66.67%,var(--red) 66.67%)}
#vipDialog .dlg-body{padding:14px 16px 16px}
#vipDialog .how{margin:0 0 10px;padding:10px 12px;font-size:13px;line-height:1.45}
#vipDialog .how a{font-weight:700;overflow-wrap:anywhere}
#vipDialog .field{margin-top:12px;gap:5px}
#vipDialog .field:first-of-type{margin-top:0}
#vipDialog .opt{margin-top:12px;font-size:13px;gap:8px}
#vipDialog .opt small{font-size:11.5px;line-height:1.4}
#vipDialog select{appearance:auto}
#vipDialog input[type=number],#vipDialog textarea{width:100%;padding:12px 13px;border:1px solid var(--line-2);border-radius:8px;
  font:500 15px/1.3 var(--body);color:var(--ink);background:var(--paper)}
#vipDialog textarea{min-height:76px;resize:vertical}
#vipDialog input[type=number]:focus,#vipDialog textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(158,15,42,.14)}
#vipDialog .invalid input,#vipDialog .invalid select,#vipDialog .invalid textarea{border-color:var(--red)}
/* liczba biletów: przyciski widoczne także na telefonie (lista oczekujących ma tam suwak) */
#vipDialog .qty-chips{display:flex}
#vipDialog .qty-chips label{min-width:42px;height:40px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background-color .15s ease,border-color .15s ease}
#vipDialog .qty-chips label:active{transform:scale(.96);transition-duration:90ms}
#vipDialog .qty-chips .more{padding:0 12px}
#vipDialog .qty-more{display:flex;align-items:center;gap:10px;margin-top:8px}
#vipDialog .qty-more input{max-width:120px}
#vipDialog .qty-more span{font-size:13px;color:var(--muted)}
#vipDialog .send-err{margin:12px 0 0;font-size:13px;font-weight:600;color:var(--red)}
#vipDialog .submit[aria-busy=true]{opacity:.7;cursor:progress}
#vipDialog .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#vipDialog .done p + p{margin-top:10px}
@media (prefers-reduced-motion:reduce){#vipDialog .qty-chips label{transition:none}#vipDialog .qty-chips label:active{transform:none}}

/* „Zapytaj o bilety VIP” przy legendzie mapy w „Cenniku” */
.vip-ask{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:7px 12px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--paper);color:var(--accent);font:700 13px/1 var(--body);cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .15s ease}
.vip-ask::after{content:"→"}
.vip-ask:active{transform:scale(.96);transition-duration:90ms}
@media (hover:hover) and (pointer:fine){.vip-ask:hover{border-color:var(--accent)}}
@media (prefers-reduced-motion:reduce){.vip-ask{transition:none}.vip-ask:active{transform:none}}