/**
 * Doctor Directory – redesign stylesheet.
 *
 * UI only. Restyles Directorist's existing archive markup (search header,
 * directory-type toggle, top filter bar) and the doctor card produced by the
 * loop-grid.php override. No markup names, field names or behaviour change.
 *
 * Layout: search header + full-width top filter bar + full-width card grid.
 * There is no left sidebar.
 *
 * @package Doctor_Directory_Child
 */

/* ===========================================================================
   1. Design tokens
   ======================================================================== */


.directorist-archive-contents .listing-with-sidebar {
	background: transparent;
}

.directorist-archive-contents *,
.directorist-archive-contents *::before,
.directorist-archive-contents *::after {
	box-sizing: border-box;
}

.directorist-archive-contents .directorist-listings-header,
.directorist-archive-contents .directorist-header-bar {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

/* ===========================================================================
   2. Search header  (.doctor-searchbar = toggle + search row in one card)
   ======================================================================== */
.directorist-archive-contents .doctor-searchbar {
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-box);
	box-shadow: var(--dd-shadow-soft);
	padding: 16px;
	margin-bottom: var(--dd-gap);
	position: sticky;
	top: 12px;
	z-index: 30;
	transition: box-shadow var(--dd-transition);
}

.directorist-archive-contents .doctor-searchbar.dd-stuck {
	box-shadow: 0 18px 44px rgba(31, 41, 55, 0.12);
}

.directorist-archive-contents .doctor-searchbar .listing-with-sidebar__type-nav {
	margin-bottom: 14px;
}

/* Fallback for the no-sidebar layout, where the two blocks aren't wrapped. */
.directorist-archive-contents .directorist-archive-contents__top {
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-box);
	box-shadow: var(--dd-shadow-soft);
	padding: 16px;
	margin-bottom: var(--dd-gap);
}

/* 2a. Segmented toggle (directory-type nav) ----------------------------- */
.directorist-archive-contents .directorist-type-nav {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.directorist-archive-contents .directorist-type-nav__list {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 5px;
	list-style: none;
	background: var(--dd-track);
	border-radius: 14px;
}

.directorist-archive-contents .directorist-type-nav__list li {
	flex: 1 1 0;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.directorist-archive-contents .directorist-type-nav__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px 16px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--dd-muted);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	transition: color var(--dd-transition), background var(--dd-transition);
}

.directorist-archive-contents .directorist-type-nav__link:hover {
	color: var(--dd-text);
	transform: none;
}

.directorist-archive-contents .directorist-type-nav__list__current .directorist-type-nav__link,
.directorist-archive-contents .directorist-type-nav__list li.active .directorist-type-nav__link {
	background: var(--dd-surface);
	color: var(--dd-text);
	box-shadow: var(--dd-shadow-seg);
}

/* 2b. Search row: input + city dropdown + green button ------------------ */
.directorist-archive-contents .listing-with-sidebar__searchform {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.directorist-archive-contents .directorist-basic-search,
.directorist-archive-contents .directorist-basic-search .directorist-search-form {
	margin: 0;
}

.directorist-archive-contents .directorist-basic-search .directorist-search-form__box {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.directorist-archive-contents .directorist-search-form__top,
.directorist-archive-contents .directorist-search-form-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	flex: 1 1 460px;
	min-width: 0;
	margin: 0;
}

.directorist-archive-contents .directorist-search-form__top .directorist-search-field {
	position: relative;
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}

.directorist-archive-contents .directorist-search-form__top .directorist-search-query {
	flex: 2 1 320px;
}

/* Hide field labels in the top search bar (placeholders carry the meaning). */
.directorist-archive-contents .doctor-searchbar .directorist-search-field__label,
.directorist-archive-contents .directorist-archive-contents__top .directorist-search-field__label,
.directorist-archive-contents .dd-filters__search .directorist-search-field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.directorist-archive-contents .directorist-search-form__top .directorist-search-field__input,
.directorist-archive-contents .directorist-search-form__top .directorist-form-element,
.directorist-archive-contents .directorist-search-form__top select {
	width: 100%;
	height: 54px;
	padding: 0 16px;
	border: 1px solid var(--dd-input-border);
	border-radius: var(--dd-radius-input);
	background: var(--dd-surface);
	color: var(--dd-text);
	font-size: 16px;
	line-height: 1.4;
	outline: none;
	transition: border-color var(--dd-transition), box-shadow var(--dd-transition);
}

.directorist-archive-contents .directorist-search-form__top .directorist-search-field__input::placeholder {
	color: var(--dd-muted);
}

.directorist-archive-contents .directorist-search-form__top .directorist-search-field__input:focus,
.directorist-archive-contents .directorist-search-form__top select:focus {
	border-color: var(--dd-primary);
	box-shadow: 0 0 0 3px var(--dd-green-soft);
}

/* Magnifier icon inside the keyword field. */
.directorist-archive-contents .directorist-search-form__top .directorist-search-query::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 2;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}

.directorist-archive-contents .directorist-search-form__top .directorist-search-query .directorist-search-field__input {
	padding-left: 44px;
}

/* Location pin + custom chevron on the city dropdown. */
.directorist-archive-contents .directorist-search-form__top .directorist-search-location::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 17px;
	height: 17px;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 2;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F766E'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E");
}

.directorist-archive-contents .directorist-search-form__top .directorist-search-location select,
.directorist-archive-contents .directorist-search-form__top .directorist-search-location .directorist-search-field__input {
	padding-left: 42px;
	padding-right: 40px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
}

/* Hide the inline clear (×) buttons in the top bar for a clean look. */
.directorist-archive-contents .doctor-searchbar .directorist-search-field__btn--clear,
.directorist-archive-contents .directorist-archive-contents__top .directorist-search-field__btn--clear,
.directorist-archive-contents .dd-filters__search .directorist-search-field__btn--clear {
	display: none;
}

.directorist-archive-contents .directorist-search-form-action,
.directorist-archive-contents .directorist-search-form-action__submit {
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
}

.directorist-archive-contents .directorist-btn-search,
.directorist-archive-contents .directorist-search-form-action .directorist-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 54px;
	padding: 0 30px;
	border: 0;
	border-radius: var(--dd-radius-input);
	background: var(--dd-green);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--dd-transition), transform var(--dd-transition),
		box-shadow var(--dd-transition);
}

.directorist-archive-contents .directorist-btn-search:hover,
.directorist-archive-contents .directorist-search-form-action .directorist-btn:hover {
	background: var(--dd-green-dark);
	transform: translateY(-1px);
	box-shadow: var(--dd-shadow-card);
}

/* ===========================================================================
   3. Top filter bar (advanced filters, full width, horizontal)
   ======================================================================== */
.directorist-archive-contents .doctor-filterbar {
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-box);
	box-shadow: var(--dd-shadow-soft);
	padding: 16px 18px;
	margin-bottom: var(--dd-gap);
}

.directorist-archive-contents .doctor-filterbar .directorist-search-form,
.directorist-archive-contents .doctor-filterbar .directorist-search-form__box {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* Hide the sidebar-only "Filters" heading + close button. */
.directorist-archive-contents .doctor-filterbar .directorist-advanced-filter__top {
	display: none;
}

/* Lay the filter fields out as a wrapping horizontal row. */
.directorist-archive-contents .doctor-filterbar .directorist-advanced-filter__advanced {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px 18px;
}

.directorist-archive-contents .doctor-filterbar .directorist-advanced-filter__advanced__element {
	flex: 0 1 210px;
	min-width: 168px;
	margin: 0;
	padding: 0;
	border: 0;
}

.directorist-archive-contents .doctor-filterbar .directorist-search-field__label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dd-muted);
}

.directorist-archive-contents .doctor-filterbar select,
.directorist-archive-contents .doctor-filterbar input[type="text"],
.directorist-archive-contents .doctor-filterbar input[type="number"],
.directorist-archive-contents .doctor-filterbar .directorist-form-element {
	width: 100%;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--dd-input-border);
	border-radius: var(--dd-radius-input);
	background: var(--dd-surface);
	color: var(--dd-text);
	font-size: 15px;
}

.directorist-archive-contents .doctor-filterbar select:focus,
.directorist-archive-contents .doctor-filterbar input:focus {
	border-color: var(--dd-primary);
	box-shadow: 0 0 0 3px var(--dd-green-soft);
	outline: none;
}

/* Checkbox / radio option lists stay compact and scroll if long. */
.directorist-archive-contents .doctor-filterbar ul,
.directorist-archive-contents .doctor-filterbar .directorist-checkbox-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 8px 12px;
	list-style: none;
	max-height: 132px;
	overflow-y: auto;
	border: 1px solid var(--dd-input-border);
	border-radius: var(--dd-radius-input);
	background: var(--dd-surface);
}

.directorist-archive-contents .doctor-filterbar label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--dd-text);
	cursor: pointer;
}

.directorist-archive-contents .doctor-filterbar input[type="checkbox"],
.directorist-archive-contents .doctor-filterbar input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--dd-primary);
	cursor: pointer;
	flex: 0 0 auto;
}

/* Action buttons (Apply / Clear) at the end of the bar. */
.directorist-archive-contents .doctor-filterbar .directorist-advanced-filter__action {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	flex: 0 0 auto;
	align-self: flex-end;
}

.directorist-archive-contents .doctor-filterbar .directorist-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--dd-radius-input);
	background: var(--dd-green);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--dd-transition), transform var(--dd-transition);
}

.directorist-archive-contents .doctor-filterbar .directorist-btn-submit:hover {
	background: var(--dd-green-dark);
	transform: translateY(-1px);
}

.directorist-archive-contents .doctor-filterbar .directorist-btn-reset-js {
	background: transparent;
	border: 0;
	color: var(--dd-primary);
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	white-space: nowrap;
}

/* ===========================================================================
   3b. Doctor filter bar (Specialty/Hospital tabs + Category/Location chips)
   ======================================================================== */
.directorist-archive-contents .dd-filters {
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-box);
	box-shadow: var(--dd-shadow-soft);
	padding: 20px;
	margin-bottom: var(--dd-gap);
}

/* Keyword search relocated inside the filter card, above the tabs. */
.dd-filters__search {
	margin-bottom: 16px;
}

.dd-filters__search .directorist-search-form,
.dd-filters__search .directorist-search-form__box {
	margin: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* Tabs: Specialty Wise | Hospital Wise (segmented, centered) */
.dd-filters__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	padding: 5px;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 18px;
	background: var(--dd-track);
	border-radius: 14px;
}

.dd-filters__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--dd-muted);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background var(--dd-transition), color var(--dd-transition);
}

.dd-filters__tab:hover {
	color: var(--dd-text);
}

.dd-filters__tab.is-active {
	background: var(--dd-surface);
	color: var(--dd-text);
	box-shadow: var(--dd-shadow-seg);
}

.dd-filters__tab-icon {
	font-size: 16px;
	line-height: 1;
}

