/*
 * Snaygill Booking Manager — front-end styles.
 *
 * Plain CSS, no build step, deliberately unopinionated about the theme's own look.
 *
 * EVERY colour is a custom property on the widget and standalone shortcode roots.
 * That is the extension point: a theme, a brand mu-plugin, or a
 * later Divi module with colour controls overrides the tokens and never has to
 * fight a selector. It is also why the cell states are tokens rather than
 * hard-coded hexes — the eight states need to stay distinguishable in whatever
 * palette a site uses.
 *
 * Colour NEVER carries meaning on its own: each cell also renders a text marker
 * and a visually-hidden label. See CalendarRenderer.
 */

.sbm-widget,
.sbm-calendar,
.sbm-picker,
.sbm-fleet,
.sbm-tariff,
.sbm-notice,
.sbm-payment-return,
.sbm-booking-lookup,
.sbm-divi-module {
	--sbm-text: #1a1a1a;
	/* 7.2:1 on white and 6.8:1 on the pale surface: the AAA 7:1 target on white (UI-11).
	   It was #5c6670, 5.85:1. */
	--sbm-muted: #4a5560;
	/* The edge of a form field: 4.6:1 on white, over the 3:1 WCAG 1.4.11 asks of a component
	   boundary. The general line colour (#d8dde2, 1.37:1) was used for inputs (UI-04). */
	--sbm-control-border: #6e7781;
	--sbm-line: #d8dde2;
	--sbm-surface: #ffffff;
	--sbm-surface-alt: #f5f7f8;
	--sbm-accent: #14506e;
	--sbm-accent-contrast: #ffffff;
	--sbm-radius: 4px;
	--sbm-gap: 1rem;

	/* Cell states. Each pairs a background with a text colour that meets WCAG AA
	   against it — a state whose label cannot be read is not a state. */
	--sbm-cell-fully-available: #e3f3e8;
	--sbm-cell-fully-available-text: #14522c;
	--sbm-cell-limited: #fdf1dc;
	--sbm-cell-limited-text: #6b4708;
	--sbm-cell-sold-out: #f6e5e5;
	--sbm-cell-sold-out-text: #7a2222;
	--sbm-cell-closed: #eceff1;
	--sbm-cell-closed-text: #4a5560;
	/* Dates that cannot be booked sit on the page background. They were #9aa4ae,
	   2.53:1 on white, which fails WCAG 1.4.3 (BJ-14, 2026-09-14). They now use the
	   muted text colour, 7.2:1 on white; the date's marker and label say why it
	   cannot be booked, so colour carries no meaning on its own. */
	--sbm-cell-past: transparent;
	--sbm-cell-past-text: #4a5560;
	--sbm-cell-too-soon: transparent;
	--sbm-cell-too-soon-text: #4a5560;
	--sbm-cell-too-far-ahead: transparent;
	--sbm-cell-too-far-ahead-text: #4a5560;
	--sbm-cell-no-boats: transparent;
	--sbm-cell-no-boats-text: #4a5560;

	color: var(--sbm-text);
}

/* The widget root. A plain wrapper: it exists so the fragments below it have
   containers to be swapped into, and so the client can read the widget's own
   configuration from data- attributes instead of inventing any of it. */
.sbm-widget {
	display: block;
}

/* Divi's builder must show where dynamic output will appear without invoking the
   live booking/customer paths merely to paint an editor preview. */
.sbm-divi-module--preview {
	display: grid;
	gap: 0.25rem;
	padding: 1rem;
	border: 1px dashed var(--sbm-line);
	border-radius: var(--sbm-radius);
	background: var(--sbm-surface-alt);
	color: var(--sbm-muted);
}

.sbm-divi-module--preview strong {
	color: var(--sbm-text);
}

/* While a fragment is being fetched. Deliberately almost nothing: a spinner would
   be one more thing to get wrong, and the state is already carried properly by the
   `aria-busy` attribute and the live region. Controls are NOT disabled — on a phone
   a disabled-then-re-enabled control is a lost tap, and a second tap is handled
   correctly anyway (it supersedes the first request).

   Only applied after a short delay by the script, so a fast response never flashes. */
