/**
 * Appointment Modal
 *
 * @package DrSanhithaPurushotham
 */


/* ==========================================================
   VARIABLES
========================================================== */

.appointment-modal {
	--appointment-navy: #082341;
	--appointment-navy-dark: #051b32;

	--appointment-teal: #008f8c;
	--appointment-teal-dark: #007874;
	--appointment-teal-soft: #e9f5f3;

	--appointment-gold: #cf983f;
	--appointment-gold-soft: #ebd4a9;

	--appointment-text: #334760;
	--appointment-muted: #6c7d91;

	--appointment-cream: #fffdf9;
	--appointment-white: #ffffff;

	--appointment-ease:
		cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================
   HIDDEN
========================================================== */

.appointment-modal[hidden],
.appointment-step[hidden] {
	display: none !important;
}


/* ==========================================================
   BODY LOCK
========================================================== */

body.appointment-modal-open {
	overflow: hidden;
}


/* ==========================================================
   MODAL ROOT
========================================================== */

.appointment-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;

	display: grid;
	place-items: center;

	padding: 16px;

	opacity: 0;
	pointer-events: none;

	transition:
		opacity 260ms ease;
}

.appointment-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}


/* ==========================================================
   BACKDROP
========================================================== */

.appointment-modal__backdrop {
	position: absolute;
	inset: 0;

	background:
		rgba(4, 18, 31, 0.76);

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}


/* ==========================================================
   DIALOG
========================================================== */

.appointment-modal__dialog {
	position: relative;
	z-index: 5;

	width: min(1000px, 100%);
	max-height: 92svh;

	overflow-x: hidden;
	overflow-y: auto;

	border:
		1px solid
		rgba(255, 255, 255, 0.82);

	border-radius: 24px;

	background:
		linear-gradient(
			145deg,
			#fffefb 0%,
			#fffaf5 100%
		);

	box-shadow:
		0 30px 80px
		rgba(0, 15, 29, 0.38);

	color:
		var(--appointment-navy);

	opacity: 0;

	transform:
		translateY(20px)
		scale(0.98);

	transition:
		opacity 350ms ease,
		transform 500ms var(--appointment-ease);

	scrollbar-width: thin;
	scrollbar-color:
		rgba(8, 35, 65, 0.18)
		transparent;
}

.appointment-modal.is-open
.appointment-modal__dialog {
	opacity: 1;

	transform:
		translateY(0)
		scale(1);
}

.appointment-modal__dialog::-webkit-scrollbar {
	width: 6px;
}

.appointment-modal__dialog::-webkit-scrollbar-track {
	background: transparent;
}

.appointment-modal__dialog::-webkit-scrollbar-thumb {
	border-radius: 20px;

	background:
		rgba(8, 35, 65, 0.18);
}


/* ==========================================================
   HEADER
========================================================== */

.appointment-modal__header {
	position: relative;

	padding:
		28px
		40px
		0;

	overflow: hidden;
}


/* ==========================================================
   EYEBROW
========================================================== */

.appointment-modal__eyebrow {
	position: relative;
	z-index: 3;
    text-align: center;
	margin: 0;

	color:
		var(--appointment-teal);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 0.7px;

	text-transform: uppercase;
}


/* ==========================================================
   TITLE
========================================================== */

