/* ============================================================================
   Ocean Leader — Vessel Schedule v3
   Inspired by OOCL, MSC, Maersk — clean, professional, customer-friendly
   ============================================================================ */
:root{
  --navy:#0a1e3d; --navy2:#0d2b57; --navy3:#13325f;
  --teal:#00aebc; --teal2:#007d8a; --teal-soft:#e6f7f9;
  --orange:#f47920; --orange2:#d96510;
  --white:#fff; --bg:#f4f7fb; --bg2:#eaf0f7;
  --text:#1a2238; --text2:#3a4660; --muted:#6b7891;
  --border:#e2e8f0; --border2:#d6deea;
  --green:#10b981; --green-soft:#e7f8f1;
  --gold:#f5b400; --red:#e53e3e;
  --fh:'Barlow Condensed',sans-serif;
  --fb:'Barlow',sans-serif;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --shadow-1:0 1px 3px rgba(10,30,61,.06), 0 1px 2px rgba(10,30,61,.04);
  --shadow-2:0 4px 16px rgba(10,30,61,.08);
  --shadow-3:0 10px 30px rgba(10,30,61,.12);
  --shadow-hover:0 18px 40px rgba(10,30,61,.16);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--fb); background:var(--bg); color:var(--text);
  overflow-x:hidden; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:4px}

.container{max-width:1320px;margin:0 auto;padding:0 28px}

