/**
 * Qort booking widget styles — UI-SPEC §C1 implementation.
 *
 * All selectors scoped under .qort-booking-widget (Phase-2 D-08 .qort-* convention).
 * Uses CSS logical properties (padding-inline-*, margin-inline-*, border-inline-*)
 * for RTL safety per UI-SPEC §Locale + RTL contract — the single stylesheet flips
 * correctly under dir="rtl" without an rtl.css mirror.
 *
 * Brand tokens (PROJECT.md / UI-SPEC §Color):
 *   Dominant:    #FFFFFF (page bg)
 *   Secondary:   #F5F5F5 (subtle elevation surfaces)
 *   Accent:      #0062FF (CTA primary, focus ring, brand bar) — accent reserved-for list
 *   Success:     #1BB83D (status pill confirmed)
 *   Pending:     #FFC107 (status pill pending)
 *   Destructive: #D14040 (validation errors, status cancelled)
 *   Neutral:     #BABABA (status rescheduled, disabled state)
 *   Border:      #E3E3E3 (default field borders, hairlines)
 *   Text:        #111111 (primary), #777777 (muted)
 *
 * Touch target minimum 44x44px (UI-SPEC §Spacing — WCAG 2.5.5).
 * Latin numerals double-guard for AR (font-variant-numeric).
 */

.qort-booking-widget {
	/* Brand 4px bar at top — Phase-1 D-06 / Phase-2 D-01 / UI-SPEC §Accent reserved-for #1 */
	border-block-start: 4px solid #0062FF;
	background: #FFFFFF;
	color: #111111;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	/* Latin numerals double-guard for AR locale (UI-SPEC §Locale + RTL) */
	font-variant-numeric: lining-nums tabular-nums;
	padding: 24px;
}

.qort-booking-widget label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-block-end: 8px;
	color: #111111;
}

.qort-booking-widget input,
.qort-booking-widget select {
	inline-size: 100%;
	min-block-size: 44px;  /* WCAG 2.5.5 touch target */
	padding-block: 8px;
	padding-inline: 12px;
	border: 1px solid #E3E3E3;
	background: #FFFFFF;
	color: #111111;
	font: inherit;
	font-variant-numeric: lining-nums tabular-nums;
}

.qort-booking-widget input[type="checkbox"],
.qort-booking-widget input[type="radio"] {
	inline-size: auto;
	min-block-size: 0;
	margin-inline-end: 8px;
}

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

.qort-booking-widget__field {
	margin-block-end: 16px;
}

.qort-booking-widget__field--error input,
.qort-booking-widget__field--error select {
	border-color: #D14040;
}

.qort-booking-widget__error {
	color: #D14040;
	font-size: 14px;
	margin-block-start: 8px;
}

/* Consent checkbox — D-11 / UI-SPEC C1 placement above submit button */
.qort-booking-widget__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-block-end: 16px;
	font-size: 14px;
	color: #111111;
	text-transform: none;  /* override label uppercase rule for body copy */
	letter-spacing: 0;
	font-weight: 400;
}

.qort-booking-widget__consent-checkbox {
	margin-block-start: 4px;
	flex-shrink: 0;
}

/* Customer language radio fieldset — D-28 REQUIRED no default */
.qort-booking-widget__lang {
	border: 1px solid #E3E3E3;
	padding: 16px;
	margin-block-end: 16px;
}

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

.qort-booking-widget__lang label {
	display: inline-flex;
	align-items: center;
	margin-inline-end: 16px;
	min-block-size: 44px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	font-size: 16px;
}

/* Primary CTA — UI-SPEC §Accent reserved-for #2 (CONTINUE TO PAYMENT, NEXT) */
.qort-booking-widget__cta-primary {
	min-block-size: 44px;
	padding-block: 14px;
	padding-inline: 32px;
	background: #0062FF;
	color: #FFFFFF;
	border: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: inherit;
	cursor: pointer;
	inline-size: 100%;
}

.qort-booking-widget__cta-primary:hover {
	background: #0051d6;
}

.qort-booking-widget__cta-primary:disabled {
	background: #BABABA;
	cursor: not-allowed;
}

/* Provider buttons — UI-SPEC §"Provider buttons (Stripe + Ziina)" — co-equal outlined */
/* NEVER provider-branded color; same width, same vertical position. */
.qort-booking-widget__providers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-block-start: 24px;
}

.qort-booking-widget__provider-btn {
	min-block-size: 44px;
	padding-block: 14px;
	padding-inline: 32px;
	background: #FFFFFF;
	color: #111111;
	border: 1px solid #E3E3E3;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: inherit;
	cursor: pointer;
}

.qort-booking-widget__provider-btn:hover,
.qort-booking-widget__provider-btn:focus {
	border-color: #0062FF;
	color: #0062FF;
}

.qort-booking-widget__provider-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Flexible Reschedule disclosure — UI-SPEC §SITE-04 — payment step only */
.qort-policy-note {
	background: #F5F5F5;
	padding: 16px;
	margin-block-start: 24px;
	margin-block-end: 16px;
	border-inline-start: 4px solid #0062FF;
	font-size: 14px;
	color: #777777;
}

.qort-policy-note h4 {
	margin: 0 0 8px;
	font-family: 'Futura Bold', 'Barlow Condensed Bold', 'Arial Black', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #111111;
}

/* Loading state — UI-SPEC §Loading-state copy */
.qort-booking-widget__loading {
	color: #777777;
	font-size: 14px;
	margin-block-start: 8px;
}

/* Price preview — small caption beneath duration selector */
.qort-booking-widget__price-preview {
	color: #777777;
	font-size: 14px;
	margin-block-start: 4px;
	font-variant-numeric: lining-nums tabular-nums;
}

/* RTL flip safeguard — Latin numerals stay LTR via dir="auto" on inputs in markup.
   CSS logical properties auto-flip the layout; no explicit override needed here. */
[dir="rtl"] .qort-booking-widget {
	/* Reserved for AR-specific overrides; intentionally empty per UI-SPEC. */
}