/**
 * FSTD Booking — front-end styles.
 * Class names use the fstd-bk- prefix; override from the theme or the
 * Customizer's additional CSS (rules there load after these).
 */

.fstd-bk-app {
	max-width: 560px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
}

.fstd-bk-panel {
	background: #fff;
	border: 1px solid #e2e6ec;
	border-radius: 10px;
	padding: 24px;
}

.fstd-bk-title {
	margin: 0 0 12px;
	font-size: 1.2em;
}

/* Read-only identity header */
.fstd-bk-identity {
	border-bottom: 1px solid #e2e6ec;
	margin: 0 0 16px;
	padding: 0 0 12px;
}

.fstd-bk-identity-row {
	margin: 0;
	font-weight: 600;
}

.fstd-bk-identity-sub {
	margin: 2px 0 0;
	font-size: 0.88em;
	color: #5b6472;
}

/* Month navigation */
.fstd-bk-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 10px;
}

.fstd-bk-nav-label {
	font-weight: 600;
}

.fstd-bk-nav-btn {
	border: 1px solid #cbd2dc;
	background: #fff;
	border-radius: 6px;
	min-width: 36px;
	padding: 4px 10px;
	font-size: 1.1em;
	cursor: pointer;
}

.fstd-bk-nav-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Calendar grid */
.fstd-bk-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.fstd-bk-grid-head {
	text-align: center;
	font-size: 0.78em;
	color: #5b6472;
	padding: 4px 0;
}

/* High-specificity selectors (.fstd-bk-app button.…) so the theme/Elementor
   kit's global button styles cannot flatten the two day states into one look:
   days WITHOUT slots must read as clearly paler than bookable days. */
.fstd-bk-app button.fstd-bk-day {
	border: 1px solid transparent;
	background: transparent;
	border-radius: 6px;
	padding: 8px 0;
	margin: 0;
	text-align: center;
	color: #ccd2db;
	font-weight: 400;
	line-height: 1.4;
	cursor: default;
}

.fstd-bk-app button.fstd-bk-day-open {
	border-color: #cbd2dc;
	background: #f4f6f9;
	color: #1a2233;
	font-weight: 600;
	cursor: pointer;
}

.fstd-bk-app button.fstd-bk-day-open:hover,
.fstd-bk-app button.fstd-bk-day-open:focus {
	border-color: #2563eb;
	background: #eaf0fe;
	color: #1a2233;
}

/* Time slots */
.fstd-bk-times {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin: 12px 0;
}

/* Same high-specificity treatment as the day cells: keep the theme kit's
   global button styles from repainting the time slots. */
.fstd-bk-app button.fstd-bk-time {
	border: 1px solid #cbd2dc;
	background: #f4f6f9;
	color: #1a2233;
	border-radius: 6px;
	padding: 8px 0;
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.fstd-bk-app button.fstd-bk-time:hover,
.fstd-bk-app button.fstd-bk-time:focus {
	border-color: #2563eb;
	background: #eaf0fe;
	color: #1a2233;
}

.fstd-bk-app button.fstd-bk-time-selected,
.fstd-bk-app button.fstd-bk-time-selected:hover,
.fstd-bk-app button.fstd-bk-time-selected:focus {
	border-color: #2563eb;
	background: #2563eb;
	color: #fff;
}

/* Participation-mode chooser (shown once a time is selected) */
.fstd-bk-modes {
	margin: 0 0 14px;
}

.fstd-bk-modes-title {
	margin: 0 0 6px;
	font-weight: 600;
	font-size: 0.95em;
}

.fstd-bk-mode {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 6px 0;
	font-size: 0.93em;
	cursor: pointer;
}

.fstd-bk-mode input[type='radio'] {
	margin: 0;
	flex: none;
}

.fstd-bk-app input.fstd-bk-phone {
	border: 1px solid #cbd2dc;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 0.95em;
	width: 190px;
	background: #fff;
	color: #1a2233;
}

.fstd-bk-app input.fstd-bk-phone:disabled {
	background: #f4f6f9;
	color: #9aa3b2;
}

.fstd-bk-back {
	border: 0;
	background: transparent;
	color: #2563eb;
	padding: 0;
	margin: 0 0 8px;
	cursor: pointer;
	font-size: 0.9em;
}

/* Confirmation */
.fstd-bk-confirm {
	border-top: 1px solid #e2e6ec;
	margin-top: 16px;
	padding-top: 16px;
}

.fstd-bk-confirm h4 {
	margin: 0 0 6px;
}

.fstd-bk-when {
	font-weight: 600;
	margin: 0 0 12px;
}

.fstd-bk-cta {
	display: inline-block;
	border: 0;
	border-radius: 8px;
	background: #2563eb;
	color: #fff;
	font-weight: 600;
	font-size: 1em;
	padding: 12px 22px;
	cursor: pointer;
}

.fstd-bk-cta:hover,
.fstd-bk-cta:focus {
	background: #1d4fd7;
}

.fstd-bk-cta:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Honeypot: visually gone, still in the DOM for bots. */
.fstd-bk-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Notes / status */
.fstd-bk-tz,
.fstd-bk-note,
.fstd-bk-loading {
	font-size: 0.85em;
	color: #5b6472;
	margin: 10px 0 0;
}

.fstd-bk-note-error {
	color: #b42318;
	font-weight: 600;
}

.fstd-bk-error .fstd-bk-title {
	color: #b42318;
}

.fstd-bk-success .fstd-bk-title {
	color: #0a7d3b;
}