/* =====================================================================
   GBE Booking — Frontend Styles (Public Booking Widget)
   Aesthetic: Editorial Culinary
   Mobile-first, animated, accessible.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=DM+Sans:opsz,wght@9..40,300..700&display=swap');

.gbe-booking-widget,
.gbe-booking-widget * {
	box-sizing: border-box;
}

.gbe-booking-widget {
	--gbe-clay-900: #1A1612;
	--gbe-clay-700: #3D332A;
	--gbe-clay-500: #6B5A47;
	--gbe-clay-300: #C9B89F;
	--gbe-clay-200: #E8DCC4;
	--gbe-clay-100: #FAF4EA;
	--gbe-clay-50:  #FDFAF4;
	--gbe-terracotta:    #A8472B;
	--gbe-terracotta-d:  #7E2E16;
	--gbe-saffron:       #D9A434;
	--gbe-saffron-soft:  #F2D580;
	--gbe-olive:         #5A6B3A;
	--gbe-bordeaux:      #6B1F2E;

	--gbe-ease: cubic-bezier(0.19, 1, 0.22, 1);
	--gbe-dur-fast: 200ms;
	--gbe-dur:      460ms;
	--gbe-dur-slow: 900ms;

	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--gbe-clay-900);
	background: var(--gbe-clay-100);
	background-image:
		radial-gradient(at 100% 0%, rgba(217, 164, 52, 0.10) 0px, transparent 50%),
		radial-gradient(at 0% 100%, rgba(168, 71, 43, 0.08) 0px, transparent 60%);
	border-radius: 18px;
	padding: 32px 24px;
	max-width: 720px;
	margin: 24px auto;
	position: relative;
	/* `overflow: visible` is REQUIRED so the language-switcher globe (positioned
	   with negative top/right offsets to sit as a notification badge in the
	   corner) doesn't get clipped to half-circle. The paper grain ::before that
	   used to need overflow:hidden now self-clips via clip-path: inset(0 round)
	   matching the widget border-radius. */
	overflow: visible;
	box-shadow:
		0 1px 0 rgba(26, 22, 18, 0.06),
		0 24px 64px -32px rgba(126, 46, 22, 0.32);
}

/* Paper grain overlay — self-clips to the widget rounded corners via clip-path
   so we don't need overflow:hidden on the parent (which would clip the globe). */
.gbe-booking-widget::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
	opacity: 0.06;
	mix-blend-mode: multiply;
	border-radius: inherit;
	clip-path: inset(0 round 18px);
}

.gbe-booking-widget > * {
	position: relative;
	z-index: 1;
}

/* === HEADER === */
.gbe-booking-widget__eyebrow {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gbe-terracotta);
	margin: 0 0 12px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	animation: gbe-fade-up var(--gbe-dur) var(--gbe-ease) both;
}
.gbe-booking-widget__eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var(--gbe-terracotta);
}

.gbe-booking-widget__title {
	font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
	font-weight: 360;
	font-size: clamp(2rem, 6vw, 3.4rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--gbe-clay-900);
	margin: 0 0 0.5em;
	font-variation-settings: 'opsz' 144, 'SOFT' 50;
	font-feature-settings: 'ss01';
	animation: gbe-fade-up var(--gbe-dur-slow) var(--gbe-ease) 80ms both;
}
.gbe-booking-widget__title em {
	font-style: italic;
	font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
	color: var(--gbe-terracotta);
}

.gbe-booking-widget__lead {
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--gbe-clay-500);
	margin: 0 0 28px;
	max-width: 52ch;
	animation: gbe-fade-up var(--gbe-dur-slow) var(--gbe-ease) 160ms both;
}

@keyframes gbe-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* === DECORATIVE DIVIDER === */
.gbe-booking-widget__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 36px 0 32px;
	color: var(--gbe-saffron);
	font-size: 1.1rem;
	line-height: 1;
	border: 0;
	background: transparent;
	animation: gbe-fade-up var(--gbe-dur-slow) var(--gbe-ease) 240ms both;
}
.gbe-booking-widget__divider::before,
.gbe-booking-widget__divider::after {
	content: '';
	flex: 1;
	max-width: 180px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gbe-clay-300) 50%, transparent);
	border: 0;
}

/* === FORM === */
.gbe-form {
	display: grid;
	gap: 20px;
}
.gbe-form fieldset.gbe-form__group {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.gbe-form fieldset.gbe-form__group legend {
	padding: 0;
	margin-bottom: 8px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.78rem;
	color: var(--gbe-clay-700);
}
.gbe-form__group {
	position: relative;
	animation: gbe-fade-up var(--gbe-dur) var(--gbe-ease) both;
}
.gbe-form__group:nth-of-type(1) { animation-delay: 320ms; }
.gbe-form__group:nth-of-type(2) { animation-delay: 380ms; }
.gbe-form__group:nth-of-type(3) { animation-delay: 440ms; }
.gbe-form__group:nth-of-type(4) { animation-delay: 500ms; }
.gbe-form__group:nth-of-type(5) { animation-delay: 560ms; }
.gbe-form__group:nth-of-type(6) { animation-delay: 620ms; }

.gbe-form__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gbe-clay-700);
	margin: 0 0 8px;
}
.gbe-form__label span {
	color: var(--gbe-terracotta);
	margin-left: 4px;
}
/* Required-field asterisk: hide ANY literal asterisk-marker span the
   templates emit (multiple historical patterns: aria-hidden=true, or an
   inline style="color:var(--gbe-terracotta…)") and replace with a CSS
   ::after that glues nbsp + asterisk to the last word of the label so
   it can never wrap to its own line. */
.gbe-form__label > span[aria-hidden="true"],
.gbe-form__label > span[style*="terracotta"],
.gbe-form__label > span[style*="--gbe-terracotta"],
.gbe-form__label > span[style*="A8472B"] {
	display: none;
}
.gbe-form__label:has(> span[aria-hidden="true"])::after,
.gbe-form__label:has(> span[style*="terracotta"])::after,
.gbe-form__label:has(> span[style*="A8472B"])::after,
.gbe-form__label[data-required="1"]::after {
	content: '\00a0*';
	color: var(--gbe-terracotta);
	font-weight: 700;
	white-space: nowrap;
	display: inline;
}

.gbe-form__hint {
	font-size: 0.85rem;
	color: var(--gbe-clay-500);
	margin: 6px 0 0;
	font-style: italic;
	line-height: 1.5;
}

