/* Flux Montréal — Map Popup V3 */
:root{
  --fmv3-bg:#091522;
  --fmv3-bg2:#0d1d30;
  --fmv3-panel:#12243a;
  --fmv3-panel2:#162a43;
  --fmv3-blue:#64b5ff;
  --fmv3-blue2:#8acbff;
  --fmv3-green:#69f29e;
  --fmv3-yellow:#ffd76a;
  --fmv3-red:#ff7b7b;
  --fmv3-purple:#b9a2ff;
  --fmv3-text:#f3f8fd;
  --fmv3-muted:#8fa5b9;
  --fmv3-line:rgba(139,181,219,.16);
  --fmv3-line2:rgba(139,181,219,.25);
  --fmv3-shadow:0 28px 70px rgba(0,0,0,.50);
}

/* Live mode badge from legacy map: hide in live, preserve history */
.hm-mapmode-overlay.fmv3-live-mode-hidden{display:none!important}
.hm-mapmode-overlay.fmv3-history-mode{
  top:10px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  z-index:1600!important;
}
.hm-mapmode-overlay.fmv3-history-mode .hm-mapmode-ctl{
  background:rgba(7,16,28,.94)!important;
  border:1px solid rgba(126,194,255,.24)!important;
  border-radius:12px!important;
  box-shadow:0 16px 40px rgba(0,0,0,.35)!important;
}

/* Popup shell */
.leaflet-popup.hm-bus-popup,
.leaflet-popup.hm-train-popup{width:330px!important;max-width:330px!important}
.leaflet-popup.hm-bixi-popup{width:340px!important;max-width:340px!important}
.leaflet-popup.hm-entraves-popup{width:430px!important;max-width:min(430px,calc(100vw - 34px))!important}

