/* ==========================================================================
   booking.css
   New stylesheet for the patient-facing booking flow (index.php,
   loadAvailTimes.php, sendAptRequest.php) ONLY.
   Scoped under .booking-page so it never touches the admin/internal pages
   that also load style.css (officeHome.php, login.php, etc).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

.booking-page,
.booking-page * {
	box-sizing: border-box;
}

.booking-page {
	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	color: #17212B;
	background: #F6F8FA;
	max-width: 1000px;
	margin: 0 auto;
	padding: 24px 20px 60px;
}

.booking-page a {
	font-family: inherit;
}

html {
	scroll-behavior: smooth;
}

.booking-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #1170A6;
	text-decoration: none;
	margin-bottom: 20px;
}

.booking-back-link:hover {
	text-decoration: underline;
}

/* eagleReminders logo from header.php (outside .booking-page). Left at its
   natural size on tablet/desktop; on phones the header.php table column is
   only 20% wide, which was shrinking it down to ~70px, so give it a floor. */
@media (max-width: 640px) {
	img[src="images/logo.gif"] {
		width: 150px;
		max-width: 58vw;
		height: auto;
	}
}

/* ---------- practice header ---------- */

.booking-practice {
	text-align: center;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #E1E6EC;
}

.booking-practice img {
	max-width: 260px;
	height: auto;
}

.booking-practice h3 {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 24px;
	color: #17212B;
	margin: 0;
}

.booking-call {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #EAF3F8;
	color: #0B5680;
	padding: 9px 18px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	margin-top: 12px;
}

.booking-call:hover {
	background: #DCEEF5;
	text-decoration: none;
	color: #0B5680;
}

.booking-call svg {
	flex-shrink: 0;
}

/* ---------- step indicator ---------- */

.booking-stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 28px;
	flex-wrap: wrap;
}

.booking-step {
	display: flex;
	align-items: center;
	gap: 8px;
}

.booking-step-dot {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	background: #fff;
	border: 2px solid #E1E6EC;
	color: #94A0AE;
	flex-shrink: 0;
}

.booking-step.is-active .booking-step-dot,
.booking-step.is-done .booking-step-dot {
	background: #1170A6;
	border-color: #1170A6;
	color: #fff;
}

.booking-step-label {
	font-size: 13px;
	font-weight: 600;
	color: #94A0AE;
}

.booking-step.is-active .booking-step-label,
.booking-step.is-done .booking-step-label {
	color: #17212B;
	font-weight: 700;
}

.booking-step-line {
	width: 40px;
	height: 2px;
	background: #E1E6EC;
	flex-shrink: 0;
}

.booking-step-line.is-done {
	background: #1170A6;
}

/* ---------- section headings ---------- */

.booking-section-heading {
	text-align: center;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 4px 0 4px;
	color: #17212B;
}

.booking-section-sub {
	text-align: center;
	font-size: 14px;
	color: #5B6675;
	margin: 0 0 22px;
}

.booking-empty-state {
	max-width: 520px;
	margin: 20px auto;
	text-align: center;
	background: #fff;
	border: 1px solid #E1E6EC;
	border-radius: 14px;
	padding: 28px 24px;
	font-size: 15px;
	color: #5B6675;
}

/* ---------- appointment type cards ---------- */

.apttype-select-native {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.apttype-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	max-width: 760px;
	margin: 0 auto;
}

.apttype-card {
	background: #fff;
	border: 1px solid #E1E6EC;
	border-radius: 14px;
	padding: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	width: 100%;
	position: relative;
}

.apttype-card:hover {
	border-color: #1170A6;
	box-shadow: 0 6px 16px rgba(17,112,166,0.10);
}

.apttype-card:focus-visible {
	outline: 2px solid #1170A6;
	outline-offset: 2px;
}

.apttype-card.is-selected {
	background: #EAF3F8;
	border: 2px solid #1170A6;
	padding: 17px;
}

.apttype-card-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #EAF3F8;
	color: #1170A6;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.apttype-card.is-selected .apttype-card-icon {
	background: #1170A6;
	color: #fff;
}

.apttype-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 20px;
}

.apttype-card-name {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: #17212B;
	line-height: 1.3;
}

.apttype-card-meta {
	display: block;
	font-size: 12.5px;
	color: #5B6675;
	margin-top: 3px;
}

.apttype-card.is-selected .apttype-card-meta {
	color: #0B5680;
	font-weight: 600;
}

.apttype-card-check {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #1170A6;
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.apttype-card.is-selected .apttype-card-check {
	display: flex;
}

.apttype-loading {
	display: block;
	margin: 16px auto 0;
}

@media (max-width: 720px) {
	.apttype-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
	}
}

/* ---------- calendar + time slots ---------- */

.booking-datetime {
	margin-top: 8px;
}

.datetime-columns {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
}