/* Panels */
.dd-filters__panel {
	display: none;
}

.dd-filters__panel.is-active {
	display: block;
}

.dd-filters__empty {
	margin: 0;
	color: var(--dd-muted);
	font-size: 14px;
}

/*
 * Shown instead of the segmented tabs when only one chip group exists (e.g. this
 * directory type has no hospital field). Matches the District row's label so the
 * two groups read as a consistent pair.
 */
.dd-filters__group-label {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--dd-muted);
}

/* Chip rows */
.dd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.dd-chip {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--dd-input-border);
	border-radius: 999px;
	background: var(--dd-surface);
	color: var(--dd-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: background var(--dd-transition), border-color var(--dd-transition),
		color var(--dd-transition), transform var(--dd-transition);
}

/*
 * Hover / keyboard-focus / active states are FILLED with WHITE text. The
 * `.dd-filters` prefix plus `!important` on the colour properties stop the
 * theme's own <button> styles from overriding the label colour (which was
 * leaving it dark and unreadable on the coloured fill).
 */
.dd-filters .dd-chip:hover,
.dd-filters .dd-chip:focus-visible {
	background: var(--dd-green) !important;
	border-color: var(--dd-green) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

.dd-filters .dd-chip.is-active {
	background: var(--dd-green) !important;
	border-color: var(--dd-green) !important;
	color: #fff !important;
}

/* Location chips = blue */
.dd-filters .dd-chip--location:hover,
.dd-filters .dd-chip--location:focus-visible {
	background: var(--dd-blue) !important;
	border-color: var(--dd-blue) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

.dd-filters .dd-chip--location.is-active {
	background: var(--dd-blue) !important;
	border-color: var(--dd-blue) !important;
	color: #fff !important;
}

/* Location row */
.dd-filters__locations {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--dd-divider);
}

.dd-filters__locations-label {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--dd-muted);
}

/* Footer: clear + status */
.dd-filters__footer {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 20px;
	margin-top: 16px;
}

.dd-filters__footer:empty {
	display: none;
}

/*
 * Clear button = ghost pill. `!important` + `.dd-filters` prefix override the
 * theme's default <button> fill/underline that was leaking through.
 */
/*
 * Collapsed hospital chips.
 * `.dd-chip` sets `display: inline-flex`, and an author rule beats the browser's
 * built-in `[hidden] { display: none }` — without this the "hidden" overflow
 * chips would still be visible.
 */
.dd-filters .dd-chip[hidden] {
	display: none !important;
}

/* "View more (N)" / "View less" toggle under the hospital chips. */
.dd-filters .dd-filters__more {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	padding: 6px 4px !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--dd-primary) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: underline;
	box-shadow: none !important;
	cursor: pointer;
}

.dd-filters .dd-filters__more:hover,
.dd-filters .dd-filters__more:focus-visible {
	color: var(--dd-green-dark) !important;
	background: transparent !important;
}

.dd-filters .dd-filters__clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px !important;
	border: 1px solid var(--dd-input-border) !important;
	border-radius: 999px !important;
	background: var(--dd-surface) !important;
	color: var(--dd-muted) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background var(--dd-transition), border-color var(--dd-transition),
		color var(--dd-transition);
}

.dd-filters .dd-filters__clear:hover,
.dd-filters .dd-filters__clear:focus-visible {
	border-color: var(--dd-primary) !important;
	color: var(--dd-primary) !important;
	background: var(--dd-surface) !important;
	text-decoration: none !important;
}

/* Keep the button hidden when JS marks it [hidden] (display above would win otherwise). */
.dd-filters .dd-filters__clear[hidden] {
	display: none;
}

.dd-filters__clear-icon {
	flex: 0 0 auto;
}

.dd-filters__status {
	color: var(--dd-muted);
	font-size: 13px;
}

/* Loading state on the results while a filter/pagination fetch is in flight */
.listing-with-sidebar__listing.dd-is-loading,
.directorist-archive-contents__listings.dd-is-loading {
	position: relative;
	opacity: 0.5;
	pointer-events: none;
	transition: opacity var(--dd-transition);
}

@media (max-width: 575px) {
	.directorist-archive-contents .dd-filters {
		padding: 16px;
	}

	.dd-filters__tabs {
		display: flex;
		width: 100%;
	}

	.dd-filters__tab {
		flex: 1 1 0;
		justify-content: center;
		padding: 10px 12px;
	}
}

/*
 * Hide the theme's "Search Result" page title on Directorist's Search Result
 * page (where filtered results live). Scoped to a body class added in
 * functions.php, so no other page is touched. If your theme uses a different
 * title element and the heading persists, tell us its class and we'll add it.
 */
body.dd-search-result-page .page-title,
body.dd-search-result-page .entry-title,
body.dd-search-result-page h1.entry-title,
body.dd-search-result-page .wp-block-post-title,
body.dd-search-result-page .directorist-page-title {
	display: none !important;
}

/* ===========================================================================
   4. Card grid – 2 columns desktop / 2 tablet / 1 mobile, 24px gap
   ======================================================================== */
.directorist-archive-contents .directorist-archive-grid-view .directorist-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dd-gap);
	margin: 0;
}

.directorist-archive-contents .directorist-archive-grid-view .directorist-row > [class*="directorist-col"] {
	width: auto;
	max-width: none;
	flex: initial;
	margin: 0;
	padding: 0;
	container-type: inline-size;
}

@media (max-width: 767px) {
	.directorist-archive-contents .directorist-archive-grid-view .directorist-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ===========================================================================
   5. Doctor card
   ======================================================================== */
.doctor-card {
	position: relative;
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	grid-template-areas:
		"media body"
		"media footer";
	gap: 4px 20px;
	height: 100%;
	padding: 22px;
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-card);
	box-shadow: var(--dd-shadow-card);
	transition: transform var(--dd-transition), box-shadow var(--dd-transition);
}

.doctor-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--dd-shadow-hover);
}

/* 5a. Media column: image (top) + verified badge (bottom) --------------- */
.doctor-card__media {
	grid-area: media;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	height: 100%;
}

.doctor-card__image {
	width: 112px;
	height: 128px;
	border-radius: var(--dd-radius-img);
	overflow: hidden;
	background: var(--dd-page-bg);
	flex: 0 0 auto;
}

.doctor-card__image a,
.doctor-card__image figure,
.doctor-card__image > span {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.doctor-card__image img,
.doctor-card__image .doctor-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.doctor-card__verified {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--dd-green);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

/* 5b. Body -------------------------------------------------------------- */
.doctor-card__body {
	grid-area: body;
	min-width: 0;
	padding-right: 56px; /* keep text clear of the rating badge */
}

.doctor-card__name {
	margin: 0 0 4px;
	font-family: "Roboto", sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--dd-text);
}

.doctor-card__name a {
	color: inherit;
	text-decoration: none;
}

.doctor-card__name a:hover {
	color: var(--dd-green);
}

.doctor-card__specialty {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 500;
	color: var(--dd-primary);
}

.doctor-card__degrees {
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--dd-muted);
}

.doctor-card__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.doctor-card__meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	color: var(--dd-meta);
}

.doctor-card__meta-icon {
	color: var(--dd-meta);
	flex: 0 0 auto;
}

/* 5b-ii. Chamber (clinic) block ----------------------------------------- */
.doctor-card__chamber {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	padding: 10px 12px;
	background: var(--dd-green-soft);
	border-radius: var(--dd-radius-input);
}

.doctor-card__chamber-icon {
	color: var(--dd-primary);
	flex: 0 0 auto;
	margin-top: 2px;
}

.doctor-card__chamber-body {
	min-width: 0;
}

.doctor-card__chamber-place {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--dd-meta);
}

.doctor-card__chamber-name {
	display: block;
	font-weight: 600;
	color: var(--dd-text);
}

.doctor-card__chamber-address {
	display: block;
	margin-top: 2px;
	color: var(--dd-muted);
}

.doctor-card__chamber-hours {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--dd-primary);
}

.doctor-card__chamber-hours-icon {
	color: var(--dd-primary);
	flex: 0 0 auto;
}

/* 5c. Footer: divider + (fee | actions) --------------------------------- */
.doctor-card__footer {
	grid-area: footer;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.doctor-card__divider {
	height: 1px;
	margin: 16px 0;
	background: var(--dd-divider);
}

.doctor-card__footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.doctor-card__fee {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	white-space: nowrap;
}

.doctor-card__fee-label {
	color: var(--dd-muted);
	font-weight: 500;
}

.doctor-card__fee-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--dd-text);
}

/* 5d. Rating badge – top right ------------------------------------------ */
.doctor-card__rating {
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--dd-rating-bg);
	color: var(--dd-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.doctor-card__rating-star {
	color: var(--dd-rating-star);
	flex: 0 0 auto;
}

/* 5e. Action buttons ---------------------------------------------------- */
.doctor-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* Verified badge now sits inline with the View profile / Book buttons. */
.doctor-card__actions .doctor-card__verified {
	flex: 0 0 auto;
}

.doctor-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 0 18px;
	border-radius: var(--dd-radius-input);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none !important; /* stop the theme underlining button text */
	cursor: pointer;
	transition: background var(--dd-transition), color var(--dd-transition),
		border-color var(--dd-transition), transform var(--dd-transition),
		box-shadow var(--dd-transition);
}

.doctor-card__btn:hover,
.doctor-card__btn:focus {
	text-decoration: none !important;
}

.doctor-card__btn--profile {
	background: var(--dd-surface);
	border: 1px solid var(--dd-input-border);
	color: var(--dd-text);
}

.doctor-card__btn--profile:hover {
	border-color: var(--dd-primary);
	color: var(--dd-primary) !important;
	transform: translateY(-1px);
}

.doctor-card__btn--book {
	background: var(--dd-green);
	border: 1px solid var(--dd-green);
	color: #fff !important;
}

.doctor-card__btn--book:hover,
.doctor-card__btn--book:focus {
	background: var(--dd-green-dark);
	border-color: var(--dd-green-dark);
	color: #fff !important; /* keep the label white on hover */
	transform: translateY(-1px);
	box-shadow: var(--dd-shadow-card);
}

/* 5f. Card-width responsiveness (container queries) --------------------- */
/* Medium card: stack the fee above full-width buttons. */
@container (max-width: 470px) {
	.doctor-card__footer-row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.doctor-card__actions {
		flex-wrap: nowrap;
	}

	.doctor-card__btn {
		flex: 1 1 auto;
	}
}

/* Narrow card: stack the image above the body. */
@container (max-width: 340px) {
	.doctor-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"body"
			"footer";
		gap: 16px;
	}

	.doctor-card__media {
		flex-direction: row;
		align-items: center;
		height: auto;
	}

	.doctor-card__body {
		padding-right: 0;
	}
}

