/* ============================================================
   Rhino Boxing — Booking Widget
   Ported from the client-approved concept-1 prototype
   (design/prototypes/concept-1/assets/styles.css → Forms / Modal).

   The Booking widget is reused inline and inside an Elementor Pro
   Popup with identical markup (Req 10.3). Colours reference the
   Design System tokens (tokens.css) so cleared Style controls fall
   back to the token default (Req 3.7).
   ============================================================ */

.rhino-booking {
	max-width: 640px;
	margin: 0 auto;
	color: var(--text, #FFFFFF);
}

.rhino-booking__title {
	margin-bottom: 6px;
}

.rhino-booking__sub {
	font-size: 14px;
	color: var(--placeholder, #B8B8B8);
	margin-bottom: 24px;
}

/* === Form layout === */
.rhino-booking-form {
	max-width: 640px;
}

.rhino-booking-form .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.rhino-booking-form .form-field {
	margin-bottom: 18px;
}

.rhino-booking-form .form-field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand, #E59744);
	margin-bottom: 8px;
}

.rhino-booking-form .form-field .req {
	color: var(--red-bright, #E01A1A);
}

.rhino-booking-form .form-field input,
.rhino-booking-form .form-field select,
.rhino-booking-form .form-field textarea {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	background: var(--atmo2, #141414);
	border: 1px solid var(--atmo4, #3A3A3A);
	border-radius: var(--radius-md, 8px);
	color: #fff;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 16px;
	transition: border-color var(--dur-fast, 150ms), box-shadow var(--dur-fast, 150ms);
}

.rhino-booking-form .form-field textarea {
	height: 120px;
	padding: 14px 16px;
	resize: vertical;
}

.rhino-booking-form .form-field input::placeholder,
.rhino-booking-form .form-field textarea::placeholder {
	color: var(--placeholder, #B8B8B8);
}

.rhino-booking-form .form-field input:focus,
.rhino-booking-form .form-field select:focus,
.rhino-booking-form .form-field textarea:focus {
	outline: none;
	border-color: var(--brand, #E59744);
	box-shadow: 0 0 0 3px rgba(229, 151, 68, 0.5);
}

/* Inline validation states (Req 10.6, 10.7) */
.rhino-booking-form .form-field.error input,
.rhino-booking-form .form-field.error select,
.rhino-booking-form .form-field.error textarea {
	border-color: var(--red-bright, #E01A1A);
	box-shadow: 0 0 0 3px rgba(224, 26, 26, 0.3);
}

.rhino-booking-form .form-field.success input {
	border-color: var(--positive, #2E9E5B);
}

.rhino-booking-form .form-field .err-msg {
	display: none;
	color: var(--red-bright, #E01A1A);
	font-size: 12px;
	margin-top: 6px;
}

.rhino-booking-form .form-field.error .err-msg {
	display: block;
}

.rhino-booking-form .form-field .help-msg {
	color: var(--placeholder, #B8B8B8);
	font-size: 12px;
	margin-top: 6px;
}

/* === Consent === */
.rhino-booking-form .consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	color: var(--placeholder, #B8B8B8);
	margin-bottom: 20px;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

.rhino-booking-form .consent input {
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: var(--brand, #E59744);
	flex: 0 0 auto;
}

/* === Submit button === */
.rhino-booking__submit {
	width: 100%;
	justify-content: center;
}

.rhino-booking__note {
	text-align: center;
	font-size: 12px;
	color: var(--placeholder, #B8B8B8);
	margin-top: 14px;
}

/* === Honeypot: off-screen, zero-dimension, not focusable (Req 12.3) === */
.rhino-booking-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* === Success / error panels (toggled by booking-widget.js) === */
.rhino-booking__success,
.rhino-booking__error {
	display: none;
	text-align: center;
	padding: 20px 0;
}

.rhino-booking__success.show,
.rhino-booking__error.show {
	display: block;
}

.rhino-booking__success .rhino-icon {
	font-size: 48px;
	color: var(--positive, #2E9E5B);
	margin-bottom: 12px;
}

.rhino-booking__error {
	color: var(--red-bright, #E01A1A);
}

/* === Responsive (aligned to Req 23.1 mobile band) === */
@media (max-width: 767px) {
	.rhino-booking-form .form-row {
		grid-template-columns: 1fr;
	}
}