/* ─── NAVBAR ───────────────────────────────────────────────────────────── */
.site-navbar{
  position:fixed;top:0;left:0;right:0;z-index:2000;
  background:#fff;height:70px;
  box-shadow:0 1px 0 var(--border), 0 2px 18px rgba(10,30,61,.06);
  display:flex;align-items:center;
}
.snav-inner{display:flex;align-items:center;width:100%;gap:0}
.snav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.snav-logo img{height:42px;display:block}
.snav-brand-main{font-family:var(--fh);font-size:.98rem;font-weight:900;color:var(--navy);letter-spacing:.6px;line-height:1.15}
.snav-brand-sub{font-size:.6rem;color:var(--muted);letter-spacing:.3px;line-height:1.2}
.snav-links{list-style:none;display:flex;align-items:center;gap:2px;margin:0 auto;padding:0}
.snav-links li a{
  display:block;padding:9px 14px;
  font-size:.72rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--navy);border-radius:6px;transition:color .18s,background .18s;
}
.snav-links li a:hover{color:var(--teal);background:var(--teal-soft)}
.snav-links li a.snav-active{color:var(--teal);background:var(--teal-soft)}
.snav-links li a.snav-active i{margin-right:5px}
.snav-quote-btn{
  flex-shrink:0;margin-left:14px;
  background:var(--orange);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  padding:10px 18px;border-radius:8px;
  transition:transform .15s,background .18s,box-shadow .18s;
  box-shadow:0 3px 12px rgba(244,121,32,.32);
}
.snav-quote-btn:hover{background:var(--orange2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(244,121,32,.4)}
.snav-hamburger{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.snav-hamburger span{width:22px;height:2px;background:var(--navy);border-radius:2px}

/* ─── HERO HEADER ──────────────────────────────────────────────────────── */
.sch-header{
  position:relative;margin-top:70px;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(0,174,188,.22), transparent 60%),
    radial-gradient(900px 400px at -10% 110%, rgba(244,121,32,.14), transparent 55%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy2) 55%, var(--navy3) 100%);
  color:#fff;overflow:hidden;padding:64px 0 110px;
}
.grid-lines{
  position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, #000 0%, transparent 90%);
}
.wave-deco{
  position:absolute;bottom:-2px;left:0;right:0;height:80px;pointer-events:none;
  background:
    radial-gradient(60% 80% at 50% 100%, rgba(255,255,255,0) 50%, var(--bg) 51%);
  filter:blur(.5px);
}
.sch-hero{position:relative;z-index:1;text-align:center;max-width:980px;margin:0 auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,174,188,.18);color:#7fe5ee;
  padding:7px 14px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  border:1px solid rgba(0,174,188,.35);
  margin-bottom:18px;
}
.sch-hero h1{
  font-family:var(--fh);font-weight:800;
  font-size:clamp(2.2rem, 4.6vw, 3.6rem);
  line-height:1.05;letter-spacing:.3px;color:#fff;
  margin-bottom:14px;
}
.sch-hero h1 span{
  background:linear-gradient(90deg, var(--teal) 0%, #7be3ec 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sch-hero > p{
  color:#c8d4e8;font-size:1.02rem;max-width:680px;margin:0 auto 34px;line-height:1.6;
}

/* ─── SEARCH PANEL ─────────────────────────────────────────────────────── */
.search-panel{
  background:#fff;border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);
  padding:22px;
  text-align:left;
  border:1px solid rgba(255,255,255,.6);
  position:relative;
}
.search-grid{
  display:grid;
  grid-template-columns: 1fr 44px 1fr 1fr auto;
  gap:14px;align-items:end;
}
.sf{display:flex;flex-direction:column;gap:7px;min-width:0}
.sf label{
  font-size:.7rem;font-weight:800;color:var(--navy);
  letter-spacing:.8px;text-transform:uppercase;
  display:flex;align-items:center;gap:7px;
}
.sf label i{color:var(--teal);font-size:.78rem}
.select-wrap{position:relative}
.select-wrap select,
.select-wrap input{
  width:100%;font-family:var(--fb);font-size:.92rem;font-weight:600;
  color:var(--text);background:var(--bg);
  border:1.5px solid var(--border);border-radius:var(--r-md);
  padding:13px 36px 13px 14px;
  appearance:none;-webkit-appearance:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
  cursor:pointer;
}
.select-wrap input[type="date"]{padding-right:14px;cursor:text}
.select-wrap select:focus,
.select-wrap input:focus{
  outline:0;border-color:var(--teal);background:#fff;
  box-shadow:0 0 0 4px rgba(0,174,188,.15);
}
.sw-caret{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:.7rem;pointer-events:none;
}

.swap-btn{
  width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:#fff;border:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;align-self:end;margin-bottom:2px;
  box-shadow:0 4px 12px rgba(10,30,61,.25);
  transition:transform .25s,background .18s;
  font-size:.95rem;
}
.swap-btn:hover{background:var(--teal);transform:rotate(180deg)}
.swap-btn.spin{animation:spin .4s ease}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.sf-actions{display:flex;gap:8px;align-items:end}
.search-btn{
  background:linear-gradient(135deg, var(--orange) 0%, var(--orange2) 100%);
  color:#fff;border:0;cursor:pointer;
  font-family:var(--fb);font-size:.85rem;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;
  padding:14px 24px;border-radius:var(--r-md);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(244,121,32,.34);
  transition:transform .15s,box-shadow .18s,filter .18s;
}
.search-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(244,121,32,.46);filter:brightness(1.05)}
.clear-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:14px 16px;border-radius:var(--r-md);
  background:#fff;border:1.5px solid var(--border);
  color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  transition:color .15s,border-color .15s;
}
.clear-btn:hover{color:var(--red);border-color:var(--red)}

.trust-row{
  margin-top:22px;display:flex;justify-content:center;flex-wrap:wrap;gap:24px;
  color:#a3b3cc;font-size:.78rem;font-weight:600;letter-spacing:.4px;
}
.trust-row span{display:inline-flex;align-items:center;gap:7px}
.trust-row i{color:var(--teal)}

/* ─── MAIN ─────────────────────────────────────────────────────────────── */
.sch-main{margin-top:-70px;position:relative;z-index:2;padding-bottom:80px}
.content-wrap{}

/* error */
.err-alert{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border-left:4px solid var(--red);
  padding:16px 20px;border-radius:var(--r-md);
  box-shadow:var(--shadow-2);margin-bottom:24px;
}
.err-alert i{color:var(--red);font-size:1.2rem;margin-top:2px}
.err-alert p{font-size:.9rem;color:var(--text2);font-weight:600}

