@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Doto:wght,ROND@852,23&display=swap');

body.djls-bus-open { overflow: hidden !important; }
.djls-bus-backdrop {
  position: fixed; inset: 0; z-index: 2147483000; background: rgba(0,0,0,.58);
}
.djls-bus-dialog {
  --bg:#0a0e2b; --yellow:#ffce19; --muted:#a5a9c4; --blue:#2271b1;
  position: fixed; z-index: 2147483001; left:50%; top:50%; transform:translate(-50%,-50%);
  box-sizing:border-box; width:min(760px,calc(100vw - 36px)); max-height:calc(100dvh - 36px);
  overflow:auto; background:var(--bg); color:#fff; border:1px solid #343a5c; border-radius:0;
  box-shadow:0 22px 70px rgba(0,0,0,.52); font-family:'Barlow',Arial,sans-serif;
}
.djls-bus-dialog * { box-sizing:border-box; }
.djls-bus-head { position:relative; padding:24px 62px 16px 28px; }
.djls-bus-head-label { display:block; color:var(--yellow); font-size:20px; line-height:1.05; font-weight:400; }
.djls-bus-head-station { display:block; margin-top:3px; color:var(--yellow); font-size:52px; line-height:1; font-weight:400; letter-spacing:-.5px; }
.djls-bus-close { position:absolute; right:14px; top:14px; width:42px; height:42px; border:0; background:transparent; color:#fff; font:400 32px/1 Arial,sans-serif; cursor:pointer; }
.djls-bus-meta { padding:0 28px 18px; color:rgba(255,255,255,.86); font-size:16px; }
.djls-bus-provider-bar { display:flex; width:100%; border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); }
.djls-bus-provider { flex:1 1 0; min-height:44px; padding:8px 10px; border:0; border-right:1px solid rgba(255,255,255,.12); border-radius:0; background:#151a3a; color:#fff; font:600 13px/1.15 'Barlow',Arial,sans-serif; cursor:pointer; }
.djls-bus-provider:last-child { border-right:0; }
.djls-bus-provider.is-active { background:var(--yellow); color:#000; }
.djls-bus-body { padding:22px 28px 28px; }
.djls-bus-source-warning { margin:0 0 18px; padding:10px 12px; border-left:4px solid var(--yellow); background:rgba(255,206,25,.08); color:#fff; font-size:13px; line-height:1.35; }
.djls-bus-next-top { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:8px; }
.djls-bus-next-label { color:rgba(255,255,255,.70); font-size:16px; }
.djls-bus-next-time { color:var(--yellow); font-size:42px; line-height:.95; font-weight:500; font-variant-numeric:tabular-nums; }
.djls-bus-next-provider { color:rgba(255,255,255,.72); font-size:13px; text-align:right; }
.djls-bus-direction-control { display:grid; grid-template-columns:58px minmax(0,1fr) 58px; min-height:70px; width:100%; }
.djls-bus-destination { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:70px; padding:10px 16px; background:var(--yellow); color:#000; font-size:22px; line-height:1.1; font-weight:700; text-align:center; }
.djls-bus-destination .djls-bus-doto { min-width:0; font-family:'Doto','Barlow',Arial,sans-serif; font-weight:852; font-variation-settings:'wght' 852,'ROND' 23; font-size:30px; overflow-wrap:anywhere; }
.djls-bus-direction-arrow { appearance:none; -webkit-appearance:none; position:relative; display:block; width:58px; min-height:70px; padding:0; border:0; border-radius:0; background:var(--blue); cursor:pointer; }
.djls-bus-direction-arrow::before { content:''; position:absolute; left:50%; top:50%; width:24px; height:24px; transform:translate(-50%,-50%); background:center/24px 24px no-repeat; }
.djls-bus-direction-prev::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M42 12 L22 32 L42 52' fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
.djls-bus-direction-next::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M22 12 L42 32 L22 52' fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
.djls-bus-direction-arrow:hover, .djls-bus-direction-arrow:focus-visible { background:#1b5f98; outline:none; }
.djls-bus-direction-arrow:focus-visible { box-shadow:inset 0 0 0 3px #ffffff; }
.djls-bus-direction-arrow:disabled { opacity:.45; cursor:default; }
.djls-bus-trip-times { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:24px 0 18px; }
.djls-bus-trip-col:last-child { text-align:right; }
.djls-bus-trip-caption { display:block; color:rgba(255,255,255,.70); font-size:15px; line-height:1.2; }
.djls-bus-trip-place { display:block; min-height:18px; margin-top:2px; color:#fff; font-size:12px; font-weight:600; }
.djls-bus-trip-value { display:block; margin-top:6px; color:var(--yellow); font-size:60px; line-height:.92; font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.djls-bus-countdown-label { color:rgba(255,255,255,.70); text-align:right; font-size:18px; }
.djls-bus-countdown { margin:4px 0 20px; color:var(--yellow); text-align:right; font-size:44px; line-height:1; font-weight:400; font-variant-numeric:tabular-nums; }
.djls-bus-progress { margin:8px 0 20px; padding-top:14px; border-top:1px solid rgba(255,255,255,.13); }
.djls-bus-progress-meta { margin-bottom:10px; color:rgba(255,255,255,.62); font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
.djls-bus-track-scroll { width:100%; overflow-x:auto; overflow-y:hidden; padding:7px 0 5px; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.djls-bus-track-canvas { position:relative; height:76px; min-width:100%; padding:0 34px; }
.djls-bus-track { position:absolute; left:34px; right:34px; top:11px; height:7px; background:rgba(255,255,255,.20); }
.djls-bus-track-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--yellow); }
.djls-bus-track-dot { position:absolute; top:50%; left:0; z-index:4; width:15px; height:15px; transform:translate(-50%,-50%); background:var(--yellow); border:3px solid var(--bg); box-shadow:0 0 0 2px var(--yellow); border-radius:50%; }
.djls-bus-track-stop { position:absolute; top:7px; width:86px; transform:translateX(-43px); text-align:center; color:#fff; font-family:'Barlow',Arial,sans-serif; pointer-events:none; }
.djls-bus-track-stop-node { display:block; width:9px; height:9px; margin:0 auto 8px; border:2px solid var(--bg); border-radius:50%; background:rgba(255,255,255,.88); box-shadow:0 0 0 1px rgba(255,255,255,.38); }
.djls-bus-track-stop-name { display:block; min-height:20px; color:rgba(255,255,255,.76); font-size:9px; line-height:1.05; font-weight:600; overflow-wrap:anywhere; }
.djls-bus-track-stop-time { display:block; margin-top:3px; color:#fff; font-size:12px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums; }
.djls-bus-departures-toggle { position:relative; display:flex; align-items:center; width:100%; min-height:62px; padding:10px 72px 10px 16px; border:0; border-radius:0; background:var(--yellow); color:#000; font:700 18px/1.1 'Barlow',Arial,sans-serif; cursor:pointer; text-align:left; }
.djls-bus-departures-toggle::after { content:''; position:absolute; right:0; top:0; bottom:0; width:58px; background:var(--blue) center/24px 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 22 L32 42 L52 22' fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
.djls-bus-departures-toggle[aria-expanded='true']::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 42 L32 22 L52 42' fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
.djls-bus-departures { margin-top:8px; border:1px solid rgba(255,255,255,.16); }
.djls-bus-departures[hidden] { display:none !important; }
.djls-bus-row { display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:10px; align-items:center; min-height:48px; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.10); }
.djls-bus-row:last-child { border-bottom:0; }
.djls-bus-row-time { color:var(--yellow); font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }
.djls-bus-row-destination { color:#fff; font-size:14px; font-weight:700; }
.djls-bus-row-provider { color:rgba(255,255,255,.58); font-size:10px; text-align:right; }
.djls-bus-empty { padding:18px; color:#fff; background:#151a3a; font-size:14px; line-height:1.45; }
.djls-bus-empty a { color:var(--yellow); }
.djls-bus-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.djls-bus-action { display:flex; align-items:center; justify-content:center; min-height:48px; padding:10px; border:0; border-radius:0; background:var(--muted); color:#000; text-decoration:none; font:700 14px/1.1 'Barlow',Arial,sans-serif; cursor:pointer; }
.djls-bus-action:first-child { background:var(--yellow); }
.djls-bus-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:12px; }
.djls-bus-status { min-height:18px; color:rgba(255,255,255,.65); font-size:11px; }
.djls-bus-crest { display:block; width:34px; max-height:42px; object-fit:contain; }

@media (max-width:767px), (max-width:1024px) and (max-height:600px) and (orientation:landscape) {
  .djls-bus-dialog { inset:0; left:0; top:0; transform:none; width:100%; height:100dvh; max-height:none; border:0; }
  .djls-bus-head { padding:18px 52px 12px 20px; text-align:right; }
  .djls-bus-head-label { font-size:14px; }
  .djls-bus-head-station { font-size:30px; }
  .djls-bus-meta { padding:0 20px 12px; text-align:right; font-size:12px; }
  .djls-bus-provider { min-height:42px; padding:6px 4px; font-size:10px; }
  .djls-bus-body { padding:18px 20px 24px; }
  .djls-bus-next-time { font-size:32px; }
  .djls-bus-direction-control { grid-template-columns:48px minmax(0,1fr) 48px; min-height:60px; }
  .djls-bus-direction-arrow { width:48px; min-height:60px; }
  .djls-bus-destination { min-height:60px; padding:8px 8px; font-size:17px; }
  .djls-bus-destination .djls-bus-doto { font-size:23px; }
  .djls-bus-track-canvas { height:73px; }
  .djls-bus-track-stop { width:78px; transform:translateX(-39px); }
  .djls-bus-track-stop-name { font-size:8px; }
  .djls-bus-track-stop-time { font-size:11px; }
  .djls-bus-trip-times { gap:18px; margin:20px 0 16px; }
  .djls-bus-trip-value { font-size:44px; }
  .djls-bus-countdown-label { font-size:13px; }
  .djls-bus-countdown { font-size:42px; }
  .djls-bus-track-stops { font-size:8px; }
}

/* 0.2.0 – SiMBus linije 100/300 */
.djls-bus-source-warning a {
  color: var(--yellow);
  font-weight: 700;
  text-decoration: underline;
}
.djls-bus-destination .djls-bus-doto {
  font-size: clamp(18px, 2.1vw, 30px);
}
@media (max-width:767px), (max-width:1024px) and (max-height:600px) and (orientation:landscape) {
  .djls-bus-destination .djls-bus-doto { font-size: clamp(15px, 5vw, 23px); }
}

/* 0.2.1 – čitljiva shematska trasa s jednakim razmakom stajališta */
.djls-bus-track-canvas {
  height: 88px;
  min-width: 100%;
  padding: 0;
}
.djls-bus-track-stop {
  width: 96px;
  transform: translateX(-48px);
}
.djls-bus-track-stop-name {
  min-height: 22px;
  font-size: 10px;
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.djls-bus-track-stop-time {
  margin-top: 3px;
  font-size: 12px;
}
@media (max-width:767px), (max-width:1024px) and (max-height:600px) and (orientation:landscape) {
  .djls-bus-track-canvas { height: 84px; }
  .djls-bus-track-stop { width: 90px; transform:translateX(-45px); }
  .djls-bus-track-stop-name { font-size:9px; line-height:1.08; }
  .djls-bus-track-stop-time { font-size:11px; }
}
\n\n/* 0.2.2 – objedinjeni polasci, poravnanje popisa i čitljivija trasa */\n.djls-bus-track-canvas {\n  height: 104px;\n}\n.djls-bus-track {\n  top: 14px;\n  height: 6px;\n}\n.djls-bus-track-stop {\n  top: 0;\n  width: 112px;\n  transform: translateX(-56px);\n}\n.djls-bus-track-stop-node {\n  position: absolute;\n  top: 10px;\n  left: 50%;\n  box-sizing: content-box;\n  width: 10px;\n  height: 10px;\n  margin: 0;\n  transform: translateX(-50%);\n}\n.djls-bus-track-stop-name {\n  min-height: 30px;\n  padding-top: 36px;\n  font-size: 12px;\n  line-height: 1.12;\n  font-weight: 600;\n}\n.djls-bus-track-stop-time {\n  margin-top: 4px;\n  font-size: 13px;\n}\n.djls-bus-row {\n  grid-template-columns: 76px minmax(0,1fr) minmax(190px, 32%);\n  gap: 16px;\n  min-height: 68px;\n  padding: 12px 14px;\n  align-items: center;\n}\n.djls-bus-row-time {\n  font-size: 20px;\n}\n.djls-bus-row-main {\n  min-width: 0;\n}\n.djls-bus-row-destination {\n  font-size: 15px;\n  line-height: 1.15;\n}\n.djls-bus-row-meta {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: center;\n  gap: 4px;\n  text-align: right;\n}\n.djls-bus-row-provider {\n  color: rgba(255,255,255,.62);\n  font-size: 11px;\n  line-height: 1.2;\n  text-align: right;\n}\n.djls-bus-row-date {\n  color: rgba(255,255,255,.52);\n  font-size: 11px;\n  line-height: 1.2;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n@media (max-width: 680px) {\n  .djls-bus-row {\n    grid-template-columns: 62px minmax(0,1fr);\n    gap: 10px 12px;\n    align-items: start;\n  }\n  .djls-bus-row-meta {\n    grid-column: 2;\n    align-items: flex-start;\n    text-align: left;\n    margin-top: -3px;\n  }\n  .djls-bus-row-provider,\n  .djls-bus-row-date {\n    text-align: left;\n  }\n}\n@media (max-width:767px), (max-width:1024px) and (max-height:600px) and (orientation:landscape) {\n  .djls-bus-track-canvas { height: 100px; }\n  .djls-bus-track-stop { width: 104px; transform:translateX(-52px); }\n  .djls-bus-track-stop-name { min-height:28px; padding-top:35px; font-size:11px; line-height:1.1; }\n  .djls-bus-track-stop-time { font-size:12px; }\n}\n