.sbm-widget {
	position: relative;
}

/* The content keeps full contrast while it loads. Fading the whole widget to 60% took accent text
   to about 3.2:1 and muted text to 2.5:1 while the controls stayed usable (WCAG 1.4.3, UI-05).
   A small labelled badge shows the wait instead; nothing moves, so there is no motion to reduce. */
.sbm-widget.is-loading {
	cursor: progress;
}

.sbm-widget__loading {
	display: none;
}

.sbm-widget.is-loading .sbm-widget__loading {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.25rem 0.625rem;
	border-radius: var(--sbm-radius);
	background: var(--sbm-accent);
	color: var(--sbm-accent-contrast);
	font-size: 0.875rem;
	font-weight: 600;
}

/* Some themes do not ship WordPress's own screen-reader class, and the calendar
   depends on it for the state labels — so it is defined here rather than assumed.
   `.sbm-live-region` is in this list for a sharper reason: it is an announcement
   for screen readers only, so WITHOUT a rule here it renders as visible text in
   the middle of the page. */
.sbm-calendar .screen-reader-text,
.sbm-picker .screen-reader-text,
.sbm-live-region {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── navigation ─────────────────────────────────────────────────────────── */

/* The optional heading above the calendar, set by the shortcode's `heading`
   attribute. Sized here rather than left to the theme's h3, which on a page with
   its own type scale can arrive either enormous or invisible. */
.sbm-calendar__heading {
	margin: 0 0 var(--sbm-gap);
	font-size: 1.25rem;
	line-height: 1.3;
}

.sbm-calendar__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sbm-gap);
	margin-bottom: var(--sbm-gap);
	flex-wrap: wrap;
}

.sbm-calendar__nav-current {
	font-weight: 700;
	font-size: 1.125rem;
}

.sbm-calendar__nav-link {
	/* 44px tall, the WCAG 2.5.5 (AAA) target size; it was 40px. Flex centres the
	   label, and the gap keeps the arrow apart from the month name. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	box-sizing: border-box;
	min-height: 2.75rem;
	text-decoration: none;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sbm-line);
	border-radius: var(--sbm-radius);
	color: var(--sbm-accent);
}

.sbm-calendar__nav-link:hover,
.sbm-calendar__nav-link:focus {
	background: var(--sbm-surface-alt);
}

/* ── the month table ───────────────────────────────────────────────────── */

.sbm-calendar__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.sbm-calendar__caption {
	text-align: left;
	padding-bottom: 0.5rem;
	color: var(--sbm-muted);
	font-size: 0.875rem;
}

/* The calendar root is in these selectors so they outrank a theme's
   `.entry-content tr th` / `tr td` (Divi pads cells 6px 24px, which crushed the
   grid at 480px and narrower; WCAG 1.4.10, BJ-14 2026-09-14). */
.sbm-calendar .sbm-calendar__table th {
	padding: 0.5rem 0.25rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sbm-muted);
	border-bottom: 1px solid var(--sbm-line);
}

.sbm-calendar__table th abbr {
	text-decoration: none;
	border: 0;
}

.sbm-calendar__table td.sbm-calendar__cell {
	border: 1px solid var(--sbm-line);
	padding: 0;
	vertical-align: top;
}

.sbm-calendar__table td.sbm-calendar__pad {
	border: 0;
	padding: 0;
}

.sbm-calendar__link,
.sbm-calendar__static {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	min-height: 3.25rem;
	padding: 0.375rem 0.5rem;
	text-decoration: none;
	color: inherit;
}

.sbm-calendar__link:hover,
.sbm-calendar__link:focus {
	outline: 2px solid var(--sbm-accent);
	outline-offset: -2px;
}

.sbm-calendar__daynum {
	font-weight: 700;
	font-size: 0.9375rem;
}

.sbm-calendar__marker {
	font-size: 0.875rem;
	line-height: 1;
}

.sbm-calendar__cell.is-selected {
	box-shadow: inset 0 0 0 2px var(--sbm-accent);
}

