/**
 * Doctor AK Portal — Doctors directory grid + public profile view.
 *
 * Loaded together with doctor-ak-auth.css, which provides the shared design
 * tokens (--dak-primary, --dak-border, etc.), button primitives
 * (.dak-button*), and the defensive text-transform/letter-spacing reset.
 */

.dak-directory {
	margin: 0 auto !important;
	padding: 2rem 1.5rem !important;
}

.dak-directory-header {
	text-align: center !important;
	margin-bottom: 2rem !important;
}

.dak-directory-header h1 {
	font-size: var( --dak-text-3xl, 1.75rem ) !important;
	font-weight: 800 !important;
	color: var( --dak-text ) !important;
	margin: 0 0 0.5rem !important;
}

.dak-directory-header p {
	color: var( --dak-muted ) !important;
	margin: 0 !important;
	font-size: var( --dak-text-lg, 1rem ) !important;
}

/* [doctors_directory]'s own hero banner — matches the home page's own hero
   banner (.dak-home-hero-banner in doctor-ak-home.css): the bundled photo
   (Doctors_Directory::HERO_BANNER_IMAGE_PATH) full-bleed behind the
   heading, a dark tinted gradient over it for contrast, white text sitting
   directly on top rather than a separate light card off to the side.
   (.dak-directory-header above is a separate, plain centered heading also
   used by the home page's "Consult Top Doctors Online" section —
   untouched, this page just doesn't use it any more.) */
.dak-directory-hero {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	min-height: 400px !important;
	margin: -2rem -1.5rem 2rem !important;
	padding: 2.5rem 1.5rem !important;
	background: linear-gradient( 135deg, var( --dak-secondary ) 0%, var( --dak-primary-dark ) 100% ) !important;
	overflow: hidden !important;
}

.dak-directory-hero-media {
	position: absolute !important;
	inset: 0 !important;
}

.dak-directory-hero-media img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 78% 25% !important;
}

.dak-directory-hero-overlay {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(
		100deg,
		rgba( 6, 20, 12, 0.94 ) 0%,
		rgba( 7, 28, 22, 0.88 ) 30%,
		rgba( 14, 45, 35, 0.6 ) 52%,
		rgba( 22, 182, 165, 0.32 ) 78%,
		rgba( 22, 182, 165, 0.22 ) 100%
	) !important;
}

.dak-directory-hero-content {
	position: relative !important;
	z-index: 1 !important;
	max-width: 46ch !important;
}

.dak-directory-hero-content h1 {
	margin: 0.5rem 0 0.6rem !important;
	font-size: var( --dak-text-3xl, 2.5rem ) !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	color: #fff !important;
	text-shadow: 0 2px 10px rgba( 0, 0, 0, 0.5 ) !important;
}

.dak-directory-hero-accent {
	color: #7fd3ab !important;
}

.dak-directory-hero-content p {
	margin: 0 !important;
	max-width: 42ch !important;
	color: rgba( 255, 255, 255, 0.92 ) !important;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.45 ) !important;
	font-size: var( --dak-text-lg, 1rem ) !important;
}

/* Same mobile treatment as the home page's own hero banner — let the
   content dictate the height instead of forcing 400px on a phone screen. */
@media ( max-width: 720px ) {
	.dak-directory-hero {
		min-height: 0 !important;
	}

	.dak-directory-hero-content {
		max-width: none !important;
	}
}

/* Sidebar (Specialties + Availability filters) + main column (toolbar,
   results count, doctor list) layout. Sidebar is a fixed column since its
   content (a short specialities list and four checkboxes) never needs to
   flex; the main column takes whatever's left and can shrink below its
   content's natural width (min-width: 0) — without that, the search input
   and doctor cards inside it would force the whole layout wider than the
   viewport instead of wrapping/eliding. Stacks on narrow screens (see the
   breakpoint below), sidebar first. */
.dak-directory-layout {
	display: grid !important;
	grid-template-columns: 240px 1fr !important;
	align-items: start !important;
	gap: 2rem !important;
}

.dak-directory-sidebar {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.75rem !important;
	position: sticky !important;
	top: 1.5rem !important;
}

.dak-directory-main {
	min-width: 0 !important;
}

@media ( max-width: 900px ) {
	.dak-directory-layout {
		grid-template-columns: 1fr !important;
	}

	.dak-directory-sidebar {
		position: static !important;
	}
}

.dak-directory-sidebar-heading {
	display: block !important;
	margin-bottom: 0.85rem !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var( --dak-muted ) !important;
}

/* Specialties list — one button per speciality (data-spec-filter, see
   initSpecChips-equivalent wiring in doctor-ak-directory.js), styled as a
   vertical filter list instead of the old horizontal chip row. */
.dak-directory-specialty-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.15rem !important;
}

.dak-directory-specialty-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.5rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.55rem 0.7rem !important;
	border: 0 !important;
	border-radius: var( --dak-radius-sm ) !important;
	background: none !important;
	color: var( --dak-text ) !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	text-align: left !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.dak-directory-specialty-item:hover {
	background: var( --dak-bg-subtle ) !important;
}

.dak-directory-specialty-item.is-active {
	background: var( --dak-primary ) !important;
	color: #fff !important;
	font-weight: 700 !important;
}

.dak-directory-specialty-count {
	flex: 0 0 auto !important;
	color: var( --dak-muted ) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
}

.dak-directory-specialty-item.is-active .dak-directory-specialty-count {
	color: rgba( 255, 255, 255, 0.85 ) !important;
}

.dak-directory-specialty-extra.dak-hidden {
	display: none !important;
}

.dak-directory-specialties-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.3rem !important;
	margin-top: 0.4rem !important;
	padding: 0.3rem 0.7rem 0.3rem 0 !important;
	border: 0 !important;
	background: none !important;
	color: var( --dak-primary-dark ) !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
}

.dak-directory-specialties-toggle svg {
	width: 13px !important;
	height: 13px !important;
	transition: transform 0.15s ease !important;
}

.dak-directory-specialties-toggle.is-expanded svg {
	transform: rotate( 180deg ) !important;
}

/* Availability/gender filters — real checkbox visuals over the existing
   button-based on/off toggles (initTogglePill() in doctor-ak-directory.js
   already flips these between aria-pressed="true"/"false"; only the visual
   language changed here, not the interaction). */
.dak-directory-filter-checkbox {
	display: flex !important;
	align-items: center !important;
	gap: 0.65rem !important;
	margin-bottom: 0.75rem !important;
	font-size: 0.9rem !important;
	color: var( --dak-text ) !important;
	cursor: pointer !important;
}

.dak-directory-filter-checkbox:last-child {
	margin-bottom: 0 !important;
}

.dak-directory-checkbox-box {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	padding: 0 !important;
	border: 1.5px solid var( --dak-border ) !important;
	border-radius: 4px !important;
	background: var( --dak-bg-card ) !important;
	color: transparent !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.dak-directory-checkbox-box svg {
	width: 11px !important;
	height: 11px !important;
	transform: none !important;
}

.dak-directory-checkbox-box[aria-pressed='true'] {
	background: var( --dak-primary ) !important;
	border-color: var( --dak-primary ) !important;
	color: #fff !important;
}

/* Toolbar: search + Near me + sort, all on one row at typical desktop
   widths, wrapping to a stacked column on narrower ones. */
.dak-directory-toolbar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.75rem !important;
	margin-bottom: 1rem !important;
}

.dak-directory-results-count {
	margin: 0 0 1.25rem !important;
	color: var( --dak-muted ) !important;
	font-size: 0.9rem !important;
}

.dak-directory-sort-field {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	flex: 0 0 auto !important;
}

.dak-directory-sort-label {
	color: var( --dak-muted ) !important;
	font-size: 0.9rem !important;
	white-space: nowrap !important;
}

.dak-directory-search {
	position: relative !important;
	flex: 2 1 220px !important;
	min-width: 0 !important;
}

#dak-directory-sort {
	width: auto !important;
	min-width: 0 !important;
}

.dak-directory-search-icon {
	position: absolute !important;
	top: 50% !important;
	left: 0.85rem !important;
	transform: translateY( -50% ) !important;
	width: 1.1rem !important;
	height: 1.1rem !important;
	color: var( --dak-muted ) !important;
	pointer-events: none !important;
}

.dak-directory-search input[type='search'] {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.65rem 0.85rem 0.65rem 2.4rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-sm ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font-size: 0.95rem !important;
}

.dak-directory-search input[type='search']:focus {
	outline: none !important;
	border-color: var( --dak-primary ) !important;
	box-shadow: 0 0 0 3px var( --dak-primary-tint ) !important;
}

#dak-directory-sort {
	box-sizing: border-box !important;
	padding: 0.65rem 0.85rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-sm ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font-size: 0.95rem !important;
}

@media ( max-width: 640px ) {
	.dak-directory-search,
	.dak-directory-sort-field {
		flex-basis: 100% !important;
	}
}

/* Near me — the one quick-filter pill still styled this way (Video
   Consultation and Availability moved into the sidebar as checkboxes above;
   see initTogglePill() in doctor-ak-directory.js for all of their shared
   on/off wiring). */
.dak-directory-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	padding: 0.5rem 0.9rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 999px !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.dak-directory-pill svg {
	width: 15px !important;
	height: 15px !important;
	flex-shrink: 0 !important;
}

.dak-directory-pill:hover {
	border-color: var( --dak-primary ) !important;
}

.dak-directory-pill.is-active {
	background: var( --dak-primary ) !important;
	border-color: var( --dak-primary ) !important;
	color: #fff !important;
}

/* Near me — shows while the browser's location request is in flight, and a
   one-line message beneath the pills when it can't be used. */
.dak-directory-pill.is-detecting {
	opacity: 0.6 !important;
	cursor: progress !important;
}

