/**
 * ClinicPress — Public booking form styles.
 * Builds on cp-brand.css (CSS custom properties).
 */
.cp-booking button,
.cp-booking input,
.cp-booking select,
.cp-booking textarea {
	box-sizing: border-box;
	box-shadow: none;
	outline: none;
}

body .cp-booking {
	max-width: 100%;
	margin: 0 auto;
	background: var(--cp-bg-card);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-2xl);
	padding: var(--cp-space-8);
	box-shadow: var(--cp-shadow-md);
	container-type: inline-size;
	container-name: cp-booking;
}
.cp-booking__head { margin-bottom: var(--cp-space-6); }
.cp-booking__head .cp-h1 { margin: 0; }
.cp-booking__timezone {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: var(--cp-space-2) 0 0;
	font-size: var(--cp-text-sm);
	color: var(--cp-text-muted);
	line-height: 1;
}
.cp-booking__timezone-label {
	font-weight: 600;
}
@container cp-booking (max-width: 500px) {
	body .cp-booking { padding: var(--cp-space-5); border-radius: var(--cp-radius-xl); }
	.cp-booking__nav { flex-direction: column-reverse; }
	.cp-booking__nav .cp-btn { width: 100%; justify-content: center; }
}

/* Step indicator */
.cp-steps {
	display: flex;
	gap: var(--cp-space-2);
	margin-bottom: var(--cp-space-8);
	flex-wrap: wrap;
}
.cp-step {
	display: flex;
	align-items: center;
	gap: var(--cp-space-2);
	flex: 1 1 0;
	min-width: 120px;
	padding-bottom: var(--cp-space-3);
	border-bottom: 3px solid var(--cp-border);
	color: var(--cp-text-muted);
	transition: color var(--cp-transition), border-color var(--cp-transition);
}
.cp-step--active { color: var(--cp-text-primary); border-bottom-color: var(--cp-teal); }
.cp-step--done { color: var(--cp-teal-dark); border-bottom-color: var(--cp-teal-light); }
.cp-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--cp-bg-input);
	color: inherit;
	font-size: var(--cp-text-sm);
	font-weight: var(--cp-weight-bold);
	flex-shrink: 0;
}
.cp-step--active .cp-step__num { background: var(--cp-teal); color: #fff; }
.cp-step--done .cp-step__num { background: var(--cp-teal-light); color: #fff; }
.cp-step__label { font-size: var(--cp-text-sm); line-height: 1.3; font-weight: var(--cp-weight-medium); }
@container cp-booking (max-width: 500px) { .cp-step__label { display: none; } .cp-step { min-width: 0; } }

/* Choice grids (doctors / services) */
.cp-choice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--cp-space-4);
}
@container cp-booking (max-width: 380px) { .cp-choice-grid { grid-template-columns: 1fr; } }
.cp-choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cp-space-2);
	text-align: center;
	padding: var(--cp-space-6) var(--cp-space-4);
	background: var(--cp-bg-card);
	border: 2px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
	cursor: pointer;
	transition: border-color var(--cp-transition), box-shadow var(--cp-transition), transform var(--cp-transition);
	font-family: var(--cp-font);
}
.cp-choice:hover { border-color: var(--cp-teal-light); transform: translateY(-2px); box-shadow: var(--cp-shadow-md); }
.cp-choice--selected { border-color: var(--cp-teal); }
.cp-choice__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--cp-teal-mist); }
.cp-choice__avatar--initials { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: var(--cp-text-2xl); font-weight: var(--cp-weight-bold); }
.cp-choice__title { font-size: var(--cp-text-md); font-weight: var(--cp-weight-semibold); color: var(--cp-text-primary); margin-bottom: 10px; }
.cp-choice__sub { font-size: var(--cp-text-sm); color: var(--cp-text-body); }
.cp-choice__meta { font-size: var(--cp-text-xs); color: var(--cp-text-muted); }

/* Service rows */
.cp-service-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--cp-space-3);
}
@container cp-booking (max-width: 520px) {
	.cp-service-grid { grid-template-columns: 1fr; }
}
.cp-service {
	display: flex;
	align-items: center;
	gap: var(--cp-space-4);
	width: 100%;
	text-align: left;
	padding: var(--cp-space-4) var(--cp-space-5);
	background: var(--cp-bg-card);
	border: 2px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
	cursor: pointer;
	transition: border-color var(--cp-transition), box-shadow var(--cp-transition);
	font-family: var(--cp-font);
}
.cp-service:hover { border-color: var(--cp-teal-light); background-color: #fff; }
.cp-service__body { display: flex; flex-direction: column; flex: 1; }
.cp-service__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cp-service__dur { font-size: var(--cp-text-sm); color: var(--cp-text-muted); }
.cp-service__price { font-size: var(--cp-text-md); font-weight: var(--cp-weight-bold); color: var(--cp-teal-dark); }

/* Date & time layout */
.cp-datetime {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cp-space-8);
}
@container cp-booking (max-width: 620px) { .cp-datetime { grid-template-columns: 1fr; } }