/* Forced colours (Windows High Contrast) removes box-shadows, so the ring above vanished and the
   chosen date looked like every other available date (audit D2-02, 2026-09-15). An outline survives,
   painted in the system highlight colour. It sits on the cell edge; the link's keyboard focus ring
   below is drawn further in, so the two stay distinguishable when both apply. */
@media (forced-colors: active) {
	.sbm-calendar__cell.is-selected {
		outline: 3px solid Highlight;
		outline-offset: -3px;
	}

	.sbm-calendar .sbm-calendar__cell.is-selected a.sbm-calendar__link:focus-visible {
		outline-offset: -7px;
	}
}

.sbm-calendar__cell--fully-available { background: var(--sbm-cell-fully-available); color: var(--sbm-cell-fully-available-text); }
.sbm-calendar__cell--limited         { background: var(--sbm-cell-limited);         color: var(--sbm-cell-limited-text); }
.sbm-calendar__cell--sold-out        { background: var(--sbm-cell-sold-out);        color: var(--sbm-cell-sold-out-text); }
.sbm-calendar__cell--closed          { background: var(--sbm-cell-closed);          color: var(--sbm-cell-closed-text); }
.sbm-calendar__cell--past            { background: var(--sbm-cell-past);            color: var(--sbm-cell-past-text); }
.sbm-calendar__cell--too-soon        { background: var(--sbm-cell-too-soon);        color: var(--sbm-cell-too-soon-text); }
.sbm-calendar__cell--too-far-ahead   { background: var(--sbm-cell-too-far-ahead);   color: var(--sbm-cell-too-far-ahead-text); }
.sbm-calendar__cell--no-boats        { background: var(--sbm-cell-no-boats);        color: var(--sbm-cell-no-boats-text); }

/* ── key ───────────────────────────────────────────────────────────────── */

.sbm-calendar__key {
	list-style: none;
	margin: var(--sbm-gap) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	font-size: 0.8125rem;
	color: var(--sbm-muted);
}

.sbm-calendar__key-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.sbm-calendar__key-item .sbm-calendar__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: var(--sbm-radius);
	border: 1px solid var(--sbm-line);
}

.sbm-calendar__key-item--fully-available .sbm-calendar__marker { background: var(--sbm-cell-fully-available); color: var(--sbm-cell-fully-available-text); }
.sbm-calendar__key-item--limited         .sbm-calendar__marker { background: var(--sbm-cell-limited);         color: var(--sbm-cell-limited-text); }
.sbm-calendar__key-item--sold-out        .sbm-calendar__marker { background: var(--sbm-cell-sold-out);        color: var(--sbm-cell-sold-out-text); }
.sbm-calendar__key-item--closed          .sbm-calendar__marker { background: var(--sbm-cell-closed);          color: var(--sbm-cell-closed-text); }

/* ── list alternative ──────────────────────────────────────────────────── */

.sbm-calendar__list {
	margin-top: calc(var(--sbm-gap) * 1.5);
	padding-top: var(--sbm-gap);
	border-top: 1px solid var(--sbm-line);
}

.sbm-calendar__list-heading {
	font-size: 0.9375rem;
	margin: 0;
	cursor: pointer;
	color: var(--sbm-accent);
	/* A generous hit area: this is the control that gives someone who cannot use
	   the grid their way in, so it should not be a 14px word. At least 44px tall,
	   the WCAG 2.5.5 (AAA) target: one line of text was 35.8px (audit D3-03).
	   A summary is a block-level list item, so min-height applies without losing
	   its disclosure marker. */
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.625rem 0;
}

.sbm-calendar__list[open] .sbm-calendar__list-heading {
	margin-bottom: 0.5rem;
}

.sbm-calendar__list ul {
	margin: 0;
	padding-left: 1.25rem;
}

.sbm-calendar__list li {
	margin-bottom: 0;
}

/* Each date is a 44px-tall target (WCAG 2.5.5 AAA); as plain text they were 19px (audit D3-03).
   inline-flex keeps the price text beside the link on the same line. */
.sbm-calendar__list li > a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* Shown inside the open list when the month has nothing bookable — so it must
   read as an answer, not as a stray sentence next to styled siblings. */
