/* Sattva Booking — Frontend booking widget styles */

.sbwc-booking-widget {
	max-width: 420px;
}

.sbwc-section {
	margin-bottom: 20px;
}

.sbwc-section-title {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 10px;
	color: #2c2c2c;
}

/* Format options */

.sbwc-format-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.sbwc-format-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	border: 1px solid #d8d8d6;
	border-radius: 6px;
	padding: 12px 14px;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.sbwc-format-option:hover {
	border-color: #8a8a86;
}

.sbwc-format-option.is-selected {
	border-color: #5c6f64;
	background: #f7f8f6;
}

.sbwc-format-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sbwc-format-option-radio {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid #999;
	margin-top: 2px;
	position: relative;
}

.sbwc-format-option.is-selected .sbwc-format-option-radio {
	border-color: #5c6f64;
}

.sbwc-format-option.is-selected .sbwc-format-option-radio::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5c6f64;
}

.sbwc-format-option-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sbwc-format-option-text strong {
	font-size: 14px;
	color: #1d1d1b;
}

.sbwc-format-option-text small {
	font-size: 12px;
	color: #767672;
	line-height: 1.3;
}

/* Session options */

.sbwc-session-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid #d8d8d6;
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 10px;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.sbwc-session-option:hover {
	border-color: #8a8a86;
}

.sbwc-session-option.is-selected {
	border-color: #5c6f64;
	background: #f7f8f6;
}

.sbwc-session-option.is-unavailable {
	cursor: not-allowed;
	opacity: 0.55;
}

.sbwc-session-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sbwc-session-option-radio {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid #999;
	margin-top: 2px;
	position: relative;
}

.sbwc-session-option.is-selected .sbwc-session-option-radio {
	border-color: #5c6f64;
}

.sbwc-session-option.is-selected .sbwc-session-option-radio::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5c6f64;
}

.sbwc-session-option-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}

.sbwc-session-date {
	font-size: 14px;
	color: #1d1d1b;
}

.sbwc-session-time {
	font-size: 12.5px;
	color: #767672;
}

.sbwc-session-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	color: #5c6f64;
	margin-top: 2px;
}

.sbwc-session-badge:empty {
	display: none;
}

.sbwc-session-option.is-unavailable .sbwc-session-badge {
	color: #a14747;
}

.sbwc-session-price {
	font-size: 12.5px;
	color: #444;
	margin-top: 2px;
}

.sbwc-no-sessions,
.sbwc-no-formats {
	color: #767672;
	font-size: 13px;
	font-style: italic;
}

.sbwc-error-message {
	color: #a14747;
	font-size: 13px;
	margin: 0 0 10px;
}

.sbwc-add-to-cart-button {
	width: 100%;
	text-align: center;
}

@media (max-width: 480px) {
	.sbwc-format-options {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Theme-styled booking card (.booking-card) support
   These rules only add what the static design didn't already define:
   hiding the native radio input, showing a dot inside .format-option__radio /
   .session-item__radio when selected, and an "unavailable" (sold out /
   expired / disabled) treatment. Everything else (layout, spacing, colors)
   comes from the theme's own stylesheet.
   ========================================================================== */

.booking-card .format-option,
.booking-card .session-item {
	display: block;
	cursor: pointer;
	position: relative;
}

.sbwc-visually-hidden-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.booking-card .format-option__radio,
.booking-card .session-item__radio {
	position: relative;
}

.format-option--selected .format-option__radio::after,
.session-item--selected .session-item__radio::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.session-item--unavailable {
	cursor: not-allowed;
	opacity: 0.5;
}

.session-item--unavailable .session-item__spots {
	color: #a14747;
}

.booking-card .sbwc-error-message {
	color: #a14747;
	font-size: 13px;
	margin: 0 0 10px;
}

.booking-card .sbwc-no-sessions {
	color: #767672;
	font-size: 13px;
	font-style: italic;
}

/* =========================================================
   Session scroll: show 3 sessions, scroll for more
   ========================================================= */
.sbwc-session-group--scroll {
	max-height: calc(3 * 72px); /* approx 3 session card heights */
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding-right: 4px;
	/* Custom scrollbar for modern browsers */
	scrollbar-width: thin;
	scrollbar-color: #c5c5c3 transparent;
}

.sbwc-session-group--scroll::-webkit-scrollbar {
	width: 5px;
}

.sbwc-session-group--scroll::-webkit-scrollbar-thumb {
	background: #c5c5c3;
	border-radius: 3px;
}

.sbwc-scroll-hint {
	font-size: 11.5px;
	color: #888;
	text-align: center;
	margin: 4px 0 0;
	font-style: italic;
}