/* V8: one broad map, two ways to explore the European road network. */
#pravci {padding-block:85px 78px;overflow:hidden;background:#0a1824}
#pravci .route-layout {display:block;width:min(1440px,calc(100% - 96px));min-width:0}
#pravci .route-content {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:55px;margin-bottom:32px}
#pravci .route-content>div {min-width:0}
#pravci .route-content .eyebrow {font-size:12px;letter-spacing:.11em}
#pravci .route-content h2 {font:500 clamp(48px,5.1vw,74px)/1.02 var(--heading);letter-spacing:-.065em;margin-top:22px;color:#f0f2e9}
#pravci .route-introduction {justify-self:end;width:100%;max-width:430px;padding-bottom:5px}
#pravci .route-introduction .route-description {margin:0;max-width:none;color:#a8becb;font-size:14px;line-height:1.85}
#pravci .route-mode-tabs {display:flex;align-items:stretch;gap:34px;width:100%;margin:0;border-bottom:1px solid #6f91a545;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#4d728a transparent}
#pravci .route-mode-tabs>button {position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:35px;flex:none;min-height:58px;padding:12px 3px;background:transparent;border:0;color:#819faf;font:500 16px/1.4 var(--heading);letter-spacing:-.025em;white-space:nowrap}
#pravci .route-mode-tabs>button>span[aria-hidden] {font:400 23px/1 var(--body);color:#7495a8;opacity:.45}
#pravci .route-mode-tabs>button::after {content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#ff956a;transform:scaleX(0);transform-origin:left;transition:transform .25s}
#pravci .route-mode-tabs>button[aria-selected=true] {color:#f1efe7}
#pravci .route-mode-tabs>button[aria-selected=true]>span[aria-hidden] {color:#ff9a71;opacity:1}
#pravci .route-mode-tabs>button[aria-selected=true]::after {transform:scaleX(1)}
#pravci .route-mode-tabs>button:hover {color:#ffd2b9}
#pravci .country-list:not([hidden]) {position:relative;top:auto;display:flex;flex-flow:row nowrap;gap:8px;max-width:100%;margin:16px 0;padding:4px 0;overflow-x:auto;box-shadow:none;background:none;scrollbar-width:thin}
#pravci .country-list>button {flex:none;min-height:44px;font-size:20px}
#pravci .country-list>button>span {font-size:12px}

#pravci .route-planner {display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) auto;align-items:end;gap:13px 23px;padding:19px 0 21px;margin:0;border:0;background:transparent}
#pravci .planner-field {gap:5px;min-width:0}
#pravci .planner-field>span {font:400 12px/1.5 var(--body);color:#8ca9b9}
#pravci .route-planner select {display:block;width:100%;max-width:100%;min-width:0;min-height:44px;padding:8px 31px 8px 0;border:0;border-bottom:1px solid #577a8e8c;background:#0a1824;color:#e6eeeb;font:400 16px/1.5 var(--body);border-radius:0}
#pravci .route-swap {width:44px;height:44px;min-height:44px;margin:0 0 1px;border:1px solid #62839762;border-radius:50%;font-size:24px;color:#b7cdd8;background:transparent}
#pravci .route-swap:hover {background:#1d3e51;color:#ffad84;transform:none}
#pravci .route-plan {min-height:47px;gap:30px;padding:11px 19px;background:#ff956a;border:1px solid #ff956a;color:#102633;font:600 13px/1.5 var(--body)}
#pravci .route-plan:hover {background:#ffb28e}
#pravci #route-planner-status {grid-column:1/-1;margin:0;padding:0;color:#f6b28e;font-size:12px;line-height:1.7}
#pravci #route-planner-status:empty {display:none}
#pravci .route-history-controls {display:flex;align-items:center;gap:20px;padding:19px 0 21px;min-height:100px}
#pravci .route-history-controls>label {display:flex;flex-direction:column;gap:5px;min-width:190px;max-width:260px;font-size:12px;color:#8ca9b9}
#pravci .route-history-controls select {width:100%;min-height:44px;padding:8px 32px 8px 0;background:#0a1824;border:0;border-bottom:1px solid #577a8e8c;color:#e6eeeb;font:400 16px/1.5 var(--body);border-radius:0}
#pravci #route-history-count {font-size:13px;color:#b6cbd4;line-height:1.7;padding-top:22px}
#pravci .route-history-notice {margin-left:auto;font-size:12px;color:#f4ae88;line-height:1.6;padding-top:22px}

