/* Blue sampled from the supplied logo after converting Adobe RGB to sRGB. */
:root {
  --brand-blue: #0098d8;
  --brand-on-blue: #00283a;
  --blue: #0074a6;
  --deep: #003d57;
  --aqua: var(--brand-blue);
  --sky: #edf8fd;
  --line: #d1e5ef;
  --brand-soft: #f5fbfe;
}

.brand { display: block; flex: 0 1 286px; min-width: 220px; line-height: 1; }
.brand-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.top > .brand { width: 286px; }
.top { min-height: 88px; }
.top nav { gap: 18px; }
.top nav a { white-space: nowrap; }
.top nav a:hover, .top .actions > a:hover { color: var(--blue); }
.footer-brand { max-width: 310px; min-width: 0; padding: 12px; border-radius: 6px; background: white; }

.notice { background: var(--sky); color: var(--deep); }
.hero { background: linear-gradient(180deg, var(--brand-soft), white 90%); }
.finder { box-shadow: 0 10px 35px rgb(0 152 216 / 12%); }
.plan, .benefit-grid article, .empty-results { background: var(--brand-soft); }
.tab.active { background: var(--sky); border-color: var(--brand-blue); }
.outline { border-color: var(--brand-blue); }
.outline:hover, .filter:hover { background: var(--sky); }
.primary { background: var(--brand-blue); color: var(--brand-on-blue); }
.primary:hover { background: var(--blue); color: white; }
.input:focus-within { outline-color: var(--blue); }
:focus-visible { outline-color: var(--blue); }
.check input { accent-color: var(--blue); }
.round { color: var(--blue); }
footer { border-top: 5px solid var(--brand-blue); }

.demo-label, .booking-steps .done span, .demo-fill {
  color: var(--blue);
  background: var(--sky);
  border-color: var(--line);
}
.booking-summary { background: var(--brand-soft); border-color: var(--line); }
.booking-summary hr, .summary-demo { border-color: var(--line); }
.summary-demo { color: var(--blue); }
.booking-reference { background: var(--sky); }
.booking-steps .current span,
.date-choice.selected,
.slot-choice.selected,
.language-switch button[aria-pressed="true"] {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: var(--brand-on-blue);
}
.date-choice:not(.selected):not(:disabled):hover,
.slot-choice:not(.selected):not(:disabled):hover {
  border-color: var(--brand-blue);
  background: var(--sky);
}

@media (max-width: 1180px) {
  .top nav { display: none; }
  .top { justify-content: space-between; }
}
@media (max-width: 700px) {
  .top { height: auto; padding: 14px 16px; flex-wrap: wrap; gap: 12px; }
  .top > .brand { width: 270px; flex-basis: 270px; max-width: 100%; }
  .top .actions { margin-left: auto; }
}
@media (max-width: 420px) {
  .top > .brand { width: 250px; flex-basis: 250px; min-width: 0; }
  .top .actions { width: 100%; justify-content: space-between; }
}