@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;800&family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css');

/* Onepark parkeringsbarometer — embeddable stylesheet.
   Everything is scoped under #opb so a host page's own header, footer and
   theme styles are untouched. Tokens match the Onepark design profile. */
#opb{
  --brand-navy:#020858;--brand-orange:#FF6338;--brand-light-blue:#92B2F1;
  --bg-beige:#F7F5F0;--white:#fff;--muted:#6b7194;--faint:#b8bcd4;--border:#dddaea;
  --success:#1a9b5a;--shadow:0 8px 32px rgba(2,8,88,.06);--shadow-lg:0 24px 64px rgba(2,8,88,.12);
  --rad-pill:999px;--theme-rgb:255,99,56;--gain:var(--success);--loss:var(--brand-orange);
  --ff:'Bricolage Grotesque',sans-serif;--fb:'DM Sans',sans-serif;
  font-family:var(--fb);color:var(--brand-navy);background:var(--bg-beige);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
#opb *,#opb *::before,#opb *::after{box-sizing:border-box}
#opb [hidden]{display:none !important}
#opb h1,#opb h2,#opb h3{font-family:var(--ff);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0}
#opb p{margin:0}
#opb .opb-wrap{max-width:1440px;margin:0 auto}
#opb .opb-section{padding:72px 24px}
#opb .opb-navy{background:var(--brand-navy);color:#fff}
#opb .opb-tag{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:var(--rad-pill);background:rgba(255,99,56,.1);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-orange)}
#opb .opb-cap{font-size:clamp(32px,4.5vw,52px)}
#opb .opb-navy .opb-cap{color:#fff}
#opb .opb-sub{font-size:16px;color:var(--muted);margin-top:14px;max-width:620px;line-height:1.6}
#opb .opb-navy .opb-sub{color:rgba(255,255,255,.45)}

