/* ============================================================
   Moochies — booking enquiry form
   Additive only. The original design tokens and the existing
   .book-form / .field rules in styles.css are untouched; this
   file only adds the layout and states the longer form needs.
   ============================================================ */

/* CRITICAL: .field sets display:flex, which outranks the browser's own
   [hidden] rule — without this, hidden fields render anyway. */
.book-form [hidden] { display: none !important; }

.form-intro {
	margin: 0 0 22px;
	color: var(--ink-soft);
	font-weight: 300;
	font-size: .96rem;
	line-height: 1.55;
}

/* Two-up rows that collapse on narrow screens */
.field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
}
@media (max-width: 520px) {
	.field-grid { grid-template-columns: 1fr; }
}

/* Required marker */
.field .req {
	color: var(--accent);
	font-weight: 700;
	margin-left: 2px;
}

/* Small helper text under a field */
.field-hint {
	font-size: .78rem;
	font-weight: 300;
	color: var(--ink-soft);
	line-height: 1.45;
	margin-top: -2px;
}
.field-hint-legal { color: #e9c3cd; }

/* The skin-test block only appears for colour services */
.field-skintest {
	background: linear-gradient(90deg, rgba(211,143,160,.10), transparent 92%);
	border-left: 2px solid var(--accent);
	border-radius: 0 10px 10px 0;
	padding: 14px 16px;
	margin-bottom: 18px;
}
.field-skintest label { color: var(--ink); }

/* Native date input needs coaxing to match the dark theme */
.field input[type="date"] { color-scheme: dark; }
.field input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: .55;
	cursor: pointer;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Consent row: checkbox beside text, not stacked like the other fields */
.field-consent { margin-bottom: 22px; }
.field-consent .consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
	font-size: .88rem;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-soft);
}
.field-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 2px;
	accent-color: var(--accent);
	cursor: pointer;
}

/* Placeholders */
.field input::placeholder,
.field textarea::placeholder { color: rgba(180,170,161,.55); }

/* Invalid state, only after the browser has actually flagged it */
.book-form.was-validated .field :invalid { border-color: #e2727f; }

/* Error message reuses .form-done but reads as a problem */
.form-done.is-error {
	background: rgba(226,114,127,.12);
	color: #ffb3bc;
}

/* Busy state while submitting */
.book-form button[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* ============================================================
   Mobile overflow fix — booking section
   .contact-list li is a "120px 1fr" grid. A grid track defaults to
   min-width:auto, so the long unbreakable email address sets a
   min-content floor (~262px). Added to the label column that floor
   exceeds the width of a 375px phone, dragging .book-copy — and with
   it the whole page — into horizontal scroll.
   Letting those values break, and clearing the implicit min-width on
   the grid items, removes the floor.
   ============================================================ */
.book-grid > * { min-width: 0; }
.contact-list li { min-width: 0; }
.contact-list li > * { min-width: 0; }
.contact-list a,
.contact-list b { overflow-wrap: anywhere; }