/**
 * /booking/ page styles — UI-SPEC §C2 implementation.
 *
 * FC6 cell overrides: 44px min-block-size (UI-SPEC §Spacing — WCAG 2.5.5 target size).
 * Brand color overrides for slot tile fills are handled inline by JS via
 * backgroundColor / borderColor / textColor on each event (see
 * qort-booking-calendar.js events() callback). This stylesheet covers cell
 * sizing + page chrome + modal structure.
 *
 * Scoped under .qort-* per Phase-2 D-08 namespace contract.
 * CSS logical properties ONLY (no physical-side padding or margin) so the single
 * stylesheet flips correctly under dir="rtl" without an rtl.css mirror.
 *
 * Design tokens (from PROJECT.md + UI-SPEC §Color):
 *   #FFFFFF bg · #111111 text · #0062FF accent · #1BB83D success · #D14040 danger ·
 *   #BABABA neutral · #E3E3E3 border · #F5F5F5 secondary surface
 */

.qort-booking-page {
	max-inline-size: 1280px;
	margin-inline: auto;
	margin-block: 0;
	padding-block: 48px 24px;
	padding-inline: 24px;
	background: #FFFFFF;
	color: #111111;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.qort-booking-page__brand-bar {
	block-size: 4px;
	background: #0062FF;
	margin-block-end: 16px;
}

.qort-booking-page__h1 {
	font-family: 'Futura Bold', 'Barlow Condensed Bold', 'Arial Black', sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-block: 0 32px;
	margin-inline: 0;
}

[dir="rtl"] .qort-booking-page__h1 {
	letter-spacing: 0;    /* AR — no tracking per UI-SPEC */
	text-transform: none; /* AR has no case */
}

.qort-booking-calendar {
	background: #FFFFFF;
	/* Latin numerals anti-pattern guard under AR (UI-SPEC §Locale + RTL contract) */
	font-variant-numeric: lining-nums tabular-nums;
}

/* --- FullCalendar 6 cell + event overrides --------------------------------- */

/* 44px touch target minimum per WCAG 2.5.5 — applies to every slot cell */
.qort-booking-calendar .fc-timegrid-slot {
	min-block-size: 44px;
}

.qort-booking-calendar .fc-event {
	cursor: pointer;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.05em;
	border-radius: 2px;
}

.qort-booking-calendar .fc-event:focus {
	outline: 2px solid #0062FF;
	outline-offset: 2px;
}

/* Taken (red) + blocked (grey) tiles — cursor default (no click intent) */
.qort-booking-calendar .fc-event[style*="#D14040"],
.qort-booking-calendar .fc-event[style*="#BABABA"] {
	cursor: not-allowed;
}

.qort-booking-calendar .fc-col-header-cell {
	background: #F5F5F5;
	border-inline-end: 1px solid #E3E3E3;
}

.qort-booking-calendar .fc-resource-area {
	border-inline-end: 1px solid #E3E3E3;
}

/* --- Booking modal --------------------------------------------------------- */

.qort-booking-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qort-booking-modal[hidden] {
	display: none;
}

.qort-booking-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.5);
}

.qort-booking-modal__panel {
	position: relative;
	background: #FFFFFF;
	inline-size: min(560px, 92vw);
	max-block-size: 90vh;
	overflow-y: auto;
	padding-block: 24px;
	padding-inline: 24px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.qort-booking-modal__close {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	inline-size: 44px;
	block-size: 44px;
	background: transparent;
	border: 0;
	font-size: 24px;
	cursor: pointer;
	color: #111111;
}

.qort-booking-modal__close:focus {
	outline: 2px solid #0062FF;
	outline-offset: 2px;
}

.qort-booking-modal__h2 {
	font-family: 'Futura Bold', 'Barlow Condensed Bold', 'Arial Black', sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-block: 16px;
	margin-inline: 0;
}

[dir="rtl"] .qort-booking-modal__h2 {
	letter-spacing: 0;
	text-transform: none;
}

.qort-booking-modal__summary {
	background: #F5F5F5;
	padding-block: 16px;
	padding-inline: 16px;
	font-size: 14px;
	margin-block-end: 24px;
}

.qort-booking-modal__field {
	display: block;
	margin-block-end: 16px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

[dir="rtl"] .qort-booking-modal__field {
	letter-spacing: 0;
	text-transform: none;
}

.qort-booking-modal__field input,
.qort-booking-modal__field select {
	display: block;
	inline-size: 100%;
	min-block-size: 44px;
	padding-block: 8px;
	padding-inline: 12px;
	margin-block-start: 4px;
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	background: #FFFFFF;
	color: #111111;
	border: 1px solid #E3E3E3;
	border-radius: 2px;
}

.qort-booking-modal__field input:focus,
.qort-booking-modal__field select:focus {
	outline: 2px solid #0062FF;
	outline-offset: 2px;
	border-color: #0062FF;
}

.qort-booking-modal__fieldset {
	border: 1px solid #E3E3E3;
	padding-block: 12px;
	padding-inline: 16px;
	margin-block-end: 16px;
}

.qort-booking-modal__fieldset legend {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding-inline: 8px;
}

.qort-booking-modal__fieldset label {
	display: inline-block;
	margin-inline-end: 16px;
	margin-block-end: 8px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: 16px;
}

.qort-booking-modal__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-block-end: 16px;
	font-size: 14px;
}

.qort-booking-modal__consent input {
	min-inline-size: 24px;
	min-block-size: 24px;
	margin-block-start: 2px;
}