/*
 * Pasion Booking Form — rider-facing styles.
 * Brand: navy #073267, red #DE1B1F. Goal: calm, legible, accessible.
 * WCAG contrast, visible focus, large tap targets, reduced-motion respected.
 */

.pasion-booking {
	--navy: #073267;
	--navy-700: #0a2a52;
	--red: #DE1B1F;
	--red-700: #b51519;
	--ink: #1c2733;
	--muted: #51606e;
	--line: #c7d0da;
	--bg-soft: #f4f7fb;
	--ok-bg: #e9f7ec;
	--ok-ink: #11602b;
	--err-bg: #fdecec;
	--err-ink: #9b1c1f;

	max-width: 720px;
	margin: 0 auto;
	color: var(--ink);
	font-size: 17px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

.pasion-booking *,
.pasion-booking *::before,
.pasion-booking *::after { box-sizing: border-box; }

.pasion-intro { font-size: 17px; color: var(--ink); margin: 0 0 16px; }

/* Promotional discount banner ---------------------------------------------
   Brand navy background, white text, red accent bar. Prominent but static —
   no motion. The message is conveyed by text (not colour alone), and the
   discount is also itemised as a line in the fare below. */
.pasion-promo-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--navy);
	color: #fff;
	border: 2px solid var(--navy);
	border-left: 6px solid var(--red);
	border-radius: 10px;
	padding: 14px 18px;
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.4;
}
.pasion-promo-banner strong,
.pasion-promo-text { color: #fff; }
.pasion-promo-emoji { font-size: 24px; line-height: 1; flex: 0 0 auto; }

.pasion-phone-fallback {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-left: 4px solid var(--navy);
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 24px;
	font-size: 16px;
}
.pasion-phone-fallback a { color: var(--navy); font-weight: 700; }

/* Sections ---------------------------------------------------------------- */
.pasion-section {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 22px 24px 24px;
	margin: 0 0 24px;
	background: #fff;
}
.pasion-section > legend,
.pasion-fare-section > h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--navy);
	padding: 0 8px;
	margin: 0;
	line-height: 1.3;
}
.pasion-fare-section > h2 { padding: 0; margin-bottom: 12px; }
.pasion-pay h3 { color: var(--navy); font-size: 18px; margin: 18px 0 4px; }

/* Layout rows ------------------------------------------------------------- */
.pasion-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
/* Both columns share ONE top edge. The old `.pasion-field:first-child` reset
   only zeroed the first column, so the second column kept a 14px top margin and
   dropped below its partner — that is what made First/Last name (and every other
   paired row) uneven. Vertical rhythm now lives in a single rule below, applied
   BETWEEN groups, never inside a row. This one row structure is the pattern for
   every paired row. */
.pasion-row > .pasion-field { flex: 1 1 240px; margin-top: 0; }

/* One vertical-rhythm rule for each input section: every field group / row is
   separated from the one above it by the same gap. Row children are reset to 0
   above, so a paired column can never pick this up and drop. */
fieldset.pasion-section > * + *,
.pasion-round-extra > * + * { margin-top: 20px; }

/* Labels: one consistent block. A fixed line-height + one-line min-height means a
   short label ("Phone", "Trip date") and a longer/optional one ("Email
   (optional)", "Pickup time") reserve the same height, so their inputs stay
   level. */
label,
.pasion-toggle-label {
	display: block;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	min-height: 1.35em;
	margin: 0 0 8px;
	color: var(--ink);
}
.pasion-sub { font-weight: 500; font-size: 15px; min-height: 0; margin: 12px 0 8px; color: var(--muted); }
.pasion-req { color: var(--red); font-weight: 700; }
.pasion-optional { color: var(--muted); font-weight: 500; font-size: 14px; }

/* Controls ---------------------------------------------------------------- */
.pasion-booking input[type="text"],
.pasion-booking input[type="tel"],
.pasion-booking input[type="email"],
.pasion-booking input[type="number"],
.pasion-booking input[type="date"],
.pasion-booking input[type="time"],
.pasion-booking select,
.pasion-booking textarea {
	width: 100%;
	min-height: 48px;            /* large tap target */
	padding: 10px 12px;
	font-size: 17px;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 8px;
	appearance: none;
}
.pasion-booking textarea { min-height: 88px; resize: vertical; }

