/* ==========================================================================
   RJL DESIGN SYSTEM — 05 COMPONENTS

   Buttons, cards, badges, forms, notices, empty states. These classes are
   also mapped onto the equivalent WooCommerce and Elementor selectors in the
   commerce layer, so a WooCommerce button and an RJL button are the same
   object rather than two things that merely look similar.
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   Three tiers, not the usual filled/ghost pair: solid, outline and a quiet
   text link. Having a genuine tertiary keeps card footers and form rows from
   turning into a wall of competing boxes.
   ========================================================================== */
.rjl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rjl-space-2xs);
	min-height: 48px;                 /* comfortable touch target */
	padding: var(--rjl-space-xs) var(--rjl-space-md);
	border: var(--rjl-border-heavy) solid transparent;
	border-radius: var(--rjl-radius-sm);
	font-family: var(--rjl-font-display);
	font-size: 0.8125rem;
	font-weight: var(--rjl-weight-bold);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	background: transparent;
	color: inherit;
	transition: background-color var(--rjl-dur-fast) var(--rjl-ease-out),
	            border-color var(--rjl-dur-fast) var(--rjl-ease-out),
	            color var(--rjl-dur-fast) var(--rjl-ease-out),
	            transform var(--rjl-dur-fast) var(--rjl-ease-out),
	            box-shadow var(--rjl-dur-fast) var(--rjl-ease-out);
}

/* Pressed feedback — a real physical cue, not just a hover colour. */
.rjl-btn:active { transform: translateY(1px) scale(0.99); }

.rjl-btn[disabled],
.rjl-btn.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* PRIMARY — the accent. Reserved for the single most important action in any
   view. Two primaries side by side means neither is primary. */
.rjl-btn--primary {
	background: var(--rjl-accent);
	border-color: var(--rjl-accent);
	color: var(--rjl-on-accent);
}
.rjl-btn--primary:hover {
	background: var(--rjl-accent-press);
	border-color: var(--rjl-accent-press);
	/* Flips with the surface. See the token file: ink clears AA on the bright
	   orange, paper clears it on the darker press orange, neither clears both. */
	color: var(--rjl-on-accent-press);
}

/* SOLID — ink. The workhorse for "add to basket" and similar, which keeps the
   accent free to mark the one true primary on the page. */
.rjl-btn--solid {
	background: var(--rjl-text);
	border-color: var(--rjl-text);
	color: var(--rjl-bg);
}
.rjl-btn--solid:hover {
	background: var(--rjl-accent);
	border-color: var(--rjl-accent);
	color: var(--rjl-on-accent);
}

/* OUTLINE */
.rjl-btn--outline {
	border-color: currentColor;
	color: var(--rjl-text);
}
.rjl-btn--outline:hover {
	background: var(--rjl-text);
	color: var(--rjl-bg);
}

/* QUIET — tertiary text action. */
.rjl-btn--quiet {
	min-height: 40px;
	padding-inline: var(--rjl-space-2xs);
	color: var(--rjl-text-muted);
	letter-spacing: var(--rjl-track-label);
}
.rjl-btn--quiet:hover {
	color: var(--rjl-accent-ink);
	background: transparent;
}

.rjl-btn--full  { width: 100%; }
.rjl-btn--large { min-height: 56px; font-size: 0.875rem; padding-inline: var(--rjl-space-lg); }

/* Busy state — used by the add-to-basket flow. */
.rjl-btn.is-busy { pointer-events: none; opacity: 0.75; }
.rjl-btn.is-busy::after {
	content: "";
	position: absolute;
	width: 16px; height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: rjl-spin 0.6s linear infinite;
}
.rjl-btn { position: relative; }

@keyframes rjl-spin { to { transform: rotate(360deg); } }
/* --------------------------------------------------------------------------
   HUB CARD — the five RJL destinations, on-page
   Full-bleed photograph with the label sitting over it. The number ties each
   card back to the same 01–05 set used in the navigation.
   ----------------------------------------------------------------------- */
.rjl-hub-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 15rem;
	padding: var(--rjl-space-md);
	border-radius: var(--rjl-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--rjl-paper);
	background: var(--rjl-ink-900);
	isolation: isolate;
}