.calendar-col {
	background: #fff;
	border: 1px solid #E1E6EC;
	border-radius: 16px;
	padding: 18px;
	flex: 0 0 340px;
}

.times-col {
	background: #fff;
	border: 1px solid #E1E6EC;
	border-radius: 16px;
	padding: 20px;
	flex: 1 1 320px;
	min-width: 280px;
}

/* jQuery UI datepicker overrides, scoped to #divcal */

#divcal .ui-datepicker {
	width: 100% !important;
	height: auto !important;
	font-family: 'Manrope', sans-serif !important;
	border: none;
	padding: 0;
}

#divcal .ui-widget-header {
	background: none;
	border: none;
	padding: 0 0 14px;
}

#divcal .ui-datepicker-title {
	font-size: 16px;
	font-weight: 800;
	color: #17212B;
}

#divcal .ui-datepicker-prev,
#divcal .ui-datepicker-next {
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: #F0F3F6 !important;
	border: none;
}

#divcal .ui-datepicker-prev:hover,
#divcal .ui-datepicker-next:hover {
	background: #EAF3F8 !important;
	border: none;
}

/* The jQuery UI theme's default prev/next icons are a low-contrast sprite
   that's hard to see against a light background — replace with a plain
   CSS chevron instead of relying on the theme's icon image. */
#divcal .ui-datepicker-prev span,
#divcal .ui-datepicker-next span {
	display: none;
}

#divcal .ui-datepicker-prev::before,
#divcal .ui-datepicker-next::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 2.2px solid #5B6675;
	border-right: 2.2px solid #5B6675;
}

#divcal .ui-datepicker-prev:hover::before,
#divcal .ui-datepicker-next:hover::before {
	border-color: #1170A6;
}

#divcal .ui-datepicker-prev::before {
	transform: translate(-25%, -60%) rotate(-135deg);
}

#divcal .ui-datepicker-next::before {
	transform: translate(-75%, -60%) rotate(45deg);
}

#divcal table {
	font-size: 13px;
}

#divcal th {
	color: #94A0AE;
	font-size: 11px;
	font-weight: 700;
	padding-bottom: 6px;
}

#divcal td {
	padding: 2px;
}

#divcal .ui-state-default {
	background: #fff;
	border: none;
	text-align: center;
	color: #D3D9E0;
	border-radius: 8px;
	padding: 8px 0;
	font-weight: 600;
}

#divcal td.av .ui-state-default {
	color: #17212B;
	background: #fff;
}

#divcal td.av .ui-state-default:hover {
	background: #EAF3F8;
	color: #17212B;
}

#divcal td.notav .ui-state-default {
	color: #D3D9E0;
	cursor: default;
}

#divcal .ui-datepicker-today .ui-state-default {
	border: 1.5px solid #1170A6;
	color: #1170A6;
	font-weight: 700;
}

#divcal .ui-state-active,
#divcal .ui-state-default.ui-state-active {
	background: #1170A6 !important;
	color: #fff !important;
	font-weight: 800;
}

/* time slots */

.times-date {
	font-size: 17px;
	font-weight: 800;
	color: #17212B !important;
	margin: 0 0 14px;
}

.slots-provider-group {
	margin-bottom: 20px;
}

.slots-provider-name {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	background: #EAF3F8;
	color: #0B5680;
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.slots-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 8px;
}

a.timebutton.slot-pill,
div.timebutton.slot-pill {
	width: auto;
	background: #fff;
	border: 1.5px solid #E1E6EC;
	border-radius: 10px;
	padding: 10px 6px;
	color: #17212B;
	font-weight: 700;
	font-size: 13px;
	text-align: center;
	display: block;
}

a.timebutton.slot-pill:hover,
div.timebutton.slot-pill:hover {
	background: #EAF3F8;
	border-color: #1170A6;
	color: #17212B;
}

.times-empty {
	font-size: 14px;
	color: #5B6675;
	text-align: center;
	padding: 20px 0;
}

