/* CityBus "Where is my bus?" — embeddable passenger widget.

   Design reference: citybus.ge — white cards on a #f6f6f6 field, CityBus blue
   #00458a for structure, the site's bright blue #0094d7 for anything tappable,
   its teal #3fd2c7 for "running to time", its red #e75747 for a delay. Small
   4px radii, flat surfaces, no shadows heavier than the site's own. FiraGO
   carries both alphabets, so a Georgian and an English screen keep identical
   metrics and the box never changes height when the language does. */

@font-face{ font-family:"FiraGO"; src:url("fonts/firago-medium.woff2") format("woff2");
            font-weight:500; font-display:swap; }
@font-face{ font-family:"FiraGO"; src:url("fonts/firago-semibold.woff2") format("woff2");
            font-weight:600; font-display:swap; }
@font-face{ font-family:"FiraGO"; src:url("fonts/firago-bold.woff2") format("woff2");
            font-weight:700; font-display:swap; }

.wmb{
  --navy:#00458a;      /* citybus.ge primary */
  --blue:#0094d7;      /* citybus.ge link / action */
  --teal:#3fd2c7;      /* on time */
  --red:#e75747;       /* delayed */
  --ink:#2d3745;
  --mut:#696969;
  --line:#e3e7ec;
  --field:#f6f6f6;
  --pale:#d6f1ff;
  margin:0; background:var(--field); color:var(--ink);
  font-family:"FiraGO", "Exo 2", Helvetica, Arial, sans-serif;
  font-weight:500; -webkit-text-size-adjust:100%;
}
.wmb *{ box-sizing:border-box; }
.wrap{ max-width:760px; margin:0 auto; padding:14px; }

/* ---- header ---- */
.wmb-head{ display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.wmb-ico{ width:30px; height:30px; color:var(--navy); flex:0 0 auto; }
.wmb-ico svg{ width:100%; height:100%; display:block; }
.wmb-head h1{
  margin:0; font-size:clamp(17px, 4.6vw, 23px); font-weight:700; color:var(--navy);
  line-height:1.3; letter-spacing:.005em; min-width:0;
}
.lang-pick{ margin-left:auto; display:flex; gap:4px; flex:0 0 auto; }
.lang-btn{
  font:inherit; font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:5px 9px; border:1px solid var(--line); border-radius:4px;
  background:#fff; color:var(--mut); cursor:pointer;
}
.lang-btn.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ---- panels ---- */
.panel{ background:#fff; border:1px solid var(--line); border-radius:4px; padding:14px; }

/* ---- step 1: origin / destination ---- */
.od{ display:flex; align-items:flex-end; gap:8px; }
.fld{ flex:1 1 0; min-width:0; display:block; }
.fld-lab{
  display:block; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mut); margin-bottom:5px;
}
.fld select{
  width:100%; font:inherit; font-size:15px; font-weight:600; color:var(--ink);
  padding:10px 30px 10px 11px; border:1px solid var(--line); border-radius:4px;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5' fill='none' stroke='%230094d7' stroke-width='2.2' stroke-linecap='round'/></svg>") no-repeat right 7px center;
  background-size:18px 18px; -webkit-appearance:none; appearance:none; cursor:pointer;
}
.fld select:focus{ outline:2px solid var(--pale); border-color:var(--blue); }
.swap{
  flex:0 0 auto; width:38px; height:40px; margin-bottom:0; cursor:pointer;
  border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--blue);
}
.swap svg{ width:22px; height:22px; display:block; margin:0 auto; }
.hint{ margin:12px 0 10px; font-size:13px; color:var(--mut); line-height:1.5; }