#pravci .route-workspace {display:flex;flex-direction:column;align-items:stretch;gap:26px;min-width:0}
#pravci .route-experience {width:100%;min-width:0;scroll-margin-top:23px}
#pravci .route-experience .map-panel {margin:0;padding:0;border:1px solid #63869c59;overflow:hidden;background:#0b1d2b;box-shadow:0 24px 65px #02070b24}
#pravci .route-toolbar {display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;background:#102635;border-bottom:1px solid #688b9f35}
#pravci .route-toolbar .route-drive-controls,#pravci .route-toolbar .map-view-controls {display:flex;align-items:center;gap:8px;min-width:0;width:auto;flex-wrap:nowrap}
#pravci .route-toolbar button {display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-width:0;min-height:44px;padding:10px 15px;border:1px solid #6d91a66b;background:#102b3d;color:#c7dbe3;font:500 12px/1.5 var(--body);white-space:nowrap}
#pravci .route-toolbar button>span[aria-hidden] {font-size:17px;line-height:1}
#pravci .route-toolbar #route-start {background:#ff956a;color:#122936;border-color:#ff956a;min-width:184px}
#pravci .route-toolbar #route-pause {background:#23485e;color:#e0edf0;border-color:#8aafc06e;min-width:184px}
#pravci .route-toolbar button:hover {border-color:#ffaf87;background:#20445a;color:#fff0df}
#pravci .route-toolbar #route-start:hover {background:#ffb28d;color:#122936}
#pravci .route-toolbar button[aria-pressed=true] {background:#284e64;border-color:#c8a58b;color:#ffd2b7}
#pravci .route-toolbar button:disabled {opacity:.42;cursor:not-allowed}
#pravci .route-experience #europe-map {position:relative;width:100%;height:600px;min-height:0;overflow:hidden}
#pravci #europe-map .map-hud {left:20px;right:auto;bottom:27px;display:flex;align-items:flex-end;gap:12px;max-width:calc(100% - 40px)}
#pravci #europe-map .map-hud .route-detail {display:flex;flex-direction:column;max-width:400px;min-width:0;margin:0;padding:15px 18px;border:1px solid #789cac55;background:#071b28e8;box-shadow:none;backdrop-filter:blur(12px)}
#pravci #europe-map .route-detail .route-detail-label {font:400 12px/1.5 var(--body);letter-spacing:.06em;color:#99b8c7}
#pravci #europe-map .route-detail strong {display:block;margin-top:7px;font:500 27px/1.15 var(--heading);letter-spacing:-.045em;color:#e7efec;overflow-wrap:anywhere}
#pravci #europe-map .route-detail #route-distance {display:block;margin-top:8px;font:700 italic 36px/1 var(--display);color:#ffac7e;letter-spacing:-.02em;white-space:nowrap}
#pravci #europe-map .route-detail #route-time {margin-top:8px;font:400 12px/1.5 var(--body);color:#a9c0cd}
#pravci #europe-map .map-view-stage {max-width:220px;margin:0;padding:9px 11px;font:400 12px/1.5 var(--body);background:#0b2231de;border-color:#779daf44;color:#bbd1db}
#pravci #europe-map .map-coordinate {top:17px;right:55px;gap:3px;font-size:12px;letter-spacing:.04em}
#pravci #europe-map .map-coordinate>span {font-size:12px;letter-spacing:.02em;color:#90afc0}
#pravci .map-playback {display:grid;grid-template-columns:auto minmax(100px,1fr) 43px auto 64px;align-items:center;gap:14px;min-height:65px;padding:10px 17px;background:#102635;border-top:1px solid #688b9f35}
#pravci .map-playback>label {display:block;font-size:12px;line-height:1.5;color:#9fb9c8;white-space:nowrap}
#pravci .map-playback output {font-size:12px;color:#e5ece8;text-align:right}
#pravci .map-playback input[type=range] {width:100%;min-width:0;height:44px;accent-color:#ff996a;cursor:ew-resize}
#pravci .map-playback select {min-height:44px;padding:7px;color:#d7e7eb;background:#0b2232;border:1px solid #6c90a363;font-size:14px;line-height:1.5}
#pravci .route-map-meta {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 17px 12px;background:#0d2231}
#pravci #route-help {margin:0;min-height:0;font:400 12px/1.65 var(--body);color:#8ba9ba}
#pravci #route-help:empty {display:none}
#pravci .satellite-vintage {order:initial;width:auto;flex:none;margin:0;padding:0;text-align:right;font:400 10px/1.5 var(--body);letter-spacing:.035em;color:#6f93a7}