@media (max-width: 760px) {
	.datetime-columns {
		flex-direction: column;
	}
	.calendar-col,
	.times-col {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* ==========================================================================
   sendAptRequest.php — request form + confirmation
   ========================================================================== */

.request-columns {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	max-width: 960px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.request-sidebar {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.request-card {
	background: #fff;
	border: 1px solid #E1E6EC;
	border-radius: 16px;
	padding: 20px;
}

.request-card-title {
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #94A0AE;
	margin-bottom: 14px;
}

.request-card-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 13.5px;
	color: #5B6675;
	line-height: 1.5;
}

.request-card-row:last-child {
	margin-bottom: 0;
}

.request-card-row svg {
	margin-top: 2px;
	flex-shrink: 0;
}

.request-card-row b {
	color: #17212B;
}

.request-note {
	background: #EAF3F8;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	gap: 10px;
	font-size: 12.5px;
	color: #0B5680;
	line-height: 1.5;
}

.request-note svg {
	flex-shrink: 0;
	margin-top: 1px;
}

.request-form-card {
	flex: 1 1 420px;
	min-width: 300px;
	background: #fff;
	border: 1px solid #E1E6EC;
	border-radius: 16px;
	padding: 28px;
}

.request-form-card h3.form-heading {
	text-align: left;
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 18px;
	color: #17212B;
}

.request-section-title {
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #1170A6;
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.request-section-title .optional-tag {
	color: #94A0AE;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.request-divider {
	height: 1px;
	background: #EDF0F4;
	margin: 22px 0;
}

.booking-field {
	margin-bottom: 16px;
}

.booking-field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 6px;
	color: #17212B;
}

.booking-field .optional-tag {
	color: #94A0AE;
	font-weight: 500;
}

.booking-page .request-form-card input[type="text"],
.booking-page .request-form-card input[type="email"],
.booking-page .request-form-card textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid #E1E6EC;
	border-radius: 10px;
	font-size: 14.5px;
	font-family: 'Manrope', sans-serif;
	color: #17212B;
	background: #fff;
}

.booking-page .request-form-card input[type="text"]:focus,
.booking-page .request-form-card input[type="email"]:focus,
.booking-page .request-form-card textarea:focus {
	outline: none;
	border-color: #1170A6;
}

.booking-field-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.booking-field-row .booking-field {
	flex: 1 1 160px;
}

/* segmented control (radio groups reskinned) */

.segmented {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.segmented-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.segmented-label {
	flex: 1 1 auto;
	text-align: center;
	padding: 11px 10px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 13.5px;
	background: #F6F8FA;
	color: #5B6675;
	border: 1px solid #E1E6EC;
	cursor: pointer;
	white-space: nowrap;
}

.segmented-input:checked + .segmented-label {
	background: #1170A6;
	color: #fff;
	border-color: #1170A6;
}

.segmented-input:focus-visible + .segmented-label {
	outline: 2px solid #1170A6;
	outline-offset: 2px;
}

/* toggle switches (checkboxes reskinned) */

.switch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	max-width: 320px;
}

.switch-row-label {
	font-size: 14px;
	font-weight: 600;
	color: #17212B;
}

.switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 24px;
	flex-shrink: 0;
}

.switch input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.switch-track {
	position: absolute;
	inset: 0;
	background: #D3D9E0;
	border-radius: 999px;
	transition: background .15s ease;
}

.switch-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 999px;
	transition: transform .15s ease;
}

.switch input[type="checkbox"]:checked + .switch-track {
	background: #1170A6;
}

.switch input[type="checkbox"]:checked + .switch-track::after {
	transform: translateX(16px);
}

.switch input[type="checkbox"]:focus-visible + .switch-track {
	outline: 2px solid #1170A6;
	outline-offset: 2px;
}

/* submit button */

.booking-submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: #1170A6;
	color: #fff !important;
	border: none;
	padding: 15px 0;
	border-radius: 12px;
	font-weight: 800;
	font-size: 15px;
	font-family: 'Manrope', sans-serif;
	cursor: pointer;
}

.booking-submit-btn:hover {
	background: #0B5680;
}

.booking-submit-note {
	text-align: center;
	font-size: 12px;
	color: #94A0AE;
	margin-top: 12px;
}

@media (max-width: 860px) {
	.request-sidebar {
		flex: 1 1 100%;
	}
	.request-form-card {
		flex: 1 1 100%;
	}
}

/* ---------- confirmation ---------- */

.confirm-wrap {
	max-width: 520px;
	margin: 24px auto 0;
	text-align: center;
}

.confirm-check {
	width: 68px;
	height: 68px;
	border-radius: 999px;
	background: #E7F7EF;
	color: #1F9D6B;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}

.confirm-title {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #17212B;
	margin: 0;
}

.confirm-sub {
	font-size: 14.5px;
	color: #5B6675;
	margin-top: 8px;
	line-height: 1.5;
}

.confirm-callout {
	text-align: left;
	background: #fff;
	border: 1px solid #E1E6EC;
	border-radius: 16px;
	padding: 20px;
	margin-top: 24px;
}

.confirm-callout p {
	margin: 0 0 6px;
	font-size: 14px;
	color: #5B6675;
}

.confirm-callout b {
	color: #17212B;
}

.confirm-note {
	text-align: center;
	font-size: 12.5px;
	color: #94A0AE;
	margin-top: 20px;
}

.alert-success-new {
	background: #E7F7EF;
	border: 1px solid #BEEAD3;
	color: #17212B;
	border-radius: 14px;
	padding: 18px 20px;
	font-size: 14px;
	line-height: 1.6;
}

.alert-danger-new {
	background: #FDECEA;
	border: 1px solid #F5C6C0;
	color: #17212B;
	border-radius: 14px;
	padding: 18px 20px;
	font-size: 14px;
	line-height: 1.6;
}