/* Calendar */
.cp-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--cp-space-4); }
.cp-cal__title { font-size: var(--cp-text-md); font-weight: var(--cp-weight-semibold); color: var(--cp-text-primary); }
.cp-cal__nav {
	width: 36px; height: 36px;
	border: 1px solid var(--cp-border);
	background: var(--cp-bg-card);
	border-radius: var(--cp-radius-md);
	cursor: pointer;
	color: var(--cp-text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background var(--cp-transition);
}
.cp-cal__nav:hover { background: var(--cp-bg-hover);color: var(--cp-text-primary); }
.cp-cal__nav svg { display: block; }
.cp-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--cp-space-2); }
.cp-cal__dow span { text-align: center; font-size: var(--cp-text-xs); font-weight: var(--cp-weight-semibold); color: var(--cp-text-muted); text-transform: uppercase; }
.cp-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cp-cal__cell {
	aspect-ratio: 1;
	padding: 3px;
	border: none;
	background: var(--cp-bg-input);
	border-radius: var(--cp-radius-md);
	cursor: pointer;
	font-family: var(--cp-font);
	font-size: var(--cp-text-base);
	color: var(--cp-text-primary);
	transition: background var(--cp-transition), color var(--cp-transition);
}
.cp-cal__cell:hover:not(:disabled) { background: var(--cp-teal); color: #fff;}
.cp-cal__cell--empty { background: transparent; cursor: default; }
.cp-cal__cell--disabled { color: var(--cp-text-muted); opacity: .35; cursor: not-allowed; background: transparent; pointer-events: none; }
.cp-cal__cell--loading { opacity: .5; cursor: wait; pointer-events: none; }
.cp-cal__cell--today { box-shadow: inset 0 0 0 1.5px var(--cp-teal-light); }
.cp-cal__cell--selected { background: var(--cp-teal); color: #fff; font-weight: var(--cp-weight-bold); }

/* Slots */
.cp-slots__title { font-size: var(--cp-text-md); font-weight: var(--cp-weight-semibold); color: var(--cp-text-primary); margin: 0 0 var(--cp-space-4); }
.cp-slots__hint { color: var(--cp-text-muted); font-size: var(--cp-text-sm); }
.cp-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--cp-space-2); }
.cp-slot {
	padding: 10px;
	border: 1px solid var(--cp-border);
	background: var(--cp-bg-card);
	border-radius: var(--cp-radius-md);
	cursor: pointer;
	font-family: var(--cp-font);
	font-size: var(--cp-text-base);
	font-weight: var(--cp-weight-medium);
	color: var(--cp-text-primary);
	transition: all var(--cp-transition);
}
.cp-slot:hover { border-color: var(--cp-teal); background: var(--cp-teal);color: #fff;  }
.cp-slot--selected { background: var(--cp-teal); color: #fff; border-color: var(--cp-teal); }
.cp-slot--selected:focus { background: var(--cp-teal); color: #fff; border-color: var(--cp-teal); }


/* Details step */
.cp-details { display: grid; grid-template-columns: 320px 1fr; gap: var(--cp-space-8); }
@container cp-booking (max-width: 620px) { .cp-details { grid-template-columns: 1fr; } }
.cp-summary { background: var(--cp-teal-mist); border-radius: var(--cp-radius-lg); padding: var(--cp-space-5); height: fit-content; }
.cp-summary__row { display: flex; justify-content: space-between; gap: var(--cp-space-3); padding: var(--cp-space-3) 0; border-bottom: 1px solid var(--cp-border-subtle); font-size: var(--cp-text-sm); }
.cp-summary__row:last-child { border-bottom: none; }
.cp-summary__row span { color: var(--cp-text-muted); }
.cp-summary__row strong { color: var(--cp-text-primary); text-align: right; }

.cp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cp-space-4); }
@container cp-booking (max-width: 420px) { .cp-form__row { grid-template-columns: 1fr; gap: 0; } }
.cp-form .cp-field { margin-bottom: var(--cp-space-4); }
.cp-consent { display: flex; align-items: flex-start; gap: var(--cp-space-3); font-size: var(--cp-text-sm); color: var(--cp-text-body); margin: var(--cp-space-4) 0; cursor: pointer; }

/* Custom checkbox / radio — shared base */
.cp-consent input[type="checkbox"],
.cp-option-label input[type="checkbox"],
.cp-option-label input[type="radio"] {
	appearance: none; -webkit-appearance: none;
	width: 18px; height: 18px;
	flex-shrink: 0;
	border: 2px solid var(--cp-border);
	background: var(--cp-bg-input);
	transition: border-color 0.15s, background 0.15s;
	position: relative;
	cursor: pointer;
	box-shadow: none !important; outline: none !important;
	margin: 0;
}
.cp-consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; }
.cp-option-label input[type="checkbox"] { border-radius: 4px; }
.cp-option-label input[type="radio"] { border-radius: 50%; }
.cp-consent input[type="checkbox"] { border-radius: 5px; }

/* Tick mark for checkboxes */
.cp-consent input[type="checkbox"]::after,
.cp-option-label input[type="checkbox"]::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1,5 4.5,8.5 11,1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
	opacity: 0;
	transition: opacity 0.1s;
}
/* Dot for radio */
.cp-option-label input[type="radio"]::after {
	content: '';
	display: block;
	position: absolute;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #fff;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.15s;
}

