/* Ehopto road-level navigation: deliberately not a photographic Street View. */
.ehopto-driving-shell[hidden],.ehopto-driving-details[hidden]{display:none!important}
.ehopto-driving-shell{position:fixed;inset:0;z-index:2500;color:#fff;background:#091726;font:500 14px/1.45 system-ui,Arial,sans-serif;overflow:hidden}
#ehopto-driving-map{position:absolute;inset:0;background:#122a41}
.ehopto-driving-shell button{cursor:pointer;touch-action:manipulation}
.ehopto-driving-top{position:absolute;z-index:3;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;pointer-events:none;display:flex;justify-content:center}
.ehopto-driving-instruction-card{width:min(100%,630px);display:flex;align-items:center;gap:14px;padding:14px 16px;color:#fff;border:1px solid #506c92;border-radius:16px;background:linear-gradient(120deg,rgba(5,19,37,.97),rgba(15,44,73,.96));box-shadow:0 8px 35px #0007;pointer-events:auto}
.ehopto-driving-turn-icon{font-size:27px;flex:0 0 auto;line-height:1}
.ehopto-driving-copy{min-width:0;flex:1}
.ehopto-driving-copy small{color:#b8d0ef;display:block;font-size:11px;font-weight:750;letter-spacing:.06em}
#ehopto-driving-instruction{font-size:clamp(15px,3.3vw,21px);font-weight:800;line-height:1.25;display:block;overflow-wrap:anywhere}
.ehopto-driving-close{border:1px solid #6d8eb7;background:#1a3455;color:#fff;border-radius:12px;font-size:12px;font-weight:800;padding:10px 12px;white-space:nowrap}
.ehopto-driving-bottom{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:12px;right:12px;z-index:3;pointer-events:none;display:flex;justify-content:center}
.ehopto-driving-bottom-card{width:min(100%,630px);padding:13px 15px 15px;border-radius:16px;background:rgba(4,18,35,.96);border:1px solid #506c92;box-shadow:0 8px 35px #0008;pointer-events:auto}
.ehopto-driving-bottom-head{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
#ehopto-driving-destination{font-size:18px;font-weight:800}
#ehopto-driving-progress{font-size:12px;color:#d8e5f5;display:block;margin-top:4px}
.ehopto-driving-actions{display:flex;gap:8px;flex:0 0 auto}
.ehopto-driving-actions button{padding:9px 12px;border-radius:10px;color:#fff;font-size:12px;font-weight:800;background:#174a88;border:1px solid #477bb8}
.ehopto-driving-actions button[aria-pressed=true]{background:#3075ed}
#ehopto-driving-update{margin-top:9px;color:#bee2fa;font-size:12px;max-height:2.7em;overflow:hidden}
.ehopto-driving-details{border-top:1px solid #345376;margin-top:10px;padding-top:9px;max-height:min(42vh,350px);overflow-y:auto;overscroll-behavior:contain}
.ehopto-driving-details p{white-space:normal;margin:0 0 9px;color:#e3edfb;font-size:13px}
.ehopto-driving-details>div:not(.ehopto-driving-nearby){display:flex;gap:14px;flex-wrap:wrap}
.ehopto-driving-details a{color:#a6cbff;text-decoration:underline;font-size:13px}
.ehopto-driving-nearby{margin-top:7px;color:#d8e8fc;font-size:12px}
.ehopto-driving-arrow{height:36px;width:36px;position:relative;filter:drop-shadow(0 3px 3px #091521);pointer-events:none}
.ehopto-driving-arrow:before{content:"";position:absolute;left:6px;top:1px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:32px solid #fff}
.ehopto-driving-arrow:after{content:"";position:absolute;left:11px;top:8px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:21px solid #2878f4}
.ehopto-driving-footer{position:absolute;z-index:2;bottom:0;right:0;font-size:9px;color:#1a354a}
.ehopto-driving-shell .maplibregl-control-container .maplibregl-ctrl-bottom-right{bottom:160px}
@media(max-width:530px){
  .ehopto-driving-top{left:8px;right:8px;top:max(7px,env(safe-area-inset-top))}
  .ehopto-driving-bottom{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom))}
  .ehopto-driving-instruction-card{padding:11px;gap:8px;border-radius:13px}
  .ehopto-driving-turn-icon{font-size:23px}
  .ehopto-driving-close{padding:8px;font-size:11px}
  .ehopto-driving-bottom-card{padding:12px;border-radius:13px}
  #ehopto-driving-destination{font-size:16px}
  #ehopto-driving-progress{font-size:11px}
  .ehopto-driving-actions{width:100%}
  .ehopto-driving-actions button{flex:1}
}
\n.ehopto-driving-nearby strong{font-size:13px;display:block;margin:5px 0 8px}
.ehopto-driving-place{display:grid;gap:3px;border-top:1px solid #49617c;padding:8px 0}
.ehopto-driving-place span{font-size:11px;color:#b4cbe5}