/* ===========================================================================
   5g. Hospital grid card (.hospital-card)
   -------------------------------------------------------------------------
   The archive card for hospital/clinic listings, rendered by
   archive/loop-grid-hospital.php.

   It sits in the same 2-up grid as the doctor card and inherits the archive
   tokens, but it is built the other way round: photo across the FULL width at
   the top instead of a portrait column beside the text. A hospital is a place —
   the building is the recognisable thing, and a wide shot of it does more work
   than a 112px thumbnail ever could. The type and rating ride on the photo so
   the body below stays a clean list of facts.
   ======================================================================== */
.hospital-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-card);
	box-shadow: var(--dd-shadow-card);
	transition: transform var(--dd-transition), box-shadow var(--dd-transition);
}

.hospital-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--dd-shadow-hover);
}

/* Media ------------------------------------------------------------------- */
.hospital-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--dd-page-bg);
	line-height: 0;
	text-decoration: none !important;
}

/*
 * Directorist wraps its thumbnail in markup this template doesn't control, so
 * the sizing is applied to whatever lands inside rather than to a known element.
 */
.hospital-card__media img,
.hospital-card__media .hospital-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}

.hospital-card:hover .hospital-card__media img {
	transform: scale(1.04);
}

.hospital-card__media-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #C9BFAE;
}

/*
 * Badge and rating sit ON the photo, so they carry their own contrast instead of
 * borrowing the card's — a translucent white pill reads over a dark building
 * shot and a bright sky alike.
 */
.hospital-card__badge,
.hospital-card__rating {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.93);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	box-shadow: 0 1px 4px rgba(31, 41, 55, 0.18);
}

.hospital-card__badge {
	left: 12px;
	bottom: 12px;
	max-width: calc(100% - 24px);
	color: var(--dd-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hospital-card__rating {
	top: 12px;
	right: 12px;
	color: var(--dd-text);
}

.hospital-card__rating svg {
	color: var(--dd-rating-star);
	flex: 0 0 auto;
}

/* Body -------------------------------------------------------------------- */
.hospital-card__body {
	flex: 1 1 auto;
	padding: 18px 20px 0;
}

.hospital-card__name {
	margin: 0 0 8px;
font-family: "Roboto", sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--dd-text);
}

.hospital-card__name a {
	color: inherit;
	text-decoration: none !important;
}

.hospital-card__name a:hover,
.hospital-card__name a:focus-visible {
	color: var(--dd-green);
}

/* Emergency availability is the one fact worth shouting about on a hospital. */
.hospital-card__emergency {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #FDECEC;
	color: #C92A2A;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.hospital-card__emergency svg {
	flex: 0 0 auto;
}

.hospital-card__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hospital-card__meta-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--dd-meta);
}

.hospital-card__meta-icon {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--dd-primary);
}

/* An imported address can run very long; two lines is the ceiling. */
.hospital-card__meta-item > span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Footer ------------------------------------------------------------------ */
.hospital-card__footer {
	margin-top: auto;
	padding: 0 20px 20px;
}

.hospital-card__divider {
	height: 1px;
	margin: 16px 0;
	background: var(--dd-divider);
}

.hospital-card__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

/* A lone View Details button spans the row rather than sitting half-width. */
.hospital-card__actions > :only-child {
	grid-column: 1 / -1;
}

.hospital-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 0 18px;
	border-radius: var(--dd-radius-input);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	transition: background var(--dd-transition), color var(--dd-transition),
		border-color var(--dd-transition), transform var(--dd-transition);
}

.hospital-card__btn--call {
	background: var(--dd-surface);
	border: 1px solid var(--dd-input-border);
	color: var(--dd-text);
}

.hospital-card__btn--call:hover,
.hospital-card__btn--call:focus-visible {
	border-color: var(--dd-primary);
	color: var(--dd-primary) !important;
	transform: translateY(-1px);
}

.hospital-card__btn--view {
	background: var(--dd-green);
	border: 1px solid var(--dd-green);
	color: #fff !important;
}

.hospital-card__btn--view:hover,
.hospital-card__btn--view:focus-visible {
	background: var(--dd-green-dark);
	border-color: var(--dd-green-dark);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: var(--dd-shadow-card);
}

/* Narrow card: one button per row so neither label wraps. */
@container (max-width: 340px) {
	.hospital-card__actions {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hospital-card,
	.hospital-card__media img {
		transition: none;
	}

	.hospital-card:hover {
		transform: none;
	}

	.hospital-card:hover .hospital-card__media img {
		transform: none;
	}
}

/* ===========================================================================
   6. Full-width contents (no sidebar) + responsive
   ======================================================================== */
.directorist-archive-contents .listing-with-sidebar__contents,
.directorist-archive-contents .listing-with-sidebar__contents--full {
	display: block;
}

.directorist-archive-contents .listing-with-sidebar__listing {
	width: 100%;
	min-width: 0;
}

.directorist-archive-contents .listing-with-sidebar__header {
	margin-bottom: 16px;
}

/* Mobile: stack the search controls, full-width button. */
@media (max-width: 575px) {
	.directorist-archive-contents .directorist-search-form__top,
	.directorist-archive-contents .directorist-search-form__top .directorist-search-field,
	.directorist-archive-contents .directorist-search-form__top .directorist-search-query,
	.directorist-archive-contents .directorist-search-form-action,
	.directorist-archive-contents .directorist-search-form-action__submit {
		flex: 1 1 100%;
		width: 100%;
	}

	.directorist-archive-contents .directorist-btn-search,
	.directorist-archive-contents .directorist-search-form-action .directorist-btn {
		width: 100%;
	}

	.directorist-archive-contents .doctor-filterbar .directorist-advanced-filter__advanced__element {
		flex: 1 1 100%;
	}
}

/* ===========================================================================
   8. Single doctor profile page (.doctor-profile)
   -------------------------------------------------------------------------
   Stacked card layout: hero → actions → key details → weekly schedule → about
   → chambers → extra fields → reviews → related. Every card is optional; the
   template omits any whose data is missing, so this file must never assume a
   card is present.
   ======================================================================== */
.doctor-profile {
	/* Tokens — the single page has no .directorist-archive-contents scope. */
	--dd-page: #F4F7FB;
	--dd-surface: #FFFFFF;
	--dd-navy: #16325C;
	--dd-blue: #1668E3;
	--dd-blue-dark: #0F51B5;
	--dd-blue-soft: #EAF2FE;
	--dd-green: #12854A;
	--dd-green-soft: #E7F7EE;
	--dd-red: #E03131;
	--dd-red-soft: #FDECEC;
	--dd-primary: #0F766E;
	--dd-border: #E6EAF2;
	--dd-divider: #EEF1F7;
	--dd-text: #16325C;
	--dd-meta: #232323;
	--dd-muted: #232323;
	--dd-radius-card: 16px;
	--dd-shadow-soft: 0 2px 10px rgba(22, 50, 92, 0.05);
	--dd-transition: 150ms ease;

	color: var(--dd-text);
	background: var(--dd-page);
	padding: 24px 16px 40px;
	margin: 0;
}

.doctor-profile *,
.doctor-profile *::before,
.doctor-profile *::after {
	box-sizing: border-box;
}

.doctor-profile__container {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Shared card shell ------------------------------------------------------- */
.doctor-profile__card,
.doctor-profile__hero {
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius-card);
	box-shadow: var(--dd-shadow-soft);
	overflow: hidden;
}

.doctor-profile__card {
	padding: 18px 20px;
}

.doctor-profile__card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	color: var(--dd-navy);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.doctor-profile__card-title svg {
	flex: 0 0 auto;
	color: var(--dd-blue);
}

.doctor-profile__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.doctor-profile__card-head .doctor-profile__card-title {
	margin: 0;
}

.doctor-profile .doctor-profile__card-link {
	flex: 0 0 auto;
	color: var(--dd-blue);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
}

.doctor-profile .doctor-profile__card-link:hover,
.doctor-profile .doctor-profile__card-link:focus {
	color: var(--dd-blue-dark);
}

/* 1. Hero ---------------------------------------------------------------- */
.doctor-profile__hero {
	position: relative;
	padding: 0 22px 20px;
	text-align: center;
}

/*
 * The tinted band behind the photo. A radial dot pattern layered over a soft
 * gradient, drawn in CSS so there is no image request.
 */
.doctor-profile__hero-bg {
	position: absolute;
	inset: 0 0 auto;
	height: 150px;
	background:
		radial-gradient(rgba(22, 104, 227, 0.10) 1px, transparent 1px) 0 0 / 12px 12px,
		linear-gradient(160deg, #DCEAFE 0%, #EEF5FF 55%, #FFFFFF 100%);
	pointer-events: none;
}

/*
 * Cover-photo variant of the band. The URL itself is an inline style on the
 * element (it's per-listing); everything else lives here.
 *
 * Taller than the gradient so a real photo has room to read as a banner, and the
 * portrait still straddles its lower edge rather than floating inside it.
 */
.doctor-profile__hero-bg--photo {
	height: 168px;
	background-color: var(--dd-blue-soft);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/*
 * Scrim. A cover photo is whatever the doctor uploaded — it can be pale, busy,
 * or nearly white, and the portrait's white ring disappears against a light one.
 * Darkening the top and fading to the card's white at the bottom guarantees the
 * ring reads and the band meets the white body without a hard seam, on any photo.
 */
.doctor-profile__hero-bg--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(22, 50, 92, 0.28) 0%,
		rgba(22, 50, 92, 0.10) 40%,
		rgba(255, 255, 255, 0.55) 82%,
		rgba(255, 255, 255, 0.92) 100%
	);
}

.doctor-profile__photo-wrap {
	position: relative;
	display: inline-block;
	margin: 26px 0 14px;
}

/* Sits above the scrim, which is painted on the band behind it. */
.doctor-profile--v2 .doctor-profile__photo-wrap {
	z-index: 1;
}

/* A cover photo pushes the portrait down so it overlaps the band's lower edge
   the way it does on the gradient. */
.doctor-profile__hero-bg--photo ~ .doctor-profile__photo-wrap {
	margin-top: 44px;
}

.doctor-profile__photo {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--dd-blue-soft);
	border: 5px solid #fff;
	box-shadow: 0 4px 16px rgba(22, 50, 92, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}

.doctor-profile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.doctor-profile__photo-fallback {
	font-size: 44px;
	font-weight: 700;
	color: var(--dd-blue);
}

/*
 * Verified badge, on the photo's bottom-right rim.
 *
 * Facebook-style, which means the SVG is the whole badge — a scalloped 12-point
 * burst — so this wrapper carries NO background, border or border-radius. Those
 * would draw a circle behind a shape that isn't one. The white ring is a stroke
 * on the burst path inside the SVG, so it follows the scallops; `color` here
 * feeds the burst's fill through currentColor.
 *
 * Placement: the photo is a circle, so its bounding-box corner is empty space.
 * On a 132px circle the 45° rim point sits ~19px in from each edge, which is
 * where a 34px badge inset by 2px lands.
 */
.doctor-profile__tick {
	position: absolute;
	right: 2px;
	bottom: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 40px;
	color: var(--dd-blue);
	filter: drop-shadow(0 1px 3px rgba(22, 50, 92, 0.25));
}

.doctor-profile__tick svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The photo shrinks on phones, so the badge does too or it swamps the picture. */
@media (max-width: 600px) {
	.doctor-profile__tick {
		width: 28px;
		height: 28px;
	}
}

.doctor-profile__name {
	margin: 0 0 6px;
	color: var(--dd-navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
}

.doctor-profile__degrees {
	max-width: 34em;
	margin: 0 auto 12px;
	color: var(--dd-meta);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
}

.doctor-profile__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 8px;
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.doctor-profile__pill svg {
	flex: 0 0 auto;
}

.doctor-profile__pill--exp {
	background: var(--dd-green-soft);
	color: var(--dd-green);
}

.doctor-profile__pill--spec {
	background: var(--dd-red-soft);
	color: var(--dd-red);
}

.doctor-profile__local-tag {
	margin: 4px 0 10px;
	color: var(--dd-green);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.doctor-profile__role {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--dd-meta);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
}

.doctor-profile__role svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--dd-muted);
}