.rjl-hub-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform var(--rjl-dur-slow) var(--rjl-ease-out);
}

/* Legibility scrim. Weighted to the bottom where the text sits, so the top of
   the photograph stays untinted. */
.rjl-hub-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(11, 11, 12, 0.10) 0%,
		rgba(11, 11, 12, 0.55) 55%,
		rgba(11, 11, 12, 0.88) 100%
	);
}

.rjl-hub-card:hover .rjl-hub-card__img { transform: scale(1.05); }
.rjl-hub-card:hover { color: var(--rjl-paper); }

.rjl-hub-card__num {
	position: absolute;
	top: var(--rjl-space-md);
	left: var(--rjl-space-md);
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-label);
	color: var(--rjl-accent);
}

.rjl-hub-card__name {
	display: block;
	font-family: var(--rjl-font-display);
	font-size: var(--rjl-text-xl);
	font-weight: var(--rjl-weight-black);
	letter-spacing: var(--rjl-track-head);
	line-height: 1.08;
	text-transform: uppercase;
	margin: 0;
}

.rjl-hub-card__note {
	display: block;
	margin: var(--rjl-space-3xs) auto 0;
	font-size: var(--rjl-text-sm);
	color: var(--rjl-ink-200);
	max-width: 30ch;
}

/* The first card runs wider on desktop, so the row is not five identical
   tiles. Asymmetry by intent. */
@media (min-width: 64em) {
	.rjl-hub-grid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: var(--rjl-space-md);
	}
	.rjl-hub-grid > .rjl-hub-card:nth-child(1) { grid-column: span 3; min-height: 22rem; }
	.rjl-hub-grid > .rjl-hub-card:nth-child(2) { grid-column: span 3; min-height: 22rem; }
	.rjl-hub-grid > .rjl-hub-card:nth-child(3),
	.rjl-hub-grid > .rjl-hub-card:nth-child(4),
	.rjl-hub-grid > .rjl-hub-card:nth-child(5) { grid-column: span 2; min-height: 17rem; }
}

/* ==========================================================================
   BADGE — square by default. Pills are reserved for counts.
   ========================================================================== */
.rjl-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--rjl-space-3xs);
	padding: 3px var(--rjl-space-2xs);
	border-radius: var(--rjl-radius-xs);
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-2xs);
	font-weight: var(--rjl-weight-bold);
	letter-spacing: var(--rjl-track-label);
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
}

