/**
 * Solé sunbed booking form.
 *
 * Styled to sit inside the Fidalgo (Qode Interactive) theme alongside the
 * existing Contact Form 7 reservation form, whose look comes from the theme's
 * global input rules rather than from anything in `.qodef-contact-form-7` —
 * that class only carries margin resets.
 *
 * Colours are pulled from the theme's own custom properties
 * (--qode-main-color and friends) with hardcoded fallbacks, so a rebrand in the
 * theme options carries through here for free and the form still renders on a
 * different theme. Values were read off the live site: the palette is dark
 * green #102B2A with a tan #B58C67 accent, which is why borders are light.
 *
 * The look being matched:
 *   inputs  underline only, transparent, 16px/300, padding 8px 0, margin 0 0 31px
 *   button  Jost 12px/400, uppercase, .1em tracking, square, padding 16px 50px
 */

.sole-sb {
	/* --- theme hooks. Override these to restyle, not the rules below. --- */
	--sole-sb-accent: var(--qode-main-color, #b58c67);
	--sole-sb-accent-hover: var(--qode-border-color, #c9a581);

	/* The theme puts forms on dark sections, hence a light hairline. On a
	   light section, override this and --sole-sb-text. */
	--sole-sb-line: rgba(255, 255, 255, 0.5);
	--sole-sb-line-focus: var(--qode-border-color, #c9a581);
	--sole-sb-text: var(--qode-paragraph-color, inherit);
	--sole-sb-heading: var(--qode-heading-color, inherit);

	--sole-sb-ok: #7fb98b;
	--sole-sb-warn: #e0b070;
	--sole-sb-bad: #e08a84;

	/* The theme's own rhythm: 31px under every control. */
	--sole-sb-gap: 31px;

	max-width: 40rem;
	color: var(--sole-sb-text);
}

.sole-sb *,
.sole-sb *::before,
.sole-sb *::after {
	box-sizing: border-box;
}

.sole-sb__title {
	margin: 0 0 var(--sole-sb-gap);
	color: var(--sole-sb-heading);
}

/* --- layout ------------------------------------------------------------ */

.sole-sb__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 30px;
}

@media (max-width: 680px) {
	.sole-sb__row {
		grid-template-columns: 1fr;
	}
}

.sole-sb__field {
	margin: 0 0 var(--sole-sb-gap);
}

/* Sentence case at body size, matching the CF7 reservation form's labels
   exactly (17px/300, no tracking). An uppercase micro-label would read as a
   different form on the same page. */
.sole-sb .sole-sb__field label {
	display: block;
	margin: 0;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

.sole-sb__req {
	color: var(--sole-sb-accent);
}

/* --- controls ---------------------------------------------------------- */

/* Mirrors the theme's global input rule so our form reads as part of the site
   rather than a plugin bolted onto it: no box, no radius, just a hairline.
 *
 * Everything below is scoped `.sole-sb .sole-sb__x` on purpose. The theme
 * styles bare elements — `input[type=text]`, `button[type=submit]` — which
 * score (0,1,1). A lone class is (0,1,0) and loses. Ours only appeared to work
 * because the shortcode enqueues after the theme and won on source order; that
 * is luck, not specificity, and it evaporates the moment anything reorders the
 * stylesheets. The double class is (0,2,0) and wins outright. */
.sole-sb .sole-sb__field input,
.sole-sb .sole-sb__field select,
.sole-sb .sole-sb__field textarea {
	position: relative;
	display: inline-block;
	width: 100%;
	vertical-align: top;
	margin: 0;
	padding: 8px 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	color: inherit;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--sole-sb-line);
	border-radius: 0;
	outline: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out;
}

.sole-sb .sole-sb__field textarea {
	resize: vertical;
	cursor: text;
}

.sole-sb .sole-sb__field input:focus,
.sole-sb .sole-sb__field select:focus,
.sole-sb .sole-sb__field textarea:focus {
	border-bottom-color: var(--sole-sb-line-focus);
}

/* The theme kills outlines; keep a visible focus ring for keyboard users
   without reintroducing a box on mouse focus. */
.sole-sb .sole-sb__field input:focus-visible,
.sole-sb .sole-sb__field select:focus-visible,
.sole-sb .sole-sb__field textarea:focus-visible,
.sole-sb .sole-sb__submit:focus-visible {
	outline: 2px solid var(--sole-sb-accent);
	outline-offset: 3px;
}

.sole-sb .sole-sb__field select:disabled,
.sole-sb .sole-sb__field input:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Native date/time pickers render their indicator dark by default, which
   disappears against the theme's dark sections. */
.sole-sb .sole-sb__field input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.6;
	cursor: pointer;
}

/* opacity 0.72, not the 0.6 this started at: against the theme's dark green
   that measured 4.23:1, under AA for 12px text. This clears 4.5:1. */
.sole-sb__hint {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.72;
}

/* The notice block above the button: arrival window + fee/minimum-spend, set
   apart with an accent rule because it is policy to read before booking. The
   two lines are separate settings but render as one box. */
.sole-sb__notices {
	margin: 0 0 var(--sole-sb-gap);
	padding: 14px 0 14px 16px;
	border-left: 2px solid var(--sole-sb-accent);
}

.sole-sb__notices p {
	margin: 0;
}

.sole-sb__notices p + p {
	margin-top: 8px;
}

.sole-sb__notices-info {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	opacity: 0.92;
}

/* The fee line: part of the same box, a shade quieter than the arrival policy. */
.sole-sb__notices-fee {
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	opacity: 0.8;
}

/* --- availability ------------------------------------------------------ */

/* Our own element — the reservation form has no equivalent — so it borrows the
   theme's hairline rather than inventing a box, and stays in the same voice as
   the labels: sentence case, body weight. */
.sole-sb__availability {
	margin: 0 0 var(--sole-sb-gap);
	padding: 12px 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	border-top: 1px solid var(--sole-sb-line);
	border-bottom: 1px solid var(--sole-sb-line);
	opacity: 0.75;
}

.sole-sb__availability--open {
	color: var(--sole-sb-ok);
	border-color: currentColor;
	opacity: 1;
}

.sole-sb__availability--low {
	color: var(--sole-sb-warn);
	border-color: currentColor;
	opacity: 1;
}

.sole-sb__availability--closed {
	color: var(--sole-sb-bad);
	border-color: currentColor;
	opacity: 1;
}

/* --- messages ---------------------------------------------------------- */

.sole-sb__message {
	margin: 0 0 var(--sole-sb-gap);
	padding: 14px 18px;
	font-size: 14px;
	line-height: 1.5;
	border-left: 2px solid currentColor;
}

.sole-sb__message--error {
	color: var(--sole-sb-bad);
}

.sole-sb__message--success {
	color: var(--sole-sb-ok);
}

/* --- submit ------------------------------------------------------------ */

/* Matches .qodef-button.qodef-size--normal.qodef-layout--outlined, which is what
   the reservation form's Book Now button actually is: transparent, not filled.
 *
 * Replicated rather than borrowing the theme's own classes — those carry its
 * hover machinery and JS hooks, and a plugin quietly inheriting them breaks in
 * a way nobody can trace. The theme's animated border-reveal on hover is not
 * copied; a plain border-colour transition reads the same at a glance and has
 * no moving parts to go wrong. */
.sole-sb .sole-sb__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Auto, like theirs — the reservation button sits inline, not full-bleed. */
	width: auto;
	margin: 0;
	padding: 16px 50px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--qode-button-color, #fff);
	background-color: transparent;
	border: 1px solid var(--qode-button-border-color, var(--sole-sb-accent));
	border-radius: 0;
	outline: 0;
	cursor: pointer;
	transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.sole-sb .sole-sb__submit:hover:not(:disabled) {
	border-color: var(--sole-sb-accent-hover);
	background-color: transparent;
}

/* One exception to matching them: on a phone a 178px button stranded on the
   left is a poor target, so it goes full width where there is no room to
   waste. */
@media (max-width: 680px) {
	.sole-sb .sole-sb__submit {
		width: 100%;
		padding: 16px 20px;
	}
}

.sole-sb .sole-sb__submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* --- bot protection ---------------------------------------------------- */

.sole-sb__turnstile {
	margin: 0 0 var(--sole-sb-gap);
}

/* Off-screen rather than display:none, which some bots detect and skip. */
.sole-sb__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}