/* ParkWien v4.2 — a transparent, photo-style sign crossing the map/status
   boundary. The selected GIS category supplies both the sign and its German
   supplementary text; no rectangular widget or opaque sign background. */
#parkingSignOverlay{
 position:absolute;
 z-index:1520;
 top:68px;left:8px;
 width:112px;
 display:flex;flex-direction:column;align-items:center;gap:0;
 background:transparent!important;
 pointer-events:none!important;
 isolation:isolate;
 filter:drop-shadow(1px 3px 3px rgba(9,26,35,.28));
}
#parkingSignOverlay[hidden]{display:none!important}
#parkingSignOverlay .pw-map-sign-post{
 position:absolute;top:3px;bottom:-13px;left:50%;
 width:10px;transform:translateX(-50%);
 z-index:-1;border:1px solid #6c7a80;border-radius:5px 5px 0 0;
 background:linear-gradient(90deg,#56666e,#e2e6e4 40%,#adb9b9 67%,#596b74);
 box-shadow:1px 2px 3px rgba(2,19,28,.2);
}
#parkingSignOverlay .pw-map-sign-head{
 z-index:2;display:flex;justify-content:center;align-items:center;
 flex:0 0 auto;width:108px;min-height:88px;
 background:transparent!important;
}
#parkingSignOverlay .pw-map-sign-face{
 width:88px;height:88px;flex:0 0 88px;
 border-radius:50%;
 border:1.5px solid #cbd1cf;
 box-shadow:0 0 0 1px #f5f6f4,0 2px 4px rgba(12,27,32,.32);
 background-image:url("./signs/anwohner_02.webp");
 background-size:129% auto;background-repeat:no-repeat;
 background-position:center -2px;
 background-color:transparent;
}
#parkingSignOverlay.zone-loading .pw-map-sign-face{
 background-image:url("./signs/ladezone_basic.webp");
 background-size:129% auto;background-position:center -11px;
}
#parkingSignOverlay .pw-map-sign-plate{
 z-index:3;position:relative;
 width:108px;max-width:100%;min-height:37px;
 display:flex;flex-direction:column;justify-content:center;align-items:center;
 padding:8px 5px 8px;margin-top:-1px;
 border:2px solid #e9eded;border-radius:5px;
 background:linear-gradient(130deg,#fff,#f2f3f0);
 box-shadow:inset 0 0 0 2px #273037,0 2px 3px rgba(15,25,32,.25);
 color:#161c20;font:800 8.8px/1.2 Arial,"Helvetica Neue",sans-serif;
 text-align:center;overflow-wrap:anywhere;
}
#parkingSignOverlay .pw-map-sign-plate span{display:block;max-width:100%;margin:0}
#parkingSignOverlay .pw-map-sign-plate span+span{margin-top:2px}
#parkingSignOverlay .pw-map-sign-plate:before,
#parkingSignOverlay .pw-map-sign-plate:after{
 content:"";position:absolute;left:50%;transform:translateX(-50%);
 width:3px;height:3px;background:#96a1a3;border:1px solid #586a70;
 border-radius:50%;
}
#parkingSignOverlay .pw-map-sign-plate:before{top:2px}
#parkingSignOverlay .pw-map-sign-plate:after{bottom:2px}
#parkingSignOverlay .pw-map-kurz-sign{
 position:relative;z-index:2;
 display:flex;align-items:center;flex-direction:column;justify-content:space-between;
 width:93px;height:110px;padding:9px 3px 10px;
 border:2px solid #a5aeb1;border-radius:4px;
 background:linear-gradient(120deg,#fff,#eff0ee);
 box-shadow:inset 0 0 0 1px #fdfdfb,0 2px 4px rgba(10,28,38,.25);
}
#parkingSignOverlay .pw-map-kurz-disc{
 width:67px;height:67px;display:block;position:relative;overflow:hidden;
 border-radius:50%;border:7px solid #dc1824;
 background:linear-gradient(140deg,#1e4d9b,#143b7e);
 box-shadow:inset 0 1px 2px #071b4080,0 0 0 1px #a21720;
}
#parkingSignOverlay .pw-map-kurz-disc i{
 position:absolute;left:50%;top:50%;
 width:95px;height:8px;background:#e21b2b;
 transform:translate(-50%,-50%) rotate(45deg);
}
#parkingSignOverlay .pw-map-kurz-sign strong{
 font:800 11.4px/1 Arial,sans-serif;letter-spacing:-.25px;color:#172127;
}
#parkingSignOverlay .pw-map-sign-generic{
 display:flex;justify-content:center;align-items:center;
 width:88px;height:88px;background:transparent;
}
#parkingSignOverlay .pw-map-sign-generic svg{
 display:block;width:87px!important;height:87px!important;max-width:none!important;
 filter:drop-shadow(0 2px 2px rgba(14,25,36,.24));
}
/* The sign overlaps the colored bar; push the important restriction text right.
   Show only the sign silhouette: map/card remain visible behind its outline. */
