/* Design tokens and base reset */

:root {
  /* Brand colours */
  --c-navy-dark:   #001b4d;
  --c-navy:        #05358d;
  --c-blue:        #0d6efd;
  --c-blue-hover:  #0b5ed7;
  --c-blue-soft:   #eff6ff;
  --c-blue-ring:   rgba(13, 110, 253, 0.25);
  --c-blue-light:  #7fb0ff;
  --c-orange:      #ff6b00;
  --c-orange-dark: #e65f00;
  --c-yellow:      #ffd166;
  --c-amber:       #ffb300;
  --c-tag-bg:      #fed400;

  /* Neutral */
  --c-bg:          #f5f5f5;
  --c-bg-light:    #f8f9fa;
  --c-bg-hover:    #f5f8ff;
  --c-white:       #ffffff;
  --c-text:        #333333;
  --c-text-muted:  #8a8a8a;
  --c-bus-name:    #3b4b69;
  --c-border:      rgba(0, 0, 0, 0.08);

  /* Status badge colours */
  --c-badge-next-bg:       #d1e7dd;
  --c-badge-next-text:     #0f5132;
  --c-badge-upcoming-bg:   #fff3cd;
  --c-badge-upcoming-text: #856404;
  --c-badge-scheduled-bg:  #e2e3e5;
  --c-badge-scheduled-text:#41464b;
  --c-badge-departed-bg:   #f8d7da;
  --c-badge-departed-text: #842029;

  /* Service-type badge colours */
  --c-type-normal-bg:  #ffe5d0;  --c-type-normal-text: #9a3412;  /* Normal — Orange */
  --c-type-ctb-bg:     #fce7f3;  --c-type-ctb-text:    #9d174d;  /* CTB — Pink */
  --c-type-semi-bg:    #cfe2ff;  --c-type-semi-text:   #084298;  /* Semi-Luxury — Blue */
  --c-type-ac-bg:      #d1f5dd;  --c-type-ac-text:     #146c33;  /* A/C — Green */

  /* Availability pill colours (flat pastels, matched to the type-badge language) */
  --c-avail-high-bg:      #d1f5dd;  --c-avail-high-text:      #146c33;  /* Available */
  --c-avail-mid-bg:       #fff3cd;  --c-avail-mid-text:       #856404;  /* Limited (mid) */
  --c-avail-mid-text-mobile: #ec9200; /* Limited (mid) — mobile only, brighter for the no-background text treatment */
  --c-avail-low-bg:       #fde3e1;  --c-avail-low-text:       #b42318;  /* Limited (low) */
  --c-avail-departed-bg:  #e2e3e5;  --c-avail-departed-text:  #41464b;  /* Departed & Scheduled */

  /* Spacing */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;
  --sp-2xl: 60px;

  /* Radius */
  --r-sm:   8px;
  --r-md:   15px;
  --r-lg:   20px;
  --r-xl:   25px;
  --r-pill: 50px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 5px 20px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --t: 0.3s ease;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

/* Ensure [hidden] always wins even when an element has display:grid/flex set in CSS */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a { color: var(--c-blue); }

h1, h2, h3, h4, h5, h6 { margin: 0; }

p { margin: 0; }

button { font-family: inherit; cursor: pointer; }

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Minimal grid */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-md);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

.col-auto { flex: 0 0 auto; }

/* Column widths (desktop, override at mobile) */
.col-3  { flex: 0 0 calc(25% - var(--sp-md)); min-width: 0; }
.col-4  { flex: 0 0 calc(33.333% - var(--sp-md)); min-width: 0; }
.col-5  { flex: 0 0 calc(41.667% - var(--sp-md)); min-width: 0; }
.col-12 { flex: 0 0 100%; min-width: 0; }

/* Spacing helpers */
.mt-3  { margin-top: var(--sp-md); }
.mt-4  { margin-top: var(--sp-lg); }
.mt-5  { margin-top: var(--sp-xl); }
.mb-2  { margin-bottom: var(--sp-sm); }
.mb-4  { margin-bottom: var(--sp-lg); }
.my-5  { margin-top: var(--sp-2xl); margin-bottom: var(--sp-2xl); }
.me-3  { margin-right: var(--sp-md); }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-start  { text-align: left; }
.fw-bold { font-weight: 700; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.gap-2  { gap: var(--sp-sm); }
.flex-shrink-0 { flex-shrink: 0; }