/* ==========================================================================
   PINHOLEIR
   SINGLE DOCTOR PAGE
   COMPLETE doctor.css
   ========================================================================== */


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

.ph-doctor-page {
	--doc-blue: #075cf4;
	--doc-blue-dark: #0349c7;
	--doc-blue-soft: #eaf2ff;

	--doc-navy: #062760;
	--doc-deep: #021944;

	--doc-text: #405b80;
	--doc-muted: #7285a5;

	--doc-border: #cbd8ea;
	--doc-border-light: #dce5f1;

	--doc-bg: #f4f7fc;

	position: relative;

	width: 100%;

	min-height: 100vh;

	background: #ffffff;

	color: var(--doc-navy);

	overflow: visible;
}


/* ==========================================================================
   CONTAINER
   ========================================================================== */

.ph-doctor-container {
	width: min(
		calc(100% - 64px),
		1360px
	);

	margin-inline: auto;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.ph-doctor-hero {
	position: relative;

	width: 100%;

	padding:
		190px
		0
		72px;

	overflow: hidden;

	background:
		linear-gradient(
			118deg,
			#021943 0%,
			#06357f 48%,
			#075cf4 100%
		);

	color: #ffffff;
}


/*
 * Completely disable any older hero decoration.
 */

.ph-doctor-hero::before,
.ph-doctor-hero::after,
.ph-doctor-hero__glow {
	display: none !important;

	content: none !important;
}


.ph-doctor-hero__grid {
	position: relative;

	z-index: 2;

	display: grid;

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

	align-items: center;

	gap: 64px;
}


.ph-doctor-hero__visual,
.ph-doctor-hero__content {
	min-width: 0;
}


/* ==========================================================================
   HERO IMAGE
   ========================================================================== */

.ph-doctor-hero__photo {
	position: relative;

	width: 100%;
	height: 440px;

	overflow: hidden;

	border:
		1px solid
		rgba(255,255,255,.20);

	border-radius: 28px;

	background:
		linear-gradient(
			145deg,
			#dce9fc,
			#ffffff
		);

	box-shadow:
		0 30px 65px rgba(0,18,60,.30);
}


.ph-doctor-hero__photo::before,
.ph-doctor-hero__photo::after {
	display: none !important;

	content: none !important;
}


.ph-doctor-hero__photo img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position: top center;
}


.ph-doctor-hero__placeholder {
	display: grid;

	width: 100%;
	height: 100%;

	place-items: center;

	color: var(--doc-blue);

	font-size: 58px;

	font-weight: 800;
}


/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.ph-doctor-breadcrumb {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 8px;

	margin:
		0
		0
		25px;

	color:
		rgba(255,255,255,.65);

	font-size: 11px;
}


.ph-doctor-breadcrumb a {
	color: #ffffff;

	text-decoration: none;
}


.ph-doctor-breadcrumb a:hover {
	opacity: .8;
}


/* ==========================================================================
   HERO CONTENT
   ========================================================================== */

.ph-doctor-eyebrow {
	display: block;

	margin-bottom: 11px;

	color: #a8c7ff;

	font-size: 9px;

	font-weight: 800;

	letter-spacing: .16em;

	text-transform: uppercase;
}


.ph-doctor-hero h1 {
	max-width: 780px;

	margin:
		0
		0
		13px;

	color: #ffffff;

	font-size:
		clamp(
			45px,
			4.4vw,
			68px
		);

	font-weight: 780;

	line-height: 1.02;

	letter-spacing: -2px;
}


.ph-doctor-hero__designation {
	margin:
		0
		0
		8px;

	color: #e4edff;

	font-size: 20px;

	font-weight: 650;
}


.ph-doctor-hero__qualification {
	max-width: 720px;

	margin:
		0
		0
		25px;

	color:
		rgba(255,255,255,.75);

	font-size: 13px;

	line-height: 1.65;
}


/* ==========================================================================
   HERO META
   ========================================================================== */

.ph-doctor-hero__meta {
	display: flex;

	flex-wrap: wrap;

	gap: 10px;

	margin-bottom: 27px;
}


.ph-doctor-hero__meta > div {
	min-width: 155px;

	padding:
		12px
		15px;

	border:
		1px solid
		rgba(255,255,255,.16);

	border-radius: 13px;

	background:
		rgba(255,255,255,.08);
}


.ph-doctor-hero__meta strong {
	display: block;

	margin-bottom: 3px;

	color: #ffffff;

	font-size: 13px;
}


.ph-doctor-hero__meta span {
	display: block;

	color:
		rgba(255,255,255,.68);

	font-size: 9px;

	line-height: 1.4;
}


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

.ph-doctor-hero__actions {
	display: flex;

	flex-wrap: wrap;

	gap: 10px;
}


.ph-doctor-btn {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-height: 50px;

	padding:
		0
		21px;

	border-radius: 999px;

	font-size: 10px;

	font-weight: 750;

	text-decoration: none;

	transition:
		transform .25s ease,
		box-shadow .25s ease;
}


.ph-doctor-btn:hover {
	transform: translateY(-2px);
}


.ph-doctor-btn--white {
	background: #ffffff;

	color: var(--doc-blue);

	box-shadow:
		0 14px 30px rgba(0,20,70,.20);
}


.ph-doctor-btn--glass {
	border:
		1px solid
		rgba(255,255,255,.20);

	background:
		rgba(255,255,255,.08);

	color: #ffffff;
}


/* ==========================================================================
   TRUST STRIP
   ========================================================================== */

.ph-doctor-trust {
	position: relative;

	z-index: 4;

	background: #ffffff;
}


.ph-doctor-trust__inner {
	display: grid;

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

	margin-top: -25px;

	overflow: hidden;

	border:
		1px solid
		var(--doc-border);

	border-radius: 20px;

	background: #ffffff;

	box-shadow:
		0 20px 50px rgba(14,46,105,.13);
}