.dak-directory-nearme-status {
	flex-basis: 100% !important;
	margin: 0.2rem 0 0 !important;
	font-size: 0.85rem !important;
	color: var( --dak-muted ) !important;
}

/* .dak-hidden sets display: none !important at the same specificity and this
   stylesheet loads later, so an explicit rule keeps the message hideable. */
.dak-directory-nearme-status.dak-hidden {
	display: none !important;
}

.dak-directory-grid {
	display: grid !important;
	grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) ) !important;
	gap: 1.5rem !important;
}

.dak-doctor-card.dak-hidden {
	display: none !important;
}

.dak-doctor-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 0.5rem !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	box-shadow: var( --dak-shadow ) !important;
	padding: 1.5rem 1.25rem !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.dak-doctor-card:hover {
	transform: translateY( -3px ) !important;
	box-shadow: var( --dak-shadow-hover ) !important;
	border-color: var( --dak-primary-tint ) !important;
}

.dak-doctor-card-badge {
	position: absolute !important;
	top: 0.9rem !important;
	right: 0.9rem !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	padding: 0.25rem 0.65rem !important;
	border: 1px solid var( --dak-tint-success-text, var( --dak-primary-dark ) ) !important;
	border-radius: 999px !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-tint-success-text, var( --dak-primary-dark ) ) !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
}

.dak-doctor-card-badge svg {
	width: 12px !important;
	height: 12px !important;
	flex-shrink: 0 !important;
}

/* Wraps the name + Available badge together — in grid view this is just a
   centered flex row and the badge escapes it entirely (position: absolute,
   still anchored to .dak-doctor-card's corner as before, since absolute
   positioning looks past its own DOM parent to the nearest positioned
   ancestor). List view is what actually needs this wrapper: there, the
   badge switches to sitting inline right next to the name instead (see
   below) — anchoring it to the whole card's top-right corner in that
   layout is what put it on top of the Book Appointment button, since the
   actions column sits in that exact corner once the card is a row instead
   of a stack. */
.dak-doctor-card-name-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
}

.dak-directory-grid-list .dak-doctor-card-name-row {
	justify-content: flex-start !important;
}

.dak-directory-grid-list .dak-doctor-card-badge {
	position: static !important;
}

/* .dak-avatar base rules (normally defined in doctor-ak-dashboard.css, which
   isn't loaded on these public-facing pages) */
.dak-avatar {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
}

.dak-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.dak-avatar-sm {
	width: 36px !important;
	height: 36px !important;
}

.dak-avatar-sm svg {
	width: 16px !important;
	height: 16px !important;
}

.dak-avatar-lg {
	width: 84px !important;
	height: 84px !important;
	margin-bottom: 0.25rem !important;
}

.dak-avatar-lg svg {
	width: 40px !important;
	height: 40px !important;
}

/* Groups name/specialties/experience/location as one flex item (separate
   from the avatar and the actions button), so list view (below) can lay the
   card out as a single row — avatar, this info column, actions — without
   each of these becoming its own column. */
.dak-doctor-card-info {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.5rem !important;
	width: 100% !important;
}

.dak-doctor-card-name {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	margin: 0 !important;
}

.dak-doctor-card-specialties {
	justify-content: left !important;
}

.dak-doctor-card-experience {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.4rem !important;
	margin: 0 !important;
	font-size: 0.9rem !important;
	color: var( --dak-muted ) !important;
	text-align: center !important;
}

.dak-doctor-card-experience svg {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0 !important;
	color: var( --dak-secondary ) !important;
}

.dak-doctor-card-location {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	gap: 0.35rem !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	color: var( --dak-muted ) !important;
	text-align: center !important;
}

.dak-doctor-card-location .dak-location-icon {
	display: inline-flex !important;
	flex-shrink: 0 !important;
	width: 14px !important;
	height: 14px !important;
	margin-top: 0.15rem !important;
	color: var( --dak-secondary ) !important;
}

.dak-doctor-card-location .dak-location-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-doctor-card-actions {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	width: 100% !important;
	margin-top: 0.5rem !important;
}

.dak-doctor-card-actions .dak-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.4rem !important;
}

.dak-doctor-card-actions .dak-button svg {
	width: 18px !important;
	height: 18px !important;
}

/* Plain/text-only button — "View Profile" here, no border or fill of its
   own (unlike .dak-button-secondary's outline), since it's the third,
   least-emphasized action alongside Book Appointment/Video Consultation. */