.pasion-booking input::placeholder { color: #8794a1; }

/* Visible keyboard focus on EVERY control. */
.pasion-booking input:focus-visible,
.pasion-booking select:focus-visible,
.pasion-booking textarea:focus-visible,
.pasion-booking button:focus-visible,
.pasion-seg input:focus-visible + *,
.pasion-booking a:focus-visible {
	outline: 3px solid var(--navy);
	outline-offset: 2px;
	border-color: var(--navy);
}
/* Fallback for browsers without :focus-visible */
.pasion-booking input:focus,
.pasion-booking select:focus,
.pasion-booking textarea:focus { border-color: var(--navy); }

.pasion-help { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.pasion-inline-note {
	font-size: 15px; margin: 8px 0 0; padding: 8px 12px;
	background: var(--bg-soft); border-left: 3px solid var(--navy); border-radius: 4px;
}

/* Checkboxes / radios ----------------------------------------------------- */
.pasion-check label { font-weight: 500; display: flex; align-items: flex-start; gap: 10px; }
.pasion-check input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; flex: 0 0 auto; margin-top: 2px; accent-color: var(--navy); }

.pasion-segmented { display: flex; gap: 10px; flex-wrap: wrap; }
.pasion-seg {
	display: flex; align-items: center; gap: 8px;
	font-weight: 500; margin: 0;
	border: 1.5px solid var(--line); border-radius: 8px;
	padding: 10px 16px; min-height: 48px; cursor: pointer; background: #fff;
}
.pasion-seg input { width: 22px; height: 22px; min-height: 0; accent-color: var(--navy); margin: 0; }
.pasion-seg:has(input:checked) { border-color: var(--navy); background: var(--bg-soft); }

/* Date of birth (request mode): Month · Day · Year on ONE row, as columns.
   The controls otherwise inherit width:100% and would stack. min-width:0 lets
   them shrink so the row holds together on narrow screens. */
.pasion-dob { display: flex; gap: 10px; align-items: flex-start; }
.pasion-dob select,
.pasion-dob input { width: auto; min-width: 0; flex: 1 1 0; }
.pasion-dob #pb-dob-month { flex: 1.5 1 0; }   /* month names are the widest */
.pasion-dob #pb-dob-year  { flex: 1.1 1 0; }

/* "You are not charged online." stays on ONE line (never wraps). */
.pasion-no-charge { white-space: nowrap; }

.pasion-degraded {
	background: #fff7e6; border: 1px solid #e3b341; border-radius: 6px;
	padding: 12px 14px; font-size: 15px; color: #6b4e00; margin: 0 0 12px;
}
.pasion-degraded a { color: var(--navy); font-weight: 700; }

/* Fare breakdown ---------------------------------------------------------- */
.pasion-fare {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px 22px 14px;
	background: var(--bg-soft);
	margin-bottom: 28px;
}
.pasion-fare-empty { color: var(--muted); padding: 16px 4px; margin: 0; }
.pasion-fare table { width: 100%; border-collapse: collapse; }
.pasion-fare th { text-align: left; font-weight: 600; padding: 16px 12px 10px; color: var(--navy); }
.pasion-fare td { padding: 15px 12px; border-bottom: 1px solid var(--line); }
.pasion-fare td.amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The sum line reads like a receipt total: extra space above, a strong navy rule,
   and a tinted band to lift it off the line items. */
.pasion-fare tr.pasion-total td { border-bottom: none; border-top: 2px solid var(--navy); background: #eef3fa; font-weight: 800; font-size: 20px; padding-top: 20px; padding-bottom: 18px; }
.pasion-fare .pasion-hint { color: var(--muted); font-size: 14px; padding: 10px 12px 16px; }
/* Promo discount line: reads as a reduction — green amount + a subtle tint. */
.pasion-fare tr.pasion-discount td { color: var(--ok-ink); font-weight: 600; }
.pasion-fare tr.pasion-discount td.amt { color: var(--ok-ink); }

/* Buttons ----------------------------------------------------------------- */
.pasion-proceed-btn,
.pasion-pay-btn {
	display: inline-block;
	width: 100%;
	min-height: 56px;
	margin-top: 8px;
	padding: 14px 20px;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	background: var(--red);
	border: 2px solid var(--red);
	border-radius: 10px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.pasion-proceed-btn:hover:not(:disabled),
.pasion-pay-btn:hover:not(:disabled) { background: var(--red-700); border-color: var(--red-700); }
.pasion-proceed-btn:disabled,
.pasion-pay-btn:disabled { background: #b9c2cc; border-color: #b9c2cc; cursor: not-allowed; }

#pb-payment-element { margin: 12px 0; padding: 4px 0; }

/* Messages ---------------------------------------------------------------- */
.pasion-message {
	margin-top: 16px; padding: 14px 16px;
	background: var(--err-bg); border: 1px solid #e5a3a4; border-left: 4px solid var(--red);
	border-radius: 6px; color: var(--err-ink); font-weight: 600;
}
.pasion-success {
	margin-top: 16px; padding: 18px 20px;
	background: var(--ok-bg); border: 1px solid #9ad3ab; border-left: 4px solid #1a8f3c;
	border-radius: 8px; color: var(--ok-ink); font-size: 18px; font-weight: 600;
}

/* Field-level error state */
.pasion-booking .pasion-invalid,
.pasion-booking [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.pasion-field-msg { color: var(--err-ink); font-size: 14px; font-weight: 600; margin: 6px 0 0; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.pasion-booking * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Small screens: stack the two columns. Reset the flex basis — when the row
   becomes a column, `flex: 1 1 240px` would treat 240px as the item HEIGHT and
   blow each field up to 240px tall; `flex: 0 0 auto` sizes them to content. The
   flex row-gap then provides the same 20px vertical rhythm used everywhere. */
@media (max-width: 540px) {
	.pasion-row { flex-direction: column; gap: 20px; }
	.pasion-row > .pasion-field { flex: 0 0 auto; width: 100%; }
	.pasion-booking { font-size: 16px; }
}