.doctor-profile__role-title,
.doctor-profile__role-place {
	display: block;
}

.doctor-profile__regno {
	margin: 0 0 8px;
	color: var(--dd-muted);
	font-size: 16px;
}

/* Stars */
.doctor-profile__stars-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 4px;
}

.doctor-profile__stars {
	display: inline-flex;
	gap: 2px;
}

.doctor-profile__star.is-empty {
	color: #CBD3E1;
}

.doctor-profile__star.is-full,
.doctor-profile__star.is-half {
	color: #F5A623;
}

.doctor-profile__stars-avg {
	color: var(--dd-navy);
	font-size: 14px;
	font-weight: 700;
}

.doctor-profile .doctor-profile__stars-count {
	color: var(--dd-muted);
	font-size: 14px;
	text-decoration: none !important;
}

/* 2. Action row ---------------------------------------------------------- */
/*
 * Auto-fit rather than a fixed column count: the row holds WhatsApp / Call /
 * Message, and a listing missing a number renders fewer. auto-fit lets whatever
 * is present share the width evenly instead of leaving a dead 4th column.
 */
.doctor-profile__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--dd-divider);
}

/*
 * `!important` on colour and text-decoration: the theme styles bare <a> and
 * <button> globally, which otherwise underlines these and overrides the fills.
 */
.doctor-profile .doctor-profile__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 74px;
	padding: 12px 8px;
	border: 1px solid #C9DCF8;
	border-radius: 12px;
	background: var(--dd-surface) !important;
	color: var(--dd-blue) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background var(--dd-transition), border-color var(--dd-transition),
		color var(--dd-transition);
}

.doctor-profile .doctor-profile__action:hover,
.doctor-profile .doctor-profile__action:focus-visible {
	background: var(--dd-blue-soft) !important;
	border-color: var(--dd-blue) !important;
	color: var(--dd-blue-dark) !important;
}

.doctor-profile .doctor-profile__action--primary {
	background: var(--dd-blue) !important;
	border-color: var(--dd-blue) !important;
	color: #fff !important;
}

.doctor-profile .doctor-profile__action--primary:hover,
.doctor-profile .doctor-profile__action--primary:focus-visible {
	background: var(--dd-blue-dark) !important;
	border-color: var(--dd-blue-dark) !important;
	color: #fff !important;
}

/* WhatsApp keeps its own brand green so it reads as the messaging channel. */
.doctor-profile .doctor-profile__action--whatsapp {
	background: #25D366 !important;
	border-color: #25D366 !important;
	color: #fff !important;
}

.doctor-profile .doctor-profile__action--whatsapp:hover,
.doctor-profile .doctor-profile__action--whatsapp:focus-visible {
	background: #1DA851 !important;
	border-color: #1DA851 !important;
	color: #fff !important;
}

.doctor-profile .doctor-profile__action--save {
	position: relative;
	border-color: var(--dd-border) !important;
	color: var(--dd-navy) !important;
}

.doctor-profile .doctor-profile__action--save svg {
	color: var(--dd-red);
}

.doctor-profile .doctor-profile__action--save:hover,
.doctor-profile .doctor-profile__action--save:focus-visible {
	background: var(--dd-red-soft) !important;
	border-color: var(--dd-red) !important;
	color: var(--dd-navy) !important;
}

/* Filled heart once saved — Directorist toggles this class over AJAX. */
.doctor-profile .doctor-profile__action--save.directorist-added-to-favorite {
	background: var(--dd-red-soft) !important;
	border-color: var(--dd-red) !important;
}

/* Directorist's tooltip ("Added to favourite" / "Please login"). */
.doctor-profile__action--save .directorist-favorite-tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
}

.doctor-profile__action--save .directorist-favorite-tooltip span {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--dd-navy);
}

/* 3. Key details rows ---------------------------------------------------- */
.doctor-profile__rows {
	padding: 4px 20px;
}

.doctor-profile .doctor-profile__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--dd-divider);
	color: var(--dd-text);
	text-decoration: none !important;
}

.doctor-profile .doctor-profile__row:last-child {
	border-bottom: 0;
}

.doctor-profile .doctor-profile__row--link:hover .doctor-profile__row-value,
.doctor-profile .doctor-profile__row--link:focus-visible .doctor-profile__row-value {
	color: var(--dd-blue);
}

.doctor-profile__row-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--dd-blue-soft);
	color: var(--dd-blue);
}

.doctor-profile__row-body {
	flex: 1 1 auto;
	min-width: 0;
}

.doctor-profile__row-label {
	display: block;
	color: var(--dd-navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.doctor-profile__row-value {
	display: block;
	color: var(--dd-meta);
	font-size: 14px;
	line-height: 1.45;
	transition: color var(--dd-transition);
}

.doctor-profile .doctor-profile__row-value a {
	color: inherit;
	text-decoration: none !important;
}

.doctor-profile__row-chevron {
	flex: 0 0 auto;
	color: #A9B6C9;
}

.doctor-profile__fee-tag {
	color: var(--dd-muted);
}

.doctor-profile__dot {
	margin: 0 4px;
	color: #C3CDDC;
}

/* 4. Weekly schedule ----------------------------------------------------- */
.doctor-profile__schedule {
	padding: 0;
}

.doctor-profile__schedule .doctor-profile__card-head {
	margin: 0;
	padding: 14px 20px;
	background: #F2F7FF;
	border-bottom: 1px solid var(--dd-border);
}

/* Seven columns never fit a narrow phone — let the table scroll on its own so
   the page body never gains a horizontal scrollbar. */
.doctor-profile__schedule-scroll {
	overflow-x: auto;
}

.doctor-profile__schedule-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	margin: 0;
	table-layout: fixed;
}

.doctor-profile__schedule-table th,
.doctor-profile__schedule-table td {
	padding: 12px 6px;
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid var(--dd-divider);
	background: transparent;
}

.doctor-profile__schedule-table th:last-child,
.doctor-profile__schedule-table td:last-child {
	border-right: 0;
}

.doctor-profile__schedule-table th {
	color: var(--dd-navy);
	font-size: 14px;
	font-weight: 700;
	border-bottom: 1px solid var(--dd-border);
}

.doctor-profile__schedule-icon {
	display: block;
	margin: 0 auto 6px;
}

.doctor-profile__schedule-table td.is-open .doctor-profile__schedule-icon {
	color: #17A34A;
}

.doctor-profile__schedule-table td.is-closed .doctor-profile__schedule-icon {
	color: var(--dd-red);
}

.doctor-profile__schedule-time {
	display: block;
	color: var(--dd-meta);
	font-size: 13px;
	line-height: 1.35;
}

/* 5. About --------------------------------------------------------------- */
.doctor-profile__about .doctor-profile__card-title svg {
	color: var(--dd-green);
}

.doctor-profile__prose {
	color: var(--dd-meta);
	font-size: 16px;
	line-height: 1.7;
}

.doctor-profile__prose > *:first-child {
	margin-top: 0;
}

.doctor-profile__prose > *:last-child {
	margin-bottom: 0;
}

/*
 * Collapsed state is applied by JS only once it has measured that the text
 * really overflows — so with JS off, or for a short bio, the full text shows and
 * no toggle appears.
 */
.doctor-profile__prose.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.doctor-profile .doctor-profile__more {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 14px auto 0;
	padding: 8px 20px !important;
	border: 1px solid var(--dd-border) !important;
	border-radius: 999px !important;
	background: var(--dd-surface) !important;
	color: var(--dd-navy) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
}

.doctor-profile .doctor-profile__more:hover,
.doctor-profile .doctor-profile__more:focus-visible {
	background: var(--dd-blue-soft) !important;
	border-color: var(--dd-blue) !important;
	color: var(--dd-blue-dark) !important;
}

.doctor-profile__more[hidden] {
	display: none !important;
}

.doctor-profile__more svg {
	transition: transform var(--dd-transition);
}

.doctor-profile__more[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* 6. Chambers ------------------------------------------------------------ */
.doctor-profile__chambers {
	padding: 0;
}

.doctor-profile__chambers .doctor-profile__card-title {
	margin: 0;
	padding: 14px 20px;
	background: #F2F7FF;
	border-bottom: 1px solid var(--dd-border);
}

/*
 * One centered card per chamber. The chambers list is a single-column grid so
 * the cards stack down the middle of the section instead of filling the row
 * from the left, and each card's own content is centered too.
 */
.doctor-profile__chambers-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 14px;
	padding: 16px 20px;
}

.doctor-profile__chamber {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	padding: 18px 29px;
	background: var(--dd-surface);
	border: 1px solid var(--dd-border);
	border-radius: 14px;
	box-shadow: var(--dd-shadow-soft);
	text-align: center;
}

/* Cards carry their own frame, so the old divider between siblings would just
   double up on the card border. */
.doctor-profile__chamber + .doctor-profile__chamber {
	border-top: 1px solid var(--dd-border);
}

.doctor-profile__chamber-name {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0 0 12px;
	color: var(--dd-muted);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.doctor-profile__chamber-name svg {
	flex: 0 0 auto;
	color: var(--dd-blue);
}

.doctor-profile__chamber-line {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	margin: 0 0 8px;
	color: var(--dd-meta);
	font-size: 16px;
	line-height: 1.55;
	text-align: center;
}

.doctor-profile__chamber-line svg {
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--dd-blue);
}

/* Per-chamber call button, centered under the detail lines. */
.doctor-profile__chamber-calls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

.doctor-profile .doctor-profile__chamber-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 20px;
	border: 1px solid var(--dd-blue);
	border-radius: 999px;
	background: var(--dd-blue) !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background var(--dd-transition), border-color var(--dd-transition);
}