.dak-button-ghost {
	background: none !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-button-ghost:hover {
	background: var( --dak-primary-tint ) !important;
}

/* The doctors page is always a list (the grid carries this class in
   doctors-directory.php): each card is a single row —
   avatar | info column | actions. */
.dak-directory-grid.dak-directory-grid-list {
	grid-template-columns: 1fr !important;
	gap: 0.85rem !important;
}

.dak-directory-grid-list .dak-doctor-card {
	flex-direction: row !important;
	align-items: center !important;
	text-align: left !important;
	gap: 1.25rem !important;
	padding: 1rem 1.5rem !important;
}

.dak-directory-grid-list .dak-avatar-lg {
	margin-bottom: 0 !important;
}

.dak-directory-grid-list .dak-doctor-card-info {
	align-items: flex-start !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.dak-directory-grid-list .dak-doctor-card-specialties,
.dak-directory-grid-list .dak-doctor-card-location,
.dak-directory-grid-list .dak-doctor-card-experience {
	justify-content: flex-start !important;
	text-align: left !important;
}

.dak-directory-grid-list .dak-doctor-card-actions {
	width: auto !important;
	flex: 0 0 auto !important;
	margin-top: 0 !important;
}

.dak-directory-grid-list .dak-doctor-card-actions .dak-button {
	width: auto !important;
	white-space: nowrap !important;
}

/* Video Consultation / View Profile only make sense as a stacked row of
   actions — list view's actions column has room for that (grid view stays
   to just the one primary "Book Appointment" button, matching the reference
   design), and outside the directory entirely (the home page's
   Featured_Doctors slider, which reuses this same card partial) they never
   apply since that never enters list mode either. */
.dak-doctor-card-video-btn,
.dak-doctor-card-profile-btn {
	display: none !important;
}

.dak-directory-grid-list .dak-doctor-card-video-btn,
.dak-directory-grid-list .dak-doctor-card-profile-btn {
	display: inline-flex !important;
}

@media ( max-width: 640px ) {
	.dak-directory-grid-list .dak-doctor-card {
		flex-direction: column !important;
		text-align: center !important;
	}

	.dak-directory-grid-list .dak-doctor-card-info {
		align-items: center !important;
	}

	.dak-directory-grid-list .dak-doctor-card-name-row,
	.dak-directory-grid-list .dak-doctor-card-specialties,
	.dak-directory-grid-list .dak-doctor-card-location,
	.dak-directory-grid-list .dak-doctor-card-experience {
		justify-content: center !important;
		text-align: center !important;
	}

	.dak-directory-grid-list .dak-doctor-card-actions {
		width: 100% !important;
	}

	.dak-directory-grid-list .dak-doctor-card-actions .dak-button {
		width: 100% !important;
	}
}

/* Pagination — see initPagination()/renderPagination() in
   doctor-ak-directory.js. Hidden entirely whenever everything fits on one
   page (renderPagination() adds .dak-hidden to the <nav> itself then). */
.dak-directory-pagination {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	margin-top: 2.5rem !important;
}

/* Same specificity-tie fix as .dak-directory-nearme-status.dak-hidden
   above — this stylesheet loads after doctor-ak-auth.css's shared
   .dak-hidden, so without this the pagination nav's own `display: flex
   !important` would win the tie and it would never actually hide. */
.dak-directory-pagination.dak-hidden {
	display: none !important;
}

.dak-directory-page-nav,
.dak-directory-page-number {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 38px !important;
	height: 38px !important;
	padding: 0 0.6rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-sm ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.dak-directory-page-nav svg {
	width: 16px !important;
	height: 16px !important;
}

.dak-directory-page-nav:hover:not( :disabled ),
.dak-directory-page-number:hover:not( .is-active ) {
	border-color: var( --dak-primary ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-directory-page-nav:disabled {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

.dak-directory-page-numbers {
	display: flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
}

.dak-directory-page-number.is-active {
	background: var( --dak-primary ) !important;
	border-color: var( --dak-primary ) !important;
	color: #fff !important;
}

.dak-directory-page-ellipsis {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 24px !important;
	color: var( --dak-muted ) !important;
}

/* Specialty tags — also used on the dashboard (doctor-ak-dashboard.css),
   redefined here since that stylesheet isn't loaded on these public pages. */
.dak-specialty-tags {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.35rem !important;
}

.dak-specialty-tag {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0.2rem 0.6rem !important;
	border-radius: 999px !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
}

/* Public profile view ([doctor_profile_view]) */

/* Same sticky header (.dak-site-header, position: sticky, see
   doctor-ak-site-header.css) every other public page accounts for via its
   own locally-scoped offset variable (--pub-offset in doctor-ak-public.css,
   --bk-offset in doctor-ak-booking-page.css) — this page gets its own for
   the same reason: anchor-scrolled section headings and the sticky sidebar
   both need to clear it, not just land right at the viewport's top edge. */
.dak-profile-view {
	--dak-profile-offset: 96px;
}

/* Several components on this page set their own `display: ... !important`
   (.dak-specialty-tag, .dak-profile-radio-row, .dak-profile-booking-fee) in
   this file, which loads after doctor-ak-auth.css — at equal specificity
   that beats the shared .dak-hidden utility, so "hidden" tags/services never
   actually hid and the "Show all"/search controls appeared to do nothing.
   The extra class here out-ranks them all. */
.dak-profile-view .dak-hidden {
	display: none !important;
}

/* The Experience section wraps several cards in one anchor target — give
   them the same spacing .dak-profile-main gives its direct children. */
#dak-profile-experience {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
}

.dak-profile-unavailable {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.75rem !important;
	max-width: 420px !important;
	margin: 3rem auto !important;
	padding: 2.5rem 2rem !important;
	text-align: center !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	box-shadow: var( --dak-shadow ) !important;
}

.dak-profile-unavailable-icon {
	display: inline-flex !important;
	width: 2.5rem !important;
	height: 2.5rem !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-unavailable-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-profile-unavailable h1 {
	margin: 0 !important;
	font-size: 1.25rem !important;
	color: var( --dak-text ) !important;
}

.dak-profile-unavailable p {
	margin: 0 !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-section-nav {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.4rem !important;
	margin-bottom: 1.5rem !important;
}

.dak-profile-section-nav a {
	padding: 0.45rem 0.9rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 999px !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: border-color 0.15s ease, color 0.15s ease !important;
}

.dak-profile-section-nav a:hover,
.dak-profile-section-nav a:focus-visible {
	border-color: var( --dak-primary ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-profile-about-text {
	margin: 0 !important;
	max-width: 65ch !important;
	color: var( --dak-text ) !important;
	line-height: 1.65 !important;
	white-space: pre-line !important;
}

.dak-profile-qualifications-list {
	margin: 0 !important;
	padding: 0 0 0 1.1rem !important;
	color: var( --dak-text ) !important;
	line-height: 1.6 !important;
}

.dak-profile-qualifications-list li {
	margin-bottom: 0.3rem !important;
}

/* Reviews sit after the booking-relevant cards and read a notch quieter —
   same card shell, lighter shadow, no accent — matching the spec's "visually
   secondary to clinical information and booking." */
.dak-profile-card-secondary {
	box-shadow: none !important;
	background: var( --dak-bg-subtle ) !important;
}

.dak-profile-booking-summary {
	margin-bottom: 0.75rem !important;
}

.dak-profile-breadcrumb {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.4rem !important;
	margin-bottom: 1.25rem !important;
	font-size: 0.85rem !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-breadcrumb a {
	color: var( --dak-muted ) !important;
	text-decoration: none !important;
}

.dak-profile-breadcrumb a:hover {
	color: var( --dak-primary-dark ) !important;
	text-decoration: underline !important;
}

.dak-profile-breadcrumb span:last-child {
	color: var( --dak-text ) !important;
	font-weight: 600 !important;
}

.dak-profile-header-card {
	display: flex !important;
	align-items: flex-start !important;
	gap: 1.5rem !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	box-shadow: var( --dak-shadow ) !important;
	padding: 1.75rem !important;
	margin-bottom: 1.5rem !important;
}

/* Single blog post ([blog_single]) — reuses .dak-profile-header-card's
   card/shadow styling, just stacked vertically instead of avatar+info
   side-by-side. */
.dak-blog-single-card {
	flex-direction: column !important;
	align-items: stretch !important;
}

.dak-blog-single-image {
	width: 100% !important;
	height: auto !important;
	border-radius: var( --dak-radius-lg ) !important;
	margin: 1rem 0 !important;
}

.dak-profile-header-card .dak-avatar-lg {
	width: 100px !important;
	height: 100px !important;
	margin-bottom: 0 !important;
	flex: 0 0 auto !important;
	font-size: 1.6rem !important;
	font-weight: 700 !important;
}

.dak-profile-header-main {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.65rem !important;
}

.dak-profile-header-main h1 {
	font-size: 1.6rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	margin: 0 !important;
}

.dak-profile-qualification {
	margin: 0.3rem 0 0 !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-tagline {
	margin: 0.5rem 0 0 !important;
	font-size: 0.95rem !important;
	color: var( --dak-text ) !important;
	white-space: pre-line !important;
}

.dak-profile-expertise {
	margin: 0 !important;
	color: var( --dak-text ) !important;
	white-space: pre-line !important;
}

/* Rendered rich-text HTML (bold/italic/lists/links) from the admin
   Description field's formatting toolbar — see doctor-ak-rich-text-editor.js
   and templates/directory/service-profile-view.php. Real markup already
   carries its own line breaks, so this cancels .dak-profile-expertise's
   plain-text white-space: pre-line (meant for the doctor profile's
   free-text "Other expertise" field, not HTML). */
.dak-rich-text-content {
	white-space: normal !important;
}

.dak-rich-text-content p {
	margin: 0 0 0.75em !important;
}

.dak-rich-text-content p:last-child {
	margin-bottom: 0 !important;
}

.dak-rich-text-content ul,
.dak-rich-text-content ol {
	margin: 0 0 0.75em !important;
	padding-left: 1.4em !important;
}

.dak-rich-text-content a {
	color: var( --dak-primary-dark ) !important;
}

.dak-profile-stats {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1.5rem !important;
	margin-top: 0.25rem !important;
}

.dak-profile-stat {
	display: flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	font-size: 0.8rem !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-stat strong {
	color: var( --dak-text ) !important;
	font-size: 0.9rem !important;
}

.dak-profile-stat-icon {
	display: inline-flex !important;
	width: 1.1rem !important;
	height: 1.1rem !important;
	color: var( --dak-secondary ) !important;
}

.dak-profile-stat-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-profile-stat-link {
	text-decoration: none !important;
	border-radius: var( --dak-radius-sm ) !important;
	cursor: pointer !important;
}

.dak-profile-stat-link:hover {
	color: var( --dak-primary-dark ) !important;
}

.dak-profile-stat-link:hover strong {
	color: var( --dak-primary-dark ) !important;
}

.dak-profile-header-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.65rem !important;
	margin-top: 0.5rem !important;
}

.dak-profile-header-actions .dak-button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
}

.dak-profile-header-actions .dak-button svg {
	width: 1rem !important;
	height: 1rem !important;
}

.dak-profile-layout {
	display: grid !important;
	grid-template-columns: 1fr 320px !important;
	gap: 1.5rem !important;
	align-items: start !important;
}

.dak-profile-main {
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
}

.dak-profile-card {
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	box-shadow: var( --dak-shadow ) !important;
	padding: 1.5rem !important;
}

.dak-profile-card h2 {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	margin: 0 0 1rem !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-card-title-icon {
	display: inline-flex !important;
	width: 1rem !important;
	height: 1rem !important;
	color: var( --dak-secondary ) !important;
}

.dak-profile-card-title-icon svg {
	width: 100% !important;
	height: 100% !important;
}

/* Scroll offsets for the sticky header — see --dak-profile-offset, set on
   .dak-profile-view further down, next to the rest of this page's
   accessibility/layout rules. */
#dak-profile-overview,
#dak-profile-clinics-fees,
#dak-profile-experience,
#dak-profile-reviews {
	scroll-margin-top: var( --dak-profile-offset, 96px ) !important;
}

.dak-profile-clinic-row {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	padding: 1rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
}

/* Selectable rows built from a real <input type="radio"> (the "pick a
   clinic/visit type/service" picker — see templates/directory/
   doctor-profile-view.php + doctor-ak-doctor-profile-clinics.js). The
   .dak-profile-clinic-row shell above stays shared with the read-only
   "Available At"/"Provided By" uses of this same row elsewhere — only rows
   additionally carrying .dak-profile-radio-row get the pointer/selected-
   state treatment below. */
.dak-profile-radio-row {
	display: flex !important;
	align-items: flex-start !important;
	position: relative !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

/* The real input stays in the document/tab order (screen readers and
   keyboard users need it) but is visually replaced by the decorative dot
   below — a near-zero, non-display:none box keeps it out of the way
   without removing it from accessibility. */
.dak-profile-radio-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.dak-profile-radio-row:hover {
	border-color: var( --dak-primary ) !important;
}

.dak-profile-radio-row:focus-within {
	outline: 2px solid var( --dak-primary ) !important;
	outline-offset: 2px !important;
}

/* Selected state is never color alone: border + shadow + tint background,
   the filled dot below, AND a bold-weight/checkmark change on the row's own
   title (see .dak-profile-radio-row.is-selected .dak-profile-clinic-info
   strong::before further down) — toggled by doctor-ak-doctor-profile-
   clinics.js on the radio group's native `change` event. */
.dak-profile-radio-row.is-selected {
	border-color: var( --dak-primary ) !important;
	box-shadow: 0 0 0 1px var( --dak-primary ) !important;
	background: var( --dak-primary-tint ) !important;
}

.dak-profile-clinic-main {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.75rem !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

.dak-profile-clinic-radio {
	display: none;
}

.dak-profile-radio-row .dak-profile-clinic-radio {
	display: block !important;
	flex: 0 0 auto !important;
	width: 18px !important;
	height: 18px !important;
	margin-top: 2px !important;
	border-radius: 50% !important;
	border: 2px solid var( --dak-border ) !important;
	position: relative !important;
	transition: border-color 0.15s ease !important;
}

.dak-profile-radio-row:hover .dak-profile-clinic-radio {
	border-color: var( --dak-primary ) !important;
}

.dak-profile-radio-row.is-selected .dak-profile-clinic-radio {
	border-color: var( --dak-primary ) !important;
}

.dak-profile-radio-row.is-selected .dak-profile-clinic-radio::after {
	content: '' !important;
	position: absolute !important;
	inset: 3px !important;
	border-radius: 50% !important;
	background: var( --dak-primary ) !important;
}

/* The non-color selected cue — a checkmark ahead of the row's own title,
   so selection reads via shape+icon+weight too, not border/background tint
   alone. */
.dak-profile-radio-row .dak-profile-clinic-info strong {
	font-weight: 600 !important;
}

.dak-profile-radio-row.is-selected .dak-profile-clinic-info strong {
	font-weight: 700 !important;
}

.dak-profile-radio-row.is-selected .dak-profile-clinic-info strong::before {
	content: '✓ ' !important;
	color: var( --dak-primary-dark ) !important;
}

/* The "pick a visit type / clinic / service" sequence itself. */
.dak-profile-picker {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.25rem !important;
}

.dak-profile-picker-group {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.6rem !important;
}

.dak-profile-picker-group legend {
	padding: 0 0 0.3rem !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-picker-group[hidden],
.dak-profile-clinic-static[hidden] {
	display: none !important;
}

/* The single-clinic / video info display when there's nothing to actually
   choose (one physical clinic, or the video option once selected) — same
   shell as a picker row, minus the radio affordance. */
.dak-profile-clinic-static {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 1rem !important;
	padding: 1rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
	background: var( --dak-bg-subtle ) !important;
}

.dak-profile-service-search {
	margin: 0.2rem 0 0.4rem !important;
}

.dak-profile-service-search-input {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0.6rem 0.85rem !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font-size: 0.9rem !important;
}

.dak-profile-service-search-input:focus-visible {
	outline: 2px solid var( --dak-primary ) !important;
	outline-offset: 1px !important;
}

.dak-profile-service-options {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.6rem !important;
}

.dak-profile-service-no-results {
	color: var( --dak-muted ) !important;
	font-size: 0.85rem !important;
	margin: 0.25rem 0 !important;
}

.dak-profile-clinic-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.3rem !important;
	min-width: 0 !important;
}

.dak-profile-clinic-info strong {
	font-size: 0.95rem !important;
	color: var( --dak-text ) !important;
}

/* "Provided By" card on the [service_profile_view] page (see
   templates/directory/service-profile-view.php) — a horizontal
   avatar+name row instead of .dak-profile-clinic-info's default stack. */
/* "Doctors & Pricing" list on the [service_profile_view] page — grouped by
   clinic (see Service_Profile_View::build_clinic_groups()), each clinic
   with the doctors offering the service there nested underneath. */
.dak-service-clinic-groups {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
}

.dak-service-clinic-group.dak-hidden {
	display: none !important;
}

.dak-service-clinic-group-header {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.6rem !important;
	margin-bottom: 0.75rem !important;
	padding-bottom: 0.5rem !important;
	border-bottom: 1px solid var( --dak-border ) !important;
}

.dak-service-clinic-group-header .dak-location-icon {
	flex: 0 0 auto !important;
	margin-top: 0.15rem !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-service-clinic-group-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.1rem !important;
	min-width: 0 !important;
}

.dak-service-clinic-group-info strong {
	font-size: 1rem !important;
	color: var( --dak-text ) !important;
}

.dak-service-clinic-group-doctors {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.75rem !important;
}

.dak-service-doctor-offer {
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-md ) !important;
	padding: 1rem !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, background 0.15s ease !important;
}

.dak-service-doctor-offer:hover {
	border-color: var( --dak-primary ) !important;
}

.dak-service-doctor-offer:focus-visible {
	outline: 2px solid var( --dak-primary ) !important;
	outline-offset: 2px !important;
}

.dak-service-doctor-offer.is-selected {
	border-color: var( --dak-primary ) !important;
	background: var( --dak-primary-tint ) !important;
}

.dak-service-doctor-offer.dak-hidden {
	display: none !important;
}

.dak-service-doctor-offer-header {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
}

.dak-service-doctor-offer-select {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	cursor: pointer !important;
}

.dak-service-doctor-offer-select input[type='radio'] {
	width: 1.1rem !important;
	height: 1.1rem !important;
	margin: 0 !important;
	cursor: pointer !important;
	accent-color: var( --dak-primary ) !important;
}

.dak-service-doctor-offer-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.15rem !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.dak-service-doctor-offer-specialty {
	font-size: 0.78rem !important;
	color: var( --dak-muted ) !important;
}

.dak-service-doctor-offer-price {
	flex: 0 0 auto !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
}

/* Filter/sort toolbar above the doctor list. */
.dak-service-doctor-filters {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.85rem !important;
	margin-bottom: 1.25rem !important;
	padding-bottom: 1.25rem !important;
	border-bottom: 1px solid var( --dak-border ) !important;
}

.dak-service-doctor-filters .dak-field {
	flex: 1 1 180px !important;
	margin-bottom: 0 !important;
}

.dak-service-doctor-offer-clinics {
	margin-top: 0.85rem !important;
}

.dak-profile-clinic-info-link {
	color: var( --dak-text ) !important;
	text-decoration: none !important;
}

.dak-profile-clinic-info-link:hover {
	color: var( --dak-primary ) !important;
	text-decoration: underline !important;
}

.dak-profile-clinic-meta {
	display: flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
	font-size: 0.8rem !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-clinic-meta .dak-location-icon {
	display: inline-flex !important;
	flex-shrink: 0 !important;
	width: 0.9rem !important;
	height: 0.9rem !important;
	color: var( --dak-secondary ) !important;
}

.dak-profile-clinic-meta .dak-location-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-profile-clinic-fee {
	flex: 0 0 auto !important;
	text-align: right !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.15rem !important;
}

.dak-profile-clinic-fee span {
	font-size: 0.7rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-clinic-fee strong {
	font-size: 1rem !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-profile-awards {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.6rem !important;
}

.dak-profile-awards li {
	display: flex !important;
	align-items: center !important;
	gap: 0.6rem !important;
	padding: 0.7rem 0.9rem !important;
	border-radius: var( --dak-radius-md ) !important;
	background: var( --dak-primary-tint ) !important;
}

.dak-profile-award-icon {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	width: 1.2rem !important;
	height: 1.2rem !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-profile-award-icon svg {
	width: 100% !important;
	height: 100% !important;
}

.dak-profile-award-title {
	flex: 1 1 auto !important;
	font-weight: 600 !important;
	color: var( --dak-text ) !important;
}

.dak-profile-award-year {
	flex: 0 0 auto !important;
	color: var( --dak-muted ) !important;
	font-size: 0.85rem !important;
}

.dak-profile-sidebar {
	position: sticky !important;
	top: calc( var( --dak-profile-offset, 96px ) + 1rem ) !important;
}

/* Fixed bottom booking bar — mobile only (see the 600px breakpoint below,
   which hides .dak-profile-sidebar and shows this instead). Sits above the
   page's own content but below any third-party floating widget (WhatsApp/
   chat) the live site adds outside this plugin — verify the exact stacking
   against those on the live page, since they aren't part of this
   stylesheet. */
.dak-profile-mobile-bar {
	display: none;
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 150 !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.75rem !important;
	padding: 0.75rem 1rem calc( 0.75rem + env( safe-area-inset-bottom, 0px ) ) !important;
	background: var( --dak-bg-card ) !important;
	border-top: 1px solid var( --dak-border ) !important;
	box-shadow: 0 -4px 16px rgba( 0, 0, 0, 0.08 ) !important;
}

.dak-profile-mobile-bar-summary {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	color: var( --dak-text ) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.dak-profile-mobile-bar .dak-button {
	flex: 0 0 auto !important;
}

.dak-profile-booking-card h2 {
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 1.15rem !important;
	color: var( --dak-text ) !important;
	margin: 0.5rem 0 0.35rem !important;
}

.dak-profile-booking-hint {
	color: var( --dak-muted ) !important;
	font-size: 0.85rem !important;
	margin: 0 0 1rem !important;
}

.dak-profile-booking-fee {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	border-top: 1px solid var( --dak-border ) !important;
	border-bottom: 1px solid var( --dak-border ) !important;
	padding: 0.75rem 0 !important;
	margin-bottom: 1rem !important;
	font-size: 0.88rem !important;
	color: var( --dak-muted ) !important;
}

.dak-profile-booking-fee strong {
	color: var( --dak-text ) !important;
	font-size: 1.05rem !important;
}

.dak-profile-booking-note {
	font-size: 0.75rem !important;
	color: var( --dak-muted ) !important;
	text-align: center !important;
	margin: 0.85rem 0 0 !important;
}

/* Service profile page's sidebar Book Appointment button — inert (scrolls
   to the doctor list instead of booking) until a doctor is selected below,
   see assets/js/doctor-ak-service-profile.js. */
.dak-button-disabled {
	opacity: 0.6 !important;
	cursor: default !important;
}

@media ( max-width: 860px ) {
	.dak-profile-layout {
		grid-template-columns: 1fr !important;
	}

	.dak-profile-sidebar {
		position: static !important;
	}
}

@media ( max-width: 600px ) {
	.dak-profile-view {
		/* Matches the header's own mobile-nav breakpoint (see
		   doctor-ak-site-header.css) — the sticky header is shorter once
		   collapsed to its single mobile row. */
		--dak-profile-offset: 72px;
		/* Reserves room at the bottom of the page so the fixed bottom
		   booking bar (below) never covers the last bit of content. */
		padding-bottom: 4.5rem !important;
	}

	.dak-profile-header-card {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}

	.dak-profile-stats {
		justify-content: center !important;
	}

	/* The header's own primary CTA is redundant with the fixed bottom bar
	   below on this narrow a screen — keep just the secondary "Call
	   Clinic" action here so the two don't compete. */
	.dak-profile-header-actions #dak-profile-header-cta {
		display: none !important;
	}

	.dak-profile-header-actions {
		justify-content: center !important;
		width: 100% !important;
	}

	.dak-profile-header-actions .dak-button {
		flex: 1 1 auto !important;
		justify-content: center !important;
	}

	/* The sidebar's own booking card is replaced by the fixed bottom bar at
	   this width — avoids showing the same CTA twice and frees up the
	   vertical space the sidebar panel would otherwise take. */
	.dak-profile-sidebar {
		display: none !important;
	}

	.dak-profile-mobile-bar {
		display: flex !important;
	}

	.dak-profile-clinic-row {
		flex-direction: column !important;
	}

	.dak-profile-clinic-fee {
		text-align: left !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 0.4rem !important;
	}
}

/* Compact portrait card — no longer used by [services_directory] itself
   (see .dak-home-service-row further down, which replaced it so that page
   matches the home page's own services list), but the exact same markup/
   classes are still what templates/directory/blog-card.php renders for the
   Blogs grid, so this stays. */
.dak-service-card {
	display: flex !important;
	flex-direction: column !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	box-shadow: var( --dak-shadow ) !important;
	overflow: hidden !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.dak-service-card:hover {
	transform: translateY( -3px ) !important;
	box-shadow: var( --dak-shadow-hover ) !important;
	border-color: var( --dak-primary-tint ) !important;
}

.dak-service-card-image {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	aspect-ratio: 16 / 10 !important;
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
	overflow: hidden !important;
}

.dak-service-card-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.dak-service-card-image svg {
	width: 42px !important;
	height: 42px !important;
}

.dak-service-card-body {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	padding: 1.25rem !important;
}

.dak-service-card-name {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	margin: 0 !important;
}

.dak-service-card-excerpt {
	margin: 0 !important;
	font-size: 0.88rem !important;
	color: var( --dak-muted ) !important;
	line-height: 1.5 !important;
}

.dak-service-card-price {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-size: 0.86rem !important;
	color: var( --dak-muted ) !important;
}

.dak-service-card-price strong {
	color: var( --dak-text ) !important;
	font-size: 1rem !important;
}

.dak-service-card-actions {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	margin-top: 0.25rem !important;
}

.dak-service-card-actions .dak-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.4rem !important;
}

.dak-service-card-actions .dak-button svg {
	width: 18px !important;
	height: 18px !important;
}

/* Services list — [services_directory]'s own page. Wide stacked rows
   (copy left, photo right) matching the home page's services section
   exactly (.dak-home-services-list/.dak-home-service-row* in
   doctor-ak-home.css) — redefined here since that stylesheet isn't loaded
   on this page. Rendered by templates/directory/home-service-card.php,
   the same partial the home page uses, not .dak-service-card above. */
.dak-home-services-list {
	display: flex !important;
	flex-direction: column !important;
	gap: var( --dak-space-5, 1.5rem ) !important;
}

.dak-home-service-row {
	display: grid !important;
	grid-template-columns: 1fr 360px !important;
	gap: var( --dak-space-6, 2rem ) !important;
	align-items: center !important;
	background: var( --dak-bg-card ) !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: var( --dak-radius-lg ) !important;
	padding: var( --dak-space-5, 1.5rem ) !important;
	box-shadow: var( --dak-shadow ) !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.dak-home-service-row:hover {
	transform: translateY( -3px ) !important;
	border-color: var( --dak-primary ) !important;
	box-shadow: var( --dak-shadow-hover ) !important;
}

.dak-home-service-row-body {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: var( --dak-space-3, 0.85rem ) !important;
	min-width: 0 !important;
}

/* The colored icon badge is a home-page-only flourish (doctor-ak-home.css
   turns it back on there). */
.dak-home-service-row-icon {
	display: none !important;
}

.dak-home-service-row-body h3 {
	margin: 0 !important;
	font-family: var( --dak-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif ) !important;
	font-size: var( --dak-text-xl, 1.375rem ) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	color: var( --dak-text ) !important;
}

.dak-home-service-row-body > p {
	margin: 0 !important;
	max-width: 60ch !important;
	font-size: var( --dak-text-md, 1rem ) !important;
	line-height: 1.55 !important;
	color: var( --dak-muted ) !important;
}

.dak-home-service-row-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var( --dak-space-2, 0.5rem ) !important;
}

.dak-home-service-row-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	padding: 0.35rem 0.8rem !important;
	border-radius: 999px !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-size: var( --dak-text-xs, 0.75rem ) !important;
	font-weight: 700 !important;
}

.dak-home-service-row-chip svg {
	display: block !important;
	width: 14px !important;
	height: 14px !important;
}

.dak-home-service-row-chip-category {
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
}

.dak-services-directory-search {
	margin-bottom: var( --dak-space-5, 2rem ) !important;
}

.dak-home-service-row-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.45rem !important;
	color: var( --dak-primary-dark ) !important;
	font-size: var( --dak-text-sm, 0.875rem ) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.dak-home-service-row-link svg {
	width: 16px !important;
	height: 16px !important;
	transition: transform 0.18s ease !important;
}

.dak-home-service-row:hover .dak-home-service-row-link svg {
	transform: translateX( 3px ) !important;
}

.dak-home-service-row-media {
	position: relative !important;
	overflow: hidden !important;
	height: 220px !important;
	border-radius: var( --dak-radius-md ) !important;
	background: linear-gradient( 165deg, var( --dak-primary-tint ) 0%, var( --dak-bg-subtle ) 100% ) !important;
}

.dak-home-service-row-media img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.dak-home-service-row-placeholder {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var( --dak-primary-dark ) !important;
	opacity: 0.35 !important;
}

.dak-home-service-row-placeholder svg {
	width: 56px !important;
	height: 56px !important;
}

@media ( max-width: 900px ) {
	.dak-home-service-row {
		grid-template-columns: 1fr !important;
		gap: var( --dak-space-4, 1rem ) !important;
	}

	.dak-home-service-row-media {
		order: -1 !important;
		height: 200px !important;
	}
}

/* ==========================================================================
   Blog — the Blog page ([blogs_directory]), a single article ([blog_single])
   and the shared article card (also on the home page). Everything is scoped
   to .dak-blog-* classes; !important for the same reason as the rest of this
   file (the theme / Elementor kit style bare headings, links and buttons).
   ========================================================================== */

.dak-blog-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect( 0, 0, 0, 0 ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.dak-blog-listing,
.dak-blog-single {
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 40px 24px 72px !important;
}

.dak-blog-listing *,
.dak-blog-single * {
	box-sizing: border-box !important;
}

.dak-blog-listing :focus-visible,
.dak-blog-single :focus-visible,
.dak-blog-grid :focus-visible {
	outline: 2px solid var( --dak-primary ) !important;
	outline-offset: 2px !important;
}

/* ---- Blog page: header ---------------------------------------------------- */

.dak-blog-listing-head {
	margin: 0 0 28px !important;
}

.dak-blog-listing-head h1 {
	margin: 0 0 8px !important;
	font-size: 2.25rem !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	color: var( --dak-text ) !important;
}

.dak-blog-listing-head p {
	max-width: 640px !important;
	margin: 0 !important;
	font-size: 1.0625rem !important;
	line-height: 1.6 !important;
	color: var( --dak-muted ) !important;
}

/* ---- Blog page: filter bar ------------------------------------------------ */

.dak-blog-filters {
	position: relative !important;
	display: grid !important;
	grid-template-columns: minmax( 0, 340px ) minmax( 0, 1fr ) !important;
	gap: 16px 32px !important;
	align-items: end !important;
	padding: 20px !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 14px !important;
	background: var( --dak-bg-card ) !important;
}

.dak-blog-search-label,
.dak-blog-topics-label {
	display: block !important;
	margin: 0 0 8px !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	color: var( --dak-text ) !important;
}

.dak-blog-search-field {
	position: relative !important;
}

.dak-blog-search-field svg {
	position: absolute !important;
	top: 50% !important;
	left: 14px !important;
	width: 18px !important;
	height: 18px !important;
	transform: translateY( -50% ) !important;
	color: var( --dak-muted ) !important;
	pointer-events: none !important;
}

.dak-blog-listing input[type='search'] {
	width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 14px 0 42px !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 10px !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font: inherit !important;
	font-size: 0.9375rem !important;
	box-shadow: none !important;
}

.dak-blog-listing input[type='search']::placeholder {
	color: var( --dak-muted ) !important;
	opacity: 1 !important;
}

.dak-blog-listing input[type='search']:focus {
	border-color: var( --dak-primary ) !important;
	outline: 2px solid var( --dak-primary-tint ) !important;
	outline-offset: 0 !important;
}

.dak-blog-chips {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
}

.dak-blog-chip,
.dak-blog-alltopics-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	min-height: 36px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 999px !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.dak-blog-chip:hover,
.dak-blog-alltopics-toggle:hover {
	border-color: var( --dak-primary ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-blog-chip.is-active,
.dak-blog-chip.is-active:hover {
	border-color: var( --dak-primary ) !important;
	background: var( --dak-primary ) !important;
	color: #fff !important;
	font-weight: 600 !important;
}

.dak-blog-chip[hidden] {
	display: none !important;
}

.dak-blog-alltopics-toggle svg {
	width: 16px !important;
	height: 16px !important;
	transition: transform 0.15s ease !important;
}

.dak-blog-alltopics-toggle[aria-expanded='true'] {
	border-color: var( --dak-primary ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-blog-alltopics-toggle[aria-expanded='true'] svg {
	transform: rotate( 180deg ) !important;
}

/* Opens right under the "All topics" button. */
.dak-blog-alltopics {
	position: relative !important;
}

.dak-blog-alltopics-panel {
	position: absolute !important;
	z-index: 30 !important;
	top: calc( 100% + 8px ) !important;
	left: 0 !important;
	width: 340px !important;
	max-width: calc( 100vw - 32px ) !important;
	padding: 12px !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 14px !important;
	background: var( --dak-bg-card ) !important;
	box-shadow: var( --dak-shadow-lg ) !important;
}

.dak-blog-alltopics-panel.is-flipped {
	left: auto !important;
	right: 0 !important;
}

/* Phones: the button can sit anywhere in the wrapped chip rows, so the
   panel spans the filter box instead (which is position: relative). */
@media ( max-width: 640px ) {
	.dak-blog-alltopics {
		position: static !important;
	}

	.dak-blog-alltopics-panel,
	.dak-blog-alltopics-panel.is-flipped {
		left: 16px !important;
		right: 16px !important;
		width: auto !important;
		max-width: none !important;
	}
}

.dak-blog-alltopics-panel[hidden] {
	display: none !important;
}

.dak-blog-listing .dak-blog-alltopics-panel input[type='search'] {
	height: 40px !important;
	padding-left: 12px !important;
}

.dak-blog-topic-list {
	max-height: 300px !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	overflow-y: auto !important;
	list-style: none !important;
}

.dak-blog-topic-list li {
	margin: 0 !important;
	padding: 0 !important;
}

.dak-blog-topic-list li[hidden] {
	display: none !important;
}

.dak-blog-topic-option {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	width: 100% !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 6px 10px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var( --dak-text ) !important;
	font: inherit !important;
	font-size: 0.9375rem !important;
	text-align: left !important;
	text-transform: none !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

.dak-blog-topic-option:hover {
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-text ) !important;
}

.dak-blog-topic-option.is-active {
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-weight: 600 !important;
}

.dak-blog-topic-count {
	flex: 0 0 auto !important;
	min-width: 26px !important;
	padding: 1px 8px !important;
	border-radius: 999px !important;
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-muted ) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-align: center !important;
}

.dak-blog-topic-empty {
	margin: 12px 4px 4px !important;
	font-size: 0.875rem !important;
	color: var( --dak-muted ) !important;
}

.dak-blog-topic-empty[hidden] {
	display: none !important;
}

/* ---- Blog page: results line, grid, empty state, load more --------------- */

.dak-blog-results-bar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px 16px !important;
	margin: 24px 0 20px !important;
}

.dak-blog-results-count {
	margin: 0 !important;
	font-size: 0.9375rem !important;
	color: var( --dak-muted ) !important;
}

.dak-blog-reset {
	margin: 0 !important;
	padding: 4px 0 !important;
	border: 0 !important;
	background: none !important;
	color: var( --dak-primary-dark ) !important;
	font: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	text-transform: none !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

.dak-blog-reset[hidden],
.dak-blog-noresults[hidden],
.dak-blog-more[hidden],
.dak-blog-grid[hidden] {
	display: none !important;
}

.dak-blog-noresults {
	padding: 48px 24px !important;
	border: 1px dashed var( --dak-border ) !important;
	border-radius: 14px !important;
	text-align: center !important;
}

.dak-blog-noresults h1,
.dak-blog-noresults h2 {
	margin: 0 0 8px !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
}

.dak-blog-noresults p {
	margin: 0 0 20px !important;
	color: var( --dak-muted ) !important;
}

.dak-blog-reset-btn,
.dak-blog-more-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 22px !important;
	border: 1px solid var( --dak-primary ) !important;
	border-radius: 10px !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-primary-dark ) !important;
	font: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

.dak-blog-reset-btn:hover,
.dak-blog-more-btn:hover {
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-blog-more {
	display: flex !important;
	justify-content: center !important;
	margin-top: 40px !important;
}

/* ---- Article card (Blog page, home page, related articles) --------------- */

.dak-blog-grid {
	display: grid !important;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
	gap: 28px 24px !important;
}

.dak-blog-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	overflow: hidden !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 14px !important;
	background: var( --dak-bg-card ) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.dak-blog-card[hidden] {
	display: none !important;
}

.dak-blog-card:hover {
	border-color: color-mix( in srgb, var( --dak-primary ) 35%, var( --dak-border ) ) !important;
	box-shadow: var( --dak-shadow-hover ) !important;
}

.dak-blog-card:focus-within {
	border-color: var( --dak-primary ) !important;
	box-shadow: 0 0 0 2px var( --dak-primary ) !important;
}

/* The title link covers the card, so it shouldn't draw its own ring too. */
.dak-blog-card .dak-blog-card-title a:focus-visible {
	outline: none !important;
}

.dak-blog-card-media {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	aspect-ratio: 16 / 10 !important;
	overflow: hidden !important;
	background: var( --dak-bg-subtle ) !important;
	border-bottom: 1px solid var( --dak-border ) !important;
}

.dak-blog-card-media img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

/* Close to the frame's shape: fill it (crops a sliver at most). */
.dak-blog-card-media.is-cover img {
	object-fit: cover !important;
	object-position: center !important;
	transition: transform 0.3s ease !important;
}

.dak-blog-card:hover .dak-blog-card-media.is-cover img {
	transform: scale( 1.03 ) !important;
}

/* Diagrams, square/portrait and small images: shown whole, never enlarged. */
.dak-blog-card-media.is-contain img {
	object-fit: scale-down !important;
	padding: 8px !important;
}

.dak-blog-card-placeholder {
	display: inline-flex !important;
	color: var( --dak-muted ) !important;
	opacity: 0.7 !important;
}

.dak-blog-card-placeholder svg {
	width: 44px !important;
	height: 44px !important;
}

.dak-blog-card-body {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 18px 20px 18px !important;
}

.dak-blog-card-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 2px 8px !important;
	margin: 0 !important;
	font-size: 0.8125rem !important;
	line-height: 1.4 !important;
	color: var( --dak-muted ) !important;
}

.dak-blog-card-topic {
	font-weight: 600 !important;
	color: var( --dak-primary-dark ) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.dak-blog-card-read {
	text-transform: none !important;
	letter-spacing: normal !important;
}

.dak-blog-card-title {
	margin: 0 !important;
	font-size: 1.1875rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: -0.005em !important;
	text-transform: none !important;
	color: var( --dak-text ) !important;
	overflow-wrap: anywhere !important;
}

.dak-blog-card-title a {
	color: inherit !important;
	text-decoration: none !important;
	font: inherit !important;
}

/* Stretches the title's link over the whole card. */
.dak-blog-card-title a::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
}

.dak-blog-card:hover .dak-blog-card-title a {
	color: var( --dak-primary-dark ) !important;
}

.dak-blog-card-excerpt {
	display: -webkit-box !important;
	margin: 0 !important;
	overflow: hidden !important;
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	color: var( --dak-muted ) !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
}

.dak-blog-card-foot {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-top: auto !important;
	padding-top: 14px !important;
	border-top: 1px solid var( --dak-border ) !important;
	font-size: 0.8125rem !important;
	color: var( --dak-muted ) !important;
}

.dak-blog-card-byline {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	gap: 0 6px !important;
	min-width: 0 !important;
}

.dak-blog-card-cta {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	gap: 4px !important;
	font-weight: 600 !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-blog-card-cta svg {
	width: 16px !important;
	height: 16px !important;
	transition: transform 0.15s ease !important;
}

.dak-blog-card:hover .dak-blog-card-cta svg {
	transform: translateX( 3px ) !important;
}

/* ---- Article page: breadcrumbs and header --------------------------------- */

.dak-blog-crumbs ol {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 4px 8px !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
	color: var( --dak-muted ) !important;
}

.dak-blog-crumbs li {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.dak-blog-crumbs li + li::before {
	content: '›' !important;
	color: var( --dak-muted ) !important;
}

.dak-blog-crumbs a {
	color: var( --dak-primary-dark ) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}

.dak-blog-crumbs a:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

.dak-blog-crumbs [aria-current] {
	color: var( --dak-text ) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

/* One line: the current page's (possibly long) title is cut with an ellipsis. */
.dak-blog-crumbs li:last-child {
	flex: 1 1 0 !important;
}

.dak-blog-single-head {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 12px !important;
	max-width: 820px !important;
	margin: 0 0 28px !important;
}

.dak-blog-single-category {
	display: inline-block !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.dak-blog-single-head h1 {
	margin: 0 !important;
	font-size: 2.5rem !important;
	font-weight: 800 !important;
	line-height: 1.18 !important;
	letter-spacing: -0.015em !important;
	text-transform: none !important;
	color: var( --dak-text ) !important;
	overflow-wrap: anywhere !important;
}

.dak-blog-single-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px 10px !important;
	margin: 4px 0 0 !important;
	font-size: 0.9375rem !important;
	line-height: 1.4 !important;
	color: var( --dak-muted ) !important;
}

.dak-blog-single-avatar {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
}

.dak-blog-meta-item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	white-space: nowrap !important;
}

.dak-blog-meta-item + .dak-blog-meta-item::before {
	content: '\00b7' !important;
	color: var( --dak-muted ) !important;
}

.dak-blog-single-author {
	font-weight: 600 !important;
	color: var( --dak-text ) !important;
}

/* ---- Article page: featured image ----------------------------------------- */

.dak-blog-hero {
	margin: 0 0 40px !important;
	padding: 0 !important;
}

.dak-blog-hero img {
	display: block !important;
	margin: 0 auto !important;
	border-radius: 14px !important;
	box-shadow: none !important;
}

/* A photo close to the 1000 × 440 area's shape fills it. */
.dak-blog-hero.is-cover {
	aspect-ratio: 1000 / 440 !important;
	overflow: hidden !important;
	border-radius: 14px !important;
}

.dak-blog-hero.is-cover img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: 0 !important;
}

/* Any other shape — diagrams, text graphics, square or portrait images —
   shown whole on a neutral panel at up to 440px tall, never enlarged. */
.dak-blog-hero.is-contain {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 440px !important;
	padding: 16px !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 14px !important;
	background: var( --dak-bg-subtle ) !important;
}

.dak-blog-hero.is-contain img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	border-radius: 6px !important;
}

/* Too small for the area: shown at its own size (never blown up and
   blurred), centred on the same full-width neutral panel as above so it
   reads as a deliberate image area rather than a small picture floating
   in empty space. */
.dak-blog-hero.is-natural {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 240px !important;
	padding: 28px 16px !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 14px !important;
	background: var( --dak-bg-subtle ) !important;
}

.dak-blog-hero.is-natural img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 384px !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba( 20, 30, 40, 0.12 ) !important;
}

/* ---- Article page: layout, sidebar ---------------------------------------- */

.dak-blog-single-layout {
	display: grid !important;
	grid-template-columns: 260px minmax( 0, 1fr ) !important;
	gap: 48px !important;
	align-items: start !important;
}

.dak-blog-single-sidebar {
	position: sticky !important;
	top: calc( var( --dak-site-header-offset, 76px ) + 24px ) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	min-width: 0 !important;
}

.dak-blog-side-card {
	margin: 0 !important;
	padding: 16px !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 14px !important;
	background: var( --dak-bg-card ) !important;
}

.dak-blog-side-card.dak-hidden {
	display: none !important;
}

.dak-blog-side-card h2 {
	margin: 0 0 12px !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var( --dak-text ) !important;
}

.dak-blog-share {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin: 0 0 12px !important;
}

.dak-blog-share-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var( --dak-bg-subtle ) !important;
	color: var( --dak-text ) !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.dak-blog-share-btn svg {
	width: 16px !important;
	height: 16px !important;
}

.dak-blog-share-btn:hover {
	color: #fff !important;
}

.dak-blog-share-whatsapp:hover { background: #1f9e4d !important; }
.dak-blog-share-facebook:hover { background: #1877f2 !important; }
.dak-blog-share-x:hover { background: #111 !important; }
.dak-blog-share-linkedin:hover { background: #0a66c2 !important; }
.dak-blog-share-telegram:hover { background: #1c88bd !important; }
.dak-blog-share-email:hover { background: var( --dak-primary ) !important; }

.dak-blog-copy {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 10px !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-text ) !important;
	font: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	text-transform: none !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

.dak-blog-copy svg {
	width: 16px !important;
	height: 16px !important;
}

.dak-blog-copy:hover {
	border-color: var( --dak-primary ) !important;
	background: var( --dak-bg-card ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-blog-copy.is-done {
	border-color: var( --dak-primary ) !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
}

.dak-blog-toc summary {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	margin: 0 !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
	cursor: pointer !important;
	list-style: none !important;
}

.dak-blog-toc summary::-webkit-details-marker {
	display: none !important;
}

.dak-blog-toc summary svg {
	width: 18px !important;
	height: 18px !important;
	color: var( --dak-muted ) !important;
	transition: transform 0.15s ease !important;
}

.dak-blog-toc[open] summary svg {
	transform: rotate( 180deg ) !important;
}

.dak-blog-toc ul {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-height: 120px !important;
	max-height: calc( 100vh - var( --dak-site-header-offset, 76px ) - 300px ) !important;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	list-style: none !important;
}

.dak-blog-toc li {
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
}

.dak-blog-toc a {
	display: block !important;
	padding: 6px 10px !important;
	border-left: 2px solid transparent !important;
	border-radius: 0 8px 8px 0 !important;
	font-size: 0.875rem !important;
	line-height: 1.4 !important;
	color: var( --dak-muted ) !important;
	text-decoration: none !important;
	text-transform: none !important;
}

.dak-blog-toc li.is-sub a {
	padding-left: 22px !important;
	font-size: 0.8125rem !important;
}

.dak-blog-toc a:hover {
	color: var( --dak-text ) !important;
	background: var( --dak-bg-subtle ) !important;
}

.dak-blog-toc a.is-active {
	border-left-color: var( --dak-primary ) !important;
	background: var( --dak-primary-tint ) !important;
	color: var( --dak-primary-dark ) !important;
	font-weight: 600 !important;
}

/* ---- Article page: body typography ---------------------------------------- */

.dak-blog-single-body {
	min-width: 0 !important;
	max-width: 720px !important;
	font-size: 1.125rem !important;
	line-height: 1.7 !important;
	color: var( --dak-text ) !important;
	overflow-wrap: break-word !important;
}

/* Articles pasted from page builders carry their own inline type (15px
   text, capitalised words, fixed box heights). Reading type is set here;
   the wording, links, emphasis and structure are untouched. */
.dak-blog-single-body [style] {
	font-family: inherit !important;
	text-transform: none !important;
	height: auto !important;
	max-width: 100% !important;
}

.dak-blog-single-body :is( p, li, ul, ol, div, span, a, strong, b, em, i, u, section, blockquote, td, th, font )[style] {
	font-size: inherit !important;
	line-height: inherit !important;
}

.dak-blog-single-body > :first-child,
.dak-blog-single-body > :first-child > :first-child {
	margin-top: 0 !important;
}

.dak-blog-single-body p {
	margin: 0 0 1.1em !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

.dak-blog-single-body h2,
.dak-blog-single-body h3,
.dak-blog-single-body h4 {
	color: var( --dak-text ) !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
}

.dak-blog-single-body h2 {
	margin: 2em 0 0.6em !important;
	font-size: 1.625rem !important;
	line-height: 1.3 !important;
}

.dak-blog-single-body h3 {
	margin: 1.7em 0 0.5em !important;
	font-size: 1.3125rem !important;
	line-height: 1.35 !important;
}

.dak-blog-single-body h4 {
	margin: 1.5em 0 0.4em !important;
	font-size: 1.125rem !important;
	line-height: 1.4 !important;
}

.dak-blog-single-body .dak-blog-repeated-title {
	display: none !important;
}

.dak-blog-single-body ul,
.dak-blog-single-body ol {
	margin: 0 0 1.2em !important;
	padding-left: 1.4em !important;
}

.dak-blog-single-body ul {
	list-style: disc !important;
}

.dak-blog-single-body ol {
	list-style: decimal !important;
}

.dak-blog-single-body li {
	margin: 0 0 0.4em !important;
	padding-left: 0.2em !important;
}

.dak-blog-single-body li > ul,
.dak-blog-single-body li > ol {
	margin: 0.4em 0 0 !important;
}

.dak-blog-single-body a {
	color: var( --dak-primary-dark ) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	text-decoration-thickness: 1px !important;
}

.dak-blog-single-body a:hover {
	text-decoration-thickness: 2px !important;
}

.dak-blog-single-body strong,
.dak-blog-single-body b {
	font-weight: 700 !important;
	color: var( --dak-text ) !important;
}

.dak-blog-single-body blockquote {
	margin: 1.5em 0 !important;
	padding: 4px 0 4px 20px !important;
	border-left: 3px solid var( --dak-primary ) !important;
	color: var( --dak-text ) !important;
	font-style: italic !important;
}

.dak-blog-single-body hr {
	margin: 2em 0 !important;
	border: 0 !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-blog-single-body img {
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 1.5em auto !important;
	border-radius: 10px !important;
}

.dak-blog-single-body figure {
	max-width: 100% !important;
	margin: 1.5em 0 !important;
}

.dak-blog-single-body figcaption {
	margin-top: 8px !important;
	font-size: 0.875rem !important;
	color: var( --dak-muted ) !important;
	text-align: center !important;
}

.dak-blog-single-body iframe,
.dak-blog-single-body video,
.dak-blog-single-body embed,
.dak-blog-single-body object {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 1.5em 0 !important;
	border: 0 !important;
	border-radius: 10px !important;
}

.dak-blog-single-body iframe {
	height: auto !important;
	aspect-ratio: 16 / 9 !important;
}

/* Wide tables scroll sideways inside the article, not the page. */
.dak-blog-single-body table {
	display: block !important;
	width: max-content !important;
	max-width: 100% !important;
	margin: 1.5em 0 !important;
	overflow-x: auto !important;
	border-collapse: collapse !important;
	font-size: 0.9375rem !important;
	line-height: 1.5 !important;
}

.dak-blog-single-body th,
.dak-blog-single-body td {
	padding: 10px 14px !important;
	border: 1px solid var( --dak-border ) !important;
	text-align: left !important;
	vertical-align: top !important;
}

.dak-blog-single-body th {
	background: var( --dak-bg-subtle ) !important;
	font-weight: 700 !important;
}

/* ---- Article page: related articles --------------------------------------- */

.dak-blog-related {
	margin-top: 64px !important;
	padding-top: 40px !important;
	border-top: 1px solid var( --dak-border ) !important;
}

.dak-blog-related-head {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 8px 16px !important;
	margin-bottom: 24px !important;
}

.dak-blog-related-head h2 {
	margin: 0 !important;
	font-size: 1.5rem !important;
	font-weight: 800 !important;
	text-transform: none !important;
	color: var( --dak-text ) !important;
}

.dak-blog-related-head a {
	font-weight: 600 !important;
	color: var( --dak-primary-dark ) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

/* The article page is 1000px wide; three related cards still fit. */
.dak-blog-single .dak-blog-grid {
	gap: 24px 20px !important;
}

/* ---- Responsive ------------------------------------------------------------ */

@media ( max-width: 1024px ) {
	.dak-blog-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}

	.dak-blog-filters {
		grid-template-columns: 1fr !important;
		align-items: stretch !important;
	}
}

@media ( max-width: 900px ) {
	.dak-blog-single-layout {
		grid-template-columns: minmax( 0, 1fr ) !important;
		gap: 24px !important;
	}

	.dak-blog-single-body {
		max-width: none !important;
	}

	/* Share: one compact row. Contents: a collapsible section. */
	.dak-blog-single-sidebar {
		position: static !important;
		gap: 12px !important;
	}

	.dak-blog-share-card {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 8px 12px !important;
		padding: 12px 14px !important;
	}

	.dak-blog-share-card h2 {
		margin: 0 !important;
		font-size: 0.875rem !important;
	}

	.dak-blog-share-card .dak-blog-share {
		margin: 0 !important;
	}

	/* Bigger touch targets once the buttons have the row to themselves. */
	.dak-blog-share-card .dak-blog-share-btn {
		width: 40px !important;
		height: 40px !important;
	}

	.dak-blog-share-card .dak-blog-copy {
		width: auto !important;
		min-height: 36px !important;
	}

	.dak-blog-toc {
		padding: 0 !important;
	}

	.dak-blog-toc summary {
		min-height: 48px !important;
		padding: 0 16px !important;
	}

	.dak-blog-toc ul {
		max-height: 50vh !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 8px 12px !important;
	}

	.dak-blog-hero.is-contain {
		height: auto !important;
		max-height: 440px !important;
		padding: 12px !important;
	}

	.dak-blog-hero.is-contain img {
		max-height: 400px !important;
	}

	.dak-blog-hero.is-natural {
		min-height: 0 !important;
		padding: 16px 12px !important;
	}
}

@media ( max-width: 640px ) {
	.dak-blog-listing,
	.dak-blog-single {
		padding: 24px 16px 56px !important;
	}

	.dak-blog-listing-head h1 {
		font-size: 1.75rem !important;
	}

	.dak-blog-listing-head p {
		font-size: 1rem !important;
	}

	.dak-blog-filters {
		padding: 16px !important;
	}

	.dak-blog-grid {
		grid-template-columns: minmax( 0, 1fr ) !important;
		gap: 20px !important;
	}

	.dak-blog-single-head h1 {
		font-size: 1.875rem !important;
	}

	.dak-blog-single-meta {
		font-size: 0.875rem !important;
	}

	.dak-blog-hero {
		margin-bottom: 28px !important;
	}

	.dak-blog-hero.is-cover,
	.dak-blog-hero.is-cover img {
		border-radius: 12px !important;
	}

	.dak-blog-single-body {
		font-size: 1.0625rem !important;
	}

	.dak-blog-single-body h2 {
		font-size: 1.4375rem !important;
	}

	.dak-blog-single-body h3 {
		font-size: 1.1875rem !important;
	}

	.dak-blog-related {
		margin-top: 48px !important;
		padding-top: 32px !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dak-blog-card,
	.dak-blog-card-media img,
	.dak-blog-card-cta svg,
	.dak-blog-chip {
		transition: none !important;
	}

	.dak-blog-card:hover .dak-blog-card-media.is-cover img {
		transform: none !important;
	}
}

/* ---- Doctor reviews ------------------------------------------------------ */
.dak-reviews-summary { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.dak-reviews-score { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; min-width: 110px; }
.dak-reviews-score strong { font-size: 2.4rem; line-height: 1; color: var( --dak-text ); }
.dak-reviews-score small { color: var( --dak-muted ); }
.dak-reviews-stars .dak-star { color: var( --dak-border ); font-size: 1rem; }
.dak-reviews-stars .dak-star.is-on { color: #f5a623; }
.dak-reviews-bars { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; display: grid; gap: 0.3rem; }
.dak-reviews-bars li { display: grid; grid-template-columns: 2.2rem 1fr 1.6rem; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: var( --dak-muted ); }
.dak-reviews-bar { height: 6px; border-radius: 999px; background: var( --dak-bg-subtle ); overflow: hidden; }
.dak-reviews-bar i { display: block; height: 100%; background: #f5a623; }
.dak-review-form { display: grid; gap: 0.6rem; padding: 1rem; margin-bottom: 1.25rem; border: 1px solid var( --dak-border ); border-radius: 12px; background: var( --dak-bg-subtle ); }
.dak-review-picker { display: flex; gap: 0.15rem; }
.dak-review-star { border: 0; background: none; padding: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var( --dak-border ); }
.dak-review-star.is-on { color: #f5a623; }
.dak-review-form textarea { width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem; border: 1px solid var( --dak-border ); border-radius: 8px; background: var( --dak-bg-card ); font: inherit; resize: vertical; }
.dak-review-form .dak-button { justify-self: start; }

/* Review form reached from a "How was your appointment?" email
   (templates/directory/review-request-panel.php). Plain radio buttons drawn
   as stars: the chosen star and every lower one fill in. */
.dak-review-request { display: grid; gap: 0.75rem; padding: 1.25rem; margin: 0 0 1.25rem; border: 1px solid var( --dak-primary ); border-radius: 12px; background: var( --dak-bg-card ); scroll-margin-top: calc( var( --dak-site-header-offset, 76px ) + 16px ); }
.dak-review-request:focus { outline: none; }
.dak-review-request h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var( --dak-text ); }
.dak-review-request p { margin: 0; line-height: 1.6; color: var( --dak-text ); }
.dak-review-request-summary { color: var( --dak-muted ) !important; font-size: 0.95rem; }
.dak-review-request-form { display: grid; gap: 0.75rem; }
.dak-review-request-rating { margin: 0; padding: 0; border: 0; min-width: 0; }
.dak-review-request-rating legend { padding: 0; margin: 0 0 0.35rem; font-weight: 600; color: var( --dak-text ); }
.dak-review-request-stars { display: flex; gap: 0.25rem; }
.dak-review-request-stars input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect( 0, 0, 0, 0 ); border: 0; }
.dak-review-request-stars label { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; font-size: 2rem; line-height: 1; color: var( --dak-border ); cursor: pointer; transition: color 0.1s ease; }
.dak-review-request-stars:has( input:checked ) label { color: #e0a100; }
.dak-review-request-stars input:checked + label ~ label { color: var( --dak-border ); }
.dak-review-request-stars input:checked + label { color: #e0a100; }
.dak-review-request-stars input:focus-visible + label { outline: 2px solid var( --dak-primary ); outline-offset: 2px; }
.dak-review-request-stars label:hover { color: #e0a100; }
.dak-review-request-hint,
.dak-review-request-public { font-size: 0.875rem; color: var( --dak-muted ) !important; }
.dak-review-request-label { font-weight: 600; color: var( --dak-text ); }
.dak-review-request textarea { width: 100%; box-sizing: border-box; padding: 0.65rem 0.75rem; border: 1px solid var( --dak-border ); border-radius: 8px; background: var( --dak-bg-card ); color: var( --dak-text ); font: inherit; resize: vertical; }
.dak-review-request textarea:focus { outline: 2px solid var( --dak-primary ); outline-offset: 1px; }
.dak-review-request .dak-button { justify-self: start; }
.dak-review-request .dak-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; }
.dak-reviews-note { margin: 0 0 1rem; color: var( --dak-muted ); font-size: 0.9rem; }
.dak-reviews-note a { color: var( --dak-primary ); font-weight: 600; }
/* "Write a review" lands here: a brief ring so the eye finds the form. */
.dak-review-form.dak-review-highlight,
.dak-reviews-note.dak-review-highlight,
.dak-review-request.dak-review-highlight { animation: dak-review-flash 1.6s ease-out 1; border-radius: 12px; }
.dak-reviews-note:focus { outline: none; }
@keyframes dak-review-flash {
	0%, 40% { box-shadow: 0 0 0 3px var( --dak-primary ); }
	100% { box-shadow: 0 0 0 3px transparent; }
}
@media ( prefers-reduced-motion: reduce ) {
	.dak-review-form.dak-review-highlight,
	.dak-reviews-note.dak-review-highlight,
	.dak-review-request.dak-review-highlight { animation: none; box-shadow: 0 0 0 3px var( --dak-primary ); }
}
.dak-reviews-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dak-reviews-list li { padding: 0.9rem 0; border-top: 1px solid var( --dak-border ); }
.dak-reviews-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dak-reviews-head time { margin-left: auto; font-size: 0.78rem; color: var( --dak-muted ); }
.dak-reviews-list p { margin: 0.35rem 0 0; line-height: 1.55; overflow-wrap: anywhere; }

/* ==========================================================================
   Videos page ([videos_gallery]) — every staff-managed video in a grid.
   ========================================================================== */

.dak-videos-page {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: calc( 1200px + 48px ) !important;
	margin: 0 auto !important;
	padding: 40px 24px 72px !important;
}

.dak-videos-page-head {
	margin: 0 0 28px !important;
}

.dak-videos-page-head h1 {
	margin: 0 0 8px !important;
	font-size: 2.25rem !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: var( --dak-text ) !important;
}

.dak-videos-page-head p {
	max-width: 640px !important;
	margin: 0 !important;
	font-size: 1.0625rem !important;
	line-height: 1.6 !important;
	color: var( --dak-muted ) !important;
}

.dak-videos-grid {
	display: grid !important;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
	gap: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.dak-videos-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Clinic clips are mostly shot on phones (portrait); a 4:5 frame suits
   those and still shows landscape clips whole (letterboxed). */
.dak-videos-frame {
	position: relative !important;
	aspect-ratio: 4 / 5 !important;
	overflow: hidden !important;
	border: 1px solid var( --dak-border ) !important;
	border-radius: 14px !important;
	background: #0b1512 !important;
}

.dak-videos-frame video {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	background: #0b1512 !important;
}

.dak-videos-title {
	margin: 0 !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var( --dak-text ) !important;
}

@media ( max-width: 1024px ) {
	.dak-videos-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}

@media ( max-width: 600px ) {
	.dak-videos-page {
		padding: 24px 16px 56px !important;
	}

	.dak-videos-page-head h1 {
		font-size: 1.75rem !important;
	}

	.dak-videos-grid {
		grid-template-columns: minmax( 0, 1fr ) !important;
		gap: 20px !important;
	}
}

/* Active service discount, top-right of the service image (see templates/directory/service-discount-tag.php). */
.dak-service-discount-tag {
	position: absolute !important;
	z-index: 1 !important;
	top: 10px !important;
	right: 10px !important;
	display: inline-flex !important;
	align-items: center !important;
	padding: 0.3rem 0.7rem !important;
	border-radius: 999px !important;
	background: #c2410c !important;
	color: #fff !important;
	font-size: 0.8rem !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.02em !important;
	box-shadow: 0 6px 16px rgba( 194, 65, 12, 0.3 ) !important;
}

/* Service detail page: a doctor's discounted price, with the full price struck through. */
.dak-service-doctor-offer-price {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	justify-content: flex-end !important;
	gap: 4px 8px !important;
	text-align: right !important;
}

.dak-service-offer-discount {
	padding: 1px 7px !important;
	border-radius: 999px !important;
	background: #c2410c !important;
	color: #fff !important;
	font-size: 0.72rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em !important;
}

.dak-service-offer-was {
	color: var( --dak-muted ) !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
}

.dak-profile-clinic-info .dak-service-offer-discount {
	display: inline-block !important;
	width: fit-content !important;
	margin-top: 4px !important;
}