#opb .opb-rounds{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);align-items:stretch}
@media(min-width:1024px){#opb .opb-rounds{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}
#opb .opb-fighter{background:var(--white);border:1.5px solid rgba(2,8,88,.08);border-radius:20px;padding:32px;box-shadow:0 2px 16px rgba(2,8,88,.06);transition:all .4s cubic-bezier(.16,1,.3,1)}
#opb .opb-fighter:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
#opb .opb-fighter.lead{border-color:rgba(26,155,90,.35)}
#opb .opb-fighter.behind{border-color:rgba(var(--theme-rgb),.28)}
#opb .opb-fhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#opb .opb-role{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#opb .opb-fname{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;margin-top:6px}
#opb .opb-fmeta{font-size:12px;color:var(--faint);margin-top:8px}
#opb .opb-badge{flex-shrink:0;font-family:var(--ff);font-weight:800;font-size:16px;padding:8px 18px;border-radius:var(--rad-pill);color:#fff}
#opb .opb-badge.gain{background:var(--gain)}
#opb .opb-badge.loss{background:var(--loss)}
#opb .opb-shead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:24px 0 8px}
#opb .opb-slabel{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#opb .opb-shint{font-size:11px;font-weight:500;color:var(--faint)}
#opb .opb-strack{height:10px;border-radius:var(--rad-pill);background:var(--bg-beige);overflow:hidden}
#opb .opb-sfill{height:100%;border-radius:var(--rad-pill);transition:width .6s cubic-bezier(.16,1,.3,1)}
#opb .opb-sfill.gain{background:linear-gradient(90deg,var(--success),#3fc57e)}
#opb .opb-sfill.loss{background:linear-gradient(90deg,var(--brand-orange),#FF8F6B)}
#opb .opb-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
#opb .opb-tile{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:var(--bg-beige)}
#opb .opb-tlabel{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.4}
#opb .opb-tvalue{font-family:var(--ff);font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1.15;margin-top:2px}
#opb .t-gain{color:var(--gain)}#opb .t-loss{color:var(--loss)}#opb .t-navy{color:var(--brand-navy)}
#opb .opb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
#opb .opb-chip{display:inline-flex;align-items:center;padding:8px 16px;border-radius:var(--rad-pill);background:var(--bg-beige);border:1px solid var(--border);font-size:13px;font-weight:600}

#opb .opb-versus{background:var(--brand-navy);border-radius:20px;padding:32px 28px;min-width:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff}
#opb .opb-vround{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
#opb .opb-vs{font-family:var(--ff);font-weight:800;font-size:62px;letter-spacing:-.04em;line-height:1;margin:10px 0 14px}
#opb .opb-vwin{display:inline-flex;padding:9px 18px;border-radius:var(--rad-pill);background:var(--brand-orange);color:#fff;font-family:var(--ff);font-weight:800;font-size:15px;letter-spacing:-.01em}
#opb .opb-vscore{font-size:12px;color:rgba(255,255,255,.45);margin-top:12px}
#opb .opb-dots{display:flex;gap:6px;margin-top:16px}
#opb .opb-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);border:none;padding:0;cursor:pointer;transition:all .3s}
#opb .opb-dot.on{background:var(--brand-orange);width:22px;border-radius:var(--rad-pill)}

#opb .opb-replay{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);margin-top:36px}
@media(min-width:1024px){#opb .opb-replay{grid-template-columns:minmax(0,2fr) minmax(340px,1fr)}}
#opb .opb-map{position:relative;min-height:480px;border-radius:24px;overflow:hidden;background:var(--white);box-shadow:var(--shadow-lg)}
#opb .opb-map-canvas{position:absolute;inset:0}
#opb .opb-banner{position:absolute;top:18px;left:18px;z-index:2;max-width:min(460px,calc(100% - 36px));padding:18px 22px;border-radius:16px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border:1.5px solid rgba(var(--theme-rgb),.18);box-shadow:var(--shadow);text-align:left;animation:opbUp .5s cubic-bezier(.16,1,.3,1)}
#opb .opb-bkicker{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-orange)}
#opb .opb-btitle{font-size:22px;letter-spacing:-.01em;margin-top:4px;color:var(--brand-navy)}
#opb .opb-bmeta{font-size:13px;color:var(--muted);margin-top:4px}
#opb .opb-bar{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border:1px solid var(--border);box-shadow:var(--shadow)}
#opb .opb-barhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
#opb .opb-barlabel{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#opb .opb-barcount{font-size:12px;font-weight:700;color:var(--brand-navy)}
#opb .opb-bartrack{height:6px;border-radius:var(--rad-pill);background:var(--bg-beige);overflow:hidden}
#opb .opb-barfill{height:100%;border-radius:var(--rad-pill);background:linear-gradient(90deg,var(--brand-orange),#FF8F6B);transition:width .6s cubic-bezier(.16,1,.3,1)}
#opb .maplibregl-ctrl-bottom-right,#opb .maplibregl-ctrl-bottom-left{bottom:78px}
#opb .maplibregl-ctrl-attrib{font-family:var(--fb);font-size:10px}

#opb .opb-feed{display:flex;flex-direction:column;gap:16px;min-height:0}
#opb .opb-spot{background:var(--white);border:1.5px solid rgba(var(--theme-rgb),.15);border-radius:20px;padding:28px;box-shadow:0 2px 12px rgba(var(--theme-rgb),.06);animation:opbUp .5s cubic-bezier(.16,1,.3,1);text-align:left}
#opb .opb-spot.gainbox{border-color:rgba(26,155,90,.25)}
#opb .opb-skicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#opb .opb-sname{font-size:22px;letter-spacing:-.01em;margin-top:6px;color:var(--brand-navy)}
#opb .opb-smeta{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
#opb .opb-sdelta{font-family:var(--ff);font-weight:800;font-size:38px;letter-spacing:-.03em;margin-top:14px}
#opb .opb-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:300px;padding-right:4px;position:relative}
#opb .opb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:all .3s;text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}
#opb .opb-row.pending{opacity:.45}
#opb .opb-row.on{border-color:var(--brand-orange);box-shadow:0 6px 20px rgba(var(--theme-rgb),.12)}
#opb .opb-rname{font-family:var(--ff);font-weight:800;font-size:14px;letter-spacing:-.01em;color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#opb .opb-rmeta{font-size:12px;color:rgba(255,255,255,.5);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#opb .opb-rtag{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.06em;padding:5px 12px;border-radius:var(--rad-pill);color:#fff}

#opb .opb-table{display:flex;flex-direction:column;gap:12px;margin-top:36px}
#opb .opb-brow{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:20px 24px;background:var(--white);border:1.5px solid rgba(2,8,88,.08);border-radius:20px;box-shadow:0 2px 12px rgba(2,8,88,.04);transition:all .4s cubic-bezier(.16,1,.3,1)}
#opb .opb-brow:hover{transform:translateY(-2px);border-color:var(--brand-orange);box-shadow:0 8px 24px rgba(var(--theme-rgb),.1)}
#opb .opb-brow.us{border-color:var(--brand-orange);background:linear-gradient(135deg,rgba(var(--theme-rgb),.06),var(--white))}
#opb .opb-rank{font-family:var(--ff);font-weight:800;font-size:18px;color:var(--faint);width:36px}
#opb .opb-bname{font-family:var(--ff);font-weight:800;font-size:22px;letter-spacing:-.02em;min-width:190px}
#opb .opb-metrics{display:flex;flex-wrap:wrap;gap:28px;margin-left:auto}
#opb .opb-mlabel{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#opb .opb-mvalue{font-family:var(--ff);font-weight:800;font-size:20px;letter-spacing:-.02em;margin-top:2px}

#opb .opb-marker{width:16px;height:16px;border-radius:50%;border:3px solid #fff;transform:translate(-50%,-50%);position:relative;box-shadow:0 4px 12px rgba(2,8,88,.25)}
#opb .opb-marker.g{background:var(--success)}
#opb .opb-marker.l{background:var(--brand-orange)}
#opb .opb-marker.now{width:24px;height:24px;animation:opbPulse 1.6s ease-in-out infinite}
#opb .opb-marker.opponent::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
#opb .opb-float{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 14px;border-radius:var(--rad-pill);background:var(--brand-navy);color:#fff;font-family:var(--ff);font-weight:800;font-size:14px;box-shadow:0 8px 24px rgba(2,8,88,.28);animation:opbFloat 1.8s ease-out both}
@keyframes opbPulse{0%,100%{transform:translate(-50%,-50%) scale(.86)}60%{transform:translate(-50%,-50%) scale(1.14)}}
@keyframes opbFloat{0%{opacity:0;transform:translate(-50%,14px)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-28px)}}
@keyframes opbUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes opbSpin{to{transform:rotate(360deg)}}
#opb .opb-state{min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px}
#opb .opb-spinner{width:42px;height:42px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--brand-orange);animation:opbSpin .9s linear infinite}
#opb .opb-source{background:var(--brand-navy);color:rgba(255,255,255,.55);padding:32px 24px;font-size:13px}
#opb .opb-source a{color:var(--brand-light-blue)}
@media(max-width:700px){
  #opb .opb-section{padding:48px 16px}
  #opb .opb-fighter{padding:24px}
  #opb .opb-tiles{gap:8px}
  #opb .opb-tile{padding:12px}
  #opb .opb-tvalue{font-size:24px}
}