.doctor-profile .doctor-profile__chamber-btn:hover,
.doctor-profile .doctor-profile__chamber-btn:focus-visible {
	background: var(--dd-blue-dark) !important;
	border-color: var(--dd-blue-dark) !important;
	color: #fff !important;
}

.doctor-profile .doctor-profile__chamber-btn--whatsapp {
	border-color: #25D366;
	background: #25D366 !important;
}

.doctor-profile .doctor-profile__chamber-btn--whatsapp:hover,
.doctor-profile .doctor-profile__chamber-btn--whatsapp:focus-visible {
	background: #1DA851 !important;
	border-color: #1DA851 !important;
}

.doctor-profile .doctor-profile__chamber-line a {
	color: var(--dd-meta);
	text-decoration: none !important;
}

.doctor-profile .doctor-profile__chamber-line a:hover,
.doctor-profile .doctor-profile__chamber-line a:focus {
	color: var(--dd-blue);
}

.doctor-profile .doctor-profile__map-link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 7px;
	margin-top: 4px;
	color: var(--dd-blue) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
}

.doctor-profile .doctor-profile__map-link:hover,
.doctor-profile .doctor-profile__map-link:focus {
	color: var(--dd-blue-dark) !important;
}

/* Extra Add-Listing-Form fields ------------------------------------------ */
.doctor-profile__info-grid {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
}

.doctor-profile__info-row {
	min-width: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--dd-divider);
}

/* Long prose reads better across the full width than in a narrow column. */
.doctor-profile__info-row--textarea,
.doctor-profile__info-row--file {
	grid-column: 1 / -1;
}

.doctor-profile__info-label {
	margin: 0 0 3px;
	color: var(--dd-navy);
	font-size: 13px;
	font-weight: 700;
}

.doctor-profile__info-value {
	margin: 0;
	color: var(--dd-meta);
	font-size: 14px;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.doctor-profile .doctor-profile__info-value a {
	color: var(--dd-blue);
}

.doctor-profile__files {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.doctor-profile__file-img img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.doctor-profile__swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 6px;
	border: 1px solid var(--dd-border);
	border-radius: 4px;
	vertical-align: middle;
}

/* Related doctors -------------------------------------------------------- */
.doctor-profile__related {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.doctor-profile .doctor-profile__related-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--dd-border);
	border-radius: 12px;
	color: var(--dd-text);
	text-decoration: none !important;
	transition: border-color var(--dd-transition), box-shadow var(--dd-transition);
}

.doctor-profile .doctor-profile__related-card:hover,
.doctor-profile .doctor-profile__related-card:focus-visible {
	border-color: var(--dd-blue);
	box-shadow: 0 6px 18px rgba(22, 104, 227, 0.10);
}

.doctor-profile__related-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
	background: var(--dd-blue-soft);
	display: block;
}

.doctor-profile__related-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.doctor-profile__related-name {
	display: block;
	color: var(--dd-navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.doctor-profile__related-spec,
.doctor-profile__related-loc {
	display: block;
	color: var(--dd-muted);
	font-size: 13px;
	line-height: 1.4;
}

.doctor-profile__related-loc {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 3px;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 600px) {
	.doctor-profile {
		padding: 16px 12px 32px;
	}

	.doctor-profile__card,
	.doctor-profile__hero {
		border-radius: 14px;
	}

	.doctor-profile__hero {
		padding: 0 16px 18px;
	}

	.doctor-profile__card {
		padding: 14px;
	}

	.doctor-profile__rows {
		padding: 2px 16px;
	}

	.doctor-profile__name {
		font-size: 21px;
	}

	.doctor-profile__photo {
		width: 108px;
		height: 108px;
	}

	.doctor-profile__hero-bg--photo {
		height: 130px;
	}

	.doctor-profile__hero-bg--photo ~ .doctor-profile__photo-wrap {
		margin-top: 34px;
	}

	/* Two across reads better than three on a narrow phone. */
	.doctor-profile__actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.doctor-profile__chambers-list {
		padding: 14px 16px;
	}

	.doctor-profile__chamber {
		padding: 16px;
	}

	.doctor-profile__info-grid,
	.doctor-profile__related {
		grid-template-columns: 1fr;
	}
}

/* Below 480px even two across squeezes the labels — go one full-width button
   per row so "WhatsApp Call" never wraps mid-word. */
@media (max-width: 479px) {
	.doctor-profile__actions {
		grid-template-columns: minmax(0, 1fr);
	}

	.doctor-profile .doctor-profile__action {
		flex-direction: row;
		gap: 8px;
		min-height: 48px;
		padding: 10px 16px;
		font-size: 14px;
	}

	.doctor-profile .doctor-profile__chamber-btn {
		width: 100%;
	}
}

/* ===========================================================================
   6b. Patient reviews (embedded Directorist review UI)
   -------------------------------------------------------------------------
   comments_template() renders Directorist's own single-reviews card inside our
   "Patient reviews" section. Flatten that inner card so it blends into our
   section (no card-in-card) and align its buttons with the profile theme.
   ======================================================================== */
.doctor-profile__reviews-wrap .directorist-review-container {
	margin: 0;
}

/* Drop the inner card's own frame — our .doctor-profile__card already provides it. */
.doctor-profile__reviews-wrap .directorist-review-content,
.doctor-profile__reviews-wrap .directorist-review-submit {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.doctor-profile__reviews-wrap .directorist-review-submit {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--dd-divider);
}

/* The template prints its own "Review" header; our section already shows the
   "Patient reviews" title, so hide the duplicate heading text but KEEP the
   Write-a-Review / Login button that lives in the same header. */
.doctor-profile__reviews-wrap .directorist-review-content__header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 0 0 12px;
	border: 0;
}

.doctor-profile__reviews-wrap .directorist-review-content__header .directorist-card__header__title {
	margin-right: auto;
	font-size: 16px;
}

/* Center the empty-state text under our centered layout. */
.doctor-profile__reviews-wrap .directorist-noreviews {
	text-align: center;
}

/* Keep review action buttons on-brand (green like the profile CTAs). */
.doctor-profile__reviews-wrap .directorist-btn {
	background: var(--dd-primary);
	border-color: var(--dd-primary);
	color: #fff;
}

.doctor-profile__reviews-wrap .directorist-btn:hover,
.doctor-profile__reviews-wrap .directorist-btn:focus {
	background: var(--dd-green);
	border-color: var(--dd-green);
	color: #fff;
}

/* ===========================================================================
   7. Reduced motion
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
	.directorist-archive-contents *,
	.doctor-card,
	.doctor-card__btn,
	.doctor-profile__action {
		transition: none !important;
	}

	.doctor-card:hover {
		transform: none;
	}
}



/* ===========================================================================
   6. Instant search dropdown (hero search box)
   ======================================================================== */

/*
 * Positioning context for the dropdown. Better Search prints this wrapper around
 * the form, and the panel is injected as its second child.
 */
.bsearch-form-container {
	position: relative;
}

.dd-instant {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 100;
	max-height: min(60vh, 420px);
	overflow-y: auto;
	padding: 8px;
	background: #fff;
	border: 1px solid #E7E0D4;
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(31, 41, 55, 0.16);
	text-align: left;
}

.dd-instant[hidden] {
	display: none;
}

.dd-instant__group {
	margin: 6px 8px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6B7280;
}

/*
 * The `.dd-instant` prefix plus `!important` beat the theme's global link
 * underline, which otherwise underlines every name and meta line in the panel and
 * makes the dropdown look like a list of raw links. Same reason the chips above
 * need it.
 */
.dd-instant .dd-instant__item,
.dd-instant .dd-instant__all {
	text-decoration: none !important;
	box-shadow: none !important;
}

.dd-instant .dd-instant__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 12px;
	color: #1F2937;
	transition: background 150ms ease;
}

/* Hover and keyboard selection share one state so both feel identical. */
.dd-instant .dd-instant__item:hover,
.dd-instant .dd-instant__item:focus,
.dd-instant .dd-instant__item.is-active {
	background: #E7F0EE;
	color: #0F5B50;
}

.dd-instant__thumb {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	overflow: hidden;
	border-radius: 10px;
	background: #ECE6DB;
}

.dd-instant__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dd-instant__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dd-instant__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

/* One line only — a long district list must not push the row to two lines. */
.dd-instant__meta {
	overflow: hidden;
	font-size: 12px;
	color: #6B7280;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dd-instant .dd-instant__all {
	display: block;
	margin-top: 4px;
	padding: 10px 8px 8px;
	border-top: 1px solid #EFEAE0;
	border-radius: 0 0 10px 10px;
	color: #0F766E;
	font-size: 13px;
	font-weight: 600;
}

.dd-instant .dd-instant__all:hover,
.dd-instant .dd-instant__all:focus,
.dd-instant .dd-instant__all.is-active {
	background: #E7F0EE;
	color: #0C4A41;
}

.dd-instant__message {
	margin: 0;
	padding: 14px 10px;
	color: #6B7280;
	font-size: 13px;
}

/* Skeleton placeholders while a query is in flight. */
.dd-instant__skeleton {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
}

.dd-instant__skeleton-thumb,
.dd-instant__skeleton-lines > span {
	display: block;
	background: #ECE6DB;
	border-radius: 6px;
	animation: dd-instant-pulse 1.2s ease-in-out infinite;
}

.dd-instant__skeleton-thumb {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 10px;
}

.dd-instant__skeleton-lines {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
}

.dd-instant__skeleton-lines > span:first-child {
	width: 55%;
	height: 11px;
}

.dd-instant__skeleton-lines > span:last-child {
	width: 35%;
	height: 9px;
}

@keyframes dd-instant-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
	.dd-instant__skeleton-thumb,
	.dd-instant__skeleton-lines > span {
		animation: none;
	}
}

/* ===========================================================================
   9. Homepage doctor card (.dd-arko-card)
   -------------------------------------------------------------------------
   Styles the child-theme override of the arko-directory-homepage doctors
   section. Shares the single profile's palette so a visitor moving from the
   homepage card to the profile sees one design, not two.

   Selectors are prefixed with `.dd-arko` and colours carry `!important` where
   they fight the theme: Astra underlines every content link and paints its own
   button fill, which is what left the default card with underlined names and an
   off-brand indigo "View Profile".
   ======================================================================== */
.dd-arko {
	--dd-a-navy: #16325C;
	--dd-a-blue: #1668E3;
	--dd-a-blue-dark: #0F51B5;
	--dd-a-blue-soft: #EAF2FE;
	--dd-a-green: #12854A;
	--dd-a-green-soft: #E7F7EE;
	--dd-a-red: #E03131;
	--dd-a-red-soft: #FDECEC;
	--dd-a-meta: #4B5F7D;
	--dd-a-muted: #232323;
	--dd-a-border: #E6EAF2;
	--dd-a-divider: #EEF1F7;
}

