/**
 * Widget de marcação "dashboard tipo Calendly" embutido nas páginas de
 * serviço (ver inc/booking-widget.php e assets/js/booking-widget.js).
 * Ficheiro partilhado pelas 3 páginas que o usam — evita triplicar esta
 * quantidade de CSS inline como as restantes secções destas páginas
 * (revisão de código, 2026-08-15: já tinha acontecido com o CSS do
 * formulário decorativo removido nesta mesma passagem).
 *
 * Usa os tokens de design (--c-blue, --c-ink, --radius-*, --fs-*, etc.)
 * já definidos no :root de cada página que carrega este ficheiro — com
 * fallbacks para o caso de alguma vez ser usado numa página sem eles.
 */

.booking-widget {
	width: 100%;
}

.booking-widget__loading,
.booking-widget__empty,
.booking-widget__error {
	font-size: var(--fs-14, 14px);
	color: var(--c-body, #536373);
}

.booking-widget__subtype {
	margin-bottom: 21.6px;
}

.booking-widget__subtype-label {
	font-size: var(--fs-13, 13px);
	font-weight: 600;
	color: var(--c-ink, #0a2d4d);
	margin: 0 0 9px;
}

.booking-widget__subtype-options {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

.booking-widget__subtype-option {
	padding: 10.8px 16.2px;
	border: 1px solid var(--c-svc-card-border, #d7ecf5);
	border-radius: var(--radius-md, 8px);
	background: var(--c-white, #fff);
	color: var(--c-ink, #0a2d4d);
	font-size: var(--fs-14, 14px);
	font-weight: 600;
	cursor: pointer;
}

.booking-widget__subtype-option.is-selected {
	background: var(--c-blue, #008bbd);
	border-color: var(--c-blue, #008bbd);
	color: var(--c-white, #fff);
}

.booking-widget__body {
	display: flex;
	gap: 28.8px;
	flex-wrap: wrap;
	width: 100%;
	transition: opacity 0.15s ease;
}

.booking-widget__body.is-locked {
	opacity: 0.4;
	pointer-events: none;
}

.booking-widget__calendar {
	flex: 1 1 288px;
	min-width: 0;
}

.booking-widget__calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14.4px;
}

.booking-widget__month-label {
	margin: 0;
	font-size: var(--fs-14, 14px);
	font-weight: 700;
	color: var(--c-ink, #0a2d4d);
}

.booking-widget__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30.6px;
	height: 30.6px;
	border: 1px solid var(--c-svc-card-border, #d7ecf5);
	border-radius: var(--radius-md, 8px);
	background: var(--c-white, #fff);
	color: var(--c-ink, #0a2d4d);
	cursor: pointer;
}

.booking-widget__nav:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.booking-widget__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 7.2px;
}

.booking-widget__weekdays span {
	text-align: center;
	font-size: var(--fs-11, 11px);
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--c-muted-2, #6b7785);
}

.booking-widget__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3.6px;
}

.booking-widget__grid span {
	height: 36px;
}

.booking-widget__day {
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: var(--fs-13, 13px);
	color: var(--c-ink, #0a2d4d);
	cursor: default;
}

.booking-widget__day:disabled {
	color: var(--c-muted-2, #6b7785);
	opacity: 0.35;
}

.booking-widget__day.has-slots {
	background: var(--c-blue-soft, #e6f4fa);
	color: var(--c-blue-700, #007caf);
	font-weight: 700;
	cursor: pointer;
}

.booking-widget__day.has-slots:hover {
	background: var(--c-blue, #008bbd);
	color: var(--c-white, #fff);
}

.booking-widget__day.is-selected {
	background: var(--c-blue, #008bbd);
	color: var(--c-white, #fff);
}

.booking-widget__times {
	flex: 1 1 216px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10.8px;
}

.booking-widget__times-title {
	margin: 0;
	font-size: var(--fs-14, 14px);
	font-weight: 700;
	color: var(--c-ink, #0a2d4d);
}

.booking-widget__times-list {
	display: flex;
	flex-direction: column;
	gap: 9px;
	max-height: 306px;
	overflow-y: auto;
}

.booking-widget__time {
	padding: 10.8px 14.4px;
	border: 1px solid var(--c-blue, #008bbd);
	border-radius: var(--radius-md, 8px);
	background: var(--c-white, #fff);
	color: var(--c-blue-700, #007caf);
	font-size: var(--fs-14, 14px);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.booking-widget__time:hover {
	background: var(--c-blue-soft, #e6f4fa);
}

.booking-widget__time.is-selected {
	background: var(--c-ink, #0a2d4d);
	border-color: var(--c-ink, #0a2d4d);
	color: var(--c-white, #fff);
}

.booking-widget__confirm {
	margin-top: 7.2px;
	width: 100%;
}

.booking-widget__confirm:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (max-width: 640px) {
	.booking-widget__body {
		flex-direction: column;
	}
}