.rjl-badge--sale     { background: var(--rjl-accent); color: var(--rjl-on-accent); }
.rjl-badge--out      { background: var(--rjl-ink-100); color: var(--rjl-ink-500); }
.rjl-badge--outline  { border: var(--rjl-border) solid var(--rjl-rule-strong); color: var(--rjl-text-muted); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.rjl-input {
	width: 100%;
	min-height: 48px;
	padding: var(--rjl-space-xs) var(--rjl-space-sm);
	background: var(--rjl-bg-raised);
	border: var(--rjl-border) solid var(--rjl-rule-strong);
	border-radius: var(--rjl-radius-sm);
	font-family: var(--rjl-font-body);
	/* 16px minimum: anything smaller makes iOS Safari zoom on focus. */
	font-size: 1rem;
	color: var(--rjl-text);
	transition: border-color var(--rjl-dur-fast) var(--rjl-ease-out),
	            box-shadow var(--rjl-dur-fast) var(--rjl-ease-out);
}

.rjl-input:hover { border-color: var(--rjl-ink-400); }

.rjl-input:focus {
	outline: none;
	border-color: var(--rjl-accent);
	box-shadow: 0 0 0 3px var(--rjl-accent-tint);
}

.rjl-input::placeholder { color: var(--rjl-text-faint); }

/* Forminator's contact form never picked up .rjl-input above - it ships its
   own bare input/textarea markup, styled by its own plugin CSS to a near-
   invisible near-white fill with no border, so the fields sat almost flush
   with the page background (2026-09 QA: "tone down the white, add a border
   so the fields stand out"). Mapped onto the same input treatment as the
   rest of the site, with a heavier, fully-black border since "stand out"
   was the specific ask, not just "match .rjl-input". */
.page-template-tpl-contact .forminator-input,
.page-template-tpl-contact .forminator-textarea {
	background-color: var(--rjl-paper-sunk) !important;
	border: var(--rjl-border-heavy) solid var(--rjl-ink-950) !important;
	border-radius: var(--rjl-radius-sm) !important;
	color: var(--rjl-text) !important;
	transition: border-color var(--rjl-dur-fast) var(--rjl-ease-out);
}
.page-template-tpl-contact .forminator-input:focus,
.page-template-tpl-contact .forminator-textarea:focus {
	outline: none;
	border-color: var(--rjl-accent) !important;
}

/* ==========================================================================
   EMPTY STATE — a composed view, not a bare line of text.
   ========================================================================== */
.rjl-empty {
	display: grid;
	justify-items: center;
	text-align: center;
	gap: var(--rjl-space-sm);
	padding: var(--rjl-space-2xl) var(--rjl-gutter);
	max-width: 34rem;
	margin-inline: auto;
}
.rjl-empty__icon { color: var(--rjl-ink-300); }
.rjl-empty__title { margin: 0; font-size: var(--rjl-text-2xl); }
.rjl-empty__text { margin: 0; color: var(--rjl-text-muted); }

/* ==========================================================================
   SKELETON — matches the shape it replaces rather than a generic spinner.
   ========================================================================== */
.rjl-skeleton {
	background: linear-gradient(
		90deg,
		var(--rjl-bg-sunk) 25%,
		var(--rjl-ink-100) 37%,
		var(--rjl-bg-sunk) 63%
	);
	background-size: 400% 100%;
	animation: rjl-shimmer 1.4s ease-in-out infinite;
	border-radius: var(--rjl-radius-sm);
}
@keyframes rjl-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.rjl-skeleton--media { aspect-ratio: 1; border-radius: var(--rjl-radius-md); }

/* ==========================================================================
   PULL QUOTE / LYRIC PANEL
   Echoes the sprayed lyrics on the column in the shop. Used sparingly, as a
   section divider on the editorial and about pages.
   ========================================================================== */
.rjl-lyric {
	position: relative;
	padding: var(--rjl-space-xl) var(--rjl-gutter);
	text-align: left;
}
.rjl-lyric__text {
	font-family: var(--rjl-font-display);
	font-size: var(--rjl-text-3xl);
	font-weight: var(--rjl-weight-ultra);
	line-height: 1.02;
	letter-spacing: var(--rjl-track-display);
	text-transform: uppercase;
	max-width: 18ch;
	margin: 0;
	text-wrap: balance;
}
.rjl-lyric__attr {
	display: block;
	margin-top: var(--rjl-space-sm);
	font-family: var(--rjl-font-mono);
	font-size: var(--rjl-text-xs);
	font-weight: var(--rjl-weight-regular);
	letter-spacing: var(--rjl-track-label);
	text-transform: uppercase;
	color: var(--rjl-text-muted);
}

/* --------------------------------------------------------------------------
   ICON — one stroke weight (1.6) across the whole set, set on the <svg>.
   ----------------------------------------------------------------------- */
.rjl-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Hub card text block. Needs to be a block so the name and note stack, and
   positioned above the scrim. */
.rjl-hub-card__body {
	position: relative;
	display: block;
	z-index: 1;
	/* 2026-09 QA round 3: "centre align the titles, then... the sentences
	   under the titles" - centring here is what actually centres the name
	   and note text once they stack (see the display:block fix on each
	   below - without it they were sitting inline, side by side, on one
	   line, never centred or stacked at all). */
	text-align: center;
}

/* ==========================================================================
   UTILITIES

   A deliberately small, closed set. These exist so templates never carry
   one-off inline styles: an inline style sits outside the design system, wins
   against it on specificity, and is invisible to any audit of the stylesheets.
   Every value here comes from the token scales.

   Do not grow this into a general utility framework. If something needs a
   rule that is not here, it usually wants a component class instead.
   ========================================================================== */

/* Text colour — light-background contexts. Inside .rjl-inverse the cascade in
   rjl-tokens.css reassigns these to the paper family. */
.rjl-muted { color: var(--rjl-text-muted); }
.rjl-faint { color: var(--rjl-text-faint); }

/* Spacing */
.rjl-tight    { margin: 0; }
.rjl-mt-sm    { margin-top: var(--rjl-space-sm); }
.rjl-mt-md    { margin-top: var(--rjl-space-md); }
.rjl-mt-lg    { margin-top: var(--rjl-space-lg); }
.rjl-mb-3xs   { margin-bottom: var(--rjl-space-3xs); }
.rjl-mb-lg    { margin-bottom: var(--rjl-space-lg); }

/* Alignment */
.rjl-center-x { margin-inline: auto; }
.rjl-cluster--center { justify-content: center; }

/* Constrained blocks */
.rjl-narrow   { max-width: 34rem; width: 100%; }
.rjl-narrow-sm{ max-width: 32rem; width: 100%; }

/* A whole card that is one link. Kills the underline and lets the price pin
   to the bottom via the flex column. */
.rjl-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* Badge pinned over card artwork. */
.rjl-badge--pinned {
	position: absolute;
	top: var(--rjl-space-2xs);
	left: var(--rjl-space-2xs);
	z-index: var(--rjl-z-raised);
}

/* Prices shown at heading scale outside a product loop. */
.rjl-price-lg {
	font-size: var(--rjl-text-xl);
	font-weight: var(--rjl-weight-bold);
}

/* Opening-hours block: roomier leading so the days scan as a list. */
.rjl-hours {
	font-size: var(--rjl-text-base);
	line-height: 1.9;
}

/* Two-column form row used by the search form. */
.rjl-input-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--rjl-space-2xs);
}

