/* ===========================================================================
   shared/css/board.css — STRUCTURE ONLY for the EU261 board + search + cards +
   airport autocomplete. Palette-neutral: every colour is a var(--fc-*) that a
   per-site THEME file defines (quiescence = dark via css/flight-compensation.css;
   eu261.es = light via eu261.es/css/themeV0.01.css). No text, no inline styles
   (strict CSP). Scoped to .fc-* so it layers over the host chrome.
   =========================================================================== */

.fc-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 88px 20px 64px;   /* top clears the fixed topbar */
  color: var(--fc-text);
  font-family: var(--fc-font, GSans, "Segoe UI", Arial, sans-serif);
}

/* ---- hero ---------------------------------------------------------------- */
.fc-hero { text-align: center; margin-bottom: 28px; }
.fc-hero h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 12px;
}
.fc-hero__sub { color: var(--fc-muted); font-size: 1.05rem; margin: 0 auto; max-width: 40rem; }

/* ---- search bar ---------------------------------------------------------- */
.fc-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--fc-panel);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 12px;
  margin-bottom: 14px;
}
.fc-search input {
  background: var(--fc-bg);
  border: 1px solid var(--fc-border);
  border-radius: 8px;
  color: var(--fc-text);
  padding: 10px 12px;
  font-size: 0.98rem;
  min-width: 0;
}
.fc-search input:focus { outline: 2px solid var(--fc-primary); outline-offset: 1px; }
.fc-search__q  { flex: 3 1 240px; }
.fc-search__ap { flex: 1 1 80px; text-transform: uppercase; }
.fc-search__date { flex: 1 1 150px; color-scheme: var(--fc-color-scheme, light); }

.fc-btn {
  flex: 0 0 auto;
  background: var(--fc-primary);
  color: var(--fc-on-primary, #fff);
  border: 0;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.fc-btn:hover { filter: brightness(1.08); }

.fc-count { color: var(--fc-muted); font-size: 0.9rem; margin: 0 2px 14px; }

/* ---- results grid + cards ------------------------------------------------ */
.fc-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  transition: opacity 0.15s ease;
}
.fc-results.is-loading { opacity: 0.5; }

.fc-card {
  display: block;
  background: var(--fc-panel);
  border: 1px solid var(--fc-border);
  border-left: 4px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--fc-text);
  transition: transform 0.1s ease, background 0.15s ease;
}
.fc-card:hover { background: var(--fc-panel-2); transform: translateY(-2px); }
.fc-card--delayed   { border-left-color: var(--fc-delayed); }
.fc-card--cancelled { border-left-color: var(--fc-cancelled); }
.fc-card--diverted  { border-left-color: var(--fc-diverted); }
/* Undisrupted flights — only /flights/search.php can return these. */
.fc-card--late      { border-left-color: var(--fc-late); }
.fc-card--ontime    { border-left-color: var(--fc-ontime); }

.fc-card__route { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 700; }
.fc-arrow { color: var(--fc-muted); font-weight: 400; }
.fc-card__meta { display: flex; justify-content: space-between; margin: 6px 0 10px; color: var(--fc-muted); font-size: 0.9rem; }
.fc-flight { font-weight: 600; color: var(--fc-text); }

.fc-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.fc-badge--delayed   { background: var(--fc-delayed-bg); color: var(--fc-delayed); }
.fc-badge--cancelled { background: var(--fc-cancelled-bg); color: var(--fc-cancelled); }
.fc-badge--diverted  { background: var(--fc-diverted-bg); color: var(--fc-diverted); }
.fc-badge--late      { background: var(--fc-late-bg); color: var(--fc-late); }
.fc-badge--ontime    { background: var(--fc-ontime-bg); color: var(--fc-ontime); }

.fc-card__cta { display: block; margin-top: 12px; color: var(--fc-primary); font-weight: 600; font-size: 0.92rem; }

.fc-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--fc-muted);
  padding: 40px 12px;
  background: var(--fc-panel);
  border: 1px dashed var(--fc-border);
  border-radius: var(--fc-radius);
}

.fc-info { margin-top: 28px; color: var(--fc-muted); font-size: 0.85rem; line-height: 1.5; }

/* ==========================================================================
   Layout reset when the page uses the top bar (no sidebar from homeV0.01.css)
   ========================================================================== */
body.has-topbar { display: block; min-height: 100vh; }
body.has-topbar > main { display: block; }
body.has-topbar > footer,
body.has-topbar > .footer { display: block; width: 100%; clear: both; }

.mtop { margin-top: 20px; }

/* ==========================================================================
   Mobile (<560px)
   ========================================================================== */
@media (max-width: 560px) {

  .content-box { padding: 16px; border-radius: 14px; }
  .fc-main { padding: 76px 14px 40px; }

  .fc-search {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px;
  }
  .fc-search__q { grid-column: 1 / -1; width: 100%; }
  .fc-search__ap { width: 100%; text-align: center; font-size: 1rem; text-transform: uppercase; }
  .fc-search__date { grid-column: 1 / -1; width: 100%; }
  .fc-btn { grid-column: 1 / -1; width: 100%; min-height: 48px; font-size: 1rem; }
  .fc-search input { width: 100%; min-height: 48px; font-size: 16px; padding: 12px 14px; } /* 16px: no iOS zoom */

  .fc-results { grid-template-columns: 1fr; gap: 14px; }
  .fc-card { padding: 16px; }
  .fc-card__route { font-size: 1.15rem; }
  .fc-card__meta { flex-direction: column; gap: 4px; align-items: flex-start; }
  .fc-card__cta { margin-top: 14px; font-size: .95rem; }
  .fc-count, .fc-info { padding: 0 4px; }
}

/* ---- "can't find your flight?" no-result CTA ---------------------------- */
.fc-noresult-wrap:empty { display: none; }

.fc-noresult {
  margin-top: 16px;
  text-align: center;
  background: var(--fc-panel-2);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 22px 18px;
}
.fc-noresult__msg { color: var(--fc-muted); margin: 0 0 14px; line-height: 1.5; }

/* ---- airport autocomplete (claim origin/dest + board from/to) ----------- */
/* .fc-ac is the positioned wrapper; in the board it also carries fc-search__ap
   (flex/grid sizing), in the claim form it fills the flex-column label. */
.fc-ac { position: relative; display: block; }
.fc-ac > input { width: 100%; box-sizing: border-box; text-transform: none; text-align: left; }

.fc-ac__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  position: absolute;
  z-index: 30;
  left: 0; right: 0; top: 100%;
  min-width: 220px;            /* readable even under the narrow board from/to fields */
  max-width: 92vw;
  background: var(--fc-panel);
  border: 1px solid var(--fc-border);
  border-radius: 10px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: var(--fc-shadow, 0 12px 32px rgba(0, 0, 0, .45));
}

.fc-ac__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.fc-ac__item.is-active,
.fc-ac__item:hover { background: var(--fc-panel-2); }

.fc-ac__code { font-weight: 700; color: var(--fc-primary); min-width: 34px; }
.fc-ac__name {
  color: var(--fc-muted);
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}