.appointment-modal__title {
	position: relative;
	z-index: 3;

	margin:
		6px
		0
		0;

	color:
		var(--appointment-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(
			39px,
			4vw,
			52px
		);

	font-weight: 700;

	line-height: 0.97;

	letter-spacing: -0.6px;
	text-align: center;
}


/* ==========================================================
   TITLE DIVIDER
========================================================== */

.appointment-modal__title-divider {
	position: relative;
	z-index: 3;

	display: flex;

	width:
		min(
			430px,
			58%
		);

	margin-top: 18px;

	align-items: center;
}

.appointment-modal__title-divider span {
	display: block;

	height: 1px;

	flex: 1;

	background:
		var(--appointment-gold);
}

.appointment-modal__title-divider i {
	display: flex;

	width: 34px;

	align-items: center;
	justify-content: center;

	color:
		var(--appointment-gold);

	font-size: 11px;
	font-style: normal;
}


/* ==========================================================
   HEADER WATERMARK
========================================================== */

.appointment-modal__watermark {
	position: absolute;

	top: 12px;
	right: 65px;

	width: 175px;
	height: 165px;

	color:
		rgba(207, 152, 63, 0.15);

	pointer-events: none;
}


/* ==========================================================
   CLOSE
========================================================== */

.appointment-modal__close {
	position: absolute;

	top: 19px;
	right: 20px;

	z-index: 20;

	display: block;

	width: 46px;
	height: 46px;

	padding: 0;

	border:
		1px solid
		rgba(207, 152, 63, 0.62);

	border-radius: 50%;

	background:
		#fffdf9;

	cursor: pointer;

	box-shadow:
		0 6px 16px
		rgba(76, 52, 16, 0.09);

	transition:
		transform 300ms var(--appointment-ease),
		background 300ms ease,
		box-shadow 300ms ease;
}

.appointment-modal__close span {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 21px;
	height: 2px;

	border-radius: 10px;

	background:
		var(--appointment-navy);
}

.appointment-modal__close span:first-child {
	transform:
		translate(-50%, -50%)
		rotate(45deg);
}

.appointment-modal__close span:last-child {
	transform:
		translate(-50%, -50%)
		rotate(-45deg);
}

.appointment-modal__close:hover {
	background: #fff8ed;

	box-shadow:
		0 10px 22px
		rgba(76, 52, 16, 0.12);

	transform:
		rotate(5deg)
		scale(1.05);
}


/* ==========================================================
   PROGRESS
========================================================== */

.appointment-progress {
	position: relative;
	z-index: 5;

	display: flex;

	width:
		min(
			600px,
			100%
		);

	margin:
		22px
		auto
		17px;

	align-items: center;
	justify-content: center;
}

.appointment-progress__item {
	display: flex;

	min-height: 44px;

	padding:
		3px
		11px;

	align-items: center;

	gap: 9px;

	border-radius: 999px;

	color:
		var(--appointment-navy);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	transition:
		background 350ms ease,
		color 350ms ease;
}

.appointment-progress__circle {
	display: flex;

	width: 38px;
	height: 38px;

	flex:
		0 0 38px;

	align-items: center;
	justify-content: center;

	border:
		1px solid
		var(--appointment-gold);

	border-radius: 50%;

	background: #ffffff;

	color:
		var(--appointment-navy);

	font-size: 14px;
	font-weight: 700;

	transition:
		background 350ms ease,
		border-color 350ms ease,
		color 350ms ease;
}

.appointment-progress__check {
	display: none;

	width: 20px;
	height: 20px;
}

.appointment-progress__label {
	font-size: 13px;
	font-weight: 600;

	white-space: nowrap;
}


/* ==========================================================
   ACTIVE PROGRESS
========================================================== */

.appointment-progress__item.is-active {
	background:
		linear-gradient(
			135deg,
			#edf8f6,
			#e5f2ef
		);

	color:
		var(--appointment-teal-dark);
}

.appointment-progress__item.is-active
.appointment-progress__circle {
	border-color:
		var(--appointment-teal);

	background:
		linear-gradient(
			145deg,
			#009b97,
			#007d7a
		);

	color: #ffffff;

	box-shadow:
		0 7px 16px
		rgba(0, 132, 128, 0.17);
}

.appointment-progress__item.is-active
.appointment-progress__label {
	font-weight: 700;
}


/* ==========================================================
   COMPLETED STEP
========================================================== */

.appointment-progress__item.is-complete {
	background: transparent;

	color:
		var(--appointment-navy);
}

.appointment-progress__item.is-complete
.appointment-progress__circle {
	border-color:
		rgba(0, 143, 140, 0.38);

	background: #ffffff;

	color:
		var(--appointment-teal);
}

.appointment-progress__item.is-complete
.appointment-progress__number {
	display: none;
}

.appointment-progress__item.is-complete
.appointment-progress__check {
	display: block;
}


/* ==========================================================
   PROGRESS CONNECTOR
========================================================== */

.appointment-progress__connector {
	display: block;

	width: 90px;
	height: 1px;

	flex:
		0 1 90px;

	margin-inline: 6px;

	background:
		linear-gradient(
			to right,
			var(--appointment-gold),
			rgba(207, 152, 63, 0.25)
		);
}


/* ==========================================================
   STEP ANIMATION
========================================================== */

.appointment-step {
	position: relative;

	animation:
		appointment-step-enter
		420ms
		var(--appointment-ease)
		both;
}

@keyframes appointment-step-enter {

	from {
		opacity: 0;

		transform:
			translateY(9px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}
}


/* ==========================================================
   STEP ONE
========================================================== */

.appointment-step--services {
	padding:
		20px
		40px
		18px;

	border-top:
		1px solid
		rgba(8, 35, 65, 0.08);
}


/* ==========================================================
   LEAVES
========================================================== */

.appointment-step__leaves {
	position: absolute;

	top: 3px;
	right: 0;

	width: 185px;

	color:
		rgba(207, 152, 63, 0.26);

	pointer-events: none;
}


/* ==========================================================
   QUESTION AREA
========================================================== */

.appointment-step__question {
	position: relative;
	z-index: 3;

	display: grid;

	max-width: 760px;

	grid-template-columns:
		70px
		minmax(0, 1fr);

	gap: 18px;

	align-items: center;
}

.appointment-step__question-icon {
	display: flex;

	width: 66px;
	height: 66px;

	align-items: center;
	justify-content: center;

	border:
		1px solid
		rgba(207, 152, 63, 0.24);

	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#fffefa,
			#f8f4ec
		);

	color:
		var(--appointment-teal);

	box-shadow:
		0 6px 16px
		rgba(54, 38, 18, 0.045);
}

.appointment-step__question-icon svg {
	width: 38px;
	height: 38px;
}

.appointment-step__question h3 {
	max-width: 610px;

	margin: 0;

	color:
		var(--appointment-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 25px;
	font-weight: 700;

	line-height: 1.04;
}

.appointment-step__question p {
	margin:
		5px
		0
		0;

	color:
		var(--appointment-muted);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 13px;

	line-height: 1.4;
}


/* ==========================================================
   SERVICES LIST
========================================================== */

.appointment-services {
	position: relative;
	z-index: 5;

	display: grid;

	max-height: 455px;

	margin-top: 17px;

	padding:
		2px
		6px
		6px
		2px;

	gap: 9px;

	overflow-y: auto;

	scrollbar-width: thin;

	scrollbar-color:
		rgba(8, 35, 65, 0.18)
		transparent;
}

.appointment-services::-webkit-scrollbar {
	width: 6px;
}

.appointment-services::-webkit-scrollbar-track {
	background: transparent;
}

.appointment-services::-webkit-scrollbar-thumb {
	border-radius: 20px;

	background:
		rgba(8, 35, 65, 0.18);
}


/* ==========================================================
   SERVICE CARD
========================================================== */

.appointment-service-card {
	position: relative;

	display: grid;

	width: 100%;

	min-height: 96px;

	padding:
		12px
		18px;

	grid-template-columns:
		66px
		17px
		minmax(0, 1fr)
		44px;

	gap: 15px;

	align-items: center;

	overflow: hidden;

	border:
		1px solid
		rgba(207, 152, 63, 0.30);

	border-radius: 14px;

	background:
		rgba(255, 255, 255, 0.88);

	color:
		var(--appointment-navy);

	text-align: left;

	cursor: pointer;

	box-shadow:
		0 4px 12px
		rgba(15, 35, 52, 0.03);

	transition:
		transform 350ms var(--appointment-ease),
		border-color 300ms ease,
		box-shadow 350ms ease,
		background 300ms ease;
}


/* ==========================================================
   SERVICE IMAGE
========================================================== */

.appointment-service-card__image-wrap {
	display: flex;

	width: 62px;
	height: 62px;

	align-items: center;
	justify-content: center;

	overflow: hidden;

	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#eff8f6,
			#e1f1ef
		);

	color:
		var(--appointment-teal);
}

.appointment-service-card__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;

	padding: 6px;
}