.sbm-calendar__list-empty {
	margin: 0;
	color: var(--sbm-muted);
	font-size: 0.9375rem;
}

/* ── published tariff ───────────────────────────────────────────────────── */

/* The price table a customer reads before booking. Deliberately plain: it has to
   sit inside whatever page the site builder drops it into without fighting the
   theme, so it borrows the calendar's tokens and adds no colour of its own. */
.sbm-tariff {
	margin: 0 0 var(--sbm-gap);
}

.sbm-tariff__heading {
	margin: 0 0 var(--sbm-gap);
	font-size: 1.25rem;
	line-height: 1.3;
}

.sbm-tariff__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--sbm-surface);
}

/* The tariff root is in the selector so a theme's `.entry-content tr th/td` padding
   cannot out-rank it, as it did the calendar's (Codex UI review, 2026-09-15). */
.sbm-tariff .sbm-tariff__table th,
.sbm-tariff .sbm-tariff__table td {
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid var(--sbm-line);
	text-align: left;
}

.sbm-tariff__table thead th {
	font-size: 0.9375rem;
	white-space: nowrap;
}

/* Prices are compared down a column, so they are tabular and right-aligned. */
.sbm-tariff__table td {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.sbm-tariff__table th[scope="row"] {
	font-weight: 600;
}

.sbm-tariff__note {
	margin: 0.5rem 0 0;
	color: var(--sbm-muted);
	font-size: 0.9375rem;
}

/* ── picker ────────────────────────────────────────────────────────────── */

.sbm-picker {
	margin-top: calc(var(--sbm-gap) * 1.5);
	padding: var(--sbm-gap);
	background: var(--sbm-surface-alt);
	border-radius: var(--sbm-radius);
}

.sbm-picker__heading {
	margin: 0 0 0.25rem;
	font-size: 1.125rem;
}

/* The nudge shown in place of the picker before a date is chosen. */
.sbm-picker__prompt {
	margin: 0;
	color: var(--sbm-muted);
}

.sbm-picker__times,
.sbm-picker__hold-note,
.sbm-details__hold-note {
	color: var(--sbm-muted);
	font-size: 0.875rem;
	margin: 0.25rem 0 0.75rem;
}

.sbm-picker__options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.sbm-picker__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sbm-gap);
	flex-wrap: wrap;
	padding: 0.875rem 1rem;
	background: var(--sbm-surface);
	border: 1px solid var(--sbm-line);
	border-radius: var(--sbm-radius);
}

.sbm-picker__option--bundle {
	border-color: var(--sbm-accent);
}

/* The option's text block — the left flex child, opposite the choose button.
   `min-width: 0` is the load-bearing part: without it a long boat name refuses
   to wrap and pushes the button off the row on a narrow phone. */
.sbm-picker__option-detail {
	flex: 1 1 12rem;
	min-width: 0;
}

.sbm-picker__option-name {
	margin: 0;
	font-size: 1rem;
}

.sbm-picker__option-capacity {
	margin: 0.125rem 0 0;
	color: var(--sbm-muted);
	font-size: 0.8125rem;
}

.sbm-picker__option-price {
	margin: 0.25rem 0 0;
	font-weight: 700;
}

.sbm-picker__unavailable {
	font-weight: 700;
	margin: 0;
}

.sbm-picker__nudge {
	margin: 0.25rem 0 0;
	color: var(--sbm-muted);
}

/* ── buttons ───────────────────────────────────────────────────────────── */