/* === Form fields — "card" style ====================================
   Was an underline-only design (border-bottom only, padding 14px 0)
   that left text glued to the left edge with no horizontal padding.
   Refactored to a conventional bordered card with consistent vertical
   centering, generous left/right padding, soft focus ring + accent
   border (no layout shift on focus). Coerent with Chef Pro CTA inputs.
   ====================================================================*/
.gbe-form__input,
.gbe-form__select,
.gbe-form__textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--gbe-clay-900);
	background: #fff;
	/* Tokenized: border-w/radius resolve to the same 1.5px/12px as before —
	   pure consolidation, no rendering change. */
	border: var(--gbe-border-w, 1.5px) solid var(--gbe-clay-200, #E8DCC4);
	border-radius: var(--gbe-radius-md, 12px);
	padding: 13px 16px;
	min-height: 48px; /* consistent vertical rhythm across inputs/selects/buttons */
	transition: border-color var(--gbe-dur-fast, 180ms) ease, background var(--gbe-dur-fast, 180ms) ease, box-shadow var(--gbe-dur-fast, 180ms) ease;
	-webkit-appearance: none;
	appearance: none;
	background-image: none;
}
.gbe-form__input::placeholder,
.gbe-form__textarea::placeholder {
	color: var(--gbe-clay-400, #A8997A);
	opacity: 1;
}
.gbe-form__input:hover,
.gbe-form__select:hover,
.gbe-form__textarea:hover {
	border-color: var(--gbe-clay-300, #C9B89F);
}
.gbe-form__input:focus,
.gbe-form__select:focus,
.gbe-form__textarea:focus {
	outline: none;
	border-color: var(--gbe-terracotta, #A8472B);
	background: #fff;
	/* Canonical focus ring (WCAG 1.4.11 — 0.25 alpha meets 3:1; was 0.14, too faint). */
	box-shadow: var(--gbe-focus-ring, 0 0 0 3px rgba(168, 71, 43, 0.25));
	/* No padding-shift on focus — keeps the input from "jumping" 1-2px
	   when the user clicks. The shadow ring conveys focus visually. */
}
.gbe-form__input[aria-invalid="true"] {
	border-color: #BC3A3A;
	box-shadow: var(--gbe-focus-ring-err, 0 0 0 3px rgba(188, 58, 58, 0.30));
}

/* Google Places autocomplete input — re-asserts border-radius because the
   Places JS library sometimes injects inline styles that flatten corners. */
.gbe-cp-place-input,
input.gbe-cp-place-input {
	border-radius: 12px !important;
}

/* Group container — kept for layout but the previously-rendered animated
   underline (::after sliding from 0% to 100% on :focus-within) was removed:
   it duplicated the input's own focus border-bottom, looking visually noisy
   especially when the input is a select/textarea or when fields are stacked
   in a 3-column row. The native border-bottom focus highlight (defined on
   .gbe-form__input:focus above) is enough. */
.gbe-form__group {
	position: relative;
}

.gbe-form__select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8472B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-repeat: no-repeat;
	padding-right: 38px; /* room for the chevron + breathing space */
	cursor: pointer;
}

.gbe-form__textarea {
	min-height: 110px;
	resize: vertical;
	padding: 14px 16px;
	line-height: 1.55;
}

/* === GRID for inline groups (date/participants) === */
.gbe-form__row {
	display: grid;
	gap: 20px;
}
@media (min-width: 540px) {
	.gbe-form__row--2 { grid-template-columns: 1fr 1fr; }
	.gbe-form__row--3 { grid-template-columns: 2fr 1fr 1fr; }
}

/* === DATE RANGE (travel-site style) === */
.gbe-daterange {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 0;
	background: var(--gbe-clay-50);
	border: 1px solid var(--gbe-clay-200);
	border-radius: 14px;
	padding: 4px;
	position: relative;
	transition: border-color var(--gbe-dur-fast) ease, box-shadow var(--gbe-dur-fast) ease;
}
.gbe-daterange:focus-within {
	border-color: var(--gbe-terracotta);
	box-shadow: 0 0 0 3px rgba(168, 71, 43, 0.15);
}
.gbe-daterange__field {
	display: flex;
	flex-direction: column;
	padding: 12px 16px;
	cursor: pointer;
	transition: background var(--gbe-dur-fast) ease;
	border-radius: 10px;
	min-width: 0;
}
.gbe-daterange__field:hover {
	background: var(--gbe-clay-100);
}
.gbe-daterange__field:focus-within {
	background: var(--gbe-clay-100);
}
.gbe-daterange__sub {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gbe-clay-500);
	margin-bottom: 4px;
	pointer-events: none;
}
.gbe-daterange__input {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0;
	font-family: 'Fraunces', serif;
	font-size: 1.1rem;
	font-weight: 460;
	color: var(--gbe-clay-900);
	min-height: 28px;
	font-feature-settings: 'lnum';
}
.gbe-daterange__input:focus {
	outline: none;
}
.gbe-daterange__arrow {
	display: grid;
	place-items: center;
	color: var(--gbe-saffron);
	font-size: 1.4rem;
	padding: 0 4px;
	font-family: 'Fraunces', serif;
	font-weight: 300;
}
.gbe-daterange__nights {
	grid-column: 1 / -1;
	text-align: center;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gbe-clay-300);
	padding: 8px 0 4px;
	border-top: 1px dashed var(--gbe-clay-200);
	margin-top: 4px;
	transition: color var(--gbe-dur-fast) ease;
}
.gbe-daterange__nights--ok {
	color: var(--gbe-terracotta);
}

@media (max-width: 540px) {
	.gbe-daterange {
		grid-template-columns: 1fr;
	}
	.gbe-daterange__arrow {
		transform: rotate(90deg);
		padding: 4px 0;
	}
}

/* === DATE+TIME PAIR (single_with_time mode) ===
   Date inputs use the editorial display font for the value, inherit the
   base "card field" padding/border/min-height + border-radius from
   .gbe-form__input, AND get a right-side calendar icon so it visually
   matches the .gbe-form__select chevron pattern. */