.appointment-service-card__fallback {
	width: 37px;
	height: 37px;
}


/* ==========================================================
   SERVICE GOLD RAIL
========================================================== */

.appointment-service-card__rail {
	display: flex;

	width: 14px;
	height: 58px;

	align-items: center;

	flex-direction: column;
}

.appointment-service-card__rail span {
	width: 1px;

	flex: 1;

	background:
		rgba(207, 152, 63, 0.48);
}

.appointment-service-card__rail i {
	width: 7px;
	height: 7px;

	flex:
		0 0 7px;

	border:
		1px solid
		var(--appointment-gold);

	background: #ffffff;

	transform:
		rotate(45deg);
}


/* ==========================================================
   SERVICE COPY
========================================================== */

.appointment-service-card__copy {
	display: block;

	min-width: 0;
}

.appointment-service-card__copy strong {
	display: block;

	margin: 0;

	color:
		var(--appointment-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 20px;
	font-weight: 700;

	line-height: 1.04;
}

.appointment-service-card__copy > span {
	display: block;

	max-width: 650px;

	margin-top: 4px;

	color:
		var(--appointment-text);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 11.5px;

	line-height: 1.42;
}


/* ==========================================================
   SERVICE ARROW
========================================================== */

.appointment-service-card__arrow {
	position: relative;
	z-index: 3;

	display: flex;

	width: 40px;
	height: 40px;

	align-items: center;
	justify-content: center;

	border:
		1px solid
		var(--appointment-gold);

	border-radius: 50%;

	background:
		#fffdf9;

	color:
		var(--appointment-navy);

	overflow: hidden;

	transition:
		transform 300ms var(--appointment-ease),
		background 300ms ease,
		color 300ms ease,
		border-color 300ms ease,
		box-shadow 300ms ease;
}

.appointment-service-card__arrow svg {
	display: block;

	width: 21px;
	height: 21px;
}


/* ==========================================================
   IMPORTANT:
   COMPLETELY REMOVE OLD CORNER TRIANGLE/CHECK
========================================================== */

.appointment-service-card__selected-check,
.appointment-service-card.is-selected
.appointment-service-card__selected-check {
	display: none !important;

	width: 0 !important;
	height: 0 !important;

	padding: 0 !important;

	background: none !important;

	opacity: 0 !important;

	visibility: hidden !important;

	pointer-events: none !important;
}


/* ==========================================================
   SERVICE HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

	.appointment-service-card:hover {
		border-color:
			rgba(0, 143, 140, 0.42);

		background:
			#ffffff;

		box-shadow:
			0 9px 22px
			rgba(12, 44, 60, 0.065);

		transform:
			translateY(-2px);
	}

	.appointment-service-card:hover
	.appointment-service-card__arrow {
		border-color:
			var(--appointment-teal);

		color:
			var(--appointment-teal);

		transform:
			translateX(2px);
	}
}


/* ==========================================================
   SELECTED SERVICE
========================================================== */

.appointment-service-card.is-selected {
	border:
		1.5px solid
		var(--appointment-teal);

	background:
		linear-gradient(
			135deg,
			#f4fbfa 0%,
			#fbfefd 60%,
			#ffffff 100%
		);

	box-shadow:
		0 8px 20px
		rgba(0, 128, 124, 0.08);

	transform: none;
}


/* clean selected arrow */

.appointment-service-card.is-selected
.appointment-service-card__arrow {
	border-color:
		var(--appointment-teal);

	background:
		var(--appointment-teal);

	color:
		#ffffff;

	box-shadow:
		0 6px 15px
		rgba(0, 143, 140, 0.16);

	transform: none;
}


/* selected icon subtle highlight */

.appointment-service-card.is-selected
.appointment-service-card__image-wrap {
	background:
		linear-gradient(
			145deg,
			#e6f5f3,
			#edf9f8
		);
}


/* ==========================================================
   STEP TWO
========================================================== */

.appointment-step--patient {
	padding:
		3px
		40px
		22px;
}


/* ==========================================================
   SELECTED TREATMENT
========================================================== */

.appointment-selected {
	display: grid;

	min-height: 94px;

	padding:
		14px
		19px;

	grid-template-columns:
		62px
		minmax(0, 1fr)
		17px
		120px;

	gap: 15px;

	align-items: center;

	border:
		1px solid
		rgba(0, 143, 140, 0.30);

	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			#f8fdfc,
			#f4faf8
		);
}


