/*
 * Guesty Direct Booking — front-end styles.
 * Inherits brand tokens where present (theme.json), with fallbacks so the
 * component is presentable on any page even outside the PR Rentals theme.
 *
 * The widget renders inside .prr-booking (theme rail class) — structural rail
 * styles live in property-detail.css. This file covers widget-specific elements:
 * date inputs, guest stepper, guest form, Stripe card area, error/notice states.
 */
.gdb-booking {
	--gdb-ocean:      var(--wp--preset--color--ocean, #0C3A5B);
	--gdb-gold:       var(--wp--preset--color--gold, #F3B007);
	--gdb-gold-hover: var(--wp--preset--color--gold-hover, #D69A00);
	--gdb-border:     var(--wp--preset--color--border-warm, #E4DAC6);
	--gdb-text:       var(--wp--preset--color--charcoal, #1F2933);
	--gdb-slate:      var(--wp--preset--color--slate, #5C6A78);
	--gdb-font:       var(--wp--preset--font-family--inter, system-ui, sans-serif);
	font-family: var(--gdb-font);
	color: var(--gdb-text);
}

/* ── Date inputs inside the .prr-booking__box ─────────────────────────────── */

.gdb-date-input,
.gdb-guests-input {
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--gdb-text);
	background: transparent;
	border: none;
	outline: none;
	width: 100%;
	cursor: pointer;
	padding: 0;
}
.gdb-date-input:focus,
.gdb-guests-input:focus {
	outline: none;
}

/* Visually integrates with the .prr-booking__box border grid */
.gdb-dates-box {
	margin-bottom: 14px;
}

/* ── Guest form ───────────────────────────────────────────────────────────── */

.gdb-guest-section,
.gdb-card-section {
	margin-top: 18px;
}
.gdb-guest-heading {
	font-family: var(--gdb-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gdb-ocean);
	margin: 0 0 12px;
}
.gdb-field-wrap {
	margin-bottom: 10px;
}
.gdb-field-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gdb-slate);
	margin-bottom: 5px;
}
.gdb-input {
	font: inherit;
	font-size: 15px;
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--gdb-border);
	border-radius: 10px;
	background: #fff;
	color: var(--gdb-text);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gdb-input:focus {
	outline: none;
	border-color: var(--gdb-ocean);
	box-shadow: 0 0 0 3px rgba(12, 58, 91, 0.12);
}

/* ── Stripe card mount area ───────────────────────────────────────────────── */

.gdb-card-field {
	padding: 14px 15px;
	border: 1px solid var(--gdb-border);
	border-radius: 11px;
	background: #fff;
	min-height: 46px;
}
.gdb-card-field--hidden {
	display: none;
}
.gdb-card-error {
	color: #b42318;
	font-size: 13px;
	margin-top: 6px;
	min-height: 1em;
}

/* ── No-pk notice (shown when publishable key is not yet set) ─────────────── */

.gdb-pk-notice {
	font-size: 13.5px;
	font-style: italic;
	color: var(--gdb-slate);
	background: #fafaf7;
	border: 1px dashed var(--gdb-border);
	border-radius: 10px;
	padding: 14px 15px;
	margin-bottom: 10px;
}

/* ── Pay button (maps to .prr-booking__cta; already styled by theme) ─────── */

.gdb-pay-btn {
	margin-top: 14px;
}
.gdb-pay-btn:disabled,
.gdb-pay-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

/* ── Get-price / loading state ────────────────────────────────────────────── */

.gdb-get-price {
	margin-top: 4px;
}
.gdb-btn--busy {
	opacity: 0.65;
	cursor: wait;
}

/* ── Error banner ─────────────────────────────────────────────────────────── */

.gdb-error {
	color: #b42318;
	font-size: 14px;
	margin-bottom: 12px;
	padding: 10px 13px;
	background: #fff3f3;
	border-radius: 8px;
}

/* ── Confirmation screen ──────────────────────────────────────────────────── */

.gdb-confirm {
	text-align: center;
	padding: 28px 24px;
}
.gdb-confirm__icon {
	font-size: 36px;
	color: #15803d;
	line-height: 1;
	margin-bottom: 12px;
}
.gdb-confirm__title {
	font-family: var(--gdb-font);
	font-size: 20px;
	font-weight: 700;
	color: var(--gdb-ocean);
	margin: 0 0 8px;
}
.gdb-confirm__code {
	font-size: 14px;
	color: var(--gdb-slate);
	margin: 0;
}