.sbm-button {
	/* 44px tall, the WCAG 2.5.5 (AAA) target size; it was 40px (audit for #54,
	   2026-09-14). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	text-align: center;
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--sbm-accent);
	border-radius: var(--sbm-radius);
	background: var(--sbm-accent);
	color: var(--sbm-accent-contrast);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.sbm-button:hover,
.sbm-button:focus {
	filter: brightness(1.1);
	color: var(--sbm-accent-contrast);
}

.sbm-button--secondary {
	background: transparent;
	color: var(--sbm-accent);
}

.sbm-picker__selected {
	margin: 0;
}

.sbm-picker__selected-label {
	display: inline-block;
	padding: 0.625rem 0.75rem;
	border-left: 4px solid var(--sbm-cell-fully-available-text);
	border-radius: var(--sbm-radius);
	background: var(--sbm-cell-fully-available);
	color: var(--sbm-cell-fully-available-text);
	font-weight: 700;
}

.sbm-hold-form {
	margin: 0;
}

/* ── customer details ──────────────────────────────────────────────────── */

.sbm-details {
	margin-top: calc(var(--sbm-gap) * 1.5);
	padding-top: calc(var(--sbm-gap) * 1.25);
	border-top: 1px solid var(--sbm-line);
}

.sbm-details__heading,
.sbm-booking-lookup__heading,
.sbm-payment-return__heading {
	margin: 0 0 0.375rem;
}

.sbm-details__intro,
.sbm-booking-lookup__intro {
	margin: 0 0 var(--sbm-gap);
	color: var(--sbm-muted);
}

.sbm-details__summary,
.sbm-booking-lookup__summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem var(--sbm-gap);
	margin: 0 0 calc(var(--sbm-gap) * 1.25);
	padding: var(--sbm-gap);
	background: var(--sbm-surface);
	border: 1px solid var(--sbm-line);
	border-radius: var(--sbm-radius);
}

.sbm-details__summary div,
.sbm-booking-lookup__summary div {
	min-width: 0;
}

.sbm-details__summary dt,
.sbm-booking-lookup__summary dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sbm-muted);
}

.sbm-details__summary dd,
.sbm-booking-lookup__summary dd {
	margin: 0.125rem 0 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.sbm-details__form,
.sbm-booking-lookup__form {
	display: grid;
	gap: var(--sbm-gap);
}

.sbm-field {
	display: grid;
	gap: 0.25rem;
}

.sbm-field label {
	font-weight: 600;
}

.sbm-field input {
	width: 100%;
	min-height: 2.75rem;
	box-sizing: border-box;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--sbm-control-border);
	border-radius: var(--sbm-radius);
	background: var(--sbm-surface);
	color: var(--sbm-text);
	font: inherit;
}

.sbm-field input:focus {
	outline: 2px solid var(--sbm-accent);
	outline-offset: 2px;
}

.sbm-field.has-error input {
	border-color: #a12727;
}

.sbm-field__error {
	min-height: 1.25em;
	font-size: 0.8125rem;
	color: #7a2222;
}

.sbm-field__help {
	margin: 0;
	font-size: 0.875rem;
	color: var(--sbm-muted);
}

.sbm-error-summary {
	padding: 0.875rem 1rem;
	border: 2px solid #a12727;
	border-radius: var(--sbm-radius);
	background: var(--sbm-cell-sold-out);
	color: var(--sbm-cell-sold-out-text);
}

.sbm-error-summary:focus {
	outline: 3px solid var(--sbm-accent);
	outline-offset: 3px;
}