/* ==========================================================
   SELECTED IMAGE
========================================================== */

.appointment-selected__image {
	display: flex;

	width: 58px;
	height: 58px;

	align-items: center;
	justify-content: center;

	overflow: hidden;

	border-radius: 50%;

	background:
		var(--appointment-teal-soft);

	color:
		var(--appointment-teal);
}

.appointment-selected__image img {
	display: block;

	width: 100%;
	height: 100%;

	padding: 6px;

	object-fit: contain;
}

.appointment-selected__image svg {
	width: 35px;
	height: 35px;
}


/* ==========================================================
   SELECTED COPY
========================================================== */

.appointment-selected__copy > span {
	display: block;

	color:
		var(--appointment-teal);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 11px;
	font-weight: 600;
}

.appointment-selected__copy strong {
	display: block;

	margin-top: 3px;

	color:
		var(--appointment-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 21px;
	font-weight: 700;

	line-height: 1.06;
}


/* ==========================================================
   SELECTED RAIL
========================================================== */

.appointment-selected__rail {
	display: flex;

	width: 14px;
	height: 54px;

	align-items: center;

	flex-direction: column;
}

.appointment-selected__rail span {
	width: 1px;

	flex: 1;

	background:
		var(--appointment-gold);
}

.appointment-selected__rail i {
	width: 7px;
	height: 7px;

	flex:
		0 0 7px;

	border:
		1px solid
		var(--appointment-gold);

	background: #ffffff;

	transform:
		rotate(45deg);
}


/* ==========================================================
   CHANGE LINK
========================================================== */

.appointment-selected__change {
	display: flex;

	padding: 5px;

	align-items: center;
	justify-content: center;

	gap: 6px;

	border: 0;

	background: none;

	color:
		var(--appointment-teal-dark);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 12px;
	font-weight: 600;

	text-decoration: underline;

	text-underline-offset: 3px;

	cursor: pointer;
}

.appointment-selected__change svg {
	width: 20px;
	height: 20px;
}


/* ==========================================================
   FORM
========================================================== */

.appointment-form {
	margin-top: 18px;
}


/* ==========================================================
   FIELD ROW
========================================================== */

.appointment-field-row {
	display: grid;

	margin-top: 15px;

	grid-template-columns:
		46px
		1px
		minmax(0, 1fr);

	gap: 16px;

	align-items: center;
}


/* ==========================================================
   FIELD ICON
========================================================== */

.appointment-field-row__icon {
	display: flex;

	width: 44px;
	height: 44px;

	align-items: center;
	justify-content: center;

	border:
		1px solid
		rgba(207, 152, 63, 0.62);

	border-radius: 8px;

	background:
		linear-gradient(
			145deg,
			#092845,
			#041a31
		);

	color:
		#e2b467;

	box-shadow:
		0 5px 11px
		rgba(3, 20, 34, 0.08);
}

.appointment-field-row__icon svg {
	width: 27px;
	height: 27px;
}


/* ==========================================================
   FIELD GOLD LINE
========================================================== */

.appointment-field-row__line {
	width: 1px;
	height: 46px;

	background:
		rgba(207, 152, 63, 0.70);
}


/* ==========================================================
   FIELD
========================================================== */

.appointment-field {
	display: block;

	min-width: 0;
}

.appointment-field__label {
	display: block;

	margin-bottom: 6px;

	color:
		var(--appointment-navy);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 10.5px;
	font-weight: 700;

	line-height: 1.2;

	text-transform: uppercase;
}


/* ==========================================================
   INPUT / SELECT
========================================================== */

.appointment-field input,
.appointment-field select {
	display: block;

	width: 100%;
	height: 48px;

	padding:
		0
		16px;

	border:
		1px solid
		#cbd5df;

	border-radius: 9px;

	outline: 0;

	background:
		rgba(255, 255, 255, 0.92);

	color:
		var(--appointment-navy);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 12.5px;

	transition:
		border-color 250ms ease,
		box-shadow 250ms ease,
		background 250ms ease;
}

.appointment-field input::placeholder {
	color:
		#8391a3;
}

.appointment-field input:focus,
.appointment-field select:focus {
	border-color:
		var(--appointment-teal);

	background: #ffffff;

	box-shadow:
		0 0 0 3px
		rgba(0, 143, 140, 0.08);
}


/* ==========================================================
   SELECT GRID
========================================================== */

.appointment-field-grid {
	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap: 16px;
}


/* ==========================================================
   CUSTOM SELECT ARROW
========================================================== */

.appointment-select {
	position: relative;

	display: block;
}

.appointment-select::after {
	position: absolute;

	top: 50%;
	right: 17px;

	width: 7px;
	height: 7px;

	border-right:
		2px solid
		var(--appointment-navy);

	border-bottom:
		2px solid
		var(--appointment-navy);

	content: "";

	pointer-events: none;

	transform:
		translateY(-70%)
		rotate(45deg);
}

.appointment-select select {
	padding-right: 40px;

	appearance: none;
	-webkit-appearance: none;
}


/* ==========================================================
   PRIVACY
========================================================== */

.appointment-privacy {
	display: grid;

	min-height: 72px;

	margin-top: 19px;

	padding:
		11px
		17px;

	grid-template-columns:
		48px
		minmax(0, 1fr);

	gap: 14px;

	align-items: center;

	border:
		1px solid
		rgba(0, 143, 140, 0.25);

	border-radius: 11px;

	background:
		linear-gradient(
			135deg,
			#f8fdfc,
			#f5faf9
		);
}

.appointment-privacy__icon {
	display: flex;

	width: 44px;
	height: 44px;

	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background:
		#e2f3f0;

	color:
		var(--appointment-teal);
}

.appointment-privacy__icon svg {
	width: 31px;
	height: 31px;
}

.appointment-privacy strong {
	color:
		var(--appointment-teal-dark);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 13px;
}

.appointment-privacy p {
	margin:
		3px
		0
		0;

	color:
		var(--appointment-muted);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 11px;

	line-height: 1.4;
}


/* ==========================================================
   STATUS
========================================================== */

.appointment-form__status {
	min-height: 18px;

	margin-top: 9px;

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 11px;
	font-weight: 500;

	text-align: center;
}

.appointment-form__status.is-error {
	color: #b33131;
}

.appointment-form__status.is-success {
	padding:
		8px
		13px;

	border:
		1px solid
		rgba(0, 143, 140, 0.28);

	border-radius: 8px;

	background:
		#edf9f7;

	color:
		var(--appointment-teal-dark);
}

.appointment-form__status.is-loading {
	color:
		var(--appointment-muted);
}


/* ==========================================================
   FORM ACTIONS
========================================================== */

.appointment-form__actions {
	display: grid;

	margin-top: 11px;

	grid-template-columns:
		31%
		minmax(0, 1fr);

	gap: 22px;
}


/* ==========================================================
   BUTTONS
========================================================== */

.appointment-form__back,
.appointment-form__submit {
	display: flex;

	height: 52px;

	padding:
		0
		20px;

	align-items: center;
	justify-content: center;

	gap: 12px;

	border-radius: 9px;

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 13px;
	font-weight: 600;

	cursor: pointer;

	transition:
		transform 350ms var(--appointment-ease),
		box-shadow 350ms ease,
		background 300ms ease;
}

.appointment-form__back {
	border:
		1.5px solid
		var(--appointment-gold);

	background: #ffffff;

	color:
		var(--appointment-navy);
}

.appointment-form__back svg,
.appointment-form__submit svg {
	width: 22px;
	height: 22px;
}

.appointment-form__back svg {
	color:
		var(--appointment-gold);
}


/* ==========================================================
   SUBMIT
========================================================== */

.appointment-form__submit {
	border:
		1px solid
		var(--appointment-gold);

	background:
		linear-gradient(
			135deg,
			#067e80 0%,
			#07576c 50%,
			#062b4c 100%
		);

	color: #ffffff;

	box-shadow:
		0 8px 18px
		rgba(3, 42, 64, 0.13);
}

.appointment-form__submit svg {
	margin-left: auto;

	color:
		#efc46e;
}

.appointment-form__submit:disabled {
	cursor: wait;

	opacity: 0.72;
}


/* ==========================================================
   BUTTON HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

	.appointment-form__back:hover {
		background: #fff9ef;

		transform:
			translateY(-2px);
	}

	.appointment-form__submit:hover:not(:disabled) {
		transform:
			translateY(-2px);

		box-shadow:
			0 12px 24px
			rgba(3, 42, 64, 0.18);
	}
}


/* ==========================================================
   HONEYPOT
========================================================== */

.appointment-honeypot {
	position: absolute !important;

	left: -10000px !important;

	width: 1px !important;
	height: 1px !important;

	overflow: hidden !important;
}


/* ==========================================================
   FOOTER
========================================================== */

.appointment-modal__footer {
	position: relative;

	display: flex;

	min-height: 50px;

	margin-top: 3px;

	padding:
		0
		40px;

	align-items: center;

	gap: 10px;

	overflow: hidden;

	border-top:
		1px solid
		rgba(207, 152, 63, 0.22);

	color:
		var(--appointment-text);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 10.5px;
}

.appointment-modal__footer::after {
	position: absolute;

	right: -40px;
	bottom: -38px;

	width: 460px;
	height: 78px;

	border-top:
		1px solid
		rgba(207, 152, 63, 0.22);

	border-radius: 50%;

	content: "";
}

.appointment-modal__footer-icon {
	display: flex;

	width: 27px;
	height: 27px;

	align-items: center;
	justify-content: center;

	color:
		var(--appointment-gold);
}

.appointment-modal__footer-icon svg {
	width: 27px;
	height: 27px;
}

.appointment-modal__footer i {
	position: relative;
	z-index: 3;

	display: block;

	width: 7px;
	height: 7px;

	margin-left: 20px;

	border:
		1px solid
		var(--appointment-gold);

	background:
		#fffdf9;

	transform:
		rotate(45deg);
}


/* ==========================================================
   SHORT LAPTOP SCREENS
========================================================== */

@media screen and (min-width: 761px) and (max-height: 820px) {

	.appointment-modal__dialog {
		max-height: 94svh;
	}

	.appointment-modal__header {
		padding-top: 20px;
	}

	.appointment-modal__title {
		font-size: 39px;
	}

	.appointment-modal__title-divider {
		margin-top: 12px;
	}

	.appointment-progress {
		margin:
			14px
			auto
			12px;
	}

	.appointment-step--services {
		padding-top: 15px;
	}

	.appointment-step__question {
		grid-template-columns:
			58px
			minmax(0, 1fr);
	}

	.appointment-step__question-icon {
		width: 55px;
		height: 55px;
	}

	.appointment-step__question-icon svg {
		width: 31px;
		height: 31px;
	}

	.appointment-step__question h3 {
		font-size: 21px;
	}

	.appointment-services {
		max-height: 405px;
	}

	.appointment-service-card {
		min-height: 82px;

		padding:
			9px
			15px;

		grid-template-columns:
			56px
			15px
			minmax(0, 1fr)
			38px;
	}

	.appointment-service-card__image-wrap {
		width: 52px;
		height: 52px;
	}

	.appointment-service-card__copy strong {
		font-size: 18px;
	}

	.appointment-service-card__copy > span {
		font-size: 10.5px;
	}

	.appointment-service-card__arrow {
		width: 36px;
		height: 36px;
	}
}


/* ==========================================================
   TABLET
========================================================== */

@media screen and (max-width: 900px) {

	.appointment-modal {
		padding: 10px;
	}

	.appointment-modal__dialog {
		width:
			calc(100vw - 20px);

		max-height: 95svh;

		border-radius: 20px;
	}

	.appointment-modal__header {
		padding:
			25px
			27px
			0;
	}

	.appointment-modal__title {
		font-size:
			clamp(
				34px,
				5.7vw,
				46px
			);
	}

	.appointment-modal__watermark {
		width: 135px;
		height: 125px;
	}

	.appointment-step--services,
	.appointment-step--patient {
		padding-left: 27px;
		padding-right: 27px;
	}

	.appointment-service-card {
		grid-template-columns:
			60px
			15px
			minmax(0, 1fr)
			40px;
	}

	.appointment-service-card__image-wrap {
		width: 56px;
		height: 56px;
	}

	.appointment-selected {
		grid-template-columns:
			55px
			minmax(0, 1fr)
			15px
			105px;
	}
}


/* ==========================================================
   MOBILE
========================================================== */

@media screen and (max-width: 760px) {

	.appointment-modal {
		padding: 5px;
	}

	.appointment-modal__dialog {
		width:
			calc(100vw - 10px);

		max-height: 97svh;

		border-radius: 17px;
	}


	/* Header */

	.appointment-modal__header {
		padding:
			20px
			16px
			0;
	}

	.appointment-modal__eyebrow {
		padding-right: 48px;
        text-align: center;
		font-size: 9.5px;
	}

	.appointment-modal__title {
		padding-right: 45px;

		font-size:
			clamp(
				29px,
				9vw,
				37px
			);
	}

	.appointment-modal__title-divider {
		width: 68%;

		margin-top: 13px;
	}

	.appointment-modal__watermark {
		display: none;
	}

	.appointment-modal__close {
		top: 11px;
		right: 11px;

		width: 37px;
		height: 37px;
	}

	.appointment-modal__close span {
		width: 16px;
	}


	/* Progress */

	.appointment-progress {
		margin:
			15px
			auto
			11px;
	}

	.appointment-progress__item {
		min-height: 36px;

		padding:
			2px
			5px;

		gap: 5px;
	}

	.appointment-progress__circle {
		width: 30px;
		height: 30px;

		flex-basis: 30px;

		font-size: 11px;
	}

	.appointment-progress__label {
		font-size: 9.5px;
	}

	.appointment-progress__connector {
		width: 18px;

		flex-basis: 18px;

		margin-inline: 2px;
	}


	/* Steps */

	.appointment-step--services,
	.appointment-step--patient {
		padding:
			15px
			13px;
	}

	.appointment-step__question {
		grid-template-columns:
			46px
			minmax(0, 1fr);

		gap: 10px;
	}

	.appointment-step__question-icon {
		width: 44px;
		height: 44px;
	}

	.appointment-step__question-icon svg {
		width: 26px;
		height: 26px;
	}

	.appointment-step__question h3 {
		font-size: 19px;
	}

	.appointment-step__question p {
		font-size: 10.5px;
	}

	.appointment-step__leaves {
		display: none;
	}


	/* Services */

	.appointment-services {
		max-height: 55svh;

		margin-top: 12px;

		gap: 7px;
	}

	.appointment-service-card {
		min-height: 74px;

		padding:
			8px
			9px;

		grid-template-columns:
			48px
			minmax(0, 1fr)
			32px;

		gap: 9px;

		border-radius: 10px;
	}

	.appointment-service-card__image-wrap {
		width: 46px;
		height: 46px;
	}

	.appointment-service-card__image {
		padding: 4px;
	}

	.appointment-service-card__rail {
		display: none;
	}

	.appointment-service-card__copy strong {
		font-size: 15.5px;
	}

	.appointment-service-card__copy > span {
		margin-top: 2px;

		font-size: 9px;

		line-height: 1.34;
	}

	.appointment-service-card__arrow {
		width: 30px;
		height: 30px;
	}

	.appointment-service-card__arrow svg {
		width: 16px;
		height: 16px;
	}


	/* Selected service */

	.appointment-selected {
		padding: 10px;

		grid-template-columns:
			44px
			minmax(0, 1fr)
			auto;

		gap: 9px;
	}

	.appointment-selected__image {
		width: 42px;
		height: 42px;
	}

	.appointment-selected__rail {
		display: none;
	}

	.appointment-selected__copy > span {
		font-size: 8.5px;
	}

	.appointment-selected__copy strong {
		font-size: 15.5px;
	}

	.appointment-selected__change {
		font-size: 9.5px;
	}

	.appointment-selected__change svg {
		width: 15px;
		height: 15px;
	}


	/* Form */

	.appointment-form {
		margin-top: 12px;
	}

	.appointment-field-row {
		margin-top: 11px;

		grid-template-columns:
			34px
			minmax(0, 1fr);

		gap: 8px;
	}

	.appointment-field-row__icon {
		width: 32px;
		height: 32px;
	}

	.appointment-field-row__icon svg {
		width: 20px;
		height: 20px;
	}

	.appointment-field-row__line {
		display: none;
	}

	.appointment-field__label {
		margin-bottom: 4px;

		font-size: 8.5px;
	}

	.appointment-field input,
	.appointment-field select {
		height: 41px;

		padding:
			0
			11px;

		font-size: 11px;
	}

	.appointment-field-grid {
		grid-template-columns: 1fr;

		gap: 9px;
	}


	/* Privacy */

	.appointment-privacy {
		min-height: 0;

		margin-top: 14px;

		padding: 9px;

		grid-template-columns:
			36px
			minmax(0, 1fr);

		gap: 8px;
	}

	.appointment-privacy__icon {
		width: 34px;
		height: 34px;
	}

	.appointment-privacy__icon svg {
		width: 23px;
		height: 23px;
	}

	.appointment-privacy strong {
		font-size: 10px;
	}

	.appointment-privacy p {
		font-size: 9px;
	}


	/* Buttons */

	.appointment-form__actions {
		grid-template-columns: 1fr;

		gap: 7px;
	}

	.appointment-form__back,
	.appointment-form__submit {
		height: 43px;

		font-size: 11.5px;
	}

	.appointment-form__submit {
		grid-row: 1;
	}


	/* Footer */

	.appointment-modal__footer {
		min-height: 42px;

		padding:
			0
			13px;

		font-size: 8.5px;
	}

	.appointment-modal__footer i {
		display: none;
	}
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.appointment-modal button:focus-visible,
.appointment-modal input:focus-visible,
.appointment-modal select:focus-visible {
	outline:
		3px solid
		rgba(0, 143, 140, 0.30);

	outline-offset: 3px;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

	.appointment-modal,
	.appointment-modal__dialog,
	.appointment-step,
	.appointment-service-card,
	.appointment-service-card__arrow,
	.appointment-modal__close,
	.appointment-form__back,
	.appointment-form__submit {
		animation: none !important;

		transition: none !important;
	}
}
.appointment-modal__title-divider {
	position: relative;
	z-index: 3;

	display: flex;

	width: min(430px, 58%);

	margin-top: 18px;
	margin-left: auto;
	margin-right: auto;

	align-items: center;
}