.dd-arko-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.dd-arko .dd-arko-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--dd-a-border);
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(22, 50, 92, 0.05);
	transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.dd-arko .dd-arko-card:hover {
	border-color: #C9DCF8;
	box-shadow: 0 10px 26px rgba(22, 104, 227, 0.10);
	transform: translateY(-2px);
}

/* Identity ---------------------------------------------------------------- */
.dd-arko-card__top {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.dd-arko-card__avatar {
	position: relative;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: visible;
	background: var(--dd-a-blue-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * `.dd-arko` prefix is load-order insurance, not decoration: Elementor's frontend
 * stylesheet carries `.elementor img { border-radius: 0 }` at the same specificity
 * as a bare `.dd-arko-card__avatar img` and loads after this file, which squared
 * the avatar off. The wrapper can't clip it into shape either — it needs
 * `overflow: visible` so the verified tick can overhang the edge.
 */
.dd-arko .dd-arko-card__avatar img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--dd-a-border);
}

.dd-arko-card__initials {
	font-size: 22px;
	font-weight: 700;
	color: var(--dd-a-blue);
}

.dd-arko-card__tick {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--dd-a-blue);
	border: 2px solid #fff;
	color: #fff;
}

.dd-arko-card__identity {
	flex: 1 1 auto;
	min-width: 0;
}

.dd-arko .dd-arko-card__name {
	margin: 0 0 3px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.dd-arko .dd-arko-card__name a {
	color: var(--dd-a-navy) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.dd-arko .dd-arko-card__name a:hover,
.dd-arko .dd-arko-card__name a:focus-visible {
	color: var(--dd-a-blue) !important;
}

.dd-arko .dd-arko-card__degrees {
	margin: 0;
	color: var(--dd-a-muted);
	font-size: 13px;
	line-height: 1.45;
}

.dd-arko .dd-arko-card__rating {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 5px 0 0;
	color: #B7791F;
	font-size: 13px;
	font-weight: 600;
}

/* Pills ------------------------------------------------------------------- */
.dd-arko-card__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.dd-arko-card__pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.dd-arko-card__pill svg {
	flex: 0 0 auto;
}

/* Keeps a long multi-category specialty from stretching the card. */
.dd-arko-card__pill > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dd-arko-card__pill--spec {
	background: var(--dd-a-red-soft);
	color: var(--dd-a-red);
}

.dd-arko-card__pill--exp {
	background: var(--dd-a-green-soft);
	color: var(--dd-a-green);
}

/* Meta rows --------------------------------------------------------------- */
.dd-arko-card__body:empty {
	display: none;
}

.dd-arko .dd-arko-card__row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 6px;
	color: var(--dd-a-meta);
	font-size: 13px;
	line-height: 1.5;
}

.dd-arko .dd-arko-card__row:last-child {
	margin-bottom: 0;
}

.dd-arko .dd-arko-card__row svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--dd-a-muted);
}

/* Two lines maximum — an imported address can run very long. */
.dd-arko .dd-arko-card__row > span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Footer ------------------------------------------------------------------ */
.dd-arko-card__footer {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--dd-a-divider);
}

.dd-arko .dd-arko-card__fee {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0 0 10px;
}

.dd-arko-card__fee-label {
	color: var(--dd-a-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.dd-arko-card__fee-value {
	color: var(--dd-a-navy);
	font-size: 16px;
	font-weight: 700;
}

.dd-arko-card__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

/* A lone View Profile button should span the row rather than sit half-width. */
.dd-arko-card__actions > :only-child {
	grid-column: 1 / -1;
}

.dd-arko .dd-arko-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.dd-arko .dd-arko-btn--ghost {
	background: #fff !important;
	border: 1px solid #C9DCF8 !important;
	color: var(--dd-a-blue) !important;
}

.dd-arko .dd-arko-btn--ghost:hover,
.dd-arko .dd-arko-btn--ghost:focus-visible {
	background: var(--dd-a-blue-soft) !important;
	border-color: var(--dd-a-blue) !important;
	color: var(--dd-a-blue-dark) !important;
}

.dd-arko .dd-arko-btn--primary {
	background: var(--dd-a-blue) !important;
	border: 1px solid var(--dd-a-blue) !important;
	color: #fff !important;
}

.dd-arko .dd-arko-btn--primary:hover,
.dd-arko .dd-arko-btn--primary:focus-visible {
	background: var(--dd-a-blue-dark) !important;
	border-color: var(--dd-a-blue-dark) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Hospital card (.dd-hosp-card) — the "Newly added hospitals" section.

   Deliberately NOT the doctor card. A doctor card leads with a round portrait
   because a person is the subject; a hospital is a building, so this leads with
   a wide landscape photo and the whole card reads as a place: image on top, type
   badge over it, then name and location. Three across instead of two, because
   these carry fewer lines each.
   ------------------------------------------------------------------------ */
.dd-hosp-grid {
	display: grid !important;
	grid-template-columns:  repeat(2, minmax(0, 1fr)) !important;
	grid-auto-flow: row !important;
	justify-content: center !important;
	justify-items: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	gap: 22px !important;
}

.dd-hosp .dd-hosp-card {
	width: 100% !important;
	max-width: 900px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	gap: 12px;
    padding: 18px;
    background: #fff;
    border : 1px solid var(--dd-a-border);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(22, 50, 92, 0.05);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.dd-hosp .dd-hosp-card:hover {
	border-color: #C9DCF8;
	box-shadow: 0 10px 26px rgba(22, 104, 227, 0.10);
	transform: translateY(-2px);
}

/* Media ------------------------------------------------------------------- */
.dd-hosp .dd-hosp-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--dd-a-blue-soft);
	text-decoration: none !important;
}

.dd-hosp .dd-hosp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}

.dd-hosp .dd-hosp-card:hover .dd-hosp-card__media img {
	transform: scale(1.04);
}

.dd-hosp-card__media-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #A9C4EE;
}

/*
 * The type badge sits ON the photo, so it needs its own contrast rather than
 * borrowing the card's — a white pill with a blur reads over a dark building
 * shot and a bright sky alike.
 */
.dd-hosp-card__badge {
	position: absolute;
	left: 10px;
	bottom: 10px;
	max-width: calc(100% - 20px);
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--dd-a-navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(22, 50, 92, 0.18);
}

/* Body -------------------------------------------------------------------- */
.dd-hosp-card__body {
	flex: 1 1 auto;
	padding: 25px 0px;
	text-align: center;
}

.dd-hosp .dd-hosp-card__name {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

.dd-hosp .dd-hosp-card__name a {
	color: var(--dd-a-navy) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.dd-hosp .dd-hosp-card__name a:hover,
.dd-hosp .dd-hosp-card__name a:focus-visible {
	color: var(--dd-a-blue) !important;
}

.dd-hosp .dd-hosp-card__row {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
}

.dd-hosp .dd-hosp-card__row > span {
	display: block;
	max-width: calc(100% - 25px);
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	-webkit-line-clamp: unset;
	overflow-wrap: break-word;
	font-weight: 600;
}

.dd-hosp .dd-hosp-card__row svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--dd-a-blue);
}


/* Actions ----------------------------------------------------------------- */
.dd-hosp-card__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: auto;
	padding: 12px 16px 16px;
}

/* A lone View Details button spans the row rather than sitting half-width. */
.dd-hosp-card__actions > :only-child {
	grid-column: 1 / -1;
}

@media (max-width: 600px) {
	.dd-hosp-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 16px !important;
	}

	.dd-hosp .dd-hosp-card {
		max-width: 100% !important;
	}

	.dd-hosp-card__actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	.dd-hosp-card__body {
	padding: 20px;
}
}

