/**
 * Booking Widget for Mews - Public styles.
 *
 * Colors use CSS custom properties so the Pro customizer can override them
 * without touching this file. When the Pro plugin is not active the
 * hardcoded fallback values are used instead.
 *
 * Variables set by Pro (via :root):
 *   --bwfm-primary    button / accent colour
 *   --bwfm-secondary  hover colour
 *   --bwfm-text       button text colour
 *   --bwfm-bg         form background
 *   --bwfm-radius     border radius (px value, e.g. 4px)
 *   --bwfm-font       body font-family
 *   --bwfm-label-font label font-family
 *
 * @package BookingWidgetForMews
 */

/* ---- Booking trigger buttons ([bwfm_booking_button]) ---- */

.bwfm-booking-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	font-size: 16px;
	font-weight: 600;
	font-family: var(--bwfm-font, inherit);
	line-height: 1.4;
	text-decoration: none;
	border: 2px solid currentColor;
	border-radius: var(--bwfm-radius, 4px);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

button.bwfm-booking-trigger {
	background-color: var(--bwfm-primary, #333);
	color: var(--bwfm-text, #fff);
	border-color: var(--bwfm-primary, #333);
}

button.bwfm-booking-trigger:hover,
button.bwfm-booking-trigger:focus {
	background-color: var(--bwfm-secondary, #555);
	border-color: var(--bwfm-secondary, #555);
	transform: translateY(-1px);
}

a.bwfm-booking-trigger {
	color: var(--bwfm-primary, #333);
	background-color: transparent;
}

a.bwfm-booking-trigger:hover,
a.bwfm-booking-trigger:focus {
	background-color: var(--bwfm-primary, #333);
	color: var(--bwfm-text, #fff);
}

/* ---- Widget Form (default [bwfm_booking_widget] output) ---- */

.bwfm-widget-form {
	background-color: var(--bwfm-bg, #fff);
	padding: 25px 30px;
	border-radius: var(--bwfm-radius, 6px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	max-width: 750px;
	margin: 1em auto;
}

.bwfm-widget-form-inner {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
}

.bwfm-widget-field {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 150px;
}

.bwfm-widget-field label {
	font-family: var(--bwfm-label-font, inherit);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--bwfm-primary, #555);
	margin-bottom: 8px;
}

.bwfm-widget-field input[type="date"],
.bwfm-widget-field input[type="text"],
.bwfm-widget-field input[type="number"] {
	width: 100%;
	height: 46px;
	border: 1px solid #ddd;
	border-radius: var(--bwfm-radius, 4px);
	padding: 0 12px;
	font-size: 15px;
	font-family: var(--bwfm-font, inherit);
	color: #333;
	background-color: #fafafa;
	transition: border-color 0.25s ease;
	box-sizing: border-box;
}

.bwfm-widget-field input[type="date"]:focus,
.bwfm-widget-field input[type="text"]:focus,
.bwfm-widget-field input[type="number"]:focus {
	border-color: var(--bwfm-primary, #333);
	outline: none;
	background-color: #fff;
}

.bwfm-widget-field-submit {
	flex: 0 0 auto;
}

.bwfm-widget-submit {
	height: 46px;
	padding: 0 30px;
	background-color: var(--bwfm-primary, #333);
	color: var(--bwfm-text, #fff);
	border: 2px solid var(--bwfm-primary, #333);
	border-radius: var(--bwfm-radius, 4px);
	font-size: 15px;
	font-weight: 600;
	font-family: var(--bwfm-font, inherit);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.bwfm-widget-submit:hover,
.bwfm-widget-submit:focus {
	background-color: var(--bwfm-secondary, #555);
	border-color: var(--bwfm-secondary, #555);
	transform: translateY(-1px);
}

/* ---- Guest & voucher fields (injected by Pro) ---- */

.bwfm-widget-field-guests {
	flex: 0 0 auto;
	min-width: 100px;
}

.bwfm-widget-field-voucher {
	flex: 1;
	min-width: 150px;
}

/* ---- Layout variants (Pro) ---- */

.bwfm-layout-vertical > .bwfm-widget-form-inner {
	flex-direction: column;
}

.bwfm-layout-vertical .bwfm-widget-field {
	min-width: 100%;
}

.bwfm-layout-vertical .bwfm-widget-submit {
	width: 100%;
}

.bwfm-layout-inline > .bwfm-widget-form-inner {
	gap: 10px;
}

.bwfm-layout-inline .bwfm-widget-field {
	min-width: auto;
}

.bwfm-layout-inline .bwfm-widget-form {
	max-width: 100%;
}

.bwfm-layout-floating {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9999;
	max-width: 420px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* ---- VanillaCalendar wrapper ---- */

.bwfm-vc-wrapper {
	position: absolute;
	z-index: 99999;
	top: 100%;
	left: 0;
	margin-top: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	border-radius: var(--bwfm-radius, 6px);
	background: #fff;
}

@media (max-width: 600px) {
	.bwfm-widget-form {
		padding: 20px;
	}

	.bwfm-widget-form-inner {
		flex-direction: column;
		gap: 15px;
	}

	.bwfm-widget-field {
		min-width: 100%;
	}

	.bwfm-widget-submit {
		width: 100%;
	}

	.bwfm-layout-floating {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		max-width: 100%;
		border-radius: var(--bwfm-radius, 6px) var(--bwfm-radius, 6px) 0 0;
	}
}

/* ---- Gutenberg block wrappers ---- */

.wp-block-bwfm-booking-button {
	margin-top: 1em;
	margin-bottom: 1em;
}

.bwfm-align-left   { text-align: left; }
.bwfm-align-center { text-align: center; }
.bwfm-align-right  { text-align: right; }

/* ---- Block style variants ---- */

.bwfm-style-fill {
	background-color: var(--bwfm-primary, #333);
	color: var(--bwfm-text, #fff);
	border-color: var(--bwfm-primary, #333);
}

.bwfm-style-outline {
	background-color: transparent;
	color: var(--bwfm-primary, #333);
	border-color: var(--bwfm-primary, #333);
}

.bwfm-style-outline:hover,
.bwfm-style-outline:focus {
	background-color: var(--bwfm-primary, #333);
	color: var(--bwfm-text, #fff);
}