:root{
  --hd-orange:#ff7a00; --hd-orange-d:#e06600;
  --ink:#0c0c0d; --panel:#17181b; --panel2:#202227;
  --line:#33363d; --text:#f2f2f0; --muted:#a7abb3;
  --ok:#39d353; --err:#ff5c5c;
  --bar-h:56px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--ink); color:var(--text);
  display:flex; flex-direction:column; min-height:100dvh;
}
a{color:var(--hd-orange)}

/* górny pasek */
.bar{
  height:var(--bar-h); flex:0 0 auto;
  display:flex; align-items:center; gap:14px;
  padding:0 14px; padding-top:env(safe-area-inset-top);
  background:linear-gradient(180deg,#1c1d20,#121316);
  border-bottom:2px solid var(--hd-orange);
  box-shadow:0 2px 12px rgba(0,0,0,.5); z-index:1000;
}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.06em}
.brand__mark{font-size:1.4rem; line-height:1}
.brand__name{font-size:1.1rem; text-transform:uppercase}
.brand__hd{color:var(--hd-orange)}
.bar__tag{margin:0; color:var(--muted); font-size:.85rem; flex:1 1 auto}
@media (max-width:640px){ .bar__tag{display:none} }

/* mapa */
main{flex:1 1 auto; position:relative}
#map{position:absolute; inset:0; background:#0c0c0d}
.leaflet-container{background:#0c0c0d}

/* szpilka */
.hd-pin{
  width:30px; height:30px; display:grid; place-items:center; font-size:18px;
  background:var(--hd-orange); color:#1a1200; border:2px solid #1a1a1a; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.hd-pin>span{transform:rotate(45deg)}

/* przyciski */
.btn{
  appearance:none; border:1px solid var(--line); background:var(--panel2); color:var(--text);
  font:inherit; font-weight:600; padding:.6em 1em; border-radius:10px; cursor:pointer;
  min-height:42px; transition:background .15s,border-color .15s,transform .05s;
}
.btn:hover{background:#2a2d33}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--hd-orange); outline-offset:2px}
.btn--primary{background:var(--hd-orange); border-color:var(--hd-orange-d); color:#1a1200}
.btn--primary:hover{background:var(--hd-orange-d)}
.btn--primary:disabled{background:#5a4a36; border-color:#5a4a36; color:#9b9085; cursor:not-allowed}
.btn--sm{min-height:36px; padding:.4em .8em}

/* dialogi */
.dlg{
  width:min(440px,94vw); border:1px solid var(--line); border-radius:16px; padding:20px;
  background:var(--panel); color:var(--text); box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.dlg::backdrop{background:rgba(0,0,0,.6); backdrop-filter:blur(2px)}
.dlg__title{margin:0 0 .5em; font-size:1.25rem}
.dlg__hint{color:var(--muted); font-size:.9rem; margin:.4em 0}
.dlg__actions{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}

.field{display:block; margin:14px 0}
.field__lbl{display:block; font-weight:600; margin-bottom:6px}
.field__opt,.field__note{color:var(--muted); font-weight:400}
.field__note{display:block; font-size:.82rem; margin-top:5px}
.req{color:var(--hd-orange)}
.field input[type=text],.field input[type=tel]{
  width:100%; padding:.7em .8em; font:inherit; color:var(--text);
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
}
.field input:focus-visible{outline:3px solid var(--hd-orange); outline-offset:1px; border-color:var(--hd-orange)}
.field--check{display:flex; align-items:flex-start; gap:10px; font-size:.92rem; line-height:1.4}
.field--check input{margin-top:3px; width:20px; height:20px; accent-color:var(--hd-orange); flex:0 0 auto}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.posstate{font-size:.9rem; padding:.5em .7em; border-radius:8px; margin:10px 0 0}
.posstate--off{background:#3a2a14; color:#ffcf99}
.posstate--on{background:#143a1c; color:#9be8b0}
.formerr{background:#3a1414; color:#ffb3b3; padding:.5em .7em; border-radius:8px; margin:10px 0 0; font-size:.9rem}

.codebox{display:flex; gap:8px; align-items:center; margin:12px 0}
.codebox code{
  flex:1 1 auto; background:#0c0c0d; border:1px dashed var(--hd-orange); border-radius:8px;
  padding:.7em .8em; font-size:.95rem; word-break:break-all; user-select:all;
}

/* popup szpilki */
.leaflet-popup-content-wrapper{background:var(--panel); color:var(--text); border:1px solid var(--line)}
.leaflet-popup-tip{background:var(--panel)}
.pop__name{font-weight:700; font-size:1.05rem; margin:0 0 4px}
.pop__phone{margin:0 0 8px}
.pop__phone a{font-weight:600}
.pop__muted{color:var(--muted)}
.pop__row{display:flex; gap:8px; margin-top:8px}

.foot{flex:0 0 auto; background:#0c0c0d; border-top:1px solid var(--line); color:var(--muted);
  font-size:.78rem; padding:8px 14px; padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.foot p{margin:0}
.rodo{position:absolute}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }