/**
 * Alnora — Public booking form styles.
 * Builds on alnc-brand.css (CSS custom properties).
 */

/* Neutralise theme button/input styles that bleed into the booking form */
.alnc-booking button,
.alnc-booking input,
.alnc-booking select,
.alnc-booking textarea {
	box-sizing: border-box;
	box-shadow: none;
	outline: none;
}
.alnc-booking .alnc-choice:hover { background: #fff; }

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

.alnc-cancel-notice {
	padding: 12px 16px;
	border-radius: var(--alnc-radius-md, 8px);
	margin-bottom: var(--alnc-space-5, 20px);
	font-size: var(--alnc-text-sm, 14px);
	border: 1px solid transparent;
}
.alnc-cancel-notice--ok { background: var(--alnc-teal-mist, #F0F9F8); border-color: var(--alnc-teal, #0DB89A); color: var(--alnc-teal-dark, #0D7A68); }
.alnc-cancel-notice--err { background: #FDECEA; border-color: #E5533C; color: #B23A28; }
@container alnc-booking (max-width: 500px) {
	body .alnc-booking { padding: var(--alnc-space-5); border-radius: var(--alnc-radius-xl); }
	.alnc-booking__nav { flex-direction: column-reverse; }
	.alnc-booking__nav .alnc-btn { width: 100%; justify-content: center; }
}

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

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

.alnc-choice-grid .alnc-choice__title {margin-bottom: 0; }

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

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

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


/* Slots */
.alnc-slots__title { font-size: var(--alnc-text-md); font-weight: var(--alnc-weight-semibold); color: var(--alnc-text-primary); margin: 0 0 var(--alnc-space-4); }
.alnc-slots__hint { color: var(--alnc-text-muted); font-size: var(--alnc-text-sm); }
.alnc-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--alnc-space-2); }
.alnc-slot {
	padding: 10px;
	border: 1px solid var(--alnc-border);
	background: var(--alnc-bg-card);
	border-radius: var(--alnc-radius-md);
	cursor: pointer;
	font-family: var(--alnc-font);
	font-size: var(--alnc-text-base);
	font-weight: var(--alnc-weight-medium);
	color: var(--alnc-text-primary);
	transition: all var(--alnc-transition);
}
.alnc-slot:hover { border-color: var(--alnc-teal); background: var(--alnc-teal);color: #fff;  }
.alnc-slot--selected { background: var(--alnc-teal); color: #fff; border-color: var(--alnc-teal); }
.alnc-slot--selected:focus { background: var(--alnc-teal); color: #fff; border-color: var(--alnc-teal); }
/* Details step */
.alnc-details { display: grid; grid-template-columns: 320px 1fr; gap: var(--alnc-space-8); }
@container alnc-booking (max-width: 620px) { .alnc-details { grid-template-columns: 1fr; } }
.alnc-summary { background: var(--alnc-teal-mist); border-radius: var(--alnc-radius-lg); padding: var(--alnc-space-5); height: fit-content; }
.alnc-summary__row { display: flex; justify-content: space-between; gap: var(--alnc-space-3); padding: var(--alnc-space-3) 0; border-bottom: 1px solid var(--alnc-border-subtle); font-size: var(--alnc-text-sm); }
.alnc-summary__row:last-child { border-bottom: none; }
.alnc-summary__row span { color: var(--alnc-text-muted); }
.alnc-summary__row strong { color: var(--alnc-text-primary); text-align: right; }

.alnc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--alnc-space-4); }
@container alnc-booking (max-width: 420px) { .alnc-form__row { grid-template-columns: 1fr; gap: 0; } }
.alnc-form .alnc-field { margin-bottom: var(--alnc-space-4); }
.alnc-consent { display: flex; align-items: flex-start; gap: var(--alnc-space-3); font-size: var(--alnc-text-sm); color: var(--alnc-text-body); margin: var(--alnc-space-4) 0; cursor: pointer; }
.alnc-consent input { width: 20px; height: 20px; margin-top: 0; accent-color: var(--alnc-teal-dark); flex-shrink: 0; box-shadow: none !important; outline: none !important; }

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

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

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

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

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

/* Service title row + "Read more" link */
.alnc-service__titlerow {
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
}
.alnc-service__titlerow .alnc-choice__title {
	display: block;
	width: 100%;
}
/* Inline service description (shown under the title when the popup is disabled). */
.alnc-service__desc {
	display: block;
	margin-top: 4px;
	color: var(--alnc-text-muted);
	font-size: var(--alnc-text-sm);
	line-height: 1.5;
}
.alnc-service__desc p { margin: 0 0 6px; }
.alnc-service__desc p:last-child { margin-bottom: 0; }
.alnc-service__info {
	flex: 0 0 auto;
	color: var(--alnc-teal-dark);
	font-size: var(--alnc-text-sm);
	font-weight: var(--alnc-weight-medium);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	transition: color var(--alnc-transition);
}
.alnc-service__info:hover,
.alnc-service__info:focus-visible {
	color: var(--alnc-teal);
	outline: none;
}

/* Description popup (modal) */
.alnc-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--alnc-space-4);
	background: rgba(10, 75, 92, 0.45);
	animation: alnc-modal-fade 0.15s ease;
}
@keyframes alnc-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.alnc-modal {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: 80vh;
	overflow-y: auto;
	background: var(--alnc-bg-card);
	border-radius: var(--alnc-radius-lg);
	box-shadow: 0 20px 60px rgba(10, 75, 92, 0.3);
	padding: var(--alnc-space-6);
	font-family: var(--alnc-font);
}
.alnc-modal__close {
	position: absolute;
	top: var(--alnc-space-3);
	right: var(--alnc-space-3);
	width: 30px;
	height: 30px;
	border: none;
	background: transparent !important;
	color: var(--alnc-text-muted) !important;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--alnc-radius-sm);
}
.alnc-modal__close:hover { background: var(--alnc-bg-hover); color: var(--alnc-text-primary); }
.alnc-modal__title {
	margin: 0 var(--alnc-space-6) var(--alnc-space-3) 0;
	font-size: var(--alnc-text-lg);
	font-weight: var(--alnc-weight-bold);
	color: var(--alnc-text-primary);
}

/* Rich-text description (bold, lists, links, paragraphs) — used by the popup */
.alnc-rte { color: var(--alnc-text-body); font-size: var(--alnc-text-base); line-height: 1.6; }
.alnc-rte > :first-child { margin-top: 0; }
.alnc-rte > :last-child { margin-bottom: 0; }
.alnc-rte p { margin: 0 0 var(--alnc-space-3); }
.alnc-rte strong, .alnc-rte b { font-weight: var(--alnc-weight-bold); color: var(--alnc-text-primary); }
.alnc-rte em, .alnc-rte i { font-style: italic; }
.alnc-rte ul, .alnc-rte ol { margin: 0 0 var(--alnc-space-3); padding-inline-start: 1.4em; }
.alnc-rte li { margin: 0 0 var(--alnc-space-1); }
.alnc-rte a { color: var(--alnc-text-link); text-decoration: underline; }
.alnc-rte a:hover { color: var(--alnc-text-link-hover); }
.alnc-rte h1, .alnc-rte h2, .alnc-rte h3, .alnc-rte h4 {
	margin: var(--alnc-space-3) 0 var(--alnc-space-2);
	color: var(--alnc-text-primary);
	font-weight: var(--alnc-weight-bold);
	line-height: 1.3;
}
.alnc-rte h1 { font-size: var(--alnc-text-lg); }
.alnc-rte h2 { font-size: var(--alnc-text-md); }
.alnc-rte h3, .alnc-rte h4 { font-size: var(--alnc-text-base); }
.alnc-rte blockquote {
	margin: 0 0 var(--alnc-space-3);
	padding: var(--alnc-space-2) var(--alnc-space-4);
	border-inline-start: 3px solid var(--alnc-teal);
	background: var(--alnc-teal-mist);
	border-radius: var(--alnc-radius-sm);
}
.alnc-rte img { max-width: 100%; height: auto; border-radius: var(--alnc-radius-sm); }