/* ---- step 1: the departure list ---- */
.list{ display:flex; flex-direction:column; gap:6px; }
.svc{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  font:inherit; cursor:pointer; padding:10px 11px;
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--blue);
  border-radius:4px; color:var(--ink);
}
.svc:hover{ background:#fbfdff; border-color:#cfe0ee; }
.svc.is-gone{ border-left-color:#c4c4c4; color:var(--mut); }
.svc.is-late{ border-left-color:var(--red); }
.svc-time{ font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.svc-time small{ display:block; font-size:10px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mut); }
.svc-mid{ flex:1 1 auto; min-width:0; }
.svc-dest{ font-size:14px; font-weight:600; line-height:1.25; }
.svc-sub{ font-size:11.5px; color:var(--mut); line-height:1.35; margin-top:1px; }
.svc-code{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.03em;
  padding:1px 5px; border:1px solid #f0c9a2; border-radius:3px;
  background:#fff6ec; color:#b5651d; margin-left:5px; vertical-align:1px;
}
.chip{
  flex:0 0 auto; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:4px 8px; border-radius:3px; white-space:nowrap;
}
.chip-ontime{ background:#e6faf8; color:#0f7d74; }
.chip-late{ background:#fdeceb; color:#b7362b; }
.chip-board{ background:#fff4d6; color:#8a5a00; }
.chip-gone{ background:#f0f0f0; color:#696969; }
.chip-live{ background:var(--pale); color:#005c85; }
.empty{ margin:6px 0 0; font-size:13.5px; color:var(--mut); line-height:1.5; }

/* ---- step 2: the live view ---- */
.back{
  display:inline-flex; align-items:center; gap:4px; font:inherit; font-size:13px;
  font-weight:600; color:var(--blue); background:none; border:0; padding:0;
  cursor:pointer; margin-bottom:12px;
}
.back svg{ width:17px; height:17px; }
.live-od{ font-size:15px; font-weight:700; color:var(--navy); line-height:1.35; }
.live-od .od-arrow{ color:var(--blue); margin:0 5px; }
.live-when{ margin-top:10px; display:flex; flex-direction:column; gap:2px; }
.lw-lab{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }
/* centre, not baseline: the red box has symmetric padding, so both times
   share one optical line through the digits */
.lw-times{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.lw-now{ font-size:34px; font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums; }
.lw-was{ font-size:17px; font-weight:600; color:var(--mut); text-decoration:line-through; }
.lw-late{ font-size:12.5px; font-weight:700; padding:3px 7px; border-radius:3px;
  background:#fdeceb; color:#b7362b; }
/* reverse red box: white digits on solid red, the boards' estimate style.
   line-height:1 with even padding top and bottom keeps the digits centred. */
.lw-est{ display:inline-flex; align-items:center; font-size:22px; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1; padding:5px 10px;
  border-radius:3px; background:#b91c1c; color:#fff; }
.svc-est{ display:inline-block; font-size:12px; font-weight:700; margin-top:3px;
  padding:1px 6px; border-radius:3px; background:#b91c1c; color:#fff;
  font-variant-numeric:tabular-nums; }
.live-state{ margin-top:9px; font-size:14px; font-weight:600; line-height:1.45; }
.live-state.st-ontime{ color:#0f7d74; }
.live-state.st-late{ color:#b7362b; }
.live-state.st-gone{ color:var(--mut); }
.live-state.st-plan{ color:var(--ink); }

/* ---- the corridor track ---- */
.track{ margin:16px 0 4px; }
.tr-line{ position:relative; height:6px; border-radius:3px; background:#e8ecf1; }
.tr-done{ position:absolute; inset:0 auto 0 0; width:0; border-radius:3px; background:var(--blue); }
.tr-bus{ position:absolute; top:50%; left:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  color:var(--navy); background:#fff; border:1.5px solid var(--navy); border-radius:50%; padding:2px; }
.tr-bus svg{ width:100%; height:100%; display:block; }
.tr-stops{ position:relative; height:50px; margin-top:6px; }
.tr-stop{ position:absolute; top:0; transform:translateX(-50%); text-align:center; width:80px; }
.tr-stop b{ display:block; font-size:10.5px; font-weight:600; color:var(--mut);
  line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tr-stop i{ display:block; width:7px; height:7px; margin:0 auto 4px; border-radius:50%;
  background:#c4c4c4; font-style:normal; }
.tr-stop.is-mine i{ background:var(--navy); width:9px; height:9px; }
.tr-stop.is-mine b{ color:var(--navy); font-weight:700; }
.tr-stop em{ display:block; font-size:8.5px; font-weight:700; font-style:normal;
  letter-spacing:.04em; color:var(--teal); background:#e6faf8; border-radius:2px;
  padding:0 4px; margin-top:1px; white-space:nowrap; }
.tr-stop.is-mine em{ color:#0f7d74; }
.tr-stop.is-end i{ background:var(--blue); }
/* intermediate labels alternate onto a second line so long Georgian stop names
   never sit on top of each other */
.tr-stop.ln2 b{ margin-top:13px; }
.tr-stop.ln2:before{ content:""; position:absolute; top:11px; left:50%; width:1px;
  height:12px; background:#e0e4ea; }
.tr-stop.no-label b, .tr-stop.no-label em{ display:none; }
/* the two end labels sit at 0% and 100%, so they align inward instead of
   hanging off the edges of the card */
.tr-stop.is-first{ transform:translateX(0); text-align:left; }
.tr-stop.is-first i{ margin-left:0; }
.tr-stop.is-last{ transform:translateX(-100%); text-align:right; }
.tr-stop.is-last i{ margin-right:-4px; }

/* ---- fact rows ---- */
.facts{ margin-top:14px; border-top:1px solid var(--line); }
.fact{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.fact dt{ flex:1 1 auto; font-size:13px; color:var(--mut); margin:0; }
.fact dd{ flex:0 0 auto; margin:0; font-size:14px; font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums; }
.fact dd .sub{ display:block; font-size:11.5px; font-weight:500; color:var(--mut); }
.feed{ margin:11px 0 0; font-size:11.5px; color:var(--mut); line-height:1.5; }
.feed .dot{ display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--teal); margin-right:5px; vertical-align:1px; }
.feed .dot.old{ background:#c4c4c4; }

/* ---- footer ---- */
.wmb-foot{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.wmb-foot .brand{ display:block; line-height:0; }
.foot-note{ font-size:11px; color:var(--mut); }

/* ---- phone ---- */
@media (max-width: 560px){
  .wrap{ padding:11px; }
  .od{ flex-wrap:wrap; }
  .fld{ flex:1 1 100%; }
  .swap{ order:3; width:100%; height:32px; }
  .swap svg{ transform:rotate(90deg); }
  .lw-now{ font-size:30px; }
  /* on a phone there is no room for every name: the dots stay, but only the
     passenger's own stop and their destination are named */
  .tr-stop{ width:64px; }
  .tr-stop b{ font-size:9.5px; }
  .tr-stop:not(.is-mine):not(.is-end) b{ display:none; }
  .tr-stop.ln2 b{ margin-top:0; }
  .tr-stop.ln2:before{ display:none; }

}

/* ---- the live map and the hall-board link ---- */
.map{ height:300px; margin:14px 0 4px; border:1px solid var(--line); border-radius:4px;
  background:#f3f6fa; overflow:hidden; }
.map-canvas{ width:100%; height:100%; display:block; }
/* the marker: the same direction arrow the boards carry in their title tile,
   circled; the point of the arrow is the way the corridor fills */
.tr-bus{ padding:4px; }
/* the table rows (pick list + in-widget board share them) */
.svc.row-t{ border-left:0; display:grid; align-items:center;
  grid-template-columns:auto 86px 1fr auto; gap:10px; }
.svc-estc{ min-width:0; }
.lw-est-sm{ font-size:12.5px; padding:3px 8px; }
.t-head{ display:grid; grid-template-columns:auto 86px 1fr auto; gap:10px;
  align-items:center; padding:6px 11px 0; }
.t-head span{ font-size:10px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mut); }
.b-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.b-title{ font-size:16px; font-weight:700; color:var(--navy); }
.b-modes{ display:flex; gap:4px; }
.b-mode{ font:inherit; font-size:12.5px; font-weight:600; padding:5px 10px;
  border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--mut); cursor:pointer; }
.b-mode.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; }

.board-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:13px;
  font-size:13px; font-weight:600; color:var(--blue); text-decoration:none;
  padding:8px 12px; border:1px solid var(--line); border-radius:4px; background:#fff;
}
.board-link:hover{ background:#fbfdff; border-color:#cfe0ee; }
.board-link svg{ width:17px; height:17px; }
@media (max-width:560px){ .map{ height:240px; }
  .svc.row-t, .t-head{ grid-template-columns:auto 64px 1fr auto; gap:7px; }
  .lw-est-sm{ font-size:11.5px; padding:1px 6px; } }

/* share bar — agencies push a live-tracking link into any messenger */
.sharebar{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.sh{ font:700 13px/1 FiraGO,"Noto Sans Georgian",sans-serif; padding:10px 14px; border-radius:10px;
     text-decoration:none; color:#fff; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.sh-wa{ background:#1faa53; } .sh-tg{ background:#229ed9; } .sh-fb{ background:#1877f2; }
.sh-vb{ background:#7360f2; } .sh-cp{ background:#eef3f9; color:#24425c; border:1px solid #d7e3ee; }
.sh-mr{ background:#123a63; }
.sh:active{ transform:scale(.97); }