@media (prefers-reduced-motion: reduce) {
	.dd-hosp .dd-hosp-card,
	.dd-hosp .dd-hosp-card__media img {
		transition: none;
	}

	.dd-hosp .dd-hosp-card:hover {
		transform: none;
	}

	.dd-hosp .dd-hosp-card:hover .dd-hosp-card__media img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   dd-vbadge
   ------------------------------------------------------------------------ */
.dd-vbadge {
	width: 26px;
	height: 26px;
	min-width: 26px;
}

.dd-vbadge svg {
	width: 26px !important;
	height: 26px !important;
}


.dd-arko .dd-arko-card__name .dd-vbadge,
.dd-hosp .dd-hosp-card__name .dd-vbadge,
.hospital-card__name .dd-vbadge {
	color: #1668E3 !important;
	flex: 0 0 auto;
}


.arko-dh-section--stories .arko-dh-story-card,
.arko-dh-section--stories .arko-dh-story-card * {
	text-decoration: none !important;
}

.arko-dh-section--stories .arko-dh-story-card:hover .arko-dh-story-card__title,
.arko-dh-section--stories .arko-dh-story-card:focus-visible .arko-dh-story-card__title {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

@media (max-width: 780px) {
	.dd-arko-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.dd-vbadge {
		width: 23px;
		height: 23px;
		min-width: 23px;
	}

	.dd-vbadge svg {
		width: 23px !important;
		height: 23px !important;
	}
}

@media (max-width: 420px) {
	.dd-arko .dd-arko-card {
		padding: 15px;
	}

	/* Stacked buttons stay comfortably tappable on a narrow phone. */
	.dd-arko-card__actions {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dd-arko .dd-arko-card,
	.dd-arko .dd-arko-btn {
		transition: none;
	}

	.dd-arko .dd-arko-card:hover {
		transform: none;
	}
}

.nd-stats {
    width: 100%;
    max-width:100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    padding: 20px;
    display: grid;
   grid-template-columns:repeat(3,minmax(0,1fr));
    gap: 10px;
    box-sizing: border-box;
}

.nd-stat {
    text-align: center;
    position: relative;
    padding: 8px 10px;
}

/*
 * Each tile is a link to its section (or, with no such section on the page, to
 * that category's listings). `!important` on the underline is the usual fight
 * with the theme's global link styling, which would otherwise strike a line
 * under the label and the count.
 */
a.nd-stat {
    display: block;
    color: inherit;
    text-decoration: none !important;
    border-radius: 14px;
    transition: background 150ms ease, transform 150ms ease;
}

a.nd-stat:hover,
a.nd-stat:focus-visible {
    background: #F5F8FF;
    transform: translateY(-2px);
}

a.nd-stat:hover .nd-title,
a.nd-stat:focus-visible .nd-title {
    color: #3366ff;
}

a.nd-stat:focus-visible {
    outline: 2px solid #3366ff;
    outline-offset: 2px;
}

/*
 * The section the tile scrolls to takes focus on arrival (see the script), and a
 * programmatic tabindex="-1" focus should not draw a ring around a whole section.
 */
.arko-dh-section:focus {
    outline: none;
}

/*
 * Stop a sticky site header from covering the section heading the tile just
 * scrolled to. 90px suits a typical Astra header; override the variable on
 * :root if this theme's header is taller or there isn't one.
 */
.arko-dh-section[id] {
    scroll-margin-top: var(--dd-scroll-offset, 90px);
}

.nd-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 20%;
    width: 1px;
    height: 60%;
    background: #ececec;
}

.nd-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    background: #EEF4FF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nd-icon svg {
    width: 26px;
    height: 26px;
    stroke: #3366ff;
}

.nd-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.nd-count {
    font-size: 15px;
    color: #6b7280;
    font-weight: 500;
}

/* Tablet */

@media (max-width:768px){

    .nd-stats{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap:20px;
    }

    .nd-stat::after{
        display:none;
    }

}

/* Mobile */

@media (max-width:480px){

    .nd-stats{
        grid-template-columns:1fr;
        padding:18px;
    }

}

/* Stat tiles — after the rules above, so this wins the cascade. */
@media (prefers-reduced-motion: reduce) {
    a.nd-stat {
        transition: none;
    }

    a.nd-stat:hover,
    a.nd-stat:focus-visible {
        transform: none;
    }
}

/* ===========================================================================
   10. Single hospital profile (.hospital-profile)
   -------------------------------------------------------------------------
   Rendered by directorist/single-hospital.php.

   The grammar, applied consistently so the page reads as one system:

     · Every block is a white card with a HEADER (title left, action link right)
       separated from its body by a hairline. No card invents its own spacing.
     · The banner carries no type — the name sits below it on white, so a busy
       shopfront photo never has to double as a background for a heading.
     · Actions are round tinted discs with the label underneath: green for the
       two that dial, blue for the three that navigate.
     · Departments are tinted blocks, services are outlined boxes. Same data
       shape, different weight — one is what the hospital IS, the other is what
       it DOES.

   Tuned for density: a hospital record is long (departments, services, doctors,
   hours, gallery, extras) and at the doctor profile's rhythm it becomes a very
   long scroll. Scale the whole page with --hp-gap and --hp-pad rather than by
   editing individual rules.

   Colours carry `!important` only where the theme fights back: Astra styles bare
   <a> and <button> globally, which otherwise underlines every label and repaints
   the fills.
   ======================================================================== */
.hospital-profile {
	--hp-page: #F5F7FA;
	--hp-surface: #FFFFFF;
	--hp-ink: #0F172A;
	--hp-navy: #16325C;
	--hp-blue: #2563EB;
	--hp-blue-dark: #1D4ED8;
	--hp-blue-soft: #E6EFFE;
	--hp-green: #15803D;
	--hp-green-mid: #16A34A;
	--hp-green-soft: #DEF7E9;
	--hp-mint: #E3F4EE;
	--hp-mint-ink: #14532D;
	--hp-red: #DC2626;
	--hp-red-soft: #FDE8E8;
	--hp-amber: #D97706;
	--hp-amber-soft: #FDF0DA;
	--hp-border: #E6E9EF;
	--hp-divider: #EEF1F6;
	--hp-meta: #475569;
	--hp-muted: #6B7C96;

	--hp-radius: 14px;
	--hp-gap: 14px;
	--hp-pad: 16px;
	--hp-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.04);
	--hp-shadow-lift: 0 8px 22px rgba(37, 99, 235, 0.10);
	--hp-transition: 150ms ease;

	color: var(--hp-ink);
	background: var(--hp-page);
	padding: 14px 14px 36px;
	margin: 0;
}

.hospital-profile *,
.hospital-profile *::before,
.hospital-profile *::after {
	box-sizing: border-box;
}

.hospital-profile__wrap {
	display: flex;
	flex-direction: column;
	gap: var(--hp-gap);
	max-width: 1120px;
	margin: 0 auto;
}

/* 1. Breadcrumb ----------------------------------------------------------- */
.hospital-profile__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 2px 2px 0;
	color: var(--hp-muted);
	font-size: 13px;
	line-height: 1.4;
}

.hospital-profile .hospital-profile__crumbs a {
	color: var(--hp-meta) !important;
	text-decoration: none !important;
}

.hospital-profile .hospital-profile__crumbs a:hover,
.hospital-profile .hospital-profile__crumbs a:focus-visible {
	color: var(--hp-blue) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.hospital-profile__crumb-sep {
	color: #B4BECC;
}

/* The current page is a dead end, so it reads as text — but it can be long. */
.hospital-profile__crumb-current {
	min-width: 0;
	max-width: 100%;
	color: var(--hp-ink);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 2. Card shell ----------------------------------------------------------- */
.hospital-profile__card,
.hospital-profile__hero {
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow);
	scroll-margin-top: calc(var(--dd-sticky-offset, 0px) + 16px);
}

/* Header and body are padded separately so the hairline can run edge to edge. */
.hospital-profile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px var(--hp-pad);
	border-bottom: 1px solid var(--hp-divider);
}

.hospital-profile__body {
	padding: var(--hp-pad);
}

.hospital-profile__title {
	margin: 0;
	color: var(--hp-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* The header's right-hand action. Same styling whether it is a link or a
   button, because "View All" is one of each depending on the block. */
.hospital-profile .hospital-profile__link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--hp-blue) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
}

.hospital-profile .hospital-profile__link:hover,
.hospital-profile .hospital-profile__link:focus-visible {
	color: var(--hp-blue-dark) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.hospital-profile__link[hidden] {
	display: none !important;
}

.hospital-profile__link svg {
	transition: transform var(--hp-transition);
}

/* The chevron points right until the block is open, then down. */
.hospital-profile__link[aria-expanded="true"] svg {
	transform: rotate(90deg);
}

/* 3. Hero ----------------------------------------------------------------- */
.hospital-profile__hero {
	overflow: hidden;
}

.hospital-profile__banner {
	position: relative;
	display: block;
	aspect-ratio: 24 / 9;
	min-height: 170px;
	/*
	 * `width: 100%` is load-bearing: Chrome resolves an aspect-ratio box with an
	 * auto width the way it resolves a replaced element, so a max-height alone
	 * made the banner NARROWER instead of shorter and left a white gutter down
	 * the right. A definite width forces the clamp onto the height.
	 */
	width: 100%;
	max-height: 330px;
	background-color: var(--hp-navy);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* No photo: the same shape, drawn in CSS, with a watermark glyph. */
.hospital-profile__banner--empty {
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
		linear-gradient(140deg, #1D3E70 0%, #16325C 55%, #0F2547 100%);
	background-size: 14px 14px, auto;
}

.hospital-profile__banner-glyph {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(255, 255, 255, 0.22);
	line-height: 0;
}

/*
 * The only thing riding on the photo. White pill + shadow, so it reads over a
 * dark building and a bright sky alike without needing a scrim across the whole
 * image.
 */
.hospital-profile__premium {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 28px);
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--hp-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.hospital-profile__premium svg {
	flex: 0 0 auto;
	color: var(--hp-blue);
}

/* Identity ---------------------------------------------------------------- */
.hospital-profile__ident {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: var(--hp-pad);
}

.hospital-profile__logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	overflow: hidden;
	border: 1px solid var(--hp-border);
	border-radius: 14px;
	background: var(--hp-surface);
	color: var(--hp-green-mid);
	box-shadow: var(--hp-shadow);
}

/* Elementor ships `.elementor img { border-radius: 0 }` at the same specificity
   as a bare selector and loads later, hence the prefix. */
.hospital-profile .hospital-profile__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hospital-profile__logo-text {
	color: var(--hp-blue);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.hospital-profile__ident-body {
	flex: 1 1 auto;
	min-width: 0;
}

.hospital-profile .hospital-profile__name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 3px;
	color: var(--hp-ink);
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* The verified burst sits inside flex headings; it must never be squeezed. */
.hospital-profile__name .dd-vbadge,
.hospital-profile__doc-name .dd-vbadge {
	flex: 0 0 auto;
}

/* The Bangla name. Roomier line-height — the script has taller glyphs. */
.hospital-profile__local {
	margin: 0 0 9px;
	color: var(--hp-muted);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
}

.hospital-profile__tagrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 0;
}

/* Mint, not blue: the facility type is a fact about the place, and the blue in
   this palette is reserved for things you can click. */
.hospital-profile__kind {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--hp-mint);
	color: var(--hp-mint-ink);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
}

.hospital-profile__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--hp-meta);
	font-size: 13px;
	font-weight: 600;
}

.hospital-profile__stars {
	display: inline-flex;
	gap: 1px;
}

.hospital-profile__star.is-empty {
	color: #CBD5E1;
}

.hospital-profile__star.is-full,
.hospital-profile__star.is-half {
	color: #F5A623;
}

/* Round actions ----------------------------------------------------------- */
.hospital-profile__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 4px;
	padding: 0 var(--hp-pad) 16px;
}

.hospital-profile .hospital-profile__act {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	min-width: 76px;
	padding: 6px 8px;
	border-radius: 12px;
	background: transparent !important;
	color: var(--hp-meta) !important;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	box-shadow: none !important;
}

.hospital-profile__act-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	transition: transform var(--hp-transition), box-shadow var(--hp-transition);
}

.hospital-profile .hospital-profile__act:hover .hospital-profile__act-icon,
.hospital-profile .hospital-profile__act:focus-visible .hospital-profile__act-icon {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
}

/* Filled green = it dials. Tinted blue = it navigates. */
.hospital-profile__act--call .hospital-profile__act-icon,
.hospital-profile__act--whatsapp .hospital-profile__act-icon {
	background: var(--hp-green-mid);
	color: #fff;
}

.hospital-profile__act--whatsapp .hospital-profile__act-icon {
	background: #25D366;
}

.hospital-profile__act--link .hospital-profile__act-icon {
	background: var(--hp-blue-soft);
	color: var(--hp-blue);
}

.hospital-profile .hospital-profile__act--link {
	color: var(--hp-blue) !important;
}

/* Key lines --------------------------------------------------------------- */
.hospital-profile__key {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px var(--hp-pad) var(--hp-pad);
	border-top: 1px solid var(--hp-divider);
}

.hospital-profile__key-row {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
}

.hospital-profile__key-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.hospital-profile__key-icon--pin {
	background: var(--hp-blue-soft);
	color: var(--hp-blue);
}

.hospital-profile__key-icon--emergency {
	background: var(--hp-red-soft);
	color: var(--hp-red);
}

.hospital-profile__key-icon--hours {
	background: var(--hp-amber-soft);
	color: var(--hp-amber);
}

.hospital-profile__key-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	padding-top: 4px;
	color: var(--hp-meta);
	font-size: 14px;
	line-height: 1.5;
}