/* ==========================================================================
   TOUCH TARGETS

   Every interactive element needs at least a 44px tap height. For buttons and
   nav links that is set directly. For small inline links inside running text —
   the "view all" link on a section header — setting a 44px height
   would inflate the row they sit in, so the hit area is expanded with an
   absolutely positioned pseudo-element instead. The link looks identical and
   the tap target grows to 44px, centred on it.
   ========================================================================== */
.rjl-section-head__link {
	position: relative;
	display: inline-block;
}

.rjl-section-head__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* Centres a 44px band on a line box shorter than 44px. */
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
	/* Sits behind the text and never intercepts anything but the tap. */
	z-index: 1;
}

/* The brand lockup: 34px of artwork in a 60px bar, so the extra height is free. */
.rjl-brand {
	min-height: 44px;
}

/* ==========================================================================
   MEMBERSHIP FORM (Forminator module 3263, Members page)
   2026-09-14. Forminator's own black theme dropped labels, fields and both
   buttons flush against the box edge with 30px of dead air between rows.
   Everything below maps the form onto the tokens: real inset padding,
   tighter rhythm, small-caps labels, 48px fields, brand buttons, and the
   progress bar on the accent. Scoped to the form's own class so the
   Contact form's separate treatment is untouched.
   ========================================================================== */

/* Title dropdown panel. Forminator appends the open Select2 panel to <body>
   carrying the form's own class, so the form's inset padding above used to
   squeeze the option list to 32px (a scrollbox inside a black box). The
   padding rule is now scoped to the <form>; this styles the panel itself:
   white sheet, ink border, options in the body face, ink highlight. */