.gbe-form__date,
.gbe-form__time {
	font-family: 'Fraunces', serif;
	font-size: 1.05rem;
	font-weight: 460;
	font-feature-settings: 'lnum';
	letter-spacing: -0.01em;
	text-align: left;
	border-radius: 12px !important; /* re-assert in case theme/admin css overrides */
	cursor: pointer;
	/* Inline SVG calendar icon (terracotta), positioned at right edge */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A8472B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	padding-right: 42px; /* room for the icon + breathing space */
}
.gbe-form__date:hover,
.gbe-form__time:hover {
	/* Re-assert ALL background-* longhand properties (not just background-image)
	   to defend against any cascade reset that would default background-repeat
	   to "repeat" (which caused the calendar icon to tile across the input). */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237E2E16' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
	background-position: right 14px center !important;
	background-repeat: no-repeat !important;
	background-size: 18px 18px !important;
}

/* === EVENT CARDS (service picker) === */
.gbe-form__cards {
	display: grid;
	gap: 12px;
	margin-top: 4px;
}
@media (min-width: 540px) {
	.gbe-form__cards { grid-template-columns: 1fr 1fr; }
}
.gbe-form__card {
	display: flex;
	flex-direction: column;
	padding: 18px 18px;
	background: var(--gbe-clay-50);
	border: 1px solid var(--gbe-clay-200);
	border-radius: 14px;
	cursor: pointer;
	transition: transform var(--gbe-dur-fast) var(--gbe-ease), border-color var(--gbe-dur-fast) ease, box-shadow var(--gbe-dur-fast) ease;
	position: relative;
	overflow: hidden;
}
.gbe-form__card:hover {
	transform: translateY(-2px);
	border-color: var(--gbe-clay-500);
	box-shadow: 0 12px 24px -16px rgba(126, 46, 22, 0.35);
}
.gbe-form__card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.gbe-form__card-title {
	font-family: 'Fraunces', serif;
	font-weight: 460;
	font-size: 1.15rem;
	color: var(--gbe-clay-900);
	margin: 0 0 4px;
}
.gbe-form__card-meta {
	font-size: 0.82rem;
	color: var(--gbe-clay-500);
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
}
.gbe-form__card-meta span::before {
	content: '◆';
	color: var(--gbe-saffron);
	margin-right: 4px;
	font-size: 0.7em;
}
.gbe-form__card-price {
	margin-top: auto;
	font-family: 'Fraunces', serif;
	font-size: 1.3rem;
	color: var(--gbe-terracotta);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'lnum';
}
.gbe-form__card input[type="radio"]:checked + .gbe-form__card-content,
.gbe-form__card:has(input[type="radio"]:checked),
.gbe-form__card.gbe-form__card--active {
	border-color: var(--gbe-terracotta);
	background: var(--gbe-clay-100);
}
/* Remove bottom-margin coloring on the cards container */
.gbe-form__cards {
	border: 0 !important;
	background: transparent !important;
	margin-bottom: 0;
	padding-bottom: 0;
}
.gbe-form__card:has(input[type="radio"]:checked)::before {
	content: '✓';
	position: absolute;
	top: 14px;
	right: 14px;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	background: var(--gbe-terracotta);
	color: white;
	border-radius: 50%;
	font-weight: 700;
	animation: gbe-pop 320ms var(--gbe-ease);
}
@keyframes gbe-pop {
	from { transform: scale(0); }
	to   { transform: scale(1); }
}

/* === PRICE PREVIEW BOX === */
.gbe-price-preview {
	background: var(--gbe-clay-900);
	color: var(--gbe-clay-50);
	border-radius: 14px;
	padding: 22px 24px;
	margin: 24px 0;
	font-family: 'DM Sans', sans-serif;
	animation: gbe-fade-up var(--gbe-dur) var(--gbe-ease) both;
	box-shadow: 0 16px 32px -16px rgba(26, 22, 18, 0.5);
}
.gbe-price-preview__title {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gbe-saffron);
	margin: 0 0 12px;
}
.gbe-price-preview__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gbe-price-preview__list li {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	font-size: 0.92rem;
	color: var(--gbe-clay-200);
	border-bottom: 1px dashed rgba(250, 244, 234, 0.12);
	font-variant-numeric: tabular-nums;
}
.gbe-price-preview__list li:last-child {
	border-bottom: 0;
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--gbe-saffron);
	font-family: 'Fraunces', serif;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--gbe-clay-50);
	letter-spacing: -0.01em;
}

/* === SUBMIT BUTTON === */
.gbe-form__submit {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	animation: gbe-fade-up var(--gbe-dur) var(--gbe-ease) 720ms both;
}
@media (min-width: 540px) {
	.gbe-form__submit { flex-direction: row; align-items: center; justify-content: space-between; }
}

