@font-face {
    font-family: 'CentroSansPro';
    font-style: normal;
    font-weight: 100;
    src: url('fonts/Parachute - PFCentroSansPro-XThin.otf') format('opentype');
  }
  @font-face {
    font-family: 'CentroSansPro';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/Parachute - PFCentroSansPro-Light.otf') format('opentype');
  }
  @font-face {
    font-family: 'CentroSansPro';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Parachute - PFCentroSansPro-Regular.otf') format('opentype');
  }
  @font-face {
    font-family: 'CentroSansPro';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/Parachute - PFCentroSansPro-Medium.otf') format('opentype');
  }
  @font-face {
    font-family: 'CentroSansPro';
    font-style: italic;
    font-weight: 500;
    src: url('fonts/Parachute - PFCentroSansPro-MediumItalic.otf') format('opentype');
  }
  @font-face {
    font-family: 'CentroSansPro';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/Parachute - PFCentroSansPro-Bold.otf') format('opentype');
  }
  @font-face {
    font-family: 'CentroSansPro';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/Parachute - PFCentroSansPro-Black.otf') format('opentype');
  }
  @font-face {
    font-family: 'CentroSansPro';
    font-style: italic;
    font-weight: 900;
    src: url('fonts/Parachute - PFCentroSansPro-BlackItalic.otf') format('opentype');
  }
  :root{
    /* exact values from tpilet.ee's own main.css */
    --bg:#ff7b00; --bg2:#ff5a3c; --panel:#ffffff; --accent:#ff5000; --accent-dark:#e04600;
    --text:#272727; --muted:#9b9b9b; --border:#ededed; --bg-page:#faf9f7;
    --success:#16a34a; --radius:4px; --gradient-angle:260deg;
    --font-family:'CentroSansPro',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  input, select, button{font-family:inherit;}
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:300;
    background:var(--accent); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
    font-weight:700; text-decoration:none;
  }
  .skip-link:focus{left:0;}
  .tpilet-nav{
    background:#fff; box-shadow:0 4px 10px 0 rgba(54,17,0,.1);
    position:sticky; top:0; z-index:120;
  }
  .tpilet-nav-inner{
    width:100%; padding:0; height:95px;
    display:flex; align-items:center;
  }
  .tpilet-nav-logo{flex:0 0 auto; display:flex; align-items:center; margin-left:35px;}
  .tpilet-nav-logo img{width:91px; height:32px; display:block;}
  .tpilet-nav-links{display:flex; align-items:center; justify-content:center; flex:1; flex-wrap:wrap; height:100%;}
  .tpilet-nav-links a{
    position:relative; color:var(--muted); text-decoration:none; font-size:18px;
    line-height:95px; margin-right:34px; white-space:nowrap; user-select:none;
  }
  .tpilet-nav-links a:last-of-type{margin-right:0;}
  .tpilet-nav-links a:hover{color:var(--accent);}
  .tpilet-nav-links a.active{color:var(--accent); font-weight:700;}
  .tpilet-nav-links a.active:after{
    content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background-color:var(--accent);
  }
  .tpilet-nav-right{flex:0 0 auto; display:flex; align-items:center; height:100%;}
  .tpilet-nav-contact{
    color:var(--muted); font-size:14px; line-height:1.43; letter-spacing:.9px;
    text-align:right; white-space:nowrap;
  }
  .phone-icon{vertical-align:-1px; margin-right:2px;}
  .tpilet-nav-divider{
    flex:0 0 auto; position:relative; align-self:stretch; width:1px; margin:0 25px;
  }
  .tpilet-nav-divider:before{
    content:''; position:absolute; left:0; top:12px; width:1px; height:72px; background-color:var(--muted);
  }
  .tpilet-nav-lang{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; margin-left:25px; margin-right:35px;}
  .tpilet-nav-lang a{color:var(--muted); text-decoration:none;}
  .tpilet-nav-lang a.active{color:var(--accent);}

  /* Hamburger button — hidden on desktop, shown below the breakpoint */
  .tpilet-nav-hamburger{
    display:none; background:none; border:none; cursor:pointer; color:var(--accent);
    padding:10px; margin-right:25px; align-items:center; justify-content:center;
  }
  /* Full mobile menu overlay, matching tpilet.ee's mobile design: white
     panel with the logo + X on top, stacked centered links separated by
     light borders, a language row, and gray contact info at the bottom. */
  .mobile-menu-overlay{
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:200;
    background:#fff; overflow-y:auto;
  }
  .mobile-menu-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 25px 18px 25px;
  }
  .mobile-menu-logo{width:91px; height:32px; display:block;}
  .mobile-menu-close{
    background:none; border:none; cursor:pointer; color:var(--accent); padding:8px;
    display:flex; align-items:center; justify-content:center;
  }
  .mobile-menu-link{
    display:block; text-align:center; padding:24px 16px;
    color:var(--text); text-decoration:none; font-size:19px;
    border-top:1px solid #eee;
  }
  .mobile-menu-link:first-of-type{border-top:none;}
  .mobile-menu-link.active{color:var(--accent); font-weight:700;}
  .mobile-menu-lang-row{
    display:flex; align-items:center; justify-content:center; gap:70px;
    padding:24px 16px; border-top:1px solid #eee; border-bottom:1px solid #eee;
    font-size:19px; font-weight:700;
  }
  .mobile-menu-lang-row a{color:var(--muted); text-decoration:none;}
  .mobile-menu-lang-row a.active{color:var(--accent);}
  .mobile-menu-contact{
    text-align:center; color:var(--muted); font-size:15px; letter-spacing:.9px;
    padding:24px 16px; line-height:2;
  }
  /* Breakpoint raised from 900px to 1120px: between ~900-1120px the six
     18px nav links no longer fit next to the logo + contact + language
     switcher, so they wrapped and visually spilled over the search box.
     Below this width everything collapses into the hamburger menu instead
     (which also holds the language switcher, like the real tpilet.ee). */
  @media (max-width:1120px){
    .tpilet-nav-links{display:none;}
    .tpilet-nav-contact{display:none;}
    .tpilet-nav-divider{display:none;}
    .tpilet-nav-lang{display:none;}
    .tpilet-nav-hamburger{display:flex;}
    /* .tpilet-nav-links normally flex:1's to fill the middle and push
       .tpilet-nav-right to the far edge — once it's hidden above, nothing
       is left to do that pushing, so the hamburger ends up sitting right
       next to the logo instead of on the right. */
    .tpilet-nav-right{margin-left:auto;}
  }
  @media (max-width:768px){
    body{ background-attachment: scroll; } /* 'fixed' is buggy on many mobile browsers */
  }
  body{
    margin:0; font-family:var(--font-family);
    background: var(--bg-page) url('DJI_0006_Aurora2017_HDR.jpg') center top / cover no-repeat fixed;
    color:var(--text); min-height:400px;
  }
  #app{max-width:860px;margin:0 auto;padding:0 18px 80px;}
  h1{color:#fff;font-size:24px;margin:0 0 4px;}
  .subtitle{color:#fed7aa;font-size:14px;margin:0;}
  .hero-band{
    padding:28px 0 0 0;
  }
  .hero-band-inner{max-width:860px; margin:0 auto; padding:0 18px;}
  .tabs{display:flex; gap:8px;}
  .tab-btn{
    flex:1; padding:15px 16px; border-radius:14px 14px 0 0; border:none;
    background: rgba(20,15,10,.42);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color:#fff; font-size:14.5px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background .15s, color .15s, filter .15s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  }
  .tab-btn .tab-icon{font-size:15px;}
  .tab-btn:hover:not(.active){background:rgba(20,15,10,.55);}
  .tab-btn.active{background:#fff; color:var(--accent-dark); box-shadow:0 -3px 10px rgba(0,0,0,.1);}
  .card{
    background:var(--panel); border-radius:var(--radius); padding:24px;
    box-shadow:0 0 35px 0 rgba(0,0,0,.06); margin-bottom:20px;
  }
  #app > #loadingCard{ margin-top:24px; }
  #searchView > .card, #timetableView > .card{
    border-radius:0 0 var(--radius) var(--radius);
  }
  #loadingScreen{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 20px;}
  .spinner{width:38px;height:38px;border:4px solid #ffe4d6;border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  #loadingText{color:var(--muted);font-size:14px;}
  #progBarWrap{width:220px;height:6px;background:#e2e8f0;border-radius:99px;overflow:hidden;}
  #progBar{height:100%;width:0%;background:var(--accent);transition:width .2s;}

  .direct-only-note{
    margin:0 0 16px; font-size:12.5px; font-weight:600; color:var(--accent-dark);
    background:#fff1ea; border:1px solid #fed7aa; border-radius:8px; padding:8px 12px;
  }
  .row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
  .field{position:relative;flex:1;min-width:220px;}
  .field label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
  .field input[type=text], .field input[type=date], .field input[type=time]{
    width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px;
    font-size:15px; outline:none; transition:border-color .15s;
  }
  .field input:focus{border-color:var(--accent);}
  .input-wrap{position:relative;}
  .input-wrap input[type=text]{padding-right:34px;}
  .clear-input-btn{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:24px; height:24px; border:none; background:transparent; color:var(--muted);
    font-size:20px; line-height:1; cursor:pointer; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  .clear-input-btn:hover{background:#f1f1f1; color:var(--accent-dark);}
  .swapBtn{
    flex:0 0 auto; width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border);
    background:#fff;cursor:pointer;font-size:18px;color:var(--accent);margin-bottom:2px;
    transition:background .15s;
  }
  .swapBtn:hover{background:#fff1ea;}
  .suggestions{
    position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--border);
    border-radius:10px; margin-top:4px; max-height:260px; overflow-y:auto; z-index:20;
    box-shadow:0 12px 24px -8px rgba(15,23,42,.2); display:none;
  }
  .suggestions.show{display:block;}
  .suggestion-item{padding:10px 14px;cursor:pointer;font-size:14px;border-bottom:1px solid #f1f5f9;}
  .suggestion-item:last-child{border-bottom:none;}
  .suggestion-item:hover, .suggestion-item.active{background:#fff1ea;}
  .suggestion-item .s-area{color:var(--muted);font-size:12px;}
  .suggestion-item .s-dir{color:var(--accent-dark);font-size:11.5px;font-weight:600;margin-top:2px;}

  .searchBtn{
    margin-top:18px; width:100%; padding:14px; color:#fff; border:none;
    background: linear-gradient(var(--gradient-angle), var(--bg) 0%, var(--bg2) 100%);
    box-shadow: 0 0 15px 0 rgba(255,80,0,.2);
    border-radius:var(--radius); font-size:16px; font-weight:700; text-transform:uppercase;
    letter-spacing:.5px; cursor:pointer; transition:opacity .15s;
  }
  .searchBtn:hover{opacity:.9;}
  .searchBtn:disabled{background:#c6c6c6;box-shadow:none;cursor:not-allowed;}

  .results-header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px 4px;}
  #resultsMeta{color:#fff; font-size:13px; text-shadow:0 1px 4px rgba(0,0,0,.5); font-weight:600;}
  #ttMeta{color:#fff; font-size:13px; text-shadow:0 1px 4px rgba(0,0,0,.5); font-weight:600;}
  .print-btn{
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    background:rgba(255,255,255,.9); color:var(--accent-dark); border:1px solid rgba(255,255,255,.9);
    border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
  }
  .print-btn:hover{background:#fff;}
  .trip-card{
    background:#fff; border-radius:12px; padding:16px 18px; margin-bottom:10px;
    display:flex; align-items:center; gap:16px; box-shadow:0 2px 8px -4px rgba(15,23,42,.15);
    border:1px solid var(--border);
  }
  .trip-icon{font-size:24px;flex:0 0 auto;width:36px;text-align:center;}
  .trip-times{flex:0 0 auto;min-width:150px;font-variant-numeric:tabular-nums;}
  .trip-times .dep{font-size:19px;font-weight:700;}
  .trip-times .arrow{color:var(--muted);margin:0 6px;font-size:13px;}
  .trip-times .arr{font-size:19px;font-weight:700;}
  .trip-times .dur{color:var(--muted);font-size:12px;margin-top:2px;}
  .trip-route{flex:1;min-width:120px;}
  .trip-route .rname{font-weight:600;font-size:14px;}
  .trip-route .rdesc{color:var(--muted);font-size:12px;margin-top:2px;}
  .badge{
    display:inline-block; background:#fff1ea; color:var(--accent-dark); font-size:11px; font-weight:700;
    padding:2px 8px; border-radius:99px; margin-right:6px;
  }
  .badge.cat-badge{background:#f5f3ff; color:#6d28d9;}
  .empty-state{text-align:center; padding:40px 20px; color:var(--muted);}
  .empty-state .big{font-size:32px;margin-bottom:8px;}
  .hint-box{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:10px;padding:12px 14px;font-size:13px;margin-top:14px;}

  .days-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
  .day-chip{
    font-size:11px; font-weight:700; width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; background:#f1f5f9; color:#94a3b8;
  }
  .day-chip.on{background:var(--accent); color:#fff;}
  .validity{color:var(--muted); font-size:11.5px; margin-top:6px;}
  .agency-line{color:#475569; font-size:12px; margin-top:6px; font-weight:600;}
  .stop-dir-note{color:var(--accent-dark); font-size:12px; margin-top:6px; font-weight:600;}
  .route-note{color:#9a3412; font-size:12px; margin-top:6px; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:6px 10px;}
  .exceptions-box{margin-top:8px; font-size:12px;}
  .exceptions-box .exc-remove{color:#b91c1c;}
  .exceptions-box .exc-add{color:#15803d;}
  .exceptions-box .exc-line{margin-top:3px;}
  .midStopsBtn{
    margin-top:10px; padding:7px 12px; border-radius:8px; border:1.5px solid var(--border);
    background:#f8fafc; color:var(--accent-dark); font-size:12.5px; font-weight:600; cursor:pointer;
    transition:background .15s;
  }
  .midStopsBtn:hover{background:#fff1ea;}
  .mid-stops{margin-top:10px; border-left:2px solid #ffe4d6; padding-left:12px;}
  .mid-stops-list{display:flex; flex-direction:column; gap:2px;}
  .mid-stop-row{display:flex; gap:10px; font-size:12.5px; padding:4px 0; color:#334155;}
  .mid-stop-row.endpoint{font-weight:700; color:var(--accent-dark);}
  .mid-stop-time{min-width:100px; font-variant-numeric:tabular-nums; color:#0f172a; font-weight:600;}
  .mid-stop-name{flex:1;}
  .mid-stop-area{color:var(--muted); font-weight:400;}
  .mid-stop-note{
    display:inline-block; background:#fff7ed; color:#9a3412; font-size:10.5px; font-weight:700;
    padding:1px 6px; border-radius:99px; margin-left:4px; vertical-align:middle;
  }
  .mid-stops-empty{color:var(--muted); font-size:12.5px; font-style:italic;}

  .time-picker{
    display:flex; align-items:center; gap:4px; border:1.5px solid var(--border); border-radius:10px;
    padding:6px 8px; background:#fff;
  }
  .time-picker select{
    border:none; outline:none; font-size:16px; font-weight:600; color:var(--text);
    background:transparent; padding:4px 2px; font-variant-numeric:tabular-nums; cursor:pointer;
  }
  .time-sep{font-weight:700; color:var(--muted);}
  .time-quick{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
  .chip-btn{
    padding:7px 14px; border-radius:99px; border:1.5px solid var(--border); background:#fff;
    color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s;
  }
  .chip-btn:hover{border-color:var(--accent);}
  .chip-btn.active{background:var(--accent); border-color:var(--accent); color:#fff;}
  .vehicle-filter{display:flex; gap:8px; flex-wrap:wrap;}
  .vehicle-chip{
    padding:9px 16px; border-radius:99px; border:1.5px solid var(--border); background:#fff;
    color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; transition:all .15s;
    display:flex; align-items:center; gap:6px;
  }
  .vehicle-chip:hover{border-color:var(--accent);}
  .vehicle-chip.active{background:#fff1ea; border-color:var(--accent); color:var(--accent-dark);}

  .date-picker-btn{
    width:100%; padding:12px 38px 12px 14px; border:1.5px solid var(--border); border-radius:10px;
    font-size:15px; text-align:left; background:#fff; cursor:pointer; color:var(--text);
    font-family:inherit;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239b9b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-repeat:no-repeat; background-position:right 12px center; background-size:18px 18px;
  }
  .date-picker-btn:focus{border-color:var(--accent); outline:none;}
  .date-picker-panel{
    position:absolute; top:100%; left:0; margin-top:4px; background:#fff; border:1px solid var(--border);
    border-radius:10px; box-shadow:0 12px 24px -8px rgba(15,23,42,.2); z-index:25; padding:12px; width:280px;
  }
  .dp-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
  .dp-nav{
    width:28px; height:28px; border-radius:50%; border:none; background:#f8fafc; color:var(--accent-dark);
    font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .dp-nav:hover{background:#fff1ea;}
  .dp-month-label{font-weight:700; font-size:14px;}
  .dp-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px;}
  .dp-weekdays div{text-align:center; font-size:11px; font-weight:700; color:var(--muted); padding:4px 0;}
  .dp-days{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
  .dp-day{
    text-align:center; padding:7px 0; font-size:13px; border-radius:6px; cursor:pointer; color:var(--text);
    border:none; background:none; font-family:inherit; width:100%; display:block;
  }
  .dp-day:hover{background:#fff1ea;}
  .dp-day:focus-visible{outline:2px solid var(--accent-dark); outline-offset:1px;}
  .dp-day.empty{cursor:default;}
  .dp-day.empty:hover{background:none;}
  .dp-day.today{font-weight:700; color:var(--accent-dark);}
  .dp-day.selected{background:var(--accent); color:#fff;}
  .dp-day.selected:hover{background:var(--accent);}

  footer{text-align:center;color:var(--muted);font-size:12px;margin-top:30px;}

  /* ============ Mobile (placed last so it wins over earlier same-specificity rules) ============ */
  @media (max-width:600px){
    /* Trip result cards: icon+times stay on one compact row, the route
       details (badges, name, agency, notes, buttons) wrap to their own
       full-width row below instead of forcing horizontal overflow — the
       fixed min-width on .trip-times plus flex:1 on .trip-route otherwise
       need ~370px+ of horizontal space that doesn't exist on narrow phones. */
    .trip-card{flex-wrap:wrap;}
    .trip-times{min-width:0;}
    .trip-route{flex-basis:100%; min-width:100%;}
    /* Slightly smaller tab text/padding so the longer "Sõiduplaan" label is
       less likely to wrap onto two uneven lines on narrow phones. */
    .tab-btn{font-size:13px; padding:13px 10px;}
    .hero-band-inner{padding:0 12px;}
    #app{padding:0 12px 60px;}
    .card{padding:18px;}
    .date-picker-panel{width:min(280px, calc(100vw - 24px));}
  }

  /* ============ Print — only the results list, nothing else ============ */
  @media print{
    body{ background:#fff !important; }
    .tpilet-nav, .hero-band, #loadingCard, .mobile-menu-overlay,
    #searchView > .card, #timetableView > .card,
    .print-btn, footer{
      display:none !important;
    }
    .results-header{ margin-top:0; }
    #resultsMeta, #ttMeta{ color:#000 !important; text-shadow:none !important; }
    .trip-card{ box-shadow:none; border:1px solid #ddd; break-inside:avoid; }
    #app{ padding:0; }
    /* Active/inactive weekday circles are normally told apart only by a
       background-color, which most browsers strip by default when printing
       (to save ink) — that made every day look identical (or worse, made
       the "active" label invisible: white text on a background that failed
       to print). Force the colors to actually print, and back that up with
       a black-fill-vs-outline-only distinction that still works even if a
       particular printer/browser ignores the color-adjust hint entirely. */
    .day-chip{
      -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact;
      background:#fff !important; color:#94a3b8 !important; border:1.5px solid #94a3b8;
    }
    .day-chip.on{
      background:#000 !important; color:#fff !important; border-color:#000; font-weight:900;
    }
  }