/* PJCC Tools - Trip Pricer search form ([pjcc_trip_pricer_form])
 *
 * Epogee's design: the Figma "PJCC - Trip Pricer" and their notes of Oct 5,
 * 2026. Fields and layout both live here now:
 *   - desktop: From, swap, To, Passengers and Search in one row, the Type of
 *     Aircraft buttons under it;
 *   - mobile: one field per row, no swap button, no Type of Aircraft, Search
 *     full width.
 * "Desktop" is decided by the FORM's own width (a container query, 720px and
 * up), not the screen's, so the form lays itself out right wherever it is
 * placed (the hero, the My Account page, the results page).
 *
 * Every rule is wrapped in :where(), which carries zero specificity, so any
 * theme rule wins without !important. Three functional rules at the bottom
 * are the exceptions: hidden stays hidden, each cabin button's radio stays
 * invisible (its label is the button), and the buttons keep the hand cursor.
 *
 * Colours come from the theme's own variables where Epogee named them
 * (--ui-shape-border, --theme-text-impact, --color-green-dark), with the
 * theme's light-palette values as fallbacks so the form looks the same off
 * the theme. Fonts are inherited.
 */

:where(.pjcc-tpf) {
  /* Oct 12, 2026: Brett asked for more contrast; the theme's #E1E1E1 nearly vanished on white.
     A theme can still set --pjcc-tpf-border on .pjcc-tpf. */
  --pjcc-tpf-border: #b3bca7;
  --pjcc-tpf-text: var(--theme-text-impact, #181b1c);
  --pjcc-tpf-green: var(--color-green-dark, #6b7c35);
  --pjcc-tpf-field-bg: var(--ui-shape-bg, #fff);
  --pjcc-tpf-placeholder: var(--color-base-dark-4, #757575);
  container: pjcc-tpf / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 8px;
  margin: 0;
  padding: 0;
  text-align: left;
}
:where(.pjcc-tpf) :where(*, *::before, *::after) { box-sizing: border-box; }

/* phones first: one field per row (Epogee: 16px between fields, 24px before
   Search, no swap button, no Type of Aircraft) */
:where(.pjcc-tpf) > :where(*) { flex: 1 1 100%; min-width: 0; }

:where(.pjcc-tpf-label) {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pjcc-tpf-text);
}

/* the airport list and the pin are placed against this box */
:where(.pjcc-tpf-control) { position: relative; }

/* ── fields: 40px tall, 1px border, 3px corners, 15px text ───── */
:where(.pjcc-tpf-input) {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  /* 12px from the outer edge, as in the Figma (its 1px border sits inside) */
  padding: 0 11px;
  font-family: inherit;
  /* 16px on a narrow form: iPhone Safari zooms the page into any field
     under 16px. Epogee's 15px applies from 720px (the desktop layout). */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--pjcc-tpf-text);
  text-align: left;
  background: var(--pjcc-tpf-field-bg);
  border: 1px solid var(--pjcc-tpf-border);
  border-radius: 3px;
  box-shadow: none;
  appearance: none;
}
:where(.pjcc-tpf-input)::placeholder { color: var(--pjcc-tpf-placeholder); opacity: 1; }
:where(.pjcc-tpf-input:focus) {
  outline: 2px solid var(--pjcc-tpf-green);
  outline-offset: 1px;
  border-color: var(--pjcc-tpf-green);
}
:where(.pjcc-tpf-input[aria-invalid="true"]) { border-color: #8f2a22; }
:where(.pjcc-tpf-airport) { padding-right: 33px; }

/* the icons: drawn in currentColor, so each one takes its button's colour */
:where(.pjcc-tpf-icon) { display: block; flex: none; overflow: visible; }
:where(.pjcc-tpf-pin) {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -9px;
  color: var(--pjcc-tpf-green);
  pointer-events: none;
}

/* ── airport list ─────────────────────────────────────────── */
:where(.pjcc-tpf-list) {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
  color: var(--pjcc-tpf-text);
  background: #fff;
  border: 1px solid var(--pjcc-tpf-border);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(24, 27, 28, 0.14);
}
:where(.pjcc-tpf-option) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5em;
  padding: 0.5em 0.75em;
  cursor: pointer;
}
:where(.pjcc-tpf-option:hover) { background: #eef4e6; }
/* the row Enter will pick (arrow keys): a tint and a green bar, not tint alone */
:where(.pjcc-tpf-option.is-active) { background: #dfe8cf; box-shadow: inset 3px 0 0 var(--pjcc-tpf-green); }
:where(.pjcc-tpf-option-code) { font-weight: 700; }
:where(.pjcc-tpf-option-place, .pjcc-tpf-option-former) { font-size: 0.85em; color: #586663; }
:where(.pjcc-tpf-option-country) {
  padding: 0 0.45em;
  font-size: 0.75em;
  font-weight: 700;
  color: #fff;
  background: #8a5a3b;
  border-radius: 3px;
}
:where(.pjcc-tpf-message) {
  padding: 0.5em 0.75em;
  font-size: 0.9em;
  color: #586663;
}

/* ── passengers: -, the number, + (each at least 40px wide; the number
      grows to fill the row on phones) ───────────────────── */
:where(.pjcc-tpf-stepper) { display: flex; align-items: stretch; height: 40px; }
:where(.pjcc-tpf-step) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: 1;
  text-align: center;
  color: var(--pjcc-tpf-green);
  background: var(--pjcc-tpf-field-bg);
  border: 1px solid var(--pjcc-tpf-border);
  border-radius: 3px 0 0 3px;
  cursor: pointer;
  appearance: none;
}
:where(.pjcc-tpf-step:last-child) { border-radius: 0 3px 3px 0; }
/* the focused part paints above its neighbours, so its whole ring shows */
:where(.pjcc-tpf-step:focus-visible, .pjcc-tpf-pax-input:focus) { position: relative; z-index: 1; }
:where(.pjcc-tpf-pax-input) {
  flex: 1 1 auto;
  width: auto;
  min-width: 40px;
  padding: 0;
  text-align: center;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
:where(.pjcc-tpf-pax-input)::-webkit-outer-spin-button,
:where(.pjcc-tpf-pax-input)::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Type of Aircraft (radio inputs; the label is the button) ─ */
:where(.pjcc-tpf-cabin) { display: none; min-width: 0; margin: 0; padding: 0; border: 0; }
:where(.pjcc-tpf-cabin > legend) { float: none; padding: 0; }
:where(.pjcc-tpf-cabins) { display: flex; flex-wrap: wrap; gap: 8px; }
:where(.pjcc-tpf-cabin-option) { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
:where(.pjcc-tpf-cabin-button) {
  display: inline-flex;
  align-items: center;
  height: 32px;
  /* 12px from the outer edge, as the fields */
  padding: 0 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--pjcc-tpf-text);
  background: var(--pjcc-tpf-field-bg);
  border: 1px solid var(--pjcc-tpf-border);
  border-radius: 3px;
}
:where(.pjcc-tpf-cabin-option:hover .pjcc-tpf-cabin-button) { border-color: var(--pjcc-tpf-green); }
/* the chosen one: green-dark text and border */
:where(.pjcc-tpf-cabin-radio:checked + .pjcc-tpf-cabin-button) { color: var(--pjcc-tpf-green); border-color: var(--pjcc-tpf-green); }
:where(.pjcc-tpf-cabin-radio:focus-visible + .pjcc-tpf-cabin-button) { outline: 2px solid var(--pjcc-tpf-text); outline-offset: 2px; }

/* ── swap (36px, on purpose smaller than the 40px fields) ───── */
:where(.pjcc-tpf-swap) {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: 1;
  text-align: center;
  color: var(--pjcc-tpf-green);
  background: var(--pjcc-tpf-field-bg);
  border: 1px solid var(--pjcc-tpf-border);
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
}

/* ── search: the theme's orange button ───────────────────── */
:where(.pjcc-tpf-submit-row) { margin-top: 8px; }
:where(.pjcc-tpf-submit) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 26px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, #ff6900 0%, #cf2e2e 100%);
  border: 0;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #ac3812;
  cursor: pointer;
  appearance: none;
}
:where(.pjcc-tpf-submit:focus-visible, .pjcc-tpf-swap:focus-visible, .pjcc-tpf-step:focus-visible) {
  outline: 2px solid var(--pjcc-tpf-text);
  outline-offset: 2px;
}
:where(.pjcc-tpf.is-busy .pjcc-tpf-submit) { opacity: 0.7; cursor: progress; }

/* #8f2a22 keeps 4.5:1 on a tinted or translucent panel as well as white */
:where(.pjcc-tpf-error) { margin: 0; font-size: 14px; line-height: 1.4; color: #8f2a22; }

/* ── desktop: the form is 720px wide or more ─────────────────
   From | 8 | swap | 8 | To | 16 | Passengers | 16 | Search, then the
   Type of Aircraft row. The DOM order stays as written for screen readers
   and keyboards; only the boxes move. */
@container pjcc-tpf (min-width: 720px) {
  :where(.pjcc-tpf-from, .pjcc-tpf-to) { flex: 1 1 0; }
  :where(.pjcc-tpf-swap) { display: inline-flex; flex: 0 0 36px; margin-bottom: 2px; }
  :where(.pjcc-tpf-pax) { flex: 0 0 auto; margin-left: 8px; }
  :where(.pjcc-tpf-input) { font-size: 15px; }
  :where(.pjcc-tpf-pax-input) { flex: 0 0 40px; width: 40px; }
  :where(.pjcc-tpf-submit-row) { flex: 0 0 auto; order: 1; margin: 0 0 0 8px; }
  :where(.pjcc-tpf-submit) { width: auto; height: 40px; }
  :where(.pjcc-tpf-error) { order: 2; }
  :where(.pjcc-tpf-cabin) { display: block; order: 3; }
}

/* functional, not styling: hidden means hidden, a cabin button's radio is
   invisible (its label is the button) but still takes focus and arrow keys,
   and the buttons show the hand cursor like the theme's own buttons (the
   theme's `a,button { cursor: revert }` would otherwise beat :where()) */
.pjcc-tpf [hidden] { display: none !important; }
.pjcc-tpf button { cursor: pointer; }
.pjcc-tpf.is-busy .pjcc-tpf-submit { cursor: progress; }
.pjcc-tpf .pjcc-tpf-cabin-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}