#pravci .route-options {display:block;position:relative;top:auto;width:100%;max-height:none;min-width:0;overflow:visible;padding:0;background:none;border:0}
#pravci .route-options-heading {display:block;margin:0 0 13px}
#pravci .route-options-heading h3 {margin:0;color:#dce9e9;font:500 23px/1.25 var(--heading);letter-spacing:-.045em}
#pravci #route-alternatives {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;min-width:0;margin:0;padding:0}
#pravci #route-alternatives>button {display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;width:100%;height:100%;padding:18px 38px 19px 18px;border:1px solid #7398a94d;background:#102938;color:#bdd0d8;text-align:left;font:400 12px/1.65 var(--body);box-shadow:none}
#pravci #route-alternatives>button:hover {border-color:#a2b8c0;background:#18384a}
#pravci #route-alternatives>button:is([aria-pressed=true],.is-active) {background:#1b3a4d;border-color:#edab80;box-shadow:inset 0 -2px #edab80;color:#f0eee4}
#pravci #route-alternatives>button>small {font-size:12px;line-height:1.5}
#pravci #route-alternatives>button>strong {font:500 19px/1.3 var(--heading);letter-spacing:-.025em;overflow-wrap:anywhere}
#pravci #route-alternatives .route-alt-distance,#pravci #route-alternatives .route-option-distance {margin-top:auto;font:700 italic 29px/1.15 var(--display);color:#f3b18a;letter-spacing:-.01em;overflow-wrap:anywhere}
#pravci .route-loading {font-size:12px;line-height:1.8;color:#99b3c2}
#pravci .route-footer {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px 35px;margin-top:22px}
#pravci .route-footer .selected-route {width:100%;max-width:none;margin:0;padding:12px 0;font-size:14px;line-height:1.6;border-top:0;border-bottom:1px solid #68899b4d}
#pravci .selected-route #route-quote {width:44px;height:44px;min-height:44px;font-size:23px}
#pravci .route-footer .route-fine {max-width:480px;margin:0;justify-self:end;font-size:12px;line-height:1.8}
#pravci .route-footer .route-map-foot {grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:8px 22px;margin:0;padding-top:15px;font-size:12px;line-height:1.8;border-top:1px solid #68899b35}
#pravci .route-map-foot>p {max-width:720px}
#pravci .route-map-foot .map-attribution {font-size:11px;line-height:1.8}
#pravci button:focus-visible,#pravci select:focus-visible {outline:2px solid #f9d5b5;outline-offset:4px}

