/* --- 1. GLOBAL RESET & VARIABLES ---------------------------------- */
:root{
  font-family: system-ui, sans-serif; /* Consistent native font stack */
  --card-padding: 0.8rem 1rem;       /* Re‑use for every .card */
  --column-width: min(600px, 95vw);
}
*{ box-sizing:border-box; }          /* Width/height include padding */

#pageTitle {
  font-size: 1.5rem;
  color: #333;
  text-align: left;
  margin-bottom: 1rem;
  font-weight:650;
}

body{
  margin:0;                          /* Remove default 8 px margin */
  padding-bottom:4rem;               /* Space for mobile Safari bar */
  background: #fcfcfc;                /* Soft grey background */
  display:flex; flex-direction:column; align-items:center; gap:2rem;
}

/* --- 2. HEADER TOOLBAR -------------------------------------------- */
.header-intro{
  margin: 0;
  font-size: 1rem;
  color: #555;
  margin-bottom: 0.5rem;
}

.header-intro-big{
  margin: 0;
  font-size: 2rem;
  color: #333;
  margin-bottom: 0.5rem;
  font-weight:700;
}

header{
  width:var(--column-width);
  display:flex; flex-direction:column; gap:0.1rem; margin-top:1.4rem;
}

#selectors{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* Native form controls – minimal padding for compact look */
select,button{ padding:.4rem .6rem; font-size:1rem; }
button[disabled],select[disabled]{ opacity:.5; cursor:not-allowed; }

/* --- 3. DEPARTURE CARDS STACK ------------------------------------ */
#departures{
  width:var(--column-width);
  display:flex; flex-direction:column; gap:1rem;
}

.card{
  background:#fff; border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  padding:var(--card-padding);
  display:flex; flex-direction:column; gap:.4rem;
}

/* Line colour badge preceding the stop name */
.line-badge{
  display:inline-block; padding:.2rem .6rem; border-radius:4px;
  font-weight:700; color:#fff; margin-right:.6rem; transition: filter 0.2s ease;
}

.line-badge-link:hover .line-badge {
  filter: brightness(1.12);
}

.row{ display:flex; justify-content:space-between; align-items:center; }
.tiny{ font-size:.85rem; color:#555; }

/* Highlight live‑tracking details with a green left bar */
.realtime{
  margin-top:.3rem; padding:.4rem .6rem;
  background:#f0fff4; border-left:3px solid #19a34a;
}

/* --- 4. SVG PIE (seats free) ------------------------------------- */
.capacity-chart{ width:22px; height:22px; }
.capacity-chart circle.bg{ fill:none; stroke:#e0e0e0; stroke-width:3; }
.capacity-chart text.label{
  font-size:15px; fill:#555; font-weight:600;
  text-anchor:middle; dominant-baseline:central; /* centre text both axes */
}

/* --- 5. PAGE TITLE VARIANTS -------------------------------------- */
.stop-title-main{ font-size:1.9rem; font-weight:700; display:block; margin: 0;}
.stop-title-ref-bold { font-size:1.2rem; color:#555; font-weight:500; margin: 0;}
.stop-title-ref { font-size:0.8rem; color:#555; font-weight:400; margin: 0;}
.info-icon {
  display: inline-block;
  text-decoration: none;
  font-size: 0.6rem;
  margin-right: 0.01rem;
  position: relative;
  top: -0.7rem;
  color: #444;
}

.info-icon:hover {
  color: #e0e0e0;
}

.header-separator {
  border: none;
  border-top: 1px solid #ccc;
  margin: 0.0rem 0; /* control vertical spacing */
  width: 100%;
}

/* --- 6. NAVIGATION BAR -------------------------------------- */
.site-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0rem;
  width: var(--column-width);
  box-sizing: border-box;
}
.nav-container {
  display: flex;
  gap: 1.5rem; /* space between links */
  margin-right: 0px;
}
.logo     { height: 35px; width: auto; }
.nav-link {
  font-size: 1rem; font-weight: 800; color: #333; text-decoration: none;
}
.nav-link:hover,
.nav-link:focus { text-decoration: underline; }

.site-footer {
  text-align: center;
  padding: 0.5em;
  font-size: 0.5em;
  color:#555;
}

.social-icons {
  margin-bottom: 0.5rem;
}

.social-icons a {
  margin: 0 0.5rem;
  color: #555;
  text-decoration: none;
}

@media (max-width: 768px) {
  :root {
    --column-width: min(85vw, 520px);
  }
}

.realtime-title {
  font-weight:500;
  font-size: 0.85rem;
  margin: 1px 0 1px;
  color: #15813b;
}

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.no-link-style {
  text-decoration: none;
  color: inherit; /* inherits text color from parent */
}

.mapa-label {
  color: #d93025; /* Google red / warm red */
  font-weight: 500;
}

.row.flex-align {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.choices {
  margin: 0 !important;
}
.choices__inner,
.choices__list--dropdown,
.choices__item {
  font-size: max(16px, 1rem) !important;
}
.choices.is-open .choices__list--dropdown .choices__item {
  font-size: max(16px, 1rem) !important;
}

.choices__input {
  font-size: max(16px, 1rem) !important;
}