.sbm-error-summary__heading {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.sbm-error-summary ul {
	margin: 0;
	padding-left: 1.25rem;
}

.sbm-error-summary a {
	color: inherit;
	font-weight: 600;
}

/* Each problem is a 44px-tall target (WCAG 2.5.5 AAA). They are a list of links, not words in a
   sentence, and were 19px tall (audit D3-03). */
.sbm-error-summary li > a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.sbm-details__form .sbm-button,
.sbm-booking-lookup__form .sbm-button {
	justify-self: start;
}

/* ── payment return and find-my-booking ───────────────────────────────── */

.sbm-payment-return,
.sbm-booking-lookup {
	padding: calc(var(--sbm-gap) * 1.25);
	background: var(--sbm-surface-alt);
	border: 1px solid var(--sbm-line);
	border-radius: var(--sbm-radius);
}

.sbm-payment-return {
	border-left: 4px solid var(--sbm-muted);
}

.sbm-payment-return--success {
	border-left-color: #1f7a44;
}

.sbm-payment-return--warning {
	border-left-color: #b8860b;
}

.sbm-payment-return--error {
	border-left-color: #a12727;
}

.sbm-payment-return__message,
.sbm-payment-return__reference {
	margin: 0.5rem 0 0;
}

.sbm-booking-lookup__result {
	margin: 0 0 calc(var(--sbm-gap) * 1.25);
}

.sbm-booking-lookup__result h3 {
	margin: 0 0 0.5rem;
}

.sbm-booking-lookup__summary {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 0;
}

/* ── notices ───────────────────────────────────────────────────────────── */

.sbm-notice {
	padding: 0.75rem 1rem;
	border-radius: var(--sbm-radius);
	border-left: 4px solid var(--sbm-muted);
	background: var(--sbm-surface-alt);
	margin: 0 0 var(--sbm-gap);
}

.sbm-notice--success { border-left-color: #1f7a44; background: var(--sbm-cell-fully-available); color: var(--sbm-cell-fully-available-text); }
.sbm-notice--warning { border-left-color: #b8860b; background: var(--sbm-cell-limited);         color: var(--sbm-cell-limited-text); }
.sbm-notice--error   { border-left-color: #a12727; background: var(--sbm-cell-sold-out);        color: var(--sbm-cell-sold-out-text); }

/* ── fleet ─────────────────────────────────────────────────────────────── */

.sbm-fleet__heading {
	margin: 0 0 var(--sbm-gap);
}

.sbm-fleet__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: calc(var(--sbm-gap) * 1.5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.sbm-fleet__boat {
	background: var(--sbm-surface);
	border: 1px solid var(--sbm-line);
	border-radius: var(--sbm-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sbm-fleet__media {
	margin: 0;
	line-height: 0;
}

.sbm-fleet__image {
	width: 100%;
	height: 15rem;
	object-fit: cover;
}

.sbm-fleet__body {
	padding: var(--sbm-gap);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	/* Fills the card so the button sits at the bottom regardless of how much
	   copy each boat has — otherwise a boat with a shorter description gets a
	   button floating mid-card. */
	flex: 1;
}

.sbm-fleet__name {
	margin: 0;
	font-size: 1.25rem;
}

.sbm-fleet__capacity,
.sbm-fleet__description {
	margin: 0;
}

.sbm-fleet__capacity {
	color: var(--sbm-muted);
	font-size: 0.875rem;
}

.sbm-fleet__notice {
	margin: 0;
	padding: 0.5rem 0.75rem;
	background: var(--sbm-cell-limited);
	color: var(--sbm-cell-limited-text);
	border-radius: var(--sbm-radius);
	font-size: 0.875rem;
}

.sbm-fleet__facilities {
	margin: 0;
	padding-left: 1.125rem;
	font-size: 0.9375rem;
	columns: 2;
	column-gap: var(--sbm-gap);
}

.sbm-fleet__access h4 {
	margin: 0 0 0.25rem;
	font-size: 0.9375rem;
}

.sbm-fleet__access p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--sbm-muted);
}

.sbm-fleet__body .sbm-button {
	margin-top: auto;
	align-self: flex-start;
}

/* ── what customers are told when they need a person ──────────────────── */

/* Only the number is kept on one line, so its digits never split. The whole "Call the office on …"
   sentence used to be nowrap: at 320px with text spacing increased it ran past the notice and the
   screen edge, and the last digits were clipped (WCAG 1.4.10 and 1.4.12, audit D1-05 and D7-05).
   The sentence says so explicitly, so it wraps even inside a container that does not. */
.sbm-contact {
	white-space: normal;
}

.sbm-contact__phone {
	white-space: nowrap;
}

.sbm-widget a.sbm-contact__phone,
.sbm-notice a.sbm-contact__phone,
.sbm-payment-return a.sbm-contact__phone,
.sbm-booking-lookup a.sbm-contact__phone {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* The phone and Conditions of Hire links sit inside sentences, so they cannot become 44px boxes
   without spreading the lines apart. Vertical padding on an inline link enlarges what can be tapped
   (towards the 44px WCAG 2.5.5 AAA target) without changing the line height or the layout
   (audit D3-03).
   The padded box does overlap the lines above and below it, which is only safe because each of these
   sentences holds exactly one link: a second link in the same paragraph would steal taps meant for it,
   so give that paragraph its own rule rather than adding a link here. */
a.sbm-contact__phone,
.sbm-details__conditions a {
	padding-block: 0.8125rem;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.sbm-details__conditions {
	margin: 0.5rem 0;
	color: var(--sbm-text);
}

.sbm-details a {
	color: var(--sbm-accent);
	text-decoration: underline;
}

/* ── theme resilience: link colour and keyboard focus ─────────────────── */

/* Themes style bare elements with selectors that beat a single plugin class. On
   the staging Divi site (BJ-14, 2026-09-14) `a:not(.et_pb_button)` coloured links
   #82c0c7: day numbers fell to 1.76:1 on the available green, and month links and
   secondary buttons to 2.03:1 on white (WCAG 1.4.3). Adding the component root to
   the selector wins without !important, so a site can still restyle through the
   tokens above. */
.sbm-calendar a.sbm-calendar__link {
	color: inherit;
}

.sbm-calendar a.sbm-calendar__nav-link,
.sbm-calendar .sbm-calendar__list a,
.sbm-fleet a.sbm-button--secondary {
	color: var(--sbm-accent);
}

.sbm-widget a.sbm-button:not(.sbm-button--secondary),
.sbm-fleet a.sbm-button:not(.sbm-button--secondary) {
	color: var(--sbm-accent-contrast);
}

.sbm-details .sbm-error-summary a {
	color: inherit;
}

/* A visible keyboard focus indicator on every plugin control and focus target.
   Divi removes outlines with `:focus { outline: 0 }`, and `.sbm-button` only
   brightened on focus, so a keyboard user could not see where they were (WCAG
   2.4.7 AA). 3px of the accent colour is 8.74:1 on white, which also meets the
   2px and 3:1 of 2.4.13 Focus Appearance (AAA). `:focus-visible` keeps the ring
   off mouse clicks. */
:is(.sbm-widget, .sbm-calendar, .sbm-picker, .sbm-fleet, .sbm-tariff, .sbm-payment-return, .sbm-booking-lookup, .sbm-divi-module)
	:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.sbm-notice[tabindex]:focus-visible {
	outline: 3px solid var(--sbm-accent);
	outline-offset: 2px;
}

/* Inside the date cell, so the ring is not drawn over the neighbouring dates. */
.sbm-calendar .sbm-calendar__cell a.sbm-calendar__link:focus-visible {
	outline-offset: -3px;
}

/* ── narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 32rem) {
	/* Three flex items with space-between WRAP at narrow widths, which put the
	   previous and current month on one line and next month orphaned on another
	   (seen at 520px). A 3-column grid keeps them on one row in the right order
	   regardless of label length. */
	.sbm-calendar__nav {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 0.5rem;
	}

	.sbm-calendar__nav-link {
		padding: 0.5rem 0.375rem;
		font-size: 0.8125rem;
		text-align: center;
	}

	.sbm-calendar__nav-link--next {
		/* Sits in column 3 even when there is no previous-month link, so the
		   current month stays centred rather than sliding left. */
		grid-column: 3;
	}

	.sbm-calendar__nav-current {
		font-size: 1rem;
		text-align: center;
	}

	.sbm-calendar__link,
	.sbm-calendar__static {
		min-height: 2.75rem;
		padding: 0.25rem;
		align-items: center;
	}

	.sbm-calendar__daynum {
		font-size: 0.8125rem;
	}

	.sbm-fleet__facilities {
		columns: 1;
	}

	.sbm-picker__option {
		/* Stack so the price and the button are not squeezed onto one line. */
		flex-direction: column;
		align-items: flex-start;
	}

	.sbm-details__summary,
	.sbm-booking-lookup__summary {
		grid-template-columns: 1fr;
	}

	.sbm-details__form .sbm-button,
	.sbm-booking-lookup__form .sbm-button,
	.sbm-picker__choose-form,
	.sbm-picker__choose-form .sbm-button {
		width: 100%;
	}
}