.leaflet-popup.hm-bus-popup .leaflet-popup-content-wrapper,
.leaflet-popup.hm-train-popup .leaflet-popup-content-wrapper,
.leaflet-popup.hm-bixi-popup .leaflet-popup-content-wrapper,
.leaflet-popup.hm-entraves-popup .leaflet-popup-content-wrapper{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(126,194,255,.22)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 95% 0,rgba(90,169,255,.13),transparent 32%),
    linear-gradient(180deg,rgba(14,30,50,.995),rgba(7,16,28,.995))!important;
  box-shadow:var(--fmv3-shadow),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%)!important;
}
.leaflet-popup.hm-entraves-popup .leaflet-popup-content-wrapper{
  border-color:rgba(255,184,99,.22)!important;
  background:
    radial-gradient(circle at 95% 0,rgba(255,160,64,.11),transparent 34%),
    linear-gradient(180deg,rgba(27,27,31,.995),rgba(12,17,25,.995))!important;
}
.leaflet-popup.hm-bixi-popup .leaflet-popup-content-wrapper{
  border-color:rgba(104,242,158,.20)!important;
  background:
    radial-gradient(circle at 95% 0,rgba(104,242,158,.09),transparent 32%),
    linear-gradient(180deg,rgba(12,31,39,.995),rgba(7,17,27,.995))!important;
}
.leaflet-popup.hm-bus-popup .leaflet-popup-content,
.leaflet-popup.hm-train-popup .leaflet-popup-content,
.leaflet-popup.hm-bixi-popup .leaflet-popup-content,
.leaflet-popup.hm-entraves-popup .leaflet-popup-content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  color:var(--fmv3-text)!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
.leaflet-popup.hm-bus-popup .leaflet-popup-tip,
.leaflet-popup.hm-train-popup .leaflet-popup-tip,
.leaflet-popup.hm-bixi-popup .leaflet-popup-tip{background:#091522!important}
.leaflet-popup.hm-entraves-popup .leaflet-popup-tip{background:#101721!important}

.leaflet-popup.hm-bus-popup .leaflet-popup-close-button,
.leaflet-popup.hm-train-popup .leaflet-popup-close-button,
.leaflet-popup.hm-bixi-popup .leaflet-popup-close-button,
.leaflet-popup.hm-entraves-popup .leaflet-popup-close-button{
  top:12px!important;right:12px!important;
  width:30px!important;height:30px!important;line-height:27px!important;
  z-index:15!important;border:1px solid rgba(143,180,220,.15)!important;border-radius:9px!important;
  background:rgba(255,255,255,.035)!important;color:#a8bccf!important;font-size:18px!important;font-weight:400!important;
}
.leaflet-popup .leaflet-popup-close-button:hover{background:rgba(90,169,255,.11)!important;color:white!important}

.fmv3-card{position:relative;padding:15px 16px 14px!important;color:var(--fmv3-text)!important}
.fmv3-card:before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--fmv3-blue),rgba(104,242,158,.75),transparent)
}
.fmv3-roadwork:before{background:linear-gradient(90deg,transparent,#ff9d4d,#ffd76a,transparent)}
.fmv3-bixi:before{background:linear-gradient(90deg,transparent,#45d889,#7af5aa,transparent)}

.fmv3-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:34px;min-height:25px}
.fmv3-live,.fmv3-kind{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fmv3-live{
  padding:5px 8px;border-radius:999px;font-size:8.5px;font-weight:850;letter-spacing:.12em;
  color:#c9f8d7;border:1px solid rgba(104,242,158,.24);background:rgba(104,242,158,.07)
}
.fmv3-live.is-history{color:#cfe5fb;border-color:rgba(100,181,255,.25);background:rgba(100,181,255,.08)}
.fmv3-live.is-road{color:#ffe0ba;border-color:rgba(255,173,91,.25);background:rgba(255,173,91,.08)}
.fmv3-live-dot,.fmv3-state-dot{width:6px;height:6px;border-radius:50%;background:var(--fmv3-green);box-shadow:0 0 10px rgba(104,242,158,.65)}
.fmv3-live.is-history .fmv3-live-dot{background:var(--fmv3-blue);box-shadow:0 0 10px rgba(100,181,255,.55)}
.fmv3-live.is-road .fmv3-live-dot{background:#ffad5b;box-shadow:0 0 10px rgba(255,173,91,.55)}
.fmv3-kind{color:#758ea5;font-size:8.5px;font-weight:800;letter-spacing:.12em}
.fmv3-kind i{color:#9eb8cf;font-size:13px}

.fmv3-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:11px;padding-bottom:12px;border-bottom:1px solid rgba(139,181,219,.10)}
.fmv3-heading h3{margin:0;color:#f4f9ff;font-size:22px;line-height:1.05;font-weight:780;letter-spacing:-.035em}
.fmv3-heading p{margin:6px 0 0;color:#8299ae;font-size:11px;line-height:1.25;font-weight:600}
.fmv3-roadwork .fmv3-heading h3{font-size:24px}

.fmv3-destination{display:flex;align-items:center;gap:10px;margin-top:11px;padding:10px 11px;border:1px solid rgba(100,181,255,.13);border-radius:11px;background:rgba(100,181,255,.045)}
.fmv3-destination>i{color:var(--fmv3-blue2);font-size:17px}
.fmv3-destination span,.fmv3-info span,.fmv3-road-update span{display:flex;flex-direction:column;gap:3px;min-width:0}
.fmv3-destination small,.fmv3-info small,.fmv3-road-update small,.fmv3-section>small,.fmv3-timeline small{
  color:#6f879d;font-size:8px;line-height:1;font-weight:850;letter-spacing:.13em
}
.fmv3-destination strong{font-size:11.5px;color:#e5f2ff;font-weight:700;white-space:normal;overflow-wrap:anywhere}

.fmv3-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.fmv3-grid-2{grid-template-columns:1fr 1fr}
.fmv3-grid-3{grid-template-columns:repeat(3,1fr)}
.fmv3-metric{
  min-height:57px;padding:9px 9px;display:flex;align-items:center;gap:9px;
  border:1px solid rgba(139,181,219,.10);border-radius:11px;background:rgba(255,255,255,.023)
}
.fmv3-metric-icon{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:8px;background:rgba(100,181,255,.07);color:#84c9ff}
.fmv3-metric-icon i{font-size:15px}
.fmv3-metric-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.fmv3-metric-copy span{color:#72899e;font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.fmv3-metric-copy strong{color:#dceaf6;font-size:11px;font-weight:720;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
.fmv3-metric.is-blue{border-color:rgba(100,181,255,.12)}
.fmv3-metric.is-green{border-color:rgba(104,242,158,.18);background:rgba(104,242,158,.035)}
.fmv3-metric.is-green .fmv3-metric-icon,.fmv3-metric.is-ok .fmv3-metric-icon{color:#82f4aa;background:rgba(104,242,158,.07)}
.fmv3-metric.is-warn{border-color:rgba(255,215,106,.17);background:rgba(255,215,106,.035)}
.fmv3-metric.is-warn .fmv3-metric-icon{color:#ffd76a;background:rgba(255,215,106,.07)}
.fmv3-metric.is-stop .fmv3-metric-icon,.fmv3-metric.is-muted .fmv3-metric-icon{color:#9aafc1;background:rgba(143,165,185,.06)}

.fmv3-footerinfo{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(139,181,219,.09)}
.fmv3-info{display:flex;align-items:center;gap:8px;min-width:0}
.fmv3-info>i{font-size:14px;color:#7daed7}
.fmv3-info strong,.fmv3-road-update strong{color:#bacbd9;font-size:10px;font-weight:650;line-height:1.25}
.fmv3-info.is-warn>i,.fmv3-info.is-warn strong{color:#ffd76a}
.fmv3-footnote{margin-top:10px;color:#5f7589;font-size:8.5px;line-height:1.35;font-weight:550}

/* BIXI */
.fmv3-bixi-state{display:flex;align-items:center;gap:7px;margin-top:11px;padding:8px 10px;border-radius:10px;font-size:10px;font-weight:720;color:#ccebd6;background:rgba(104,242,158,.045);border:1px solid rgba(104,242,158,.13)}
.fmv3-bixi-state.is-warn{color:#ffe5a3;background:rgba(255,215,106,.045);border-color:rgba(255,215,106,.14)}
.fmv3-bixi-state.is-warn .fmv3-state-dot{background:#ffd76a;box-shadow:0 0 10px rgba(255,215,106,.5)}
.fmv3-grid-3 .fmv3-metric{flex-direction:column;justify-content:center;text-align:center;gap:6px;min-width:0}
.fmv3-grid-3 .fmv3-metric-icon{width:27px;height:27px;flex-basis:27px}
.fmv3-grid-3 .fmv3-metric-copy strong{font-size:15px}
.fmv3-grid-3 .fmv3-metric-copy span{font-size:7.5px}
.fmv3-gauge{margin-top:11px;padding:10px 11px;border:1px solid rgba(139,181,219,.09);border-radius:11px;background:rgba(255,255,255,.018)}
.fmv3-gauge-head,.fmv3-gauge-scale{display:flex;justify-content:space-between;gap:8px}
.fmv3-gauge-head span{color:#7c92a6;font-size:9px;font-weight:650}.fmv3-gauge-head strong{color:#d7e8f5;font-size:9px;font-weight:750}
.fmv3-gauge-track{height:6px;margin:8px 0 6px;border-radius:999px;overflow:hidden;background:rgba(100,181,255,.16)}
.fmv3-gauge-track span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#43d884,#72f0a3)}
.fmv3-gauge-scale span{color:#60778c;font-size:7.5px;font-weight:650}

/* Roadwork */
.fmv3-impact{display:flex;margin-top:11px}
.fmv3-impact>span{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px;font-size:9px;font-weight:800;letter-spacing:.04em}
.fmv3-impact.is-danger>span{color:#ffd0d0;border:1px solid rgba(255,123,123,.22);background:rgba(255,123,123,.07)}
.fmv3-impact.is-warn>span{color:#ffe5a3;border:1px solid rgba(255,215,106,.20);background:rgba(255,215,106,.06)}
.fmv3-impact.is-ok>span{color:#cef5d9;border:1px solid rgba(104,242,158,.18);background:rgba(104,242,158,.05)}
.fmv3-section{margin-top:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.065);border-radius:11px;background:rgba(255,255,255,.018)}
.fmv3-section p{margin:7px 0 0;color:#d5e0e9;font-size:11px;line-height:1.45;font-weight:560;white-space:normal;overflow-wrap:anywhere}
.fmv3-location p{display:flex;gap:7px;color:#aabcc9}.fmv3-location p i{color:#ffbd77;margin-top:2px}
.fmv3-timeline{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fmv3-timeline:before{content:"";position:absolute;left:14px;right:14px;top:7px;height:1px;background:linear-gradient(90deg,rgba(255,173,91,.35),rgba(255,215,106,.20))}
.fmv3-timeline>div{position:relative;padding:18px 10px 9px;border-radius:10px;background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.06)}
.fmv3-timeline-dot{position:absolute;top:4px;left:10px;width:7px;height:7px;border-radius:50%;background:#ffad5b;box-shadow:0 0 0 4px rgba(255,173,91,.07)}
.fmv3-timeline strong{display:block;margin-top:5px;color:#d8e2e9;font-size:9.5px;line-height:1.3;font-weight:680}
.fmv3-road-update{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.fmv3-road-update>i{color:#ffbd77;font-size:14px}
.fmv3-action{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:10px 11px;border:1px solid rgba(255,173,91,.20);border-radius:10px;background:rgba(255,173,91,.055);color:#ffd8ad!important;font-size:10px;font-weight:750;text-decoration:none!important}
.fmv3-action:hover{background:rgba(255,173,91,.10);border-color:rgba(255,173,91,.34);color:white!important}
.fmv3-action i{font-size:15px}

@media(max-width:768px){
  .leaflet-popup.hm-bus-popup,
  .leaflet-popup.hm-train-popup,
  .leaflet-popup.hm-bixi-popup,
  .leaflet-popup.hm-entraves-popup{
    width:min(330px,calc(100vw - 24px))!important;
    max-width:min(330px,calc(100vw - 24px))!important;
  }
  .fmv3-card{padding:14px 14px 13px!important}
  .fmv3-heading h3{font-size:20px}.fmv3-roadwork .fmv3-heading h3{font-size:21px}
  .fmv3-grid{gap:6px}.fmv3-metric{min-height:55px;padding:8px}
  .fmv3-grid-3{grid-template-columns:repeat(3,1fr)}
  .fmv3-footerinfo{grid-template-columns:1fr}
  .fmv3-timeline{grid-template-columns:1fr}
  .fmv3-timeline:before{display:none}
}

@media(max-width:390px){
  .leaflet-popup.hm-bus-popup,
  .leaflet-popup.hm-train-popup,
  .leaflet-popup.hm-bixi-popup,
  .leaflet-popup.hm-entraves-popup{width:calc(100vw - 18px)!important;max-width:calc(100vw - 18px)!important}
  .fmv3-heading h3{font-size:19px}
  .fmv3-kind{display:none}
}