.gbe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 16px 28px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	/* Narrowed from `all` to specific props — `all` animated every
	   inherited change (font, border-width, etc.) and contributed to
	   the perceived "saltino" on hover. */
	transition: background var(--gbe-dur-fast) ease,
	            box-shadow var(--gbe-dur-fast) ease,
	            border-color var(--gbe-dur-fast) ease,
	            color var(--gbe-dur-fast) ease,
	            filter var(--gbe-dur-fast) ease;
	position: relative;
	overflow: hidden;
}
.gbe-btn--primary {
	background: var(--gbe-clay-900);
	color: var(--gbe-clay-50);
	box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 16px 32px -16px rgba(26, 22, 18, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
/* No transform here — the previous translateY(-2px) was the visible
   "saltino" reported by the user. Feedback is conveyed via the
   gradient shift + outer glow ring defined below + in the
   Elementor-shield scoped block. */
.gbe-btn--primary:hover {
	background: var(--gbe-terracotta);
	box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 24px 40px -16px rgba(168, 71, 43, 0.55);
}
.gbe-btn--primary::after {
	content: '→';
	font-size: 1.1em;
	/* No transition on transform — the ::after arrow used to slide
	   4px on hover, which added to the "movement" perception. The
	   arrow is now static; the button's colour shift is feedback
	   enough. */
}
.gbe-btn--ghost {
	background: transparent;
	color: var(--gbe-clay-500);
	border: 1px solid var(--gbe-clay-300);
}
.gbe-btn--ghost:hover {
	background: var(--gbe-clay-50);
	color: var(--gbe-clay-900);
	border-color: var(--gbe-clay-500);
}

.gbe-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

/* Loading spinner inside button */
.gbe-btn--loading {
	pointer-events: none;
}
.gbe-btn--loading::before {
	content: '';
	position: absolute;
	inset: 0;
	background: inherit;
	display: grid;
	place-items: center;
}
.gbe-btn--loading::after {
	content: '';
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: gbe-spin 700ms linear infinite;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -8px 0 0 -8px;
	z-index: 2;
}
@keyframes gbe-spin {
	to { transform: rotate(360deg); }
}

/* === SUCCESS / ERROR STATES === */
.gbe-message {
	padding: 18px 22px;
	border-radius: 14px;
	margin: 16px 0;
	font-size: 0.95rem;
	line-height: 1.5;
	animation: gbe-fade-up var(--gbe-dur) var(--gbe-ease);
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.gbe-message::before {
	font-size: 1.4em;
	line-height: 1;
}
.gbe-message--success {
	background: rgba(90, 107, 58, 0.10);
	color: var(--gbe-olive);
	border: 1px solid rgba(90, 107, 58, 0.25);
}
.gbe-message--success::before { content: '✓'; }
.gbe-message--error {
	background: rgba(107, 31, 46, 0.10);
	color: var(--gbe-bordeaux);
	border: 1px solid rgba(107, 31, 46, 0.25);
}
.gbe-message--error::before { content: '✕'; }

.gbe-message__title {
	font-weight: 600;
	margin: 0 0 4px;
	font-size: 1.05rem;
}
.gbe-message__body {
	margin: 0;
	color: inherit;
}

/* === SUCCESS PANEL (after submission) === */
.gbe-success-panel {
	text-align: center;
	padding: 20px 20px 10px;
	animation: gbe-fade-up var(--gbe-dur-slow) var(--gbe-ease);
}
/* When success panel is visible, the form is hidden — collapse widget padding */
.gbe-booking-widget:has(.gbe-success-panel:not([hidden])) {
	padding-top: 28px;
	padding-bottom: 28px;
	min-height: 0;
}
.gbe-success-panel__mark {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--gbe-olive);
	color: white;
	display: grid;
	place-items: center;
	font-size: 2.4rem;
	margin: 0 auto 24px;
	box-shadow: 0 16px 32px -12px rgba(90, 107, 58, 0.5);
	animation: gbe-pop-in 700ms var(--gbe-ease);
}
@keyframes gbe-pop-in {
	0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
	60%  { transform: scale(1.1); }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}
.gbe-success-panel__title {
	font-family: 'Fraunces', serif;
	font-weight: 380;
	font-size: 2rem;
	color: var(--gbe-clay-900);
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.gbe-success-panel__lead {
	color: var(--gbe-clay-500);
	max-width: 36ch;
	margin: 0 auto 24px;
	line-height: 1.6;
}
.gbe-success-panel__details {
	display: inline-block;
	background: var(--gbe-clay-50);
	border-radius: 12px;
	padding: 16px 24px;
	font-family: var(--gbe-font-mono, monospace);
	font-size: 0.9rem;
	color: var(--gbe-clay-700);
}

/* === RESPONSIVE === */
@media (min-width: 760px) {
	.gbe-booking-widget {
		padding: 56px 64px;
	}
}
@media (max-width: 540px) {
	.gbe-booking-widget {
		border-radius: 0;
		margin: 0;
		padding: 28px 20px 36px;
	}
}

/* =====================================================================
   UX POLISH — v3.2.5+
   ===================================================================== */

/* Center all button rows inside step panels (bank email, back, etc.) */
.gbe-step-panel div[style*="display:flex"][style*="gap"] {
	justify-content: center !important;
}
.gbe-step-panel .gbe-btn { min-width: 200px; }

/* Payment badges: PaymentFont icons */
.gbe-secure-payments { margin-top: 36px; padding-top: 28px; }
span.gbe-pay-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid rgba(201,184,159,0.3);
	border-radius: 6px;
	padding: 6px 10px;
	min-width: 50px;
	height: 36px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	transition: transform 160ms ease, box-shadow 160ms ease;
}
span.gbe-pay-badge:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px -3px rgba(0,0,0,0.12);
}
span.gbe-pay-badge .pf {
	font-size: 26px;
	line-height: 1;
	color: #3D332A;
}
@media (min-width: 540px) {
	span.gbe-pay-badge { height: 40px; min-width: 56px; padding: 6px 12px; }
	span.gbe-pay-badge .pf { font-size: 30px; }
}
/* Legacy img badges (fallback for external CDN if still used) */
img.gbe-pay-badge {
	height: 36px;
	padding: 5px 8px;
	border-radius: 6px;
}

/* === PaymentFont brand colors (applied everywhere the font is used) === */
.pf-visa              { color: #1A1F71 !important; }
.pf-mastercard        { color: #F79E1B !important; }

/* Mastercard real two-circle logo for the secure-payments badge strip */
.gbe-mc-badge {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 24px;
}
.gbe-mc-badge::before,
.gbe-mc-badge::after {
	content: '';
	position: absolute;
	top: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
}
.gbe-mc-badge::before {
	left: 0;
	background: #EB001B;
}
.gbe-mc-badge::after {
	right: 0;
	background: #F79E1B;
	mix-blend-mode: multiply;
}
.pf-american-express  { color: #006FCF !important; }
.pf-paypal            { color: #003087 !important; }
.pf-apple-pay         { color: #000000 !important; }
.pf-google-wallet     { color: #4285F4 !important; }
.pf-maestro           { color: #CC0000 !important; }
.pf-discover          { color: #FF6000 !important; }
.pf-diners            { color: #0079BE !important; }
.pf-jcb               { color: #0B7CBE !important; }
.pf-bitcoin           { color: #F7931A !important; }
.pf-stripe            { color: #635BFF !important; }
.pf-bank-transfer     { color: #10338C !important; }
.pf-cash              { color: #2E7D32 !important; }
.pf-klarna            { color: #FFB3C7 !important; }

/* Price recap bar: mobile stack, desktop row */
.gbe-price-recap {
	border-radius: 14px;
	padding: 18px 22px;
	gap: 12px;
}
@media (max-width: 480px) {
	.gbe-price-recap {
		flex-direction: column;
		text-align: center;
	}
	.gbe-price-recap__total { font-size: 1.5rem; }
}

/* Payment method cards: touch-friendly on mobile */
.gbe-pm-card {
	min-height: 72px;
}
@media (max-width: 480px) {
	.gbe-pm-card {
		padding: 12px 14px;
	}
	.gbe-pm-card__icon { min-width: 48px; height: 34px; }
	.gbe-pm-card__title { font-size: 0.88rem; }
	.gbe-pm-card__desc { font-size: 0.78rem; }
}

/* Step indicator: compact on mobile */
@media (max-width: 400px) {
	.gbe-steps-nav { gap: 0; }
	.gbe-step-dot__label { font-size: 0.58rem; letter-spacing: 0.06em; }
	.gbe-step-dot__circle { width: 24px; height: 24px; font-size: 0.7rem; }
}

/* Bank transfer details table: responsive */
.gbe-step-panel table { word-break: break-word; }
@media (max-width: 480px) {
	.gbe-step-panel table td,
	.gbe-step-panel table th {
		display: block;
		width: 100% !important;
		padding: 4px 0;
	}
	.gbe-step-panel table tr {
		display: block;
		padding: 6px 0;
		border-bottom: 1px dashed var(--gbe-clay-200, #E8DCC4);
	}
}

/* Confirmation panel: centered with breathing room */
.gbe-step-panel[data-step="3"] {
	text-align: center;
}
.gbe-step-panel[data-step="3"] .gbe-step-back {
	display: inline-flex;
	margin: 18px auto 0;
}
.gbe-step-panel[data-step="3"] table {
	text-align: left;
	margin: 0 auto;
	max-width: 440px;
}

/* Form fields: bigger touch targets on mobile */
@media (max-width: 540px) {
	.gbe-form__input,
	.gbe-form__select,
	.gbe-form__textarea {
		font-size: 16px !important; /* prevents iOS zoom on focus */
		min-height: 48px;
	}
	.gbe-form__row--3 { grid-template-columns: 1fr !important; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
	.gbe-booking-widget *,
	.gbe-booking-widget *::before,
	.gbe-booking-widget *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* === Location mode selector (Domicilio / Partner) === */
.gbe-loc-mode {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 10px;
	margin-top: 8px;
}
.gbe-loc-mode__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: #fff;
	border: 1.5px solid var(--gbe-clay-200, #E8DCC4);
	border-radius: 12px;
	cursor: pointer;
	transition: all 220ms cubic-bezier(.19,1,.22,1);
	position: relative;
	min-height: 70px;
}
.gbe-loc-mode__card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.gbe-loc-mode__card:hover {
	border-color: var(--gbe-terracotta, #A8472B);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(168,71,43,.3);
}
.gbe-loc-mode__card:has(input:checked) {
	border-color: var(--gbe-terracotta, #A8472B);
	background: rgba(168, 71, 43, 0.05);
	box-shadow: 0 8px 20px -10px rgba(168,71,43,.3), inset 0 0 0 1px rgba(168,71,43,.2);
}
.gbe-loc-mode__icon {
	font-size: 1.3rem;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gbe-clay-100, #FAF4EA);
	border: 1.5px solid var(--gbe-clay-200, #E8DCC4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 220ms ease;
}
.gbe-loc-mode__card:has(input:checked) .gbe-loc-mode__icon {
	background: #fff;
	border-color: var(--gbe-terracotta, #A8472B);
}
.gbe-loc-mode__text { flex: 1; min-width: 0; }
.gbe-loc-mode__title {
	display: block;
	font-family: var(--gbe-font-display, 'Fraunces', serif);
	font-style: italic;
	font-weight: 460;
	font-size: 1rem;
	color: var(--gbe-clay-900, #1A1612);
	line-height: 1.2;
}
.gbe-loc-mode__desc {
	display: block;
	font-size: .78rem;
	color: var(--gbe-clay-500, #6B5A47);
	margin-top: 2px;
	line-height: 1.4;
}
/* Venue list */
.gbe-form__venue-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 10px;
	margin-top: 12px;
}
.gbe-form__venue-list__loader,
.gbe-form__venue-list__empty {
	grid-column: 1 / -1;
	padding: 18px;
	text-align: center;
	color: var(--gbe-clay-500, #6B5A47);
	font-style: italic;
	background: rgba(250, 244, 234, 0.6);
	border-radius: 10px;
	border: 1px dashed var(--gbe-clay-200, #E8DCC4);
	font-size: .88rem;
}
.gbe-form__venue-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1.5px solid var(--gbe-clay-200, #E8DCC4);
	border-radius: 12px;
	cursor: pointer;
	overflow: hidden;
	transition: all 220ms cubic-bezier(.19,1,.22,1);
	position: relative;
	min-height: 180px;
}
.gbe-form__venue-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.gbe-form__venue-card:hover {
	border-color: var(--gbe-terracotta, #A8472B);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(168,71,43,.3);
}
.gbe-form__venue-card--selected {
	border-color: var(--gbe-terracotta, #A8472B);
	background: rgba(168, 71, 43, 0.04);
	box-shadow: 0 8px 20px -12px rgba(168,71,43,.3), inset 0 0 0 1px rgba(168,71,43,.2);
}
.gbe-form__venue-card__img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	background: var(--gbe-clay-100, #FAF4EA);
	display: block;
}
.gbe-form__venue-card__img--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	color: var(--gbe-clay-300, #C9B89F);
}
.gbe-form__venue-card__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.gbe-form__venue-card__name {
	font-family: var(--gbe-font-display, 'Fraunces', serif);
	font-style: italic;
	font-weight: 460;
	font-size: 1rem;
	color: var(--gbe-clay-900, #1A1612);
	line-height: 1.2;
}
.gbe-form__venue-card__addr {
	font-size: .78rem;
	color: var(--gbe-clay-500, #6B5A47);
	line-height: 1.4;
}

/* === Guest counters (Adulti/Bambini) in Standard mode === */
.gbe-guests-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.gbe-guests-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--gbe-clay-50, #FDFAF4);
	border: 1px solid var(--gbe-clay-200, #E8DCC4);
	border-radius: 10px;
}
.gbe-guests-label strong {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--gbe-clay-900, #1A1612);
}
.gbe-guests-label small {
	display: block;
	font-size: 0.75rem;
	color: var(--gbe-clay-500, #6B5A47);
	margin-top: 2px;
}
.gbe-guests-counter {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.gbe-guests-btn {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #fff;
	border: 1.5px solid var(--gbe-clay-300, #C9B89F);
	font-size: 1.3rem;
	line-height: 1;
	font-weight: 500;
	color: var(--gbe-terracotta, #A8472B);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 180ms ease;
	font-family: inherit;
}
.gbe-guests-btn:hover:not(:disabled) {
	border-color: var(--gbe-terracotta, #A8472B);
	background: rgba(168, 71, 43, 0.08);
}
.gbe-guests-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gbe-guests-value {
	min-width: 26px;
	text-align: center;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--gbe-clay-900, #1A1612);
	font-variant-numeric: tabular-nums;
}

/* =====================================================================
   ELEMENTOR SHIELD — defensive overrides for theme kits that inject
   background-color / typography / padding on ALL <button> and
   <input type="submit"> via selectors of specificity (0,2,1), e.g.:
      .elementor-kit-15 input[type="submit"] { background-color: … }

   STRATEGY (new): instead of a universal reset+reassert, we boost the
   specificity of every plugin button class explicitly to (0,3,0) via
   :is() — so the kit's (0,2,1) selectors lose the cascade for the
   properties we care about, while properties we don't redeclare
   (transition, animation, transform...) keep their base rules.

   This file used to ship a universal reset that wiped EVERY <button>
   inside .gbe-booking-widget and then re-skinned only `.gbe-btn`. That
   left .gbe-cp-btn, .gbe-step-back, .gbe-pm-card, .gbe-guests-btn,
   .gbe-cp-counter__btn and .gbe-dtp__* buttons unstyled — a real
   regression. The targeted overrides below restore each one.
   ===================================================================== */

/* --- Standard mode: .gbe-btn / --primary / --ghost ----------------- */
.gbe-booking-widget :is(button, input[type="submit"]).gbe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 16px 28px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1.2;
	text-transform: none;
	background-color: transparent;
	transition: background 220ms ease,
	            box-shadow 280ms cubic-bezier(.19, 1, .22, 1),
	            color 220ms ease,
	            filter 220ms ease;
}
.gbe-booking-widget :is(button, input[type="submit"]).gbe-btn--primary {
	background: var(--gbe-clay-900, #1A1612);
	color: var(--gbe-clay-50, #FDFAF4);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 16px 32px -16px rgba(26, 22, 18, 0.5);
}
/* No vertical jump on hover — switch to a colour shift towards
   terracotta + outer glow ring. Subtle but unambiguous; stays in
   place so the click target doesn't move under the cursor.
   `transform: none` is asserted explicitly so any lower-specificity
   rule (legacy in this file or injected by the theme kit) that sets
   translateY on hover is cancelled. */
.gbe-booking-widget :is(button, input[type="submit"]).gbe-btn--primary:hover {
	background: var(--gbe-terracotta, #A8472B);
	box-shadow: 0 0 0 4px rgba(168, 71, 43, 0.22),
	            0 18px 36px -14px rgba(168, 71, 43, 0.6);
	filter: brightness(1.04);
	transform: none;
}
.gbe-booking-widget :is(button, input[type="submit"]).gbe-btn--primary:active {
	background: var(--gbe-terracotta-d, #7E2E16);
	box-shadow: 0 0 0 4px rgba(168, 71, 43, 0.30),
	            0 6px 14px -4px rgba(168, 71, 43, 0.55);
	filter: brightness(0.97);
	transform: none;
}
.gbe-booking-widget :is(button, input[type="submit"]).gbe-btn--ghost {
	background: transparent;
	color: var(--gbe-clay-500, #6B5A47);
	border: 1px solid var(--gbe-clay-300, #C9B89F);
}
.gbe-booking-widget :is(button, input[type="submit"]).gbe-btn--ghost:hover {
	background: var(--gbe-clay-50, #FDFAF4);
	color: var(--gbe-clay-900, #1A1612);
	border-color: var(--gbe-clay-500, #6B5A47);
}

/* --- Chef Pro: .gbe-cp-btn / --primary / --ghost ------------------- */
.gbe-booking-widget :is(button, input[type="submit"]).gbe-cp-btn {
	padding: 14px 28px;
	border-radius: 999px;
	font-family: var(--gbe-font-body, 'DM Sans', sans-serif);
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	background-color: transparent;
	border: 1.5px solid transparent;
	color: inherit;
	min-height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	/* Transition: animate background gradient + box-shadow glow +
	   filter brightness on hover. No transform here on purpose — the
	   user explicitly asked for no vertical "saltino", we communicate
	   feedback via colour/glow only. */
	transition: background 220ms ease,
	            box-shadow 280ms cubic-bezier(.19, 1, .22, 1),
	            border-color 220ms ease,
	            color 220ms ease,
	            filter 220ms ease;
}
.gbe-booking-widget :is(button, input[type="submit"]).gbe-cp-btn--primary {
	background: linear-gradient(180deg, var(--gbe-terracotta, #A8472B) 0%, var(--gbe-terracotta-d, #7E2E16) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 6px 16px -6px rgba(168, 71, 43, .45), inset 0 1px 0 rgba(255,255,255,0.15);
}
/* Hover/active states — riasserted at (0,3,0) so they win the cascade
   against the theme kit's button rules. Previous version did a 2px
   translateY on hover which felt jarring ("saltino"); the new
   choreography keeps the button perfectly stationary and instead
   layers an outer glow ring + a brighter gradient tone. The change
   is subtle visually but unambiguous in feedback. */
.gbe-booking-widget :is(button, input[type="submit"]).gbe-cp-btn--primary:not(:disabled):hover {
	background: linear-gradient(180deg, #C25A37 0%, #8E351A 100%);
	box-shadow: 0 0 0 4px rgba(168, 71, 43, 0.22),
	            0 14px 32px -10px rgba(168, 71, 43, 0.7),
	            inset 0 1px 0 rgba(255,255,255,0.22);
	filter: brightness(1.05);
}
.gbe-booking-widget :is(button, input[type="submit"]).gbe-cp-btn--primary:not(:disabled):active {
	background: linear-gradient(180deg, var(--gbe-terracotta-d, #7E2E16) 0%, #5E2210 100%);
	box-shadow: 0 0 0 4px rgba(168, 71, 43, 0.30),
	            0 4px 10px -4px rgba(168, 71, 43, 0.55);
	filter: brightness(0.98);
}
.gbe-booking-widget :is(button, input[type="submit"]).gbe-cp-btn--primary:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	box-shadow: none;
	background: var(--gbe-clay-300, #C9B89F);
}
.gbe-booking-widget :is(button, input[type="submit"]).gbe-cp-btn--ghost {
	background: transparent;
	color: var(--gbe-clay-700, #3D332A);
	border-color: var(--gbe-clay-300, #C9B89F);
}
.gbe-booking-widget :is(button, input[type="submit"]).gbe-cp-btn--ghost:hover {
	background: var(--gbe-clay-100, #FAF4EA);
	border-color: var(--gbe-terracotta, #A8472B);
	color: var(--gbe-terracotta, #A8472B);
	box-shadow: 0 0 0 3px rgba(168, 71, 43, 0.12);
}

/* --- Chef Pro counter pill (gbe-cp-counter) ------------------------
   The base rule in gbe-chef-pro.css uses a 50%-opacity cream background
   (`rgba(250,244,234,0.5)`) which renders as a dim grey on the dark
   editorial theme — making the central number unreadable against the
   page (low contrast) and on top of the button gradient too. We force
   a SOLID cream pill so the dark-on-cream contrast is preserved
   regardless of theme. */
.gbe-booking-widget .gbe-cp-counter {
	background: var(--gbe-clay-100, #FAF4EA);
	border: 1px solid var(--gbe-clay-200, #E8DCC4);
}
/* The central value: bump font-size and ensure a high-contrast colour
   that doesn't get washed out by the parent's opacity stack. */
.gbe-booking-widget .gbe-cp-counter .gbe-cp-counter__value {
	color: var(--gbe-clay-900, #1A1612);
	font-size: 1.5rem;
	font-weight: 500;
	min-width: 36px;
	font-variant-numeric: tabular-nums;
	font-style: italic;
	font-family: var(--gbe-font-display, 'Fraunces', Georgia, serif);
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	-webkit-text-fill-color: currentColor; /* defeat -webkit-text-fill from kit */
}

/* --- Chef Pro counter +/- buttons (gbe-cp-counter__btn) ------------ */
.gbe-booking-widget button.gbe-cp-counter__btn {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--gbe-clay-200, #E8DCC4);
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1;
	color: var(--gbe-terracotta, #A8472B);
	text-transform: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gbe-booking-widget button.gbe-cp-counter__btn:hover:not(:disabled) {
	background: var(--gbe-terracotta, #A8472B);
	border-color: var(--gbe-terracotta, #A8472B);
	color: #fff;
}

/* --- Standard step "← Back" link button (gbe-step-back) ------------ */
.gbe-booking-widget button.gbe-step-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--gbe-clay-500, #6B5A47);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	padding: 8px 0;
	margin-bottom: 16px;
	text-transform: none;
	letter-spacing: normal;
}
.gbe-booking-widget button.gbe-step-back:hover {
	color: var(--gbe-terracotta, #A8472B);
	background: transparent;
}

/* --- Standard guests counter (gbe-guests-btn) ---------------------- */
.gbe-booking-widget button.gbe-guests-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--gbe-clay-200, #E8DCC4);
	font-family: inherit;
	font-size: 1.15rem;
	color: var(--gbe-clay-900, #1A1612);
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gbe-booking-widget button.gbe-guests-btn:hover:not(:disabled) {
	border-color: var(--gbe-terracotta, #A8472B);
	background: rgba(168, 71, 43, 0.08);
}

/* --- Standard payment method cards (gbe-pm-card) -------------------
   `overflow: hidden` is critical: without it, a long description like
   "Questo metodo sarà presto disponibile. Scegli un altro metodo…"
   trails past the card's right edge. We pair it with min-width:0 on
   the text column (mirroring the original .gbe-pm-card__text rule)
   so the flex item is allowed to shrink below its content size and
   the inner <div>s can wrap as needed. */
.gbe-booking-widget button.gbe-pm-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border-radius: 14px;
	border: 2px solid var(--gbe-clay-200, #E8DCC4);
	background: #fff;
	color: inherit;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	cursor: pointer;
	min-height: 72px;
	white-space: normal;
}
.gbe-booking-widget button.gbe-pm-card:hover {
	border-color: var(--gbe-terracotta, #A8472B);
}
/* Inner text column — must be allowed to shrink (min-width:0) and to
   wrap long words (overflow-wrap:break-word) so the description never
   pushes past the card boundary. These mirror the originals in
   gbe-steps.css but with elevated specificity to survive theme resets. */
.gbe-booking-widget .gbe-pm-card .gbe-pm-card__text {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}
.gbe-booking-widget .gbe-pm-card .gbe-pm-card__title,
.gbe-booking-widget .gbe-pm-card .gbe-pm-card__desc {
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	max-width: 100%;
}

/* =====================================================================
   INPUT TYPOGRAPHY — same defense layer for our text/email/phone inputs.
   The Chef Pro location autocomplete (.gbe-cp-input.gbe-cp-input--pin)
   was rendering the typed text glued to the top of the box because the
   theme overrode padding/line-height with theme-form defaults. Lock
   them to a sensible centered baseline.
   ===================================================================== */
.gbe-booking-widget :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"]).gbe-cp-input,
.gbe-cp-wrap :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"]).gbe-cp-input,
.gbe-booking-widget :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"]).gbe-input,
.gbe-cp-wrap :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"]).gbe-input {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--gbe-clay-200, #E8DCC4);
	border-radius: 12px;
	background-color: #fff;
	color: var(--gbe-clay-900, #1A1612);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color 200ms, box-shadow 200ms;
}
.gbe-booking-widget :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"]).gbe-cp-input:focus,
.gbe-cp-wrap :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"]).gbe-cp-input:focus,
.gbe-booking-widget :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"]).gbe-input:focus,
.gbe-cp-wrap :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"]).gbe-input:focus {
	outline: none;
	border-color: var(--gbe-terracotta, #A8472B);
	box-shadow: 0 0 0 3px rgba(168,71,43,.12);
}
/* PIN / CALENDAR variants — reassert the SVG background after the reset
   above wiped background-image and recomputed padding to keep room for
   the icon at the left edge. */
.gbe-booking-widget :is(input[type="text"]).gbe-cp-input--pin,
.gbe-cp-wrap :is(input[type="text"]).gbe-cp-input--pin {
	padding-left: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8472B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px;
}
.gbe-booking-widget :is(input[type="text"]).gbe-cp-input--calendar,
.gbe-cp-wrap :is(input[type="text"]).gbe-cp-input--calendar {
	padding-left: 44px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A8472B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 18px;
}

/* The datetime picker MODAL is appended to <body> by JS, so it is OUTSIDE
   any widget wrapper — Elementor kit can colour its inner buttons too.
   We protect them by RE-ASSERTING the brand-side styles with specificity
   (0,3,0) via :is(), so Elementor's (0,2,1) selectors lose the cascade
   for the properties we care about. Each rule pairs the buttons we
   actually render in the picker with their existing visual contract. */
.gbe-dtp :is(button).gbe-dtp__close {
	background: transparent;
	color: var(--gbe-clay-500, #6B5A47);
	border: 0;
	border-radius: 50%;
	padding: 8px;
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}
.gbe-dtp :is(button).gbe-dtp__prev,
.gbe-dtp :is(button).gbe-dtp__next {
	background: transparent;
	color: var(--gbe-clay-700, #3D332A);
	border: 0;
	border-radius: 50%;
	padding: 0;
	width: 36px;
	height: 36px;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}
.gbe-dtp :is(button).gbe-dtp__today,
.gbe-dtp :is(button).gbe-dtp__clear,
.gbe-dtp :is(button).gbe-dtp__confirm,
.gbe-dtp :is(button).gbe-dtp__back {
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	padding: 10px 18px;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
}
.gbe-dtp :is(button).gbe-dtp__confirm {
	background: var(--gbe-clay-900, #1A1612);
	color: var(--gbe-clay-50, #FDFAF4);
}
.gbe-dtp :is(button).gbe-dtp__confirm:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.gbe-dtp :is(button).gbe-dtp__today,
.gbe-dtp :is(button).gbe-dtp__clear,
.gbe-dtp :is(button).gbe-dtp__back {
	background: transparent;
	color: var(--gbe-clay-500, #6B5A47);
}
/* Day cells: MIRROR the original gbe-datetime-picker.css values (white
   card, Fraunces italic, 10px radius, clay border) — Elementor only
   injects background-color/color/font/padding/border-radius/text-transform,
   so we redeclare exactly those and let the original height + transitions
   keep working. (Previous version reinvented the styling and broke the
   grid alignment + replaced Fraunces with DM Sans.) */
.gbe-dtp :is(button).gbe-dtp__day {
	background: #fff;
	color: #3D332A;
	border: 1px solid rgba(201, 184, 159, 0.3);
	border-radius: 10px;
	padding: 0;
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 460;
	font-size: 1rem;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}
/* Disabled days — past dates, blackouts, weekday-blocked. Visibly muted
   so the user understands they can't be picked. */
.gbe-dtp :is(button).gbe-dtp__day:disabled {
	color: var(--gbe-clay-300, #C9B89F);
	cursor: not-allowed;
	background: transparent;
	border-color: transparent;
	opacity: 0.35;
}
/* "Other-month" filler cells (prev/next month padding rendered to align
   the weekday columns) — even more muted than disabled, AND pointer-
   events:none so the cursor doesn't even flash a "not-allowed" icon.
   The JS also adds aria-hidden + tabindex=-1 to skip them in screen
   readers and keyboard nav; this is the visual counterpart. */
.gbe-dtp :is(button).gbe-dtp__day--other,
.gbe-dtp :is(button).gbe-dtp__day--other:disabled {
	opacity: 0.18;
	color: var(--gbe-clay-300, #C9B89F);
	background: transparent;
	border-color: transparent;
	cursor: default;
	pointer-events: none;
}
.gbe-dtp :is(button).gbe-dtp__time {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 460;
	font-size: 0.95rem;
	letter-spacing: normal;
	text-transform: none;
	color: var(--gbe-clay-700, #3D332A);
	background: #fff;
	border: 1.5px solid rgba(201, 184, 159, 0.4);
	border-radius: 999px;
	padding: 10px 8px;
	cursor: pointer;
}
.gbe-dtp :is(button).gbe-dtp__time--active {
	background: var(--gbe-terracotta, #A8472B);
	color: #fff;
	border-color: var(--gbe-terracotta, #A8472B);
}

/* =====================================================================
   FORM ROW ALIGNMENT — when a row holds 3 (or 2) groups with labels of
   different word counts ("Giorno" vs "Orario di inizio" vs "Durata"),
   the labels can take 1 or 2 visual lines depending on the column width,
   pushing the input/select below them out of alignment with siblings.
   We bottom-anchor each group and harmonise the input vs select heights
   so the three fields share a single horizontal baseline regardless of
   label-wrapping.
   ===================================================================== */
.gbe-form__row {
	align-items: end; /* anchor all children to the bottom of the row */
}
.gbe-form__group {
	display: flex;
	flex-direction: column;
	min-width: 0; /* allow grid children to shrink instead of overflow */
}
/* Label baseline — fixed-height area so labels with 1 line vs 2 lines
   no longer push their input down. We give enough room for two lines
   (uppercase tracking + small caps), then let the actual text sit at
   the bottom so the rule "all inputs share the same top edge" holds.
   word-break:keep-all + overflow-wrap:normal force wrapping ONLY at
   whitespace — so a label like "Orario di inizio" can never split as
   "ORARIO" / "DI ... INIZIO *" the way it did before. */
.gbe-form__label {
	min-height: calc(1.3em * 2 + 4px);
	display: flex;
	align-items: flex-end;
	line-height: 1.3;
	margin: 0 0 8px;
	word-break: keep-all;
	overflow-wrap: normal;
	hyphens: none;
}
/* Slightly tighter tracking inside the dense 3-column row so short
   two-word labels (e.g. "Ora inizio") sit comfortably on a single
   line in the 1fr cells while the wider Standard-form labels keep
   the brand 0.1em tracking elsewhere. */
.gbe-form__row--3 .gbe-form__label {
	letter-spacing: 0.06em;
}
/* Required-mark inline atom: kept on the same baseline as the label
   text (the JS normaliser wraps the last word + asterisk in an
   inline-block to prevent the * from orphaning onto its own line). */
.gbe-form__label .gbe-form__required-mark {
	display: inline;
	white-space: nowrap;
	font: inherit;
	color: inherit;
}
/* Lock input + select to identical box metrics. Both already share
   `min-height: 48px` from the base rules, but native <select> can
   shrink in some browsers when no value is initially selected. We
   make height explicit + force the same border + padding so the
   three fields look like one consistent row of controls. */
.gbe-form__row :is(.gbe-form__input, .gbe-form__select) {
	height: 48px;
	min-height: 48px;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1.4;
	display: flex;
	align-items: center;
}
/* Select chevron + text vertical centering — `display:flex` on a
   native <select> is ignored, so we keep the inline-block fallback
   but make sure padding/line-height add up to the right metrics. */
.gbe-form__row select.gbe-form__select {
	display: inline-block;
	padding: 0 38px 0 16px; /* keep room for the chevron icon */
	line-height: 48px;       /* center text vertically */
}
/* Mobile: when columns collapse, drop the forced label min-height so
   we don't waste vertical real estate on stacked rows. */
@media (max-width: 539px) {
	.gbe-form__row .gbe-form__label { min-height: 0; display: block; }
}