@font-face {
  font-family: 'Identity';
  src: url('./fonts/LTAIdentity-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-Light';
  src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
       url('../fonts/Satoshi-Light.woff') format('woff'),
       url('../fonts/Satoshi-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-LightItalic';
  src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-LightItalic.woff') format('woff'),
       url('../fonts/Satoshi-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Regular';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
       url('../fonts/Satoshi-Regular.woff') format('woff'),
       url('../fonts/Satoshi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-Italic';
  src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
       url('../fonts/Satoshi-Italic.woff') format('woff'),
       url('../fonts/Satoshi-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Medium';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
       url('../fonts/Satoshi-Medium.woff') format('woff'),
       url('../fonts/Satoshi-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-MediumItalic';
  src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
       url('../fonts/Satoshi-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Bold';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
       url('../fonts/Satoshi-Bold.woff') format('woff'),
       url('../fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-BoldItalic';
  src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
       url('../fonts/Satoshi-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Satoshi-Black';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
       url('../fonts/Satoshi-Black.woff') format('woff'),
       url('../fonts/Satoshi-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-BlackItalic';
  src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
       url('../fonts/Satoshi-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 900.0;
*
* available axes:
'wght' (range from 300.0 to 900.0
*/
@font-face {
  font-family: 'Satoshi-Variable';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
       url('../fonts/Satoshi-Variable.woff') format('woff'),
       url('../fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 900.0;
*
* available axes:
'wght' (range from 300.0 to 900.0
*/
@font-face {
  font-family: 'Satoshi-VariableItalic';
  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-VariableItalic.woff') format('woff'),
       url('../fonts/Satoshi-VariableItalic.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}


body {
  font-family: 'Satoshi-Regular', sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Satoshi-Regular', sans-serif;
    touch-action: pan-y;
  }

/* Arrivals cards container */
.arrivals {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  margin: 0 auto 20px auto;
  width: 740px;
  margin-top: 23px;
}

/* Each card */
.arrivals-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.13);
  overflow: hidden;
  width: 290px;
  height: 280px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Card header */
.arrivals-header {
  background: #29586b;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 14px 14px 30px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font-family: 'Identity', 'Identity', sans-serif;
  font-size: 2.4rem;
}

.arrivals-title {
  font-size: 1.4rem;
  font-family: 'Identity', 'Identity', sans-serif;
}

.arrivals-code {
  background: #4fc3ff;
  color: #fff;
  border-radius: 6px;
  padding: 6px 20px;
  font-size: 1rem;
  font-family: 'Identity', sans-serif;
  margin-left: 16px;
}

/* Card content */
.arrivals-content {
  background: #fff;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.arrivals-content.fading {
  opacity: 0;
}

/* Each bus row */
.bus-row{
  display:grid;
  grid-template-columns: 130px repeat(2, 100px); /* adjust widths to taste */
  align-items:center;
  column-gap: 4px;
}

/* Bus number */
.bus-number {
  background: #d0ff63;
  color: #222;
  font-family: 'Identity', sans-serif;
  font-size: 1.6rem;
  border-radius: 4px;
  width: 100px;         /* Fixed width */
  height: 50px;         /* Fixed height for vertical centering */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;  /* Space between numbers */
  box-sizing: border-box;
  padding: 0;           /* Remove horizontal padding */
}

/* Bus times */
.bus-times {
  color: #29586b;
  font-family: 'Identity', sans-serif;
  font-size: 2rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Bus icon */
.bus-icon {
  font-size: 0.8rem;
  margin-right: 0px;
  text-align: center;
}

.eta{
  display:inline-flex;
  align-items: center;
  justify-content: left;           /* center icon + time in the cell */
  gap: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums; /* fixed-width digits to avoid wiggle */
  font-family: 'Identity', sans-serif;
}

.disruption-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  overflow: hidden;
  max-width: 740px;
  height: 100px;
  margin: 0px auto;
  font-family: 'Identity', sans-serif;
}

.disruption-header {
  background: #b7281e;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 32px 10px 32px;
  font-size: 1.1rem;
  letter-spacing: 1.5;
  font-family: 'Identity', sans-serif;
}

.disruption-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
}

.disruption-icon {
  font-size: 0.8rem;
}

.disruption-update {
  font-size: 0.8rem;
  letter-spacing: 2;
  font-family: 'Identity', sans-serif;
}

.disruption-content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 20px 15px 24px;
}

.line-badge {
  background: #8d5a2b;
  color: #fff;
  font-family: 'Identity', sans-serif;
  font-size: 1.1rem;
  padding: 6px 30px;
  border-radius: 4px;
  font-weight: 300;
  display: inline-block;
}

.line-desc {
  font-family: 'Identity', sans-serif;
  font-size: 1.2rem;
  color: #111;
  letter-spacing: 0.5px;
}

/* Timing text */
.t {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
  color: #29586b;
  font-size: 1.6rem; /* This overrides .bus-times font-size */
}

.t.fading {
  opacity: 0;
}

.icon {
  display: inline-block;
  width: 24px;    /* adjust to match your icon size */
  height: auto;
  position: relative;
}

.icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* underline for crowding */
.icon::after {
  content: "";
  display: block;
  height: 3px;
  border-radius: 2px;
  margin-top: 2px;
  background: var(--crowd, #16a34a);
}

.icon.sea::after { --crowd: #16a34a; } /* green */
.icon.sda::after { --crowd: #f59e0b; } /* amber */
.icon.lsd::after { --crowd: #dc2626; } /* red */

/* hide card when no disruption */
.disruption-card.hidden { display: none; }

/* optional: line colors */
.line-badge {
  color: #fff; padding: .35rem .6rem; border-radius: .6rem; font-weight: 700;
}

/* Banner look (adjust to your theme) */
.status-banner{
  display:flex; 
  align-items:center; 
  justify-content: space-between;
  width: 660px;
  padding:18px 40px; 
  border-radius:18px; color:#fff;
  background: linear-gradient(90deg,#6c8796,#23435f);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  margin: 23px auto 20px auto;
}
.sb-left{ display:flex; flex-direction:column; gap:2px; }
.sb-date{ font-weight:700; font-size:1.4rem; letter-spacing:.2px; }
.sb-weather{ display:flex; align-items:center; gap:8px; opacity:.95; }
.sb-wicon{ width:24px; height:24px; display:block; }
.sb-clock{ font-size:3rem; font-weight:700; letter-spacing:2px; }

/* hide/show helper used for both banner and disruption card */
.hidden{ display:none !important; }