/* ─── RESULTS BAR ──────────────────────────────────────────────────────── */
.results-bar{
  background:#fff;border-radius:var(--r-lg);
  padding:18px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  box-shadow:var(--shadow-2);margin-bottom:22px;
  border:1px solid var(--border);
}
.results-route{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.port-pill{
  display:flex;align-items:center;gap:11px;
  background:var(--bg);padding:9px 16px;border-radius:var(--r-md);
  border:1px solid var(--border);
}
.port-pill.pol i{color:var(--teal)}
.port-pill.pod i{color:var(--orange)}
.port-pill i{font-size:.95rem}
.pp-name{display:block;font-weight:800;color:var(--navy);font-size:.95rem;line-height:1.15}
.pp-meta{display:block;font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.arrow-icon{color:var(--teal);font-size:1.1rem}

.results-meta-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.result-count-badge{
  background:var(--teal-soft);color:var(--teal2);
  padding:7px 13px;border-radius:999px;font-size:.78rem;font-weight:800;
  display:inline-flex;align-items:center;gap:6px;
}
.last-updated{font-size:.78rem;color:var(--muted);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.last-updated i{color:var(--teal)}

/* ─── RESULT CARD ──────────────────────────────────────────────────────── */
.result-card{
  background:#fff;border-radius:var(--r-lg);
  margin-bottom:18px;
  box-shadow:var(--shadow-1);
  border:1px solid var(--border);
  display:flex;overflow:hidden;
  transition:box-shadow .25s,transform .2s,border-color .2s;
}
.result-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:var(--border2)}
.rc-accent{
  width:5px;flex-shrink:0;
  background:linear-gradient(180deg, var(--teal) 0%, var(--teal2) 100%);
}
.result-card.region-china  .rc-accent{background:linear-gradient(180deg, #e53e3e, #b91c1c)}
.result-card.region-fe     .rc-accent{background:linear-gradient(180deg, #8b5cf6, #5b21b6)}
.result-card.region-gulf   .rc-accent{background:linear-gradient(180deg, var(--gold), #b8860b)}

.rc-body{flex:1;padding:20px 24px;min-width:0}

.rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.rc-vessel{display:flex;align-items:center;gap:14px;min-width:0}
.vessel-icon{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  color:var(--teal);display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;box-shadow:0 4px 12px rgba(10,30,61,.18);
}
.vessel-name{
  font-family:var(--fh);font-weight:800;font-size:1.3rem;color:var(--navy);
  text-transform:uppercase;letter-spacing:.5px;line-height:1.1;
}
.vessel-sub{font-size:.78rem;color:var(--muted);font-weight:600;margin-top:3px;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.vessel-sub .dot{color:var(--border2)}
.voyage-tag{
  display:inline-block;background:var(--bg);color:var(--navy);
  padding:3px 9px;border-radius:5px;font-size:.7rem;font-weight:800;letter-spacing:.6px;
  border:1px solid var(--border);
}

.rc-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge-region{
  font-size:.7rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  padding:6px 11px;border-radius:6px;
  display:inline-flex;align-items:center;gap:6px;
}
.badge-region i{font-size:.65rem}
.badge-region.isc  {background:var(--teal-soft);color:var(--teal2)}
.badge-region.china{background:#fde8e8;color:#c53030}
.badge-region.fe   {background:#ede9fe;color:#6d28d9}
.badge-region.gulf {background:#fef6e0;color:#996600}

.badge-time{
  font-size:.72rem;font-weight:800;padding:6px 11px;border-radius:6px;
  display:inline-flex;align-items:center;gap:6px;
}
.badge-time i{font-size:.5rem}
.badge-time.today{background:#fff1e0;color:var(--orange2)}
.badge-time.soon {background:var(--green-soft);color:#047857}
.badge-time.later{background:var(--bg2);color:var(--muted)}

/* Route layout */
.rc-route{
  display:grid;grid-template-columns:1fr 200px 1fr;gap:14px;align-items:stretch;
  background:linear-gradient(180deg, var(--bg) 0%, #fff 100%);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:20px;
}
.port-block{display:flex;flex-direction:column;gap:4px;min-width:0}
.port-block.right{text-align:right;align-items:flex-end}
.pb-tag{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:.66rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;margin-bottom:4px;
}
.port-block.right .pb-tag{align-self:flex-end}
.pol-tag{background:var(--teal-soft);color:var(--teal2)}
.pod-tag{background:#fef0e3;color:var(--orange2)}
.pb-code{
  font-family:var(--fh);font-size:1.6rem;font-weight:900;color:var(--navy);
  letter-spacing:.5px;line-height:1;
}
.pb-name{font-size:1rem;font-weight:700;color:var(--text);line-height:1.2;margin-top:2px}
.pb-country{font-size:.78rem;color:var(--muted);font-weight:600;margin-bottom:10px}
.pb-dates{display:flex;flex-direction:column;gap:5px;width:100%;margin-top:auto}
.dt{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:7px 11px;background:#fff;border:1px solid var(--border);
  border-radius:6px;font-size:.82rem;
}
.port-block.right .dt{flex-direction:row-reverse}
.dt-l{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.dt-v{font-weight:700;color:var(--navy)}
.dt-v small{color:var(--muted);font-weight:600;margin-left:4px}
.dt.highlight{background:var(--teal-soft);border-color:rgba(0,174,188,.3)}
.dt.highlight .dt-v{color:var(--teal2)}

/* Transit connector */
.transit-col{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:10px 4px;
}
.transit-track{display:flex;align-items:center;gap:6px;width:100%}
.tt-line{flex:1;height:2px;background:linear-gradient(90deg, var(--teal), var(--orange));border-radius:2px}
.tt-dot{width:9px;height:9px;border-radius:50%}
.tt-dot.start{background:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.tt-dot.end{background:var(--orange);box-shadow:0 0 0 3px #fef0e3}
.tt-ship{
  color:var(--navy);background:#fff;border:2px solid var(--border);
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
  box-shadow:0 3px 8px rgba(10,30,61,.12);
}
.transit-pill{
  background:var(--navy);color:#fff;
  padding:7px 14px;border-radius:999px;font-size:.78rem;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 4px 12px rgba(10,30,61,.22);
}
.transit-pill strong{font-size:.95rem;font-weight:800}
.transit-pill i{color:var(--teal);font-size:.75rem}

/* Footer */
.rc-foot{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--border);
}
.rcf-left{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.rcf-ref{font-weight:700;color:var(--navy)}
.rcf-note i{color:var(--teal);margin-right:4px}
.rcf-actions{display:flex;gap:8px}
.rcf-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:8px;
  font-size:.76rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  transition:transform .15s,background .18s,border-color .18s,color .18s;
}
.rcf-btn.ghost{background:#fff;border:1.5px solid var(--border);color:var(--navy)}
.rcf-btn.ghost:hover{border-color:var(--teal);color:var(--teal2)}
.rcf-btn.primary{background:var(--navy);color:#fff;border:1.5px solid var(--navy)}
.rcf-btn.primary:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-1px)}

/* ─── EMPTY STATE ─────────────────────────────────────────────────────── */
.state-box{
  background:#fff;border-radius:var(--r-lg);
  padding:48px 28px;text-align:center;
  box-shadow:var(--shadow-1);border:1px dashed var(--border2);
}
.state-icon{
  width:72px;height:72px;border-radius:50%;
  background:var(--teal-soft);color:var(--teal2);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;margin:0 auto 16px;
}
.state-box h3{
  font-family:var(--fh);font-size:1.4rem;color:var(--navy);
  margin-bottom:8px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
}
.state-box p{color:var(--text2);font-size:.92rem;max-width:480px;margin:0 auto}
.state-box a{color:var(--teal2);font-weight:700}

/* ─── DEFAULT VIEW ────────────────────────────────────────────────────── */
.hint-card{
  display:flex;gap:18px;align-items:center;
  background:linear-gradient(135deg, #fff 0%, var(--teal-soft) 120%);
  border:1px solid rgba(0,174,188,.25);border-radius:var(--r-lg);
  padding:20px 24px;margin-bottom:32px;
  box-shadow:var(--shadow-2);
}
.hc-icon{
  width:54px;height:54px;flex-shrink:0;border-radius:14px;
  background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;box-shadow:0 6px 14px rgba(0,174,188,.32);
}
.hc-text{flex:1;min-width:0}
.hc-text h3{font-family:var(--fh);font-size:1.25rem;color:var(--navy);font-weight:800;margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
.hc-text p{font-size:.9rem;color:var(--text2);line-height:1.5}
.hc-cta{
  flex-shrink:0;padding:11px 18px;border-radius:8px;
  background:var(--navy);color:#fff;font-size:.76rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .18s,transform .15s;
}
.hc-cta:hover{background:var(--teal);transform:translateY(-1px)}

.section-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;
  margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--border);
}
.section-heading h2{
  font-family:var(--fh);font-weight:800;color:var(--navy);
  font-size:1.55rem;text-transform:uppercase;letter-spacing:.5px;line-height:1.1;
}
.sh-sub{font-size:.82rem;color:var(--muted);font-weight:600;margin-top:4px}
.week-badge{
  background:var(--navy);color:#fff;
  padding:8px 14px;border-radius:999px;font-size:.74rem;font-weight:700;
  display:inline-flex;align-items:center;gap:7px;letter-spacing:.4px;
}
.week-badge i{color:var(--teal)}

/* Upcoming cards */
.upcoming-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));gap:18px;
}
.upcoming-card{
  background:#fff;border-radius:var(--r-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-1);
  padding:18px 20px 16px;position:relative;overflow:hidden;
  transition:box-shadow .25s,transform .2s,border-color .2s;
  display:flex;flex-direction:column;gap:14px;
}
.upcoming-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px);border-color:var(--border2)}
.uc-accent{
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg, var(--teal), var(--teal2));
}
.upcoming-card.region-china .uc-accent{background:linear-gradient(90deg, #e53e3e, #b91c1c)}
.upcoming-card.region-fe    .uc-accent{background:linear-gradient(90deg, #8b5cf6, #5b21b6)}
.upcoming-card.region-gulf  .uc-accent{background:linear-gradient(90deg, var(--gold), #b8860b)}

.uc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4px}
.days-pill{
  background:var(--bg);color:var(--muted);
  padding:5px 11px;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.4px;
  display:inline-flex;align-items:center;gap:5px;
}
.days-pill i{font-size:.65rem;color:var(--teal)}
.days-pill.today{background:#fff1e0;color:var(--orange2)}
.days-pill.today i{color:var(--orange)}
.days-pill.soon {background:var(--green-soft);color:#047857}
.days-pill.soon i{color:var(--green)}

.uc-vessel{display:flex;align-items:center;gap:12px}
.uc-vessel > i{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:var(--navy);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.uc-vname{font-family:var(--fh);font-weight:800;color:var(--navy);font-size:1.05rem;text-transform:uppercase;letter-spacing:.4px;line-height:1.1}
.uc-vsub{font-size:.74rem;color:var(--muted);font-weight:600;margin-top:2px}

.uc-route{
  display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;
  background:var(--bg);border-radius:10px;padding:12px 14px;
}
.uc-port{min-width:0}
.uc-port.right{text-align:right}
.uc-code{font-family:var(--fh);font-size:1.15rem;font-weight:900;color:var(--navy);letter-spacing:.5px;line-height:1}
.uc-pname{font-size:.8rem;color:var(--text2);font-weight:600;margin-top:3px;line-height:1.2}
.uc-arrow{display:flex;align-items:center;gap:5px;color:var(--teal);font-size:.85rem}
.uca-line{width:18px;height:2px;background:linear-gradient(90deg, var(--teal), var(--orange));border-radius:2px}

.uc-dates{
  display:grid;grid-template-columns:1fr 1px 1fr;gap:12px;align-items:center;
  padding-top:4px;
}
.uc-dlabel{font-size:.66rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:3px}
.uc-dval{font-family:var(--fh);font-size:1.05rem;font-weight:800;color:var(--navy)}
.uc-dval.today{color:var(--orange2)}
.uc-dval.soon {color:#047857}
.uc-sep{background:var(--border);height:32px;width:1px}

/* ─── FOOTER ──────────────────────────────────────────────────────────── */
.sch-footer{
  background:var(--navy);color:#a3b3cc;text-align:center;
  padding:32px 0 28px;font-size:.85rem;
}
.footer-brand{
  font-family:var(--fh);color:#fff;font-weight:800;letter-spacing:.7px;
  font-size:1rem;display:block;margin-bottom:10px;
}
.sch-footer a{color:var(--teal);font-weight:600}
.sch-footer a:hover{color:#7be3ec}
.sch-footer i{margin-right:4px;color:var(--teal)}
.copyline{margin-top:10px;font-size:.78rem;color:#6e7d99}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .search-grid{grid-template-columns: 1fr 44px 1fr; }
  .sf-date{grid-column:1 / -1}
  .sf-actions{grid-column:1 / -1;justify-content:flex-end}
}
@media (max-width: 860px){
  .snav-links{
    position:absolute;top:70px;left:0;right:0;
    flex-direction:column;background:#fff;
    padding:14px 20px;gap:6px;
    box-shadow:0 12px 24px rgba(10,30,61,.12);
    display:none;
  }
  .snav-links.open{display:flex}
  .snav-hamburger{display:flex}
  .snav-quote-btn{display:none}

  .sch-hero h1{font-size:2rem}
  .sch-header{padding:48px 0 90px}

  .search-grid{grid-template-columns:1fr}
  .swap-btn{justify-self:center;transform:rotate(90deg)}
  .swap-btn:hover{transform:rotate(270deg)}

  .rc-route{grid-template-columns:1fr;gap:18px}
  .port-block.right{text-align:left;align-items:flex-start}
  .port-block.right .pb-tag{align-self:flex-start}
  .port-block.right .dt{flex-direction:row}
  .transit-col{flex-direction:row;padding:8px 0}
  .transit-track{max-width:280px}

  .rc-foot{flex-direction:column;align-items:stretch}
  .rcf-actions{justify-content:stretch}
  .rcf-actions .rcf-btn{flex:1;justify-content:center}

  .hint-card{flex-direction:column;text-align:center}
}
@media (max-width:500px){
  .container{padding:0 18px}
  .results-bar{flex-direction:column;align-items:flex-start}
  .upcoming-grid{grid-template-columns:1fr}
}

/* ─── UPCOMING SECTION LAYOUT (sidebar + grid) ─────────────────────────── */
.upcoming-section-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}
.upcoming-main-panel { min-width: 0; }

/* ─── POD FILTER SIDEBAR ────────────────────────────────────────────────── */
.pod-filter-sidebar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  position: sticky;
  top: 86px; /* below fixed navbar */
}

.pfs-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.pfs-header i { color: var(--teal); font-size: .8rem; }

.pfs-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 520px;
  overflow-y: auto;
}
.pfs-list::-webkit-scrollbar { width: 4px; }
.pfs-list::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 4px; }

.pfs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background .15s, color .15s, border-left-color .15s;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: var(--text);
}
.pfs-item:hover {
  background: var(--teal-soft);
  border-left-color: var(--teal);
  color: var(--teal2);
}
.pfs-item.active {
  background: var(--teal-soft);
  border-left-color: var(--teal);
  color: var(--teal2);
  font-weight: 700;
}
.pfs-code {
  font-family: var(--fh);
  font-size: .82rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: .4px;
  min-width: 50px;
  flex-shrink: 0;
  transition: color .15s;
}
.pfs-item:hover .pfs-code,
.pfs-item.active .pfs-code { color: var(--teal2); }

.pfs-name {
  flex: 1;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.25;
}
.pfs-arrow {
  font-size: .65rem;
  color: var(--border2);
  flex-shrink: 0;
  transition: color .15s, transform .15s;
}
.pfs-item:hover .pfs-arrow,
.pfs-item.active .pfs-arrow {
  color: var(--teal);
  transform: translateX(2px);
}

.pfs-empty {
  padding: 14px 18px;
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
}

.pfs-clear {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--border);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.pfs-clear:hover { color: var(--red); background: #fff5f5; }
.pfs-clear i { font-size: .75rem; }

/* Prompt state when no POD selected */
.state-box.pod-prompt .state-icon {
  background: #fff1e0;
  color: var(--orange2);
}

/* ─── RESPONSIVE: stack sidebar above grid on narrow screens ────────────── */
@media (max-width: 980px) {
  .upcoming-section-wrap {
    grid-template-columns: 1fr;
  }
  .pod-filter-sidebar {
    position: static;
  }
  .pfs-list {
    max-height: none;
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    gap: 6px;
  }
  .pfs-item {
    border-left: none;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    padding: 7px 12px;
    gap: 7px;
  }
  .pfs-item:hover,
  .pfs-item.active {
    border-color: var(--teal);
    background: var(--teal-soft);
  }
  .pfs-arrow { display: none; }
}