.app.has-parking-status #parkingStatusBanner.is-unified-sign{
 padding-left:116px!important;
 min-height:83px!important;
 overflow:visible!important;
}
.app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-status-icon{
 display:none!important;
}
.app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-status-summary{
 gap:0!important;min-width:0!important;
}
.app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-status-content{
 min-width:0!important;overflow:visible!important;
}
.app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-status-title{
 font-size:17px!important;line-height:1.18!important;
}
.app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-zone-line{
 row-gap:2px!important;
}
.app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-zone-meaning{
 font-size:11px!important;
}
.app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-zone-de{
 font-size:10px!important;
}
/* Leaflet zoom controls now live directly above the GPS crosshair, at right. */
.app .leaflet-bottom.leaflet-right{
 right:12px!important;
 bottom:calc(83px + env(safe-area-inset-bottom,0px))!important;
}
.app .leaflet-bottom.leaflet-right .leaflet-control-zoom{
 margin-right:10px!important;
 margin-bottom:0!important;
 border-radius:10px!important;
 overflow:hidden!important;
 box-shadow:0 2px 10px rgba(12,31,38,.18)!important;
}
.app .leaflet-bottom.leaflet-right .leaflet-control-zoom a{
 width:36px;height:36px;line-height:36px;
 font-size:20px;
 color:#2b5056;background:#fff;
}
@media (min-width:850px){
 #parkingSignOverlay{top:18px;left:auto;right:300px}
 .app.has-parking-status #parkingStatusBanner.is-unified-sign{padding-left:116px!important}
 .app .leaflet-bottom.leaflet-right{right:18px!important;bottom:105px!important}
}
@media (max-width:849px){
 #parkingSignOverlay{top:67px;left:8px}
 .app.has-parking-status #parkingStatusBanner.is-unified-sign{
  padding-left:117px!important;min-height:83px!important;
 }
 .app .leaflet-bottom.leaflet-right{
  right:12px!important;bottom:calc(83px + env(safe-area-inset-bottom,0px))!important;
 }
}
@media (max-width:374px){
 #parkingSignOverlay{left:5px;top:67px;transform:scale(.91);transform-origin:top left}
 .app.has-parking-status #parkingStatusBanner.is-unified-sign{
  padding-left:105px!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-status-title{
  font-size:15px!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-zone-meaning{
  font-size:10px!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-zone-de{
  font-size:9px!important;
 }
}


/* ParkWien v4.3 — sign and status bar no longer overlap.
   The annotated reference places the card just to the right of the sign,
   with one consistent sign circle across all X/no-stopping categories. */
.app{
 --pw-sign-left:8px;
 --pw-sign-width:112px;
 --pw-sign-gap:10px;
 --pw-card-right:9px;
}
#parkingSignOverlay{
 left:var(--pw-sign-left)!important;
 top:67px!important;
 width:var(--pw-sign-width)!important;
}
/* Keep the X circle identical for residents-only and loading-zone signs. The
   separate official supplemental panel supplies the district and time rules. */
#parkingSignOverlay:is(.zone-resident,.zone-loading,.zone-disabledspot) .pw-map-sign-head{
 flex:0 0 90px!important;
 width:108px!important;
 height:90px!important;
 min-height:90px!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
}
#parkingSignOverlay:is(.zone-resident,.zone-loading,.zone-disabledspot) .pw-map-sign-face{
 box-sizing:border-box!important;
 display:block!important;
 width:88px!important;height:88px!important;
 min-width:88px!important;min-height:88px!important;
 flex:0 0 88px!important;
 margin:0 auto!important;
 border-radius:50%!important;
 background-image:url("./signs/anwohner_02.webp")!important;
 background-size:129% auto!important;
 background-position:center -2px!important;
 background-repeat:no-repeat!important;
}
/* The earlier loading-specific photographic crop had a different X diameter.
   This shared face takes precedence, so both use the exact same round sign. */