@media(min-width:1700px) {
  #pravci .route-experience #europe-map {height:650px}
}
@media(max-width:1180px) {
  #pravci .route-layout {width:calc(100% - 72px)}
  #pravci .route-content {gap:35px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  #pravci .route-planner {grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) auto;gap:14px}
  #pravci .route-plan {padding-inline:15px;gap:20px}
  #pravci .route-toolbar {flex-direction:row;align-items:center}
  #pravci .route-toolbar .route-drive-controls {width:auto}
  #pravci .route-experience #europe-map {height:580px}
  #pravci .map-playback {grid-template-columns:auto minmax(70px,1fr) 43px auto 64px;gap:11px}
  #pravci .map-playback .route-speed-label {display:block}
  #pravci #route-alternatives>button {padding:16px 31px 17px 16px}
  #pravci #route-alternatives>button>strong {font-size:17px}
}
@media(max-width:900px) {
  #pravci .route-content {grid-template-columns:1fr 1fr;gap:28px}
  #pravci .route-content h2 {font-size:52px}
  #pravci .route-description {font-size:13px}
  #pravci #route-alternatives .route-alt-distance {font-size:26px}
  #pravci .route-history-controls {flex-wrap:wrap;gap:12px 20px}
  #pravci .route-history-notice {margin-left:auto;padding-top:0}
}
@media(max-width:700px) {
  #pravci {padding-block:57px 56px}
  #pravci .route-layout {width:calc(100% - 40px)}
  #pravci .route-content {display:block;margin-bottom:24px}
  #pravci .route-content .eyebrow {font-size:12px;letter-spacing:.05em;gap:11px}
  #pravci .route-content h2 {font-size:48px;line-height:1.04;margin-top:19px}
  #pravci .route-introduction {max-width:none;padding:0;margin-top:19px}
  #pravci .route-introduction .route-description {font-size:13px;line-height:1.85;max-width:350px}
  #pravci .route-mode-tabs {gap:21px}
  #pravci .route-mode-tabs>button {font-size:14px;min-height:55px;gap:19px;padding-inline:0}
  #pravci .route-mode-tabs>button>span[aria-hidden] {font-size:20px}
  #pravci .route-planner {grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:12px 11px;margin:0;padding:17px 0 18px}
  #pravci .planner-field>span {font-size:12px}
  #pravci .route-planner select {font-size:16px;min-height:44px;padding:8px 8px 8px 0}
  #pravci .route-swap {margin-bottom:1px}
  #pravci .route-plan {grid-column:1/-1;min-height:44px;padding:10px 14px;font-size:12px}
  #pravci .route-history-controls {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px 16px;min-height:0;padding:18px 0}
  #pravci .route-history-controls>label {min-width:0;max-width:none;font-size:12px}
  #pravci .route-history-controls select {font-size:16px;min-height:44px;max-width:100%}
  #pravci #route-history-count {padding:22px 0 0;font-size:12px;align-self:center}
  #pravci .route-history-notice {grid-column:1/-1;margin:0;font-size:12px;line-height:1.6}
  #pravci .route-workspace {gap:21px}
  #pravci .route-toolbar {display:flex;gap:7px;padding:10px 9px}
  #pravci .route-toolbar .route-drive-controls {flex:1;min-width:0;width:auto}
  #pravci .route-toolbar .map-view-controls {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;flex:1.65;min-width:0}
  #pravci .route-toolbar button {justify-content:center;width:100%;min-width:0;min-height:44px;gap:6px;padding:8px 5px;font-size:12px;line-height:1.35;white-space:normal}
  #pravci .route-toolbar button>span[aria-hidden] {display:none}
  #pravci .route-toolbar #route-start,#pravci .route-toolbar #route-pause {min-width:0;flex:1}
  #pravci .route-experience #europe-map {height:430px}
  #pravci #europe-map .map-hud {left:12px;right:12px;bottom:33px;gap:7px;max-width:none;flex-direction:column;align-items:flex-start}
  #pravci #europe-map .map-hud .route-detail {max-width:100%;padding:11px 13px;border-color:#8aabbb4d;background:#071b28e8}
  #pravci #europe-map .route-detail .route-detail-label {font-size:12px;letter-spacing:0;line-height:1.4}
  #pravci #europe-map .route-detail strong {font-size:21px;line-height:1.15;margin-top:6px}
  #pravci #europe-map .route-detail #route-distance {font-size:29px;margin-top:6px}
  #pravci #europe-map .route-detail #route-time {font-size:12px;margin-top:6px}
  #pravci #europe-map .map-view-stage {font-size:12px;padding:6px 8px;max-width:100%}
  #pravci #europe-map .map-coordinate {display:none}
  #pravci .map-playback {grid-template-columns:49px minmax(45px,1fr) 37px 59px;min-height:63px;padding:9px 10px;gap:9px}
  #pravci .map-playback>label {font-size:12px}
  #pravci .map-playback .route-speed-label {display:none}
  #pravci .map-playback output {font-size:12px}
  #pravci .map-playback select {font-size:16px;min-height:44px;padding:7px 4px}
  #pravci .route-map-meta {align-items:flex-start;flex-direction:column;gap:6px;padding:9px 11px 12px}
  #pravci #route-help {font-size:12px;line-height:1.65}
  #pravci .satellite-vintage {font-size:10px;line-height:1.5;text-align:left;letter-spacing:.015em}
  #pravci .route-options-heading {margin-bottom:12px}
  #pravci .route-options-heading h3 {font-size:23px;line-height:1.2}
  #pravci #route-alternatives {grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(260px,84%);gap:10px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#5d849b #0b1c2a;padding:0 0 9px}
  #pravci #route-alternatives>button {padding:16px 32px 17px 15px;min-height:135px;scroll-snap-align:start}
  #pravci #route-alternatives>button>small {font-size:12px}
  #pravci #route-alternatives>button>strong {font-size:18px;line-height:1.3}
  #pravci #route-alternatives .route-alt-distance,#pravci #route-alternatives .route-option-distance {font-size:27px;line-height:1.15}
  #pravci .route-footer {grid-template-columns:minmax(0,1fr);gap:12px;margin-top:14px}
  #pravci .route-footer .selected-route {padding:9px 0 12px;font-size:14px}
  #pravci .route-footer .route-fine {justify-self:start;max-width:none;font-size:12px;line-height:1.8}
  #pravci .route-footer .route-map-foot {display:block;margin:0;padding-top:13px;font-size:12px;line-height:1.8}
  #pravci .route-map-foot .map-attribution {font-size:11px;line-height:1.8;margin-top:10px}
}
@media(max-width:360px) {
  #pravci .route-layout {width:calc(100% - 32px)}
  #pravci .route-mode-tabs {gap:18px}
  #pravci .route-mode-tabs>button {font-size:13px;gap:11px}
  #pravci .route-toolbar {gap:5px;padding-inline:7px}
  #pravci .route-toolbar .map-view-controls {gap:4px;flex:1.6}
  #pravci .route-toolbar button {font-size:12px;padding-inline:3px}
  #pravci #route-alternatives {grid-auto-columns:minmax(240px,88%)}
}
.motion-paused #pravci button,.motion-paused #pravci button::after {transition:none}
@media(prefers-reduced-motion:reduce) {#pravci button,#pravci button::after {transition:none}#pravci #route-alternatives {scroll-behavior:auto;scroll-snap-type:none}}