.ph-doctor-trust__item {
	position: relative;

	min-width: 0;

	padding:
		22px
		24px;
}


.ph-doctor-trust__item:not(:last-child)::after {
	position: absolute;

	top: 25%;
	right: 0;

	width: 1px;
	height: 50%;

	background: #d7e1ee;

	content: "";
}


.ph-doctor-trust__item strong {
	display: block;

	margin-bottom: 4px;

	color: var(--doc-navy);

	font-size: 23px;

	font-weight: 790;
}


.ph-doctor-trust__item strong em {
	color: #ffb000;

	font-style: normal;
}


.ph-doctor-trust__item span {
	display: block;

	color: #657b9b;

	font-size: 10px;

	line-height: 1.4;
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.ph-doctor-content {
	position: relative;

	padding:
		82px
		0
		95px;

	background:
		linear-gradient(
			180deg,
			#f4f7fc 0%,
			#ffffff 70%
		);

	overflow: visible !important;
}


/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */

.ph-doctor-layout {
	display: grid;

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

	align-items: start;

	gap: 40px;

	overflow: visible !important;
}


.ph-doctor-content__main {
	min-width: 0;
}


/* ==========================================================================
   SECTION
   ========================================================================== */

.ph-doctor-section {
	width: 100%;

	margin-bottom: 64px;
}


.ph-doctor-section:last-child {
	margin-bottom: 0;
}


.ph-doctor-section__heading {
	margin-bottom: 25px;
}


.ph-doctor-section__heading > span {
	display: block;

	margin-bottom: 7px;

	color: var(--doc-blue);

	font-size: 9px;

	font-weight: 850;

	letter-spacing: .15em;

	text-transform: uppercase;
}


.ph-doctor-section__heading h2 {
	max-width: 850px;

	margin: 0;

	color: var(--doc-navy);

	font-size:
		clamp(
			34px,
			3vw,
			46px
		);

	font-weight: 790;

	line-height: 1.08;

	letter-spacing: -1.2px;
}


/* ==========================================================================
   ABOUT
   ========================================================================== */

.ph-doctor-richtext {
	padding: 28px;

	border:
		1px solid
		var(--doc-border);

	border-radius: 18px;

	background: #ffffff;

	box-shadow:
		0 12px 30px rgba(18,51,108,.07);

	color: var(--doc-text);

	font-size: 13px;

	line-height: 1.85;
}


.ph-doctor-richtext p {
	margin:
		0
		0
		15px;
}


.ph-doctor-richtext p:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   EXPERTISE
   ========================================================================== */

.ph-doctor-expertise {
	display: grid;

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

	gap: 14px;
}


.ph-doctor-expertise__card {
	display: flex;

	align-items: center;

	gap: 13px;

	min-width: 0;

	min-height: 96px;

	padding: 16px;

	border:
		1px solid
		#c7d6e9;

	border-radius: 17px;

	background:
		linear-gradient(
			145deg,
			#ffffff,
			#f8fbff
		);

	box-shadow:
		0 10px 25px rgba(17,50,105,.06);

	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}


.ph-doctor-expertise__card:hover {
	border-color:
		rgba(7,92,244,.42);

	box-shadow:
		0 17px 35px rgba(17,61,140,.13);

	transform: translateY(-3px);
}


.ph-doctor-expertise__icon {
	display: grid;

	width: 48px;
	height: 48px;

	flex:
		0
		0
		48px;

	place-items: center;

	border-radius: 13px;

	background: #e5eeff;

	color: var(--doc-blue);
}


.ph-doctor-expertise__icon svg {
	width: 22px;
	height: 22px;

	fill: none;

	stroke: currentColor;

	stroke-width: 1.8;
}


.ph-doctor-expertise__card h3 {
	margin: 0;

	color: #0a3471;

	font-size: 12px;

	font-weight: 750;

	line-height: 1.4;
}


/* ==========================================================================
   TREATMENTS
   ========================================================================== */

.ph-doctor-treatment-grid {
	display: grid;

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

	gap: 11px;
}


.ph-doctor-treatment-grid > div {
	display: flex;

	align-items: center;

	gap: 11px;

	min-height: 62px;

	padding:
		12px
		15px;

	border:
		1px solid
		var(--doc-border);

	border-radius: 14px;

	background: #ffffff;

	box-shadow:
		0 7px 18px rgba(18,52,108,.04);
}


.ph-doctor-treatment-grid > div > span {
	display: grid;

	width: 27px;
	height: 27px;

	flex:
		0
		0
		27px;

	place-items: center;

	border-radius: 50%;

	background: #e4edff;

	color: var(--doc-blue);

	font-size: 11px;

	font-weight: 800;
}


.ph-doctor-treatment-grid strong {
	color: #123b76;

	font-size: 11px;
}


/* ==========================================================================
   PROFESSIONAL SKILLS
   ========================================================================== */

.ph-doctor-skills {
	display: grid;

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

	gap: 15px;
}


.ph-doctor-skill {
	display: grid;

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

	align-items: center;

	gap: 18px;

	padding: 21px;

	border:
		1px solid
		#c8d7ea;

	border-radius: 18px;

	background:
		linear-gradient(
			145deg,
			#ffffff,
			#f1f5fc
		);

	box-shadow:
		0 12px 29px rgba(15,48,106,.09);
}


.ph-doctor-skill__percentage {
	display: grid;

	width: 88px;
	height: 88px;

	place-items: center;

	border-radius: 50%;

	background:
		conic-gradient(
			var(--doc-blue)
			calc(var(--skill-value) * 1%),
			#d8e3f2 0
		);
}


.ph-doctor-skill__percentage > div {
	display: grid;

	width: 70px;
	height: 70px;

	place-items: center;

	border-radius: 50%;

	background: #ffffff;

	box-shadow:
		inset 0 0 0 1px #dfe7f2;
}


.ph-doctor-skill__percentage strong {
	color: var(--doc-navy);

	font-size: 18px;
}


.ph-doctor-skill__content h3 {
	margin:
		0
		0
		6px;

	color: #0b3270;

	font-size: 16px;
}


.ph-doctor-skill__content p {
	margin: 0;

	color: #617999;

	font-size: 11px;

	line-height: 1.6;
}


/* ==========================================================================
   EDUCATION
   ========================================================================== */

.ph-doctor-timeline {
	position: relative;

	padding-left: 27px;
}


.ph-doctor-timeline::before {
	position: absolute;

	top: 10px;
	bottom: 10px;
	left: 7px;

	width: 2px;

	background:
		linear-gradient(
			var(--doc-blue),
			#bad0f3
		);

	content: "";
}


.ph-doctor-timeline__item {
	position: relative;

	display: grid;

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

	align-items: center;

	gap: 14px;

	margin-bottom: 16px;
}


.ph-doctor-timeline__item::before {
	position: absolute;

	top: 50%;
	left: -26px;

	width: 13px;
	height: 13px;

	border:
		3px solid
		#ffffff;

	border-radius: 50%;

	background: var(--doc-blue);

	box-shadow:
		0 0 0 2px #89b0f7;

	content: "";

	transform:
		translateY(-50%);
}


.ph-doctor-timeline__year span {
	color: var(--doc-blue);

	font-size: 12px;

	font-weight: 800;
}


.ph-doctor-timeline__card {
	padding:
		18px
		20px;

	border:
		1px solid
		var(--doc-border);

	border-radius: 14px;

	background: #ffffff;

	box-shadow:
		0 8px 20px rgba(18,53,110,.05);
}


.ph-doctor-timeline__card h3 {
	margin:
		0
		0
		5px;

	color: #123b75;

	font-size: 14px;
}


.ph-doctor-timeline__card p {
	margin: 0;

	color: #60799b;

	font-size: 11px;
}


/* ==========================================================================
   MEMBERSHIPS
   ========================================================================== */

.ph-doctor-memberships {
	display: grid;

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

	gap: 11px;
}


.ph-doctor-memberships > div {
	display: flex;

	align-items: center;

	gap: 11px;

	min-height: 60px;

	padding:
		12px
		15px;

	border:
		1px solid
		var(--doc-border);

	border-radius: 14px;

	background: #ffffff;
}


.ph-doctor-memberships > div > span {
	display: grid;

	width: 27px;
	height: 27px;

	flex:
		0
		0
		27px;

	place-items: center;

	border-radius: 50%;

	background: #e4edff;

	color: var(--doc-blue);
}


.ph-doctor-memberships p {
	margin: 0;

	color: #36577e;

	font-size: 11px;
}


/* ==========================================================================
   REASONS
   ========================================================================== */

.ph-doctor-reasons {
	display: grid;

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

	gap: 11px;
}


.ph-doctor-reasons > div {
	display: flex;

	align-items: center;

	gap: 11px;

	min-height: 63px;

	padding:
		12px
		15px;

	border:
		1px solid
		var(--doc-border);

	border-radius: 14px;

	background:
		linear-gradient(
			145deg,
			#ffffff,
			#f6f9ff
		);
}


.ph-doctor-reasons > div > span {
	display: grid;

	width: 27px;
	height: 27px;

	flex:
		0
		0
		27px;

	place-items: center;

	border-radius: 50%;

	background: #e4edff;

	color: var(--doc-blue);
}


.ph-doctor-reasons p {
	margin: 0;

	color: #36577e;

	font-size: 11px;

	line-height: 1.5;
}


/* ==========================================================================
   STICKY SUPPORT
   ========================================================================== */

.ph-doctor-page,
.ph-doctor-content,
.ph-doctor-content > .ph-doctor-container,
.ph-doctor-layout {
	overflow: visible !important;
}


/* ==========================================================================
   STICKY SIDEBAR
   ENTIRE SIDEBAR STAYS WHILE LEFT CONTENT SCROLLS
   ========================================================================== */

.ph-doctor-sidebar {
	position: -webkit-sticky !important;
	position: sticky !important;

	top: 115px !important;

	align-self: start !important;

	width: 100%;

	min-width: 0;

	height: fit-content !important;

	overflow: visible !important;

	z-index: 30;
}


.ph-doctor-sidebar__sticky {
	position: static !important;

	display: flex !important;

	flex-direction: column !important;

	gap: 16px !important;

	width: 100% !important;

	height: auto !important;

	max-height: none !important;

	overflow: visible !important;
}


.ph-doctor-sidebar__form {
	width: 100% !important;

	min-width: 0 !important;
}


/* ==========================================================================
   APPOINTMENT FORM
   THE ACTUAL ph-appointment COMPONENT
   ========================================================================== */


/* --------------------------------------------------------------------------
   Reset complete appointment section
   -------------------------------------------------------------------------- */

.ph-doctor-sidebar__form .ph-appointment {
	position: relative !important;

	display: block !important;

	width: 100% !important;

	max-width: 100% !important;

	min-width: 0 !important;

	min-height: 0 !important;

	margin: 0 !important;

	padding: 0 !important;

	background: transparent !important;

	overflow: visible !important;
}


.ph-doctor-sidebar__form .ph-appointment__container {
	position: relative !important;

	display: block !important;

	width: 100% !important;

	max-width: 100% !important;

	min-width: 0 !important;

	margin: 0 !important;

	padding: 0 !important;

	overflow: visible !important;

	border: 0 !important;

	background: transparent !important;

	box-shadow: none !important;
}


/* Hide Patient Stories in doctor sidebar */

.ph-doctor-sidebar__form .ph-appointment__stories {
	display: none !important;
}


/* --------------------------------------------------------------------------
   Form panel
   -------------------------------------------------------------------------- */

.ph-doctor-sidebar__form .ph-appointment__form-panel {
	position: relative !important;

	display: block !important;

	width: 100% !important;

	max-width: 100% !important;

	min-width: 0 !important;

	min-height: 0 !important;

	height: auto !important;

	margin: 0 !important;

	padding:
		25px
		20px
		20px !important;

	overflow: visible !important;

	border:
		1px solid
		var(--doc-border) !important;

	border-radius: 21px !important;

	background:
		linear-gradient(
			145deg,
			#ffffff,
			#f2f6ff
		) !important;

	box-shadow:
		0 18px 44px rgba(12,45,104,.13) !important;

	transform: none !important;

	box-sizing: border-box !important;
}


/*
 * The global component uses reveal animations.
 * Never allow it to remain hidden in the sidebar.
 */

.ph-doctor-sidebar__form .ph-appointment-reveal,
.ph-doctor-sidebar__form .ph-appointment__form-panel {
	opacity: 1 !important;

	visibility: visible !important;

	transform: none !important;
}


/* --------------------------------------------------------------------------
   Calendar icon
   -------------------------------------------------------------------------- */

.ph-doctor-sidebar__form .ph-appointment__calendar-badge {
	position: absolute !important;

	top: 18px !important;

	right: 18px !important;

	z-index: 5 !important;

	display: grid !important;

	width: 48px !important;

	height: 48px !important;

	place-items: center !important;

	border:
		5px solid
		#ffffff !important;

	border-radius: 50% !important;

	background:
		linear-gradient(
			145deg,
			#075cf4,
			#0846ad
		) !important;

	color: #ffffff !important;

	box-shadow:
		0 9px 22px rgba(7,73,181,.23) !important;
}


.ph-doctor-sidebar__form .ph-appointment__calendar-badge svg {
	width: 26px !important;

	height: 26px !important;

	stroke: #ffffff !important;
}


/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.ph-doctor-sidebar__form .ph-appointment__form-heading {
	display: block !important;

	width: 100% !important;

	margin:
		0
		0
		20px !important;

	padding:
		0
		58px
		0
		0 !important;
}


.ph-doctor-sidebar__form .ph-appointment__eyebrow {
	display: flex !important;

	align-items: center !important;

	gap: 10px !important;

	margin: 0 0 7px !important;
}


.ph-doctor-sidebar__form .ph-appointment__eyebrow span {
	color: var(--doc-blue) !important;

	font-size: 8px !important;

	font-weight: 850 !important;

	letter-spacing: .16em !important;

	text-transform: uppercase !important;
}


.ph-doctor-sidebar__form .ph-appointment__eyebrow i {
	display: block !important;

	width: 30px !important;

	height: 2px !important;

	background: var(--doc-blue) !important;
}


.ph-doctor-sidebar__form .ph-appointment__form-heading h2 {
	display: block !important;

	max-width: 240px !important;

	margin: 0 !important;

	color: var(--doc-navy) !important;

	font-family:
		Georgia,
		'Times New Roman',
		serif !important;

	font-size: 29px !important;

	font-weight: 500 !important;

	line-height: 1.08 !important;

	letter-spacing: -.7px !important;
}


/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.ph-doctor-sidebar__form .ph-appointment__form {
	display: block !important;

	width: 100% !important;

	max-width: 100% !important;

	min-width: 0 !important;

	margin: 0 !important;

	padding: 0 !important;
}


/* ==========================================================================
   CRITICAL FIX
   FORCE EVERY ORIGINAL FORM GRID TO ONE COLUMN
   ========================================================================== */

.ph-doctor-sidebar__form .ph-appointment__form-grid,
.ph-doctor-sidebar__form .ph-appointment__form-grid--three {
	display: grid !important;

	grid-template-columns:
		minmax(0,1fr) !important;

	grid-auto-columns:
		minmax(0,1fr) !important;

	grid-auto-flow: row !important;

	gap: 10px !important;

	width: 100% !important;

	max-width: 100% !important;

	min-width: 0 !important;

	margin:
		0
		0
		10px !important;

	padding: 0 !important;
}


/*
 * Also force every direct field inside those grids
 * to occupy the complete row.
 */

.ph-doctor-sidebar__form
.ph-appointment__form-grid
> .ph-appointment__field,

.ph-doctor-sidebar__form
.ph-appointment__form-grid--three
> .ph-appointment__field {
	grid-column: 1 / -1 !important;

	width: 100% !important;

	max-width: 100% !important;
}


/* --------------------------------------------------------------------------
   Field
   -------------------------------------------------------------------------- */

.ph-doctor-sidebar__form .ph-appointment__field {
	position: relative !important;

	display: flex !important;

	align-items: center !important;

	width: 100% !important;

	max-width: 100% !important;

	min-width: 0 !important;

	min-height: 49px !important;

	height: auto !important;

	margin: 0 !important;

	padding:
		0
		13px !important;

	overflow: hidden !important;

	border:
		1px solid
		#cad8e9 !important;

	border-radius: 11px !important;

	background: #ffffff !important;

	box-shadow:
		0 3px 8px rgba(16,48,101,.025) !important;

	transform: none !important;

	box-sizing: border-box !important;
}


.ph-doctor-sidebar__form .ph-appointment__field:focus-within {
	border-color:
		#075cf4 !important;

	box-shadow:
		0 0 0 3px rgba(7,92,244,.07) !important;

	transform: none !important;
}


/* Field icon */

.ph-doctor-sidebar__form
.ph-appointment__field
> svg {
	position: static !important;

	display: block !important;

	width: 18px !important;

	height: 18px !important;

	flex:
		0
		0
		18px !important;

	margin:
		0
		10px
		0
		0 !important;

	transform: none !important;

	fill: none !important;

	stroke: #0d3a80 !important;

	stroke-width: 1.7 !important;
}


/* --------------------------------------------------------------------------
   Input / select / textarea
   -------------------------------------------------------------------------- */

.ph-doctor-sidebar__form
.ph-appointment__field
input,

.ph-doctor-sidebar__form
.ph-appointment__field
select,

.ph-doctor-sidebar__form
.ph-appointment__field
textarea {
	position: static !important;

	display: block !important;

	flex:
		1 1 auto !important;

	width: 100% !important;

	max-width: 100% !important;

	min-width: 0 !important;

	margin: 0 !important;

	padding: 0 !important;

	border: 0 !important;

	border-radius: 0 !important;

	outline: 0 !important;

	background: transparent !important;

	box-shadow: none !important;

	color: #1a3e72 !important;

	font-family: inherit !important;

	font-size: 11px !important;

	font-weight: 500 !important;

	line-height: 1.4 !important;

	opacity: 1 !important;

	visibility: visible !important;

	box-sizing: border-box !important;
}


.ph-doctor-sidebar__form
.ph-appointment__field
input,

.ph-doctor-sidebar__form
.ph-appointment__field
select {
	height: 47px !important;
}


.ph-doctor-sidebar__form
.ph-appointment__field
input::placeholder,

.ph-doctor-sidebar__form
.ph-appointment__field
textarea::placeholder {
	color: #7487a7 !important;

	opacity: 1 !important;
}


.ph-doctor-sidebar__form
.ph-appointment__field
select {
	appearance: auto !important;

	-webkit-appearance: auto !important;

	cursor: pointer !important;
}


/* --------------------------------------------------------------------------
   Message
   -------------------------------------------------------------------------- */

.ph-doctor-sidebar__form
.ph-appointment__field--message {
	align-items: flex-start !important;

	width: 100% !important;

	min-height: 100px !important;

	margin:
		0
		0
		10px !important;

	padding-top: 4px !important;
}


.ph-doctor-sidebar__form
.ph-appointment__field--message
> svg {
	margin-top: 13px !important;
}


.ph-doctor-sidebar__form
.ph-appointment__field--message
textarea {
	min-height: 92px !important;

	padding-top: 13px !important;

	resize: vertical !important;
}


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

.ph-doctor-sidebar__form
.ph-appointment__form-bottom {
	display: block !important;

	width: 100% !important;

	max-width: 100% !important;

	min-width: 0 !important;

	margin:
		12px
		0
		0 !important;

	padding: 0 !important;
}


/* Hide original decorative Priority text */

.ph-doctor-sidebar__form
.ph-appointment__priority {
	display: none !important;
}


/* ==========================================================================
   SUBMIT BUTTON
   THIS OVERRIDES ORIGINAL 355px MIN-WIDTH BUTTON
   ========================================================================== */

.ph-doctor-sidebar__form
.ph-appointment__submit {
	position: relative !important;

	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	gap: 8px !important;

	width: 100% !important;

	max-width: 100% !important;

	min-width: 0 !important;

	height: 52px !important;

	min-height: 52px !important;

	margin: 0 !important;

	padding:
		0
		16px !important;

	overflow: visible !important;

	border:
		0 !important;

	border-radius:
		12px !important;

	background:
		linear-gradient(
			135deg,
			#075cf4,
			#176fff
		) !important;

	box-shadow:
		0 12px 25px rgba(7,92,244,.25) !important;

	color:
		#ffffff !important;

	font-family:
		inherit !important;

	font-size:
		10px !important;

	font-weight:
		800 !important;

	line-height:
		1 !important;

	text-align:
		center !important;

	text-transform:
		uppercase !important;

	letter-spacing:
		.02em !important;

	cursor:
		pointer !important;

	visibility:
		visible !important;

	opacity:
		1 !important;

	transform:
		none !important;

	box-sizing:
		border-box !important;
}


/*
 * Force ANY text/icon inside button to display.
 */

.ph-doctor-sidebar__form
.ph-appointment__submit
* {
	display: inline-block !important;

	color: #ffffff !important;

	opacity: 1 !important;

	visibility: visible !important;
}


.ph-doctor-sidebar__form
.ph-appointment__submit
svg {
	width: 15px !important;

	height: 15px !important;

	fill: none !important;

	stroke: #ffffff !important;

	transform: none !important;
}


.ph-doctor-sidebar__form
.ph-appointment__submit:hover {
	background:
		linear-gradient(
			135deg,
			#054fd7,
			#1265ec
		) !important;

	transform: none !important;
}


/* --------------------------------------------------------------------------
   Response message
   -------------------------------------------------------------------------- */

.ph-doctor-sidebar__form
.ph-appointment__response {
	display: block !important;

	width: 100% !important;

	min-height: 0 !important;

	margin-top: 9px !important;

	color: #244b82 !important;

	font-size: 10px !important;
}


/* ==========================================================================
   SECOND FORM MARKUP FALLBACK
   appointment-form-* classes
   ========================================================================== */

.ph-doctor-sidebar__form
.appointment-form-card {
	width: 100% !important;

	max-width: 100% !important;

	margin: 0 !important;

	padding:
		25px
		20px
		20px !important;

	border:
		1px solid
		var(--doc-border) !important;

	border-radius: 21px !important;

	background:
		linear-gradient(
			145deg,
			#ffffff,
			#f2f6ff
		) !important;

	box-shadow:
		0 18px 44px rgba(12,45,104,.13) !important;

	box-sizing: border-box !important;
}


.ph-doctor-sidebar__form
.appointment-form-card__title {
	margin:
		0
		0
		7px !important;

	color: var(--doc-navy) !important;

	font-size: 27px !important;

	line-height: 1.08 !important;
}


.ph-doctor-sidebar__form
.appointment-form-card__description {
	margin:
		0
		0
		18px !important;

	color: #647a9b !important;

	font-size: 10px !important;

	line-height: 1.55 !important;
}


.ph-doctor-sidebar__form
.appointment-form {
	display: flex !important;

	flex-direction: column !important;

	gap: 10px !important;

	width: 100% !important;
}


.ph-doctor-sidebar__form
.appointment-form__row {
	display: grid !important;

	grid-template-columns:
		1fr !important;

	gap: 10px !important;

	width: 100% !important;
}


.ph-doctor-sidebar__form
.appointment-form__field {
	display: block !important;

	width: 100% !important;
}


.ph-doctor-sidebar__form
.appointment-form__field label {
	display: block !important;

	margin-bottom: 5px !important;

	color: #153c73 !important;

	font-size: 9px !important;

	font-weight: 700 !important;
}


.ph-doctor-sidebar__form
.appointment-form__field input,

.ph-doctor-sidebar__form
.appointment-form__field select,

.ph-doctor-sidebar__form
.appointment-form__field textarea {
	display: block !important;

	width: 100% !important;

	max-width: 100% !important;

	border:
		1px solid
		#cad8ea !important;

	border-radius:
		11px !important;

	background:
		#ffffff !important;

	color:
		#1a3e72 !important;

	font-size:
		11px !important;

	box-sizing:
		border-box !important;
}


.ph-doctor-sidebar__form
.appointment-form__field input,

.ph-doctor-sidebar__form
.appointment-form__field select {
	height: 47px !important;

	padding:
		0
		12px !important;
}


.ph-doctor-sidebar__form
.appointment-form__field textarea {
	min-height: 88px !important;

	padding: 12px !important;
}


.ph-doctor-sidebar__form
.appointment-form__submit {
	display: flex !important;

	align-items: center !important;

	justify-content: center !important;

	width: 100% !important;

	min-width: 0 !important;

	height: 51px !important;

	border: 0 !important;

	border-radius:
		12px !important;

	background:
		linear-gradient(
			135deg,
			#075cf4,
			#176fff
		) !important;

	color:
		#ffffff !important;

	font-size:
		10px !important;

	font-weight:
		800 !important;

	box-shadow:
		0 12px 25px rgba(7,92,244,.24) !important;

	visibility:
		visible !important;

	opacity:
		1 !important;
}


/* ==========================================================================
   CONSULTATION TIMINGS
   ========================================================================== */

.ph-doctor-availability {
	width: 100%;

	padding: 22px;

	border-radius: 18px;

	background:
		linear-gradient(
			145deg,
			#031f55,
			#0b4dbe
		);

	box-shadow:
		0 16px 35px rgba(5,38,103,.18);

	color: #ffffff;

	box-sizing: border-box;
}


.ph-doctor-availability__eyebrow {
	display: block;

	margin-bottom: 6px;

	color: #a8c7ff;

	font-size: 8px;

	font-weight: 800;

	letter-spacing: .14em;

	text-transform: uppercase;
}


.ph-doctor-availability h3 {
	margin:
		0
		0
		16px;

	color: #ffffff;

	font-size: 20px;
}


.ph-doctor-availability__row {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 12px;

	padding:
		10px
		0;

	border-bottom:
		1px solid
		rgba(255,255,255,.14);

	font-size: 10px;
}


.ph-doctor-availability__row:last-child {
	border-bottom: 0;
}


.ph-doctor-availability__row span {
	color:
		rgba(255,255,255,.72);
}


.ph-doctor-availability__row strong {
	color: #ffffff;
}


/* ==========================================================================
   WHATSAPP / PHONE
   ========================================================================== */

.ph-doctor-sidebar-contact {
	display: grid;

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

	gap: 8px;

	width: 100%;
}


.ph-doctor-sidebar-contact a {
	display: flex;

	align-items: center;

	justify-content: center;

	min-height: 46px;

	padding:
		0
		10px;

	border:
		1px solid
		#c7d5e8;

	border-radius: 11px;

	background: #ffffff;

	box-shadow:
		0 7px 17px rgba(15,48,106,.07);

	color: var(--doc-blue);

	font-size: 9px;

	font-weight: 750;

	text-align: center;

	text-decoration: none;
}


/* ==========================================================================
   REVEAL SAFETY
   NEVER ALLOW CONTENT TO STAY INVISIBLE
   ========================================================================== */

.ph-doctor-reveal {
	opacity: 1 !important;

	visibility: visible !important;

	transform: none !important;
}


/* ==========================================================================
   LAPTOP
   ========================================================================== */

@media (max-width: 1200px) {

	.ph-doctor-container {
		width:
			calc(100% - 48px);
	}


	.ph-doctor-layout {
		grid-template-columns:
			minmax(0,1fr)
			350px;

		gap: 28px;
	}


	.ph-doctor-hero__grid {
		grid-template-columns:
			340px
			minmax(0,1fr);

		gap: 44px;
	}


	.ph-doctor-expertise {
		grid-template-columns:
			repeat(
				2,
				minmax(0,1fr)
			);
	}
}


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

@media (max-width: 960px) {

	.ph-doctor-hero {
		padding:
			145px
			0
			64px;
	}


	.ph-doctor-hero__grid {
		grid-template-columns: 1fr;
	}


	.ph-doctor-hero__visual {
		max-width: 420px;
	}


	.ph-doctor-layout {
		grid-template-columns: 1fr;
	}


	.ph-doctor-sidebar {
		position: static !important;

		top: auto !important;

		width: 100%;
	}


	.ph-doctor-sidebar__sticky {
		position: static !important;
	}


	.ph-doctor-sidebar__form {
		max-width: 600px;
	}


	.ph-doctor-trust__inner {
		grid-template-columns:
			repeat(
				2,
				minmax(0,1fr)
			);
	}


	.ph-doctor-skills {
		grid-template-columns: 1fr;
	}
}


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

@media (max-width: 600px) {

	.ph-doctor-container {
		width:
			calc(100% - 28px);
	}


	.ph-doctor-hero {
		padding:
			110px
			0
			50px;
	}


	.ph-doctor-hero__photo {
		height: 380px;

		border-radius: 22px;
	}


	.ph-doctor-hero h1 {
		font-size: 40px;

		letter-spacing: -1.4px;
	}


	.ph-doctor-trust__inner {
		grid-template-columns: 1fr;
	}


	.ph-doctor-trust__item:not(:last-child)::after {
		top: auto;

		right: 20px;

		bottom: 0;

		left: 20px;

		width: auto;

		height: 1px;
	}


	.ph-doctor-section {
		margin-bottom: 48px;
	}


	.ph-doctor-section__heading h2 {
		font-size: 31px;
	}


	.ph-doctor-expertise,
	.ph-doctor-treatment-grid,
	.ph-doctor-memberships,
	.ph-doctor-reasons,
	.ph-doctor-skills {
		grid-template-columns: 1fr;
	}


	.ph-doctor-timeline {
		padding-left: 21px;
	}


	.ph-doctor-timeline__item {
		grid-template-columns:
			62px
			minmax(0,1fr);
	}


	.ph-doctor-sidebar__form {
		max-width: 100%;
	}


	.ph-doctor-sidebar-contact {
		grid-template-columns: 1fr;
	}
}
/* ==========================================================================
   DOCTOR SIDEBAR - EXACT APPOINTMENT FORM OVERRIDE
   Matches template-parts/global/appointment-form.php
   ========================================================================== */

/* Sticky support */
.ph-doctor-main,
.ph-doctor-main .ph-doctor-container,
.ph-doctor-main__grid {
	overflow: visible !important;
}

.ph-doctor-main__grid {
	align-items: start !important;
}

.ph-doctor-sidebar {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 115px !important;
	align-self: start !important;
	height: fit-content !important;
	z-index: 30 !important;
}


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

.ph-doctor-sidebar__form .ph-appt-form-card {
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 24px 20px 20px !important;

	border: 1px solid #cad8ea !important;
	border-radius: 20px !important;

	background:
		linear-gradient(
			145deg,
			#ffffff 0%,
			#f3f7ff 100%
		) !important;

	box-shadow:
		0 18px 42px rgba(11, 46, 105, .13) !important;

	box-sizing: border-box !important;
	overflow: visible !important;
}


/* ==========================================================================
   BADGE
   ========================================================================== */

.ph-doctor-sidebar__form .ph-appt-form-card__badge {
	position: absolute !important;
	top: 18px !important;
	right: 18px !important;

	display: grid !important;
	place-items: center !important;

	width: 48px !important;
	height: 48px !important;

	border: 5px solid #ffffff !important;
	border-radius: 50% !important;

	background:
		linear-gradient(
			145deg,
			#075cf4,
			#0b4eb8
		) !important;

	box-shadow:
		0 10px 24px rgba(7, 73, 181, .22) !important;

	color: #ffffff !important;

	z-index: 2 !important;
}

.ph-doctor-sidebar__form .ph-appt-form-card__badge svg {
	width: 26px !important;
	height: 26px !important;

	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.5 !important;
}


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

.ph-doctor-sidebar__form .ph-appt-form-card__header {
	margin: 0 0 22px !important;
	padding-right: 60px !important;
}

.ph-doctor-sidebar__form .ph-appt-kicker {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;

	margin-bottom: 8px !important;
}

.ph-doctor-sidebar__form .ph-appt-kicker span {
	color: #075cf4 !important;

	font-size: 8px !important;
	font-weight: 800 !important;
	letter-spacing: .18em !important;

	text-transform: uppercase !important;
}

.ph-doctor-sidebar__form .ph-appt-kicker i {
	display: block !important;

	width: 34px !important;
	height: 2px !important;

	background: #075cf4 !important;
}

.ph-doctor-sidebar__form .ph-appt-form-card__header h2 {
	max-width: 235px !important;

	margin: 0 !important;

	color: #062760 !important;

	font-family: Georgia, "Times New Roman", serif !important;

	font-size: 30px !important;
	font-weight: 500 !important;
	line-height: 1.05 !important;

	letter-spacing: -.8px !important;
}


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

.ph-doctor-sidebar__form .ph-appt-form {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* ==========================================================================
   CRITICAL FIX:
   FORCE ALL GRIDS TO ONE COLUMN
   ========================================================================== */

.ph-doctor-sidebar__form .ph-appt-form__grid,
.ph-doctor-sidebar__form .ph-appt-form__grid--three {
	display: grid !important;

	grid-template-columns: minmax(0, 1fr) !important;
	grid-auto-flow: row !important;

	gap: 10px !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 0 10px !important;
	padding: 0 !important;
}

.ph-doctor-sidebar__form
.ph-appt-form__grid
> .ph-appt-field,

.ph-doctor-sidebar__form
.ph-appt-form__grid--three
> .ph-appt-field {
	grid-column: 1 / -1 !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}


/* ==========================================================================
   FIELDS
   ========================================================================== */

.ph-doctor-sidebar__form .ph-appt-field {
	position: relative !important;

	display: flex !important;
	align-items: center !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	min-height: 50px !important;

	margin: 0 !important;
	padding: 0 13px !important;

	border: 1px solid #cbd8ea !important;
	border-radius: 12px !important;

	background: #ffffff !important;

	box-shadow:
		0 4px 12px rgba(17, 50, 105, .035) !important;

	box-sizing: border-box !important;

	overflow: hidden !important;
}

.ph-doctor-sidebar__form .ph-appt-field:focus-within {
	border-color: #075cf4 !important;

	box-shadow:
		0 0 0 3px rgba(7, 92, 244, .08) !important;
}


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

.ph-doctor-sidebar__form .ph-appt-field > svg {
	position: static !important;

	display: block !important;

	width: 18px !important;
	height: 18px !important;

	flex: 0 0 18px !important;

	margin: 0 10px 0 0 !important;

	fill: none !important;

	stroke: #123f82 !important;
	stroke-width: 1.7 !important;

	transform: none !important;
}


/* ==========================================================================
   INPUTS / SELECTS / TEXTAREA
   ========================================================================== */

.ph-doctor-sidebar__form .ph-appt-field input,
.ph-doctor-sidebar__form .ph-appt-field select,
.ph-doctor-sidebar__form .ph-appt-field textarea {
	position: static !important;

	display: block !important;

	flex: 1 1 auto !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	outline: 0 !important;

	background: transparent !important;

	box-shadow: none !important;

	color: #173d70 !important;

	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 500 !important;

	opacity: 1 !important;
	visibility: visible !important;

	box-sizing: border-box !important;
}

.ph-doctor-sidebar__form .ph-appt-field input,
.ph-doctor-sidebar__form .ph-appt-field select {
	height: 48px !important;
}

.ph-doctor-sidebar__form .ph-appt-field input::placeholder,
.ph-doctor-sidebar__form .ph-appt-field textarea::placeholder {
	color: #7487a7 !important;
	opacity: 1 !important;
}

.ph-doctor-sidebar__form .ph-appt-field select {
	appearance: auto !important;
	-webkit-appearance: auto !important;

	cursor: pointer !important;
}


/* ==========================================================================
   DATE + TIME
   ========================================================================== */

.ph-doctor-sidebar__form input[type="date"],
.ph-doctor-sidebar__form input[type="time"] {
	color: #173d70 !important;
}

.ph-doctor-sidebar__form input[type="date"]::-webkit-calendar-picker-indicator,
.ph-doctor-sidebar__form input[type="time"]::-webkit-calendar-picker-indicator {
	opacity: .75 !important;
	cursor: pointer !important;
}


/* ==========================================================================
   MESSAGE
   ========================================================================== */

.ph-doctor-sidebar__form .ph-appt-field--message {
	align-items: flex-start !important;

	width: 100% !important;

	min-height: 105px !important;

	margin: 0 0 10px !important;

	padding-top: 3px !important;
}

.ph-doctor-sidebar__form .ph-appt-field--message > svg {
	margin-top: 13px !important;
}

.ph-doctor-sidebar__form .ph-appt-field--message textarea {
	min-height: 95px !important;

	padding-top: 14px !important;

	resize: vertical !important;
}


/* ==========================================================================
   BOTTOM
   ========================================================================== */

.ph-doctor-sidebar__form .ph-appt-form__bottom {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 12px 0 0 !important;
	padding: 0 !important;
}


/* ==========================================================================
   BOOK APPOINTMENT BUTTON
   ========================================================================== */

.ph-doctor-sidebar__form .ph-appt-submit {
	position: relative !important;

	display: flex !important;

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

	gap: 8px !important;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	height: 52px !important;
	min-height: 52px !important;

	margin: 0 !important;
	padding: 0 16px !important;

	border: 0 !important;

	border-radius: 12px !important;

	background:
		linear-gradient(
			135deg,
			#075cf4 0%,
			#176fff 100%
		) !important;

	box-shadow:
		0 12px 25px rgba(7, 92, 244, .25) !important;

	color: #ffffff !important;

	font-family: inherit !important;

	font-size: 10px !important;
	font-weight: 800 !important;

	line-height: 1 !important;

	text-align: center !important;

	text-transform: uppercase !important;

	cursor: pointer !important;

	visibility: visible !important;
	opacity: 1 !important;

	overflow: visible !important;

	box-sizing: border-box !important;
}

.ph-doctor-sidebar__form .ph-appt-submit span {
	display: inline-block !important;

	color: #ffffff !important;

	font-size: 10px !important;
	font-weight: 800 !important;

	visibility: visible !important;
	opacity: 1 !important;
}

.ph-doctor-sidebar__form .ph-appt-submit svg {
	display: block !important;

	width: 15px !important;
	height: 15px !important;

	flex: 0 0 15px !important;

	fill: none !important;

	stroke: #ffffff !important;
	stroke-width: 1.8 !important;

	visibility: visible !important;
	opacity: 1 !important;
}

.ph-doctor-sidebar__form .ph-appt-submit:hover {
	background:
		linear-gradient(
			135deg,
			#064fd3,
			#1264e9
		) !important;
}


/* ==========================================================================
   REMOVE PRIORITY DECORATION IN SIDEBAR
   ========================================================================== */

.ph-doctor-sidebar__form .ph-appt-priority {
	display: none !important;
}


/* ==========================================================================
   AJAX RESPONSE
   ========================================================================== */

.ph-doctor-sidebar__form .ph-appt-response {
	display: block !important;

	width: 100% !important;

	margin-top: 10px !important;

	color: #264c80 !important;

	font-size: 10px !important;

	line-height: 1.45 !important;
}


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

.ph-doctor-sidebar__form .ph-appt-honeypot {
	position: absolute !important;

	left: -99999px !important;

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

	overflow: hidden !important;
}


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

@media (max-width: 900px) {

	.ph-doctor-sidebar {
		position: static !important;
		top: auto !important;
	}

	.ph-doctor-sidebar__form {
		max-width: 620px !important;
	}
}


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

@media (max-width: 600px) {

	.ph-doctor-sidebar__form {
		max-width: 100% !important;
	}

	.ph-doctor-sidebar__form .ph-appt-form-card {
		padding: 22px 16px 18px !important;

		border-radius: 18px !important;
	}

	.ph-doctor-sidebar__form
	.ph-appt-form-card__header h2 {
		font-size: 27px !important;
	}
}