#parkingSignOverlay.zone-loading .pw-map-sign-face{
 background-image:url("./signs/anwohner_02.webp")!important;
 background-size:129% auto!important;
 background-position:center -2px!important;
}
#parkingSignOverlay:is(.zone-resident,.zone-loading,.zone-disabledspot) .pw-map-sign-plate{
 margin-top:0!important;
}
#parkingSignOverlay .pw-map-accessible-mark{
 display:block;
 font-family:Arial,sans-serif;
 font-size:15px!important;
 line-height:1!important;
 color:#1d54a1;
 margin:0 0 3px!important;
}
@media(max-width:849px){
 .app.has-parking-status #parkingStatusBanner.is-unified-sign{
  left:calc(var(--pw-sign-left) + var(--pw-sign-width) + var(--pw-sign-gap))!important;
  right:var(--pw-card-right)!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:83px!important;
  padding:10px 10px 10px 12px!important;
  gap:7px!important;
  overflow:hidden!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-status-summary{
  min-width:0!important;flex:1 1 auto!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-status-content{
  min-width:0!important;overflow:hidden!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-status-title{
  max-width:100%!important;overflow-wrap:break-word!important;
  font-size:16px!important;line-height:1.22!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign .status-details-button{
  flex:0 0 28px!important;
  width:28px!important;min-width:28px!important;
  height:30px!important;min-height:30px!important;
 }
}
@media(min-width:850px){
 /* On a wide viewport, use the same 10px gap, to the left of the 336px card. */
 #parkingSignOverlay{
  left:auto!important;
  right:calc(336px + 14px + var(--pw-sign-gap))!important;
  top:18px!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign{
  left:auto!important;right:14px!important;
  width:336px!important;max-width:336px!important;
  min-height:83px!important;
  padding:10px 12px!important;
  gap:10px!important;overflow:hidden!important;
 }
}
@media(max-width:374px){
 .app{
  --pw-sign-left:5px;
  --pw-sign-width:101px;
  --pw-sign-gap:9px;
  --pw-card-right:7px;
 }
 #parkingSignOverlay{
  left:var(--pw-sign-left)!important;
  top:67px!important;
  width:112px!important;
  transform:scale(.90)!important;
  transform-origin:top left!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign{
  left:calc(var(--pw-sign-left) + var(--pw-sign-width) + var(--pw-sign-gap))!important;
  right:var(--pw-card-right)!important;
  padding:9px 7px 9px 9px!important;
  gap:4px!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-status-title{
  font-size:14px!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-zone-meaning{
  font-size:10px!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign .parking-zone-de{
  font-size:9px!important;
 }
 .app.has-parking-status #parkingStatusBanner.is-unified-sign .status-details-button{
  flex-basis:26px!important;width:26px!important;min-width:26px!important;
 }
}


/* ParkWien v4.4 — fix stretched Leaflet zoom and align exactly with GPS.
   Position only the zoom control; never move Leaflet's shared bottom-right
   wrapper, because it also hosts the basemap attribution. */
.app .leaflet-bottom.leaflet-right{
 right:0!important;
 bottom:0!important;
 width:auto!important;
}
.app .leaflet-bottom.leaflet-right .leaflet-control-zoom{
 position:absolute!important;
 right:12px!important;
 bottom:calc(82px + env(safe-area-inset-bottom,0px) + var(--pw-ad-space,0px))!important;
 box-sizing:border-box!important;
 display:flex!important;
 flex-direction:column!important;
 align-items:stretch!important;
 width:49px!important;
 min-width:49px!important;
 max-width:49px!important;
 margin:0!important;
 padding:0!important;
 float:none!important;
 border:1px solid #cadcdd!important;
 border-radius:12px!important;
 overflow:hidden!important;
 background:#ffffff!important;
 box-shadow:0 2px 12px #152d3733!important;
}
.app .leaflet-bottom.leaflet-right .leaflet-control-zoom a,
.app .leaflet-bottom.leaflet-right .leaflet-control-zoom a.leaflet-control-zoom-in,
.app .leaflet-bottom.leaflet-right .leaflet-control-zoom a.leaflet-control-zoom-out{
 box-sizing:border-box!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 flex:0 0 39px!important;
 width:100%!important;
 min-width:0!important;
 max-width:100%!important;
 height:39px!important;
 min-height:39px!important;
 margin:0!important;
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 line-height:1!important;
 font-size:21px!important;
 font-weight:500!important;
 text-align:center!important;
 background:#ffffff!important;
 color:#2b5056!important;
 box-shadow:none!important;
}
.app .leaflet-bottom.leaflet-right .leaflet-control-zoom a+a{
 border-top:1px solid #dce6e7!important;
}
.app .leaflet-bottom.leaflet-right .leaflet-control-zoom a:focus-visible{
 outline:2px solid #187f75!important;
 outline-offset:-3px!important;
}
@media(min-width:850px){
 .app .leaflet-bottom.leaflet-right .leaflet-control-zoom{
  right:20px!important;
  bottom:calc(99px + var(--pw-ad-space,0px))!important;
 }
}
@media(max-width:849px){
 .app .leaflet-bottom.leaflet-right .leaflet-control-zoom{
  right:12px!important;
  bottom:calc(82px + env(safe-area-inset-bottom,0px) + var(--pw-ad-space,0px))!important;
 }
}