.forminator-select-dropdown.forminator-custom-form-3263.forminator-custom-form-3263 {
	padding: 0 !important;
	background: var(--rjl-bg-raised) !important;
	border: 1px solid var(--rjl-ink-950) !important;
	border-radius: var(--rjl-radius-sm) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
	overflow: hidden;
}
.forminator-select-dropdown.forminator-custom-form-3263 .select2-results {
	padding: 0 !important;
}
.forminator-select-dropdown.forminator-custom-form-3263 .select2-results__options {
	max-height: 20rem !important;
	margin: 0 !important;
	padding: var(--rjl-space-2xs) 0 !important;
}
.forminator-select-dropdown.forminator-custom-form-3263 .select2-results__option {
	padding: 0.6rem var(--rjl-space-sm) !important;
	margin: 0 !important;
	font-family: var(--rjl-font-body) !important;
	font-size: var(--rjl-text-sm) !important;
	line-height: 1.3 !important;
	color: var(--rjl-ink-950) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
}
.forminator-select-dropdown.forminator-custom-form-3263 .select2-results__option[aria-selected="true"] {
	background: var(--rjl-ink-100) !important;
	color: var(--rjl-ink-950) !important;
}
.forminator-select-dropdown.forminator-custom-form-3263 .select2-results__option--highlighted,
.forminator-select-dropdown.forminator-custom-form-3263 .select2-results__option--highlighted[aria-selected="true"] {
	background: var(--rjl-ink-950) !important;
	color: #fff !important;
}
form.forminator-custom-form-3263.forminator-custom-form-3263 {
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem) !important;
	border-radius: var(--rjl-radius-lg);
	background: var(--rjl-ink-950) !important;
}
.forminator-custom-form-3263 .forminator-row {
	margin-bottom: var(--rjl-space-md) !important;
}
.forminator-custom-form-3263 .forminator-row:last-child {
	margin-bottom: 0 !important;
}
.forminator-custom-form-3263 .forminator-label {
	display: block !important;
	margin: 0 0 var(--rjl-space-2xs) !important;
	font-family: var(--rjl-font-display) !important;
	font-size: var(--rjl-text-2xs) !important;
	font-weight: var(--rjl-weight-bold) !important;
	letter-spacing: var(--rjl-track-label) !important;
	text-transform: uppercase !important;
	color: var(--rjl-ink-300) !important;
}
.forminator-custom-form-3263 .forminator-required {
	color: var(--rjl-accent) !important;
}
.forminator-custom-form-3263 .forminator-input,
.forminator-custom-form-3263 .forminator-textarea,
.forminator-custom-form-3263 .forminator-select2 + .select2-container .select2-selection--single,
.forminator-custom-form-3263 .select2-container .select2-selection--single {
	height: 48px !important;
	min-height: 0 !important;
	padding: 0 var(--rjl-space-sm) !important;
	display: flex !important;
	align-items: center !important;
	background: var(--rjl-bg-raised) !important;
	border: 1px solid var(--rjl-bg-raised) !important;
	border-radius: var(--rjl-radius-sm) !important;
	font-family: var(--rjl-font-body) !important;
	font-size: 1rem !important;
	color: var(--rjl-ink-950) !important;
	box-shadow: none !important;
	transition: border-color var(--rjl-dur-fast) var(--rjl-ease-out);
}
.forminator-custom-form-3263 .forminator-input:focus,
.forminator-custom-form-3263 .forminator-textarea:focus {
	outline: none !important;
	border-color: var(--rjl-accent) !important;
}
.forminator-custom-form-3263 .forminator-input::placeholder,
.forminator-custom-form-3263 .forminator-textarea::placeholder {
	color: var(--rjl-ink-450) !important;
}
.forminator-custom-form-3263 .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 24px !important;
	padding: 0 !important;
	color: var(--rjl-ink-950) !important;
}
.forminator-custom-form-3263 .select2-container .select2-selection--single .select2-selection__arrow {
	height: 46px !important;
}

/* Progress bar: accent fill on an ink track, percentage in small caps. */
.forminator-custom-form-3263 .forminator-pagination-progress {
	margin: 0 0 var(--rjl-space-lg) !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--rjl-space-sm) !important;
}
.forminator-custom-form-3263 .forminator-progress-label {
	font-family: var(--rjl-font-display) !important;
	font-size: var(--rjl-text-xs) !important;
	font-weight: var(--rjl-weight-bold) !important;
	letter-spacing: var(--rjl-track-label) !important;
	color: var(--rjl-ink-300) !important;
	min-width: 3ch;
}
.forminator-custom-form-3263 .forminator-progress-bar {
	flex: 1 1 auto !important;
	height: 4px !important;
	background: var(--rjl-ink-700) !important;
	border-radius: var(--rjl-radius-pill) !important;
	overflow: hidden;
}
.forminator-custom-form-3263 .forminator-progress-bar span {
	background: var(--rjl-accent) !important;
	height: 100% !important;
	display: block;
}