/* Checked states */
.cp-consent input[type="checkbox"]:checked,
.cp-option-label input[type="checkbox"]:checked {
	background: var(--cp-teal); border-color: var(--cp-teal);
}
.cp-consent input[type="checkbox"]:checked::after,
.cp-option-label input[type="checkbox"]:checked::after { opacity: 1; }

.cp-option-label input[type="radio"]:checked {
	background: var(--cp-teal); border-color: var(--cp-teal);
}
.cp-option-label input[type="radio"]:checked::after { transform: translate(-50%, -50%) scale(1); }

/* Hover */
.cp-consent input[type="checkbox"]:hover,
.cp-option-label input[type="checkbox"]:hover,
.cp-option-label input[type="radio"]:hover { border-color: var(--cp-teal); }

/* Checkboxes / radio groups */
.cp-options-group { display: flex; flex-direction: column; gap: var(--cp-space-2); margin-top: var(--cp-space-1); }
.cp-option-label { display: flex; align-items: center; gap: var(--cp-space-2); font-size: var(--cp-text-sm); color: var(--cp-text-body); cursor: pointer; }

/* File upload drop zone */
.cp-file-input { display: none; }
.cp-file-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cp-space-2);
	padding: var(--cp-space-6) var(--cp-space-4);
	border: 2px dashed var(--cp-border);
	border-radius: var(--cp-radius-lg);
	background: var(--cp-bg-subtle);
	cursor: pointer;
	text-align: center;
	transition: border-color var(--cp-transition), background var(--cp-transition);
}
.cp-file-drop:hover,
.cp-file-drop--over {
	border-color: var(--cp-teal);
	background: var(--cp-teal-mist);
}
.cp-file-drop--over { border-style: solid; }
.cp-file-drop__icon { color: var(--cp-text-muted); transition: color var(--cp-transition); }
.cp-file-drop:hover .cp-file-drop__icon,
.cp-file-drop--over .cp-file-drop__icon { color: var(--cp-teal); }
.cp-file-drop__hint {
	margin: 0;
	font-size: var(--cp-text-sm);
	color: var(--cp-text-muted);
}
.cp-file-drop__name {
	margin: 0;
	font-size: var(--cp-text-sm);
	font-weight: var(--cp-weight-semibold);
	color: var(--cp-teal-dark);
	word-break: break-all;
}
.cp-file-drop--has-file {
	border-color: var(--cp-teal);
	border-style: solid;
	background: var(--cp-teal-mist);
}

/* Nav */
.cp-booking__nav { display: flex; justify-content: space-between; gap: var(--cp-space-3); margin-top: 20px; padding-top: var(--cp-space-5); border-top: 1px solid var(--cp-border-subtle); flex-wrap: wrap; }
.cp-booking__submit { margin-left: auto; }

/* Alerts */
.cp-alert { padding: var(--cp-space-4); border-radius: var(--cp-radius-md); background: var(--cp-info-tint); color: var(--cp-info-text); font-size: var(--cp-text-sm); }
.cp-alert--error { background: var(--cp-error-tint); color: var(--cp-error-text); }

/* Loading */
.cp-booking__loading { text-align: center; padding: var(--cp-space-12); color: var(--cp-text-muted); }

/* Success */
.cp-success { text-align: center; padding: var(--cp-space-12) var(--cp-space-6); }
.cp-success__check {
	width: 72px; height: 72px;
	margin: 0 auto var(--cp-space-5);
	border-radius: 50%;
	background: var(--cp-success-tint);
	color: var(--cp-success);
	display: flex; align-items: center; justify-content: center;
	font-size: 36px; font-weight: bold;
}
.cp-success .cp-btn { margin-top: var(--cp-space-5); }

/* Patient portal */
.cp-portal { max-width: 860px; margin: 0 auto; }
.cp-portal__section { margin-bottom: var(--cp-space-6); }
.cp-portal__list { display: flex; flex-direction: column; gap: var(--cp-space-3); }
.cp-portal__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-space-4);
	padding: var(--cp-space-4);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-md);
	background: var(--cp-bg-card);
}
.cp-portal__item-body { display: flex; flex-direction: column; gap: 4px; }

/* ── RTL support ─────────────────────────────────────────────────────────── */
/* dir="rtl" on .cp-booking handles flex/grid mirroring automatically.
   These overrides fix hard-coded text-align and directional SVG arrows. */

/* Service card: text-align left → right */
.cp-booking--rtl .cp-service { text-align: right; }

/* Summary values: text-align right → left */
.cp-booking--rtl .cp-summary__row strong { text-align: left; }

/* Submit button: margin-left auto → margin-right auto */
.cp-booking--rtl .cp-booking__submit { margin-left: 0; margin-right: auto; }

/* Calendar nav arrows: flip the chevron SVGs */
.cp-booking--rtl .cp-cal__nav svg { transform: scaleX(-1); }

/* Success screen and loading: keep centred */
.cp-booking--rtl .cp-success,
.cp-booking--rtl .cp-booking__loading { text-align: center; }