body {
  font-family: 'Roboto', sans-serif;
  background-color: #f9f9f9;
  color: #222;
  margin: 0;
  padding: 0;
}

header {
  background-color: #0054a6; /* UniFleet Blue */
  color: white;
  padding: 1.5rem 1rem;
  text-align: center;
}

h1, h2, h3 {
  color: #0054a6; /* Blue headings */
  margin-bottom: 1rem;
}

a:link, a:visited, a:hover, a:active {
  color: #0054a6; /* UniFleet Blue — never the browser default visited-purple */
}

/* Forms */
form {
  max-width: 640px;
  margin: 2rem auto;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Inputs */
input, select, textarea {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #0054a6;
  box-shadow: 0 0 3px rgba(0, 84, 166, 0.3);
}

/* Buttons */
button {
  background-color: #ff6600;  /* Orange accent */
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #e65500;
}

/* Info Box */
.info-box {
  background-color: #fff5e6;
  border-left: 6px solid #ff6600;
  padding: 1rem;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

/* Per-cell mobile column label — hidden on desktop, where the visible
   <thead> already labels the column. Not scoped to .mobile-page/media
   query since it must apply before the breakpoint is known. */
.mobile-cell-label {
  display: none;
}

/* Shared tap-target values, referenced by both the portrait (.mobile-page)
   and register-only landscape (.register-page) blocks below so they can't
   drift out of sync with each other. */
:root {
  --tap-target-min: 44px;
  --tap-target-font: 16px;
}

/* Mobile responsiveness (Brief-6, ARCH-brief-6). Scoped under .mobile-page
   so it never reaches register/admin templates that share the same base
   class names (.page-title, .centered-content, .section). */
@media (max-width: 480px) {
  .mobile-page .centered-content {
    max-width: 100%;
    padding: 0 0.75rem;
    box-sizing: border-box;
  }

  .mobile-page .section {
    padding: 1.25rem 1rem;
  }

  /* Tap targets: buttons, inputs, selects, textareas at least 44x44px.
     Checkbox/radio excluded: native controls ignore CSS padding/min-height
     for their own hit-box in Chromium, and forcing min-height here just
     stretches them into a thin rectangle instead of a square (see the
     .inline-checkbox rule below for how checkboxes get their tap target
     instead — via the adjacent <label>, not their own box). */
  .mobile-page input:not([type="checkbox"]):not([type="radio"]),
  .mobile-page select,
  .mobile-page textarea,
  .mobile-page button,
  .mobile-page .full-width-input,
  .mobile-page .btn {
    min-height: var(--tap-target-min);
    box-sizing: border-box;
    font-size: var(--tap-target-font); /* prevents iOS auto-zoom-on-focus */
  }

  .mobile-page .btn,
  .mobile-page .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-target-min);
  }

  /* Checkbox: intentionally NOT resized (see exclusion above). The
     adjacent <label for="acknowledge"> already toggles it and covers a
     much larger area, satisfying WCAG 2.5.5/2.5.8's "Equivalent" target
     exception (a same-action control that isn't small) — resizing the
     checkbox itself isn't required and would visually distort it. */

  .mobile-page button {
    min-width: var(--tap-target-min);
  }

  /* <details>/<summary> toggles (map, fuel tables) are tap targets too */
  .mobile-page summary {
    min-height: var(--tap-target-min);
    display: flex;
    align-items: center;
  }

  /* Native datetime picker trigger icon — webkit only, ignored elsewhere */
  .mobile-page input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    padding: 10px;
    margin-left: 4px;
  }

  /* Map: collapsible <details>, sized to fit narrow viewport */
  .mobile-page .map-collapsible iframe {
    height: 260px;
  }

  /* Discount tables: reflow from <table> to stacked label:value cards */
  .mobile-page .discount-table,
  .mobile-page .discount-table thead,
  .mobile-page .discount-table tbody,
  .mobile-page .discount-table th,
  .mobile-page .discount-table td,
  .mobile-page .discount-table tr {
    display: block;
    width: 100%;
  }

  /* Visually hidden, not display:none — keeps column headers in the
     accessibility tree for screen readers while hiding them sighted. */
  .mobile-page .discount-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .mobile-page .discount-table tr {
    margin-bottom: 0.75rem;
    border: 1px solid #eef3f8;
    border-radius: 6px;
    overflow: hidden;
  }

  .mobile-page .discount-table tr:last-child {
    margin-bottom: 0;
  }

  .mobile-page .discount-table td {
    border-bottom: 1px solid #eef3f8;
    padding: 0.6rem 0.8rem;
    word-break: break-word;
  }

  .mobile-page .discount-table td:last-child {
    border-bottom: none;
  }

  /* Visible replacement for the hidden column header, per cell */
  .mobile-page .discount-table .mobile-cell-label {
    display: block;
    font-weight: 700;
    color: #0054a6;
    margin-bottom: 0.2rem;
  }

  /* Payment QR: never shrink below a scannable floor */
  .mobile-page .payment-qr img {
    min-width: 200px;
  }
}

/* Register-only, landscape supplement: the max-width:480px block above
   covers portrait phones but misses landscape (common landscape phones
   report a viewport *height* of roughly 320-430px, past the max-height
   condition below would need to be — this block's own max-height:480px
   catches that range). Scoped to .register-page (not .mobile-page) so
   book.html/booking_success.html, which rely solely on the portrait
   width breakpoint above, are unaffected. Shares --tap-target-min/-font
   with the portrait block above so the two can't drift out of sync. */
@media (max-height: 480px) and (orientation: landscape) {
  .register-page .centered-content {
    max-width: 100%;
    padding: 0 0.75rem;
    box-sizing: border-box;
  }

  /* Checkbox/radio excluded — same reason as the portrait block above. */
  .register-page input:not([type="checkbox"]):not([type="radio"]),
  .register-page select,
  .register-page textarea,
  .register-page button,
  .register-page .btn,
  .register-page .button {
    min-height: var(--tap-target-min);
    box-sizing: border-box;
    font-size: var(--tap-target-font); /* prevents iOS auto-zoom-on-focus */
  }

  .register-page .btn,
  .register-page .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .register-page button {
    min-width: var(--tap-target-min);
  }
}