/* Buttons. Upload is a secondary (paper on ink); Next / Previous / Submit
   carry the accent, same shape as .rjl-btn--primary everywhere else. */
.forminator-custom-form-3263 .forminator-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	padding: var(--rjl-space-xs) var(--rjl-space-md) !important;
	border: var(--rjl-border-heavy) solid transparent !important;
	border-radius: var(--rjl-radius-sm) !important;
	font-family: var(--rjl-font-display) !important;
	font-size: 0.8125rem !important;
	font-weight: var(--rjl-weight-bold) !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background-color var(--rjl-dur-fast) var(--rjl-ease-out), color var(--rjl-dur-fast) var(--rjl-ease-out), border-color var(--rjl-dur-fast) var(--rjl-ease-out);
}
.forminator-custom-form-3263 .forminator-button-upload {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
	color: var(--rjl-paper) !important;
}
.forminator-custom-form-3263 .forminator-button-upload:hover {
	background: var(--rjl-paper) !important;
	border-color: var(--rjl-paper) !important;
	color: var(--rjl-ink-950) !important;
}
.forminator-custom-form-3263 .forminator-file-upload > span,
.forminator-custom-form-3263 .forminator-file-upload .forminator-file-name {
	color: var(--rjl-ink-300) !important;
	font-size: var(--rjl-text-sm) !important;
	margin-left: var(--rjl-space-sm) !important;
}
.forminator-custom-form-3263 .forminator-button-delete {
	min-height: 0 !important;
	padding: 0 var(--rjl-space-2xs) !important;
	color: var(--rjl-ink-300) !important;
}
.forminator-custom-form-3263 .forminator-pagination-submit,
.forminator-custom-form-3263 .forminator-button-paginate,
.forminator-custom-form-3263 .forminator-button-submit {
	background: var(--rjl-accent) !important;
	border-color: var(--rjl-accent) !important;
	color: var(--rjl-on-accent) !important;
	min-width: 9rem;
}
.forminator-custom-form-3263 .forminator-pagination-submit:hover,
.forminator-custom-form-3263 .forminator-button-paginate:hover,
.forminator-custom-form-3263 .forminator-button-submit:hover {
	background: var(--rjl-accent-press) !important;
	border-color: var(--rjl-accent-press) !important;
	color: var(--rjl-on-accent-press) !important;
}
.forminator-custom-form-3263 .forminator-pagination-footer {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: var(--rjl-space-sm);
	margin-top: var(--rjl-space-lg) !important;
	padding-top: var(--rjl-space-md) !important;
	border-top: var(--rjl-border) solid var(--rjl-ink-700) !important;
}
.forminator-custom-form-3263 .forminator-pagination-footer > :only-child {
	margin-left: auto !important;
}
.forminator-custom-form-3263 .forminator-pagination-steps {
	display: none !important;
}


/* Title dropdown: a five-option prefix does not need half the row. It
   takes a fixed 10rem column and the name field takes the rest. */
.forminator-custom-form-3263 .forminator-field-name .forminator-col:has(.forminator-select2) {
	flex: 0 0 10rem !important;
	max-width: 10rem !important;
}
.forminator-custom-form-3263 .forminator-field-name .forminator-col:has(.forminator-input) {
	flex: 1 1 auto !important;
	max-width: none !important;
}
@media (max-width: 40em) {
	.forminator-custom-form-3263 .forminator-field-name .forminator-col:has(.forminator-select2),
	.forminator-custom-form-3263 .forminator-field-name .forminator-col:has(.forminator-input) {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}
.forminator-custom-form-3263 .select2-container {
	width: 100% !important;
}

/* The name field wraps its own inner row, so the outer and inner margins
   stacked into double the gap under it. */
.forminator-custom-form-3263 .forminator-field-name .forminator-row {
	margin-bottom: 0 !important;
}