.hospital-profile__key-label {
	color: var(--hp-muted);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

.hospital-profile__key-label--emergency {
	color: var(--hp-red);
}

.hospital-profile__key-value {
	overflow-wrap: break-word;
}

.hospital-profile__key-value--strong {
	color: var(--hp-ink);
	font-weight: 600;
}

.hospital-profile .hospital-profile__key-value a {
	color: inherit !important;
	text-decoration: none !important;
}

.hospital-profile .hospital-profile__key-value a:hover,
.hospital-profile .hospital-profile__key-value a:focus-visible {
	color: var(--hp-blue) !important;
}

/* 4. Two-up row ----------------------------------------------------------- */
.hospital-profile__duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: var(--hp-gap);
}

/* A lone card in the row spans it rather than sitting in a half-width column. */
.hospital-profile__duo > :only-child {
	grid-column: 1 / -1;
}

/* 5. About ---------------------------------------------------------------- */
.hospital-profile__prose {
	color: var(--hp-meta);
	font-size: 14.5px;
	line-height: 1.7;
}

.hospital-profile__prose > *:first-child {
	margin-top: 0;
}

.hospital-profile__prose > *:last-child {
	margin-bottom: 0;
}

/* Applied by the script only once it has measured a real overflow, so a short
   description keeps its full text and no toggle appears. */
.hospital-profile__prose.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 6. Departments ---------------------------------------------------------- */
.hospital-profile__depts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hospital-profile__dept {
	margin: 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--hp-mint);
	color: var(--hp-ink);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
}

/* The script sets [hidden] on the overflow blocks; an author `display` rule
   would beat the browser's built-in [hidden] { display: none } without this. */
.hospital-profile__dept[hidden] {
	display: none;
}

/* 7. Services ------------------------------------------------------------- */
.hospital-profile__services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hospital-profile__service {
	margin: 0;
	padding: 12px 15px;
	border: 1px solid var(--hp-border);
	border-radius: 10px;
	background: var(--hp-surface);
	color: var(--hp-ink);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
}

/* 8. Doctors -------------------------------------------------------------- */
/* 280px, not 250: at 250 a 1120px card fits four across and "Dr. Nikhil Chandra
   Roy" wraps to two lines in every one of them. Three across, names on one. */
.hospital-profile__docs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hospital-profile__doc {
	margin: 0;
}

.hospital-profile .hospital-profile__doc-link {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 9px 10px;
	border: 1px solid var(--hp-border);
	border-radius: 11px;
	color: var(--hp-ink) !important;
	text-decoration: none !important;
	transition: border-color var(--hp-transition), box-shadow var(--hp-transition),
		transform var(--hp-transition);
}

.hospital-profile .hospital-profile__doc-link:hover,
.hospital-profile .hospital-profile__doc-link:focus-visible {
	border-color: #C7DAFB;
	box-shadow: var(--hp-shadow-lift);
	transform: translateY(-1px);
}

.hospital-profile__doc-photo {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--hp-blue-soft);
	overflow: hidden;
}

.hospital-profile .hospital-profile__doc-photo img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.hospital-profile__doc-initials {
	color: var(--hp-blue);
	font-size: 15px;
	font-weight: 700;
}

.hospital-profile__doc-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.hospital-profile__doc-name {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--hp-ink);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
}

.hospital-profile__doc-spec,
.hospital-profile__doc-degrees {
	color: var(--hp-muted);
	font-size: 11.5px;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hospital-profile__doc-spec {
	color: var(--hp-green);
	font-weight: 600;
}

.hospital-profile__doc-chevron {
	flex: 0 0 auto;
	color: #A9B6C9;
}

/* 9. Photo gallery -------------------------------------------------------- */
.hospital-profile__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hospital-profile__shot {
	margin: 0;
}

.hospital-profile .hospital-profile__shot-btn {
	display: block;
	width: 100%;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 10px;
	background: var(--hp-blue-soft) !important;
	box-shadow: none !important;
	overflow: hidden;
	cursor: zoom-in;
	aspect-ratio: 8 / 5;
	line-height: 0;
}

.hospital-profile .hospital-profile__shot-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}

.hospital-profile .hospital-profile__shot-btn:hover img,
.hospital-profile .hospital-profile__shot-btn:focus-visible img {
	transform: scale(1.05);
}

.hospital-profile .hospital-profile__shot-btn:focus-visible {
	outline: 2px solid var(--hp-blue);
	outline-offset: 2px;
}

/* 10. Contact rows -------------------------------------------------------- */
.hospital-profile__rows {
	display: flex;
	flex-direction: column;
}

.hospital-profile .hospital-profile__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--hp-divider);
	color: var(--hp-ink);
	text-decoration: none !important;
}

.hospital-profile .hospital-profile__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.hospital-profile .hospital-profile__row:first-child {
	padding-top: 0;
}

.hospital-profile__row-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--hp-blue-soft);
	color: var(--hp-blue);
}

.hospital-profile__row-body {
	flex: 1 1 auto;
	min-width: 0;
}

.hospital-profile__row-label {
	display: block;
	color: var(--hp-muted);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.4;
}

.hospital-profile__row-value {
	display: block;
	color: var(--hp-ink);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	overflow-wrap: break-word;
	transition: color var(--hp-transition);
}

.hospital-profile .hospital-profile__row--link:hover .hospital-profile__row-value,
.hospital-profile .hospital-profile__row--link:focus-visible .hospital-profile__row-value {
	color: var(--hp-blue);
}

.hospital-profile__row-chevron {
	flex: 0 0 auto;
	color: #A9B6C9;
}

/* The one full-width button on the page. */
.hospital-profile .hospital-profile__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	margin-top: 13px;
	padding: 9px 16px;
	border: 1px solid var(--hp-blue) !important;
	border-radius: 10px;
	background: var(--hp-blue) !important;
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none !important;
	box-shadow: none !important;
}

.hospital-profile .hospital-profile__btn:hover,
.hospital-profile .hospital-profile__btn:focus-visible {
	background: var(--hp-blue-dark) !important;
	border-color: var(--hp-blue-dark) !important;
	color: #fff !important;
}

/* 11. At a glance --------------------------------------------------------- */
.hospital-profile__glance {
	margin: 0;
}

.hospital-profile__glance-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--hp-divider);
}

.hospital-profile__glance-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.hospital-profile__glance-row:first-child {
	padding-top: 0;
}

.hospital-profile__glance dt {
	color: var(--hp-muted);
	font-size: 12.5px;
	font-weight: 600;
}

.hospital-profile__glance dd {
	margin: 0;
	color: var(--hp-ink);
	font-size: 13px;
	font-weight: 700;
	text-align: right;
	overflow-wrap: break-word;
}

/* 12. Additional information ---------------------------------------------- */
.hospital-profile__info {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px 20px;
	margin: 0;
}

.hospital-profile__info-row {
	min-width: 0;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--hp-divider);
}

/* Prose and uploads read better across the full width than in a narrow column. */
.hospital-profile__info-row--textarea,
.hospital-profile__info-row--file {
	grid-column: 1 / -1;
}

.hospital-profile__info-label {
	margin: 0 0 2px;
	color: var(--hp-muted);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hospital-profile__info-value {
	margin: 0;
	color: var(--hp-meta);
	font-size: 13.5px;
	line-height: 1.55;
	overflow-wrap: break-word;
}

.hospital-profile .hospital-profile__info-value a {
	color: var(--hp-blue);
}

.hospital-profile__info-value img {
	max-width: 84px;
	height: auto;
	margin-right: 6px;
	border-radius: 8px;
}

/* 13. Nearby hospitals ---------------------------------------------------- */
/*
 * The homepage runs these three across a narrower strip. Two of them spanning a
 * 1120px row would stretch the 16:10 photo to ~340px tall and turn a footnote
 * into the loudest thing on the page, so the height is capped and the image
 * crops instead.
 */
.hospital-profile__nearby .dd-hosp-card__media {
	max-height: 175px;
}

/* 14. Photo lightbox ------------------------------------------------------ */
/*
 * Created by the script, so it only ever exists where JS runs — with JS off the
 * gallery thumbnails simply don't open, which is why they are buttons rather
 * than links promising a page that wouldn't load.
 */
.dd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(11, 26, 51, 0.88);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.dd-lightbox[hidden] {
	display: none;
}

.dd-lightbox__img {
	max-width: min(1100px, 100%);
	max-height: 100%;
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	object-fit: contain;
}

.dd-lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 150ms ease;
}

.dd-lightbox__btn:hover,
.dd-lightbox__btn:focus-visible {
	background: rgba(255, 255, 255, 0.28) !important;
}

.dd-lightbox__close {
	top: 16px;
	right: 16px;
}

.dd-lightbox__prev {
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.dd-lightbox__next {
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.dd-lightbox__count {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.86);
	font-size: 13px;
	font-weight: 600;
}

/* Prevents the page behind the lightbox from scrolling under it. */
body.dd-lightbox-open {
	overflow: hidden;
}

/* 15. Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
	.hospital-profile__duo {
		grid-template-columns: minmax(0, 1fr);
	}

	.hospital-profile__services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hospital-profile__info {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.hospital-profile {
		--hp-pad: 14px;
		--hp-gap: 11px;
		padding: 10px 10px 28px;
	}

	.hospital-profile__banner {
		aspect-ratio: 16 / 9;
		min-height: 150px;
	}

	.hospital-profile__ident {
		gap: 12px;
	}

	.hospital-profile__logo {
		width: 58px;
		height: 58px;
		border-radius: 12px;
	}

	.hospital-profile .hospital-profile__name {
		font-size: 20px;
	}

	.hospital-profile__local {
		font-size: 14px;
	}

	/*
	 * Three per row on a phone rather than a sideways scroller: five discs at
	 * 76px overflow a 390px screen, and a row that scrolls hides the last action
	 * behind a gesture nobody is told about. A grid shows all five at once.
	 */
	.hospital-profile__acts {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px 4px;
	}

	.hospital-profile .hospital-profile__act {
		min-width: 0;
	}

	.hospital-profile__act-icon {
		width: 44px;
		height: 44px;
	}

	.hospital-profile__depts,
	.hospital-profile__services,
	.hospital-profile__info {
		grid-template-columns: minmax(0, 1fr);
	}

	.hospital-profile__docs {
		grid-template-columns: minmax(0, 1fr);
	}

	.hospital-profile__gallery {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}

	.dd-lightbox {
		padding: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hospital-profile .hospital-profile__doc-link,
	.hospital-profile .hospital-profile__shot-btn img,
	.hospital-profile__act-icon,
	.hospital-profile__link svg {
		transition: none;
	}

	.hospital-profile .hospital-profile__doc-link:hover,
	.hospital-profile .hospital-profile__doc-link:focus-visible,
	.hospital-profile .hospital-profile__act:hover .hospital-profile__act-icon,
	.hospital-profile .hospital-profile__act:focus-visible .hospital-profile__act-icon {
		transform: none;
	}

	.hospital-profile .hospital-profile__shot-btn:hover img,
	.hospital-profile .hospital-profile__shot-btn:focus-visible img {
		transform: none;
	}
}