/* =============================================================
   Booking template (templates/template-booking.php).
   Depends on main.css and landing.css (.dm-phero). Loaded only
   on this template.

   The Booking Calendar plugin owns the calendar itself — its skin,
   markup and behaviour are left alone. Only the surrounding surface
   and the plain form controls are brought in line with the theme, so
   the page does not read as a bolted-on plugin.
   ============================================================= */

.dm-booking-calendar__head { text-align: center; max-width: 760px; margin-inline: auto; }
.dm-booking-calendar__text {
	margin-top: 12px;
	font-size: clamp(15px, 1.1vw, 20px);
	color: rgba(255, 255, 255, .8);
}
.dm-booking-calendar__card {
	margin-top: clamp(26px, 2.6vw, 44px);
	margin-inline: auto;
	max-width: 900px;
	padding: clamp(22px, 2.6vw, 48px);
	border: 1px solid var(--color-border-faint);
	border-radius: var(--radius-card);
	background: var(--color-bg-card-alt);
	box-shadow: var(--shadow-card-active); /* card accent glow (§1.5) */
}

/*
 * The plugin exposes custom properties for its form. Setting those is the
 * supported way to theme it — far safer than out-specifying its own rules, and
 * it leaves the calendar skin, the time-slot buttons and every behaviour alone.
 */
.dm-booking-calendar__card .wpbc_container.wpbc_form {
	--wpbc_form-field-background-color: var(--color-bg-input);
	--wpbc_form-field-border-color: var(--color-border-input);
	--wpbc_form-field-border-color-spare: var(--color-border-input);
	--wpbc_form-field-border-radius: var(--radius-base);
	--wpbc_form-field-text-color: #fff;
	--wpbc_form-field-size-input-height: var(--input-height);
	--wpbc_form-label-color: rgba(255, 255, 255, .85);
	--wpbc_form-label-sublabel-color: rgba(255, 255, 255, .6);
	--wpbc_form-button-background-color: var(--color-primary);
	--wpbc_form-button-background-color-alt: var(--color-primary);
	--wpbc_form-button-text-color: #fff;
	--wpbc_form-button-text-color-alt: #fff;
	--wpbc_form-button-border-color: var(--color-primary);
	--wpbc_form-button-border-radius: var(--radius-base);
	--wpbc_form-container-border-width: 0;
	--wpbc_form-background-color: transparent;
}

/* The date field is a textarea the plugin writes into; it is not for typing. */
.dm-booking-calendar__card .wpbc_container textarea[name^="date_booking"] { display: none; }

/* Centre the calendar on the card; its own skin is untouched. */
.dm-booking-calendar__card .wpbc_calendar_wraper { display: flex; justify-content: center; }
.dm-booking-calendar__card .wpbc__row { margin-bottom: 16px; }

/*
 * The booking button is styled by the plugin's UI sheet rather than by the form
 * variables, so it is matched to .dm-btn--orange directly.
 *
 * The selector carries five classes on purpose: the plugin's dark skin paints
 * it grey through .wpbc_theme_dark_1.wpbc_container.wpbc_form .wpbc_button_light
 * (0,4,0), which outranked the shorter selector this rule used to have (0,3,1).
 * Specificity rather than !important, so the rule stays overridable.
 */
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form button.wpbc_button_light {
	min-height: 60px;
	padding: 16px 34px;
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-pill);
	color: #fff;
	font-family: inherit;
	font-size: 18px;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	letter-spacing: -.5px;
	text-transform: uppercase;
	text-shadow: none;
	box-shadow: var(--shadow-btn-primary); /* primary button glow (§1.5) */
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form button.wpbc_button_light:hover,
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form button.wpbc_button_light:focus {
	background: var(--color-primary-alt);
	border-color: var(--color-primary-alt);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-btn-primary);
}

/*
 * ---------------------------------------------------------------
 * Field captions and the plain form controls.
 *
 * Why this is needed even though the form variables are set above:
 *
 * 1. The plugin renders each caption as a bare text node inside a <p>
 *    ("First Name*:<br><span>…<input></span>"), not as a <label>. Its own
 *    rule for --wpbc_form-label-color targets `.wpbc_structure_form label`,
 *    so it never reaches these captions.
 * 2. The plugin only paints the plain controls in its "dark" form variant
 *    (.wpbc_form_dark). This form is built with the "center" template, whose
 *    rules are layout-only — so nothing sets a colour on the inputs and they
 *    fall back to the browser's white box on a black card.
 * 3. --wpbc_form-field-* is consumed by the plugin's booking-resource-selector
 *    stylesheet, not by the booking form itself.
 *
 * Net effect before this block: invisible captions and unreadable fields.
 * Specificity (0,5,1) rather than !important, so these stay overridable.
 * --------------------------------------------------------------- */

.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form p {
	color: rgba(255, 255, 255, .85);
	font-size: 15px;
	line-height: 1.5;
}

.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form input[type="text"],
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form input[type="email"],
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form input[type="tel"],
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form select,
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--input-height, 50px);
	padding: 12px 16px;
	background: var(--color-bg-input, rgba(0, 0, 0, .6));
	border: 1px solid var(--color-border-input, rgba(255, 255, 255, .15));
	border-radius: var(--radius-base, 10px);
	color: var(--color-text-primary, #fff);
	font-family: inherit;
	/* 16px stops iOS Safari zooming the viewport on focus. */
	font-size: 16px;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form textarea {
	min-height: var(--input-textarea-height, 105px);
	resize: vertical;
}

.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form input::placeholder,
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form textarea::placeholder {
	color: rgba(255, 255, 255, .45);
}

.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form input:focus-visible,
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form select:focus-visible,
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form textarea:focus-visible {
	outline: none;
	border-color: var(--color-primary, #FF8F08);
	box-shadow: 0 0 0 3px rgba(255, 143, 8, .25);
}

/*
 * Once the native control chrome is overridden the select loses its arrow,
 * so it needs one drawn back in.
 */
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

/*
 * Dropdown options are painted by the OS, not by the card, so they need an
 * explicit dark pair or they inherit white-on-white on some platforms.
 */
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form select option {
	background: var(--color-bg-dark, #1F1F1F);
	color: var(--color-text-primary, #fff);
}

/* The CAPTCHA answer box is a plain text input the rules above already cover,
   but it sits beside a 60px-wide image, so it should not stretch full width. */
.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_structure_form input.captachinput {
	width: auto;
	max-width: 140px;
}

.dm-booking-calendar .dm-booking-calendar__card .wpbc_container.wpbc_form .wpbc_text_captcha_container {
	display: flex;
	align-items: center;
	gap: 12px;
}