/**
 * SanorixCare Doctor List
 *
 * Deliberately thin. Everything a designer touches — colours, spacing, radius,
 * typography, card width — is set in Elementor on ordinary elements, and
 * Elementor's generated CSS is more specific than anything here, so its values
 * always win. This file only supplies sensible defaults for what Elementor has
 * no control for, plus the show/hide mechanics the script needs.
 */

/* The script toggles this. !important because Elementor sets display on
   containers and would otherwise keep a filtered-out card visible. */
.sdd-hidden {
	display: none !important;
}

/**
 * Grid layout.
 *
 * This is the one place the plugin overrules Elementor. Elementor writes its own
 * per-element width rule for every container, and that rule is more specific
 * than anything a stylesheet can reach, so the cards would always come out full
 * width and stack. The column count is therefore driven from here instead, by a
 * class on the grid — see the sdd-cols-* list below.
 *
 * Only the grid's own layout is fixed this way. Everything inside a card is
 * untouched and stays fully editable in Elementor.
 */
.sdd-grid {
	--sdd-cols-desktop: 4;
	--sdd-cols-tablet: 2;
	--sdd-cols-mobile: 1;
	--sdd-cols: var(--sdd-cols-desktop);
	--sdd-gap: 24px;
}

/**
 * A container set to "boxed" wraps its children in an .e-con-inner, so the row
 * has to be laid out on whichever of the two actually holds the cards.
 */
.sdd-grid,
.sdd-grid > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: var(--sdd-gap) !important;
}

/* Descendant, not child, for the same reason. */
.sdd-grid .sdd-card {
	/* Total width minus the gaps between the columns, split evenly. */
	width: calc(
		(100% - (var(--sdd-gap) * (var(--sdd-cols) - 1))) / var(--sdd-cols)
	) !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
}

/* Columns on a normal screen: add one of these to the grid's CSS Classes. */
.sdd-cols-1 { --sdd-cols-desktop: 1; }
.sdd-cols-2 { --sdd-cols-desktop: 2; }
.sdd-cols-3 { --sdd-cols-desktop: 3; }
.sdd-cols-4 { --sdd-cols-desktop: 4; }
.sdd-cols-5 { --sdd-cols-desktop: 5; }
.sdd-cols-6 { --sdd-cols-desktop: 6; }

/* Columns on tablet and phone. */
.sdd-t-cols-1 { --sdd-cols-tablet: 1; }
.sdd-t-cols-2 { --sdd-cols-tablet: 2; }
.sdd-t-cols-3 { --sdd-cols-tablet: 3; }
.sdd-m-cols-1 { --sdd-cols-mobile: 1; }
.sdd-m-cols-2 { --sdd-cols-mobile: 2; }

/* Space between cards. */
.sdd-gap-0  { --sdd-gap: 0px; }
.sdd-gap-16 { --sdd-gap: 16px; }
.sdd-gap-20 { --sdd-gap: 20px; }
.sdd-gap-24 { --sdd-gap: 24px; }
.sdd-gap-30 { --sdd-gap: 30px; }
.sdd-gap-40 { --sdd-gap: 40px; }

/**
 * The breakpoints only switch which of the three counts --sdd-cols reads, so a
 * class set above keeps working at every size without any specificity contest.
 */
@media (max-width: 1024px) {
	.sdd-grid {
		--sdd-cols: var(--sdd-cols-tablet);
	}
}

@media (max-width: 767px) {
	.sdd-grid {
		--sdd-cols: var(--sdd-cols-mobile);
	}
}

.sdd-pagination {
	--display: flex;
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-items: center;
	--justify-content: center;
	--gap: 8px;
	--row-gap: 8px;
	--column-gap: 8px;
}

/* =========================================================================
 * Section width
 *
 * How wide the panel and the cards run is a setting on the section container,
 * not something this file otherwise touches — which is why a page can end up
 * narrower than the test directory page beside it.
 *
 * Rather than hunting for that setting in Elementor each time, put
 * `sdd-section` on the outer container and pick a width class. The inner
 * wrapper is taken out of the layout so the width holds whether the container
 * is set to boxed or full.
 *
 *   sdd-section sdd-w-1600      ← the usual pairing
 *
 * Leave the classes off entirely and nothing here applies; the container keeps
 * whatever Elementor gives it.
 * ====================================================================== */

.sdd-section {
	--sdd-max: 1600px;

	max-width: none !important;
	padding-inline: max(20px, calc((100% - var(--sdd-max)) / 2)) !important;
}

.sdd-section > .e-con-inner {
	display: contents !important;
}

.sdd-w-1140 { --sdd-max: 1140px; }
.sdd-w-1200 { --sdd-max: 1200px; }
.sdd-w-1320 { --sdd-max: 1320px; }
.sdd-w-1440 { --sdd-max: 1440px; }
.sdd-w-1600 { --sdd-max: 1600px; }
.sdd-w-1820 { --sdd-max: 1820px; }
.sdd-w-full { --sdd-max: 100%; }

/* =========================================================================
 * The theme's page header
 *
 * Elementor will not let a widget sit at the top of a page on its own, so the
 * theme's header widget has to be wrapped in a container. That wrapper must
 * contribute nothing: the header already carries its own height, and a
 * container's default padding lands on top of it, leaving a band of empty blue
 * below the breadcrumb that the site's own pages do not have.
 * ====================================================================== */

.sdd-hero {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
}

.sdd-hero > .e-con-inner {
	display: contents !important;
}

/* =========================================================================
 * Search panel
 *
 * The pale block from the test directory page: a heading, the search on a row
 * of its own, and the department chips centred beneath it.
 *
 * Laid out here rather than through the container's Elementor settings. The
 * search has to take a full row while the chips wrap under it, and those two
 * are ordinary siblings inside the same container — nothing in the Elementor
 * panel expresses "this child spans the row and the rest flow after it".
 * ====================================================================== */

.sdd-toolbar {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 30px 36px 32px !important;
	margin: 0 0 34px !important;
	background: #EAF2FB !important;
	border-radius: 12px !important;
}

.sdd-panel-title {
	flex: 1 1 100% !important;
	margin: 0 0 4px !important;
	text-align: center;
}

/* Full row, so the chips start on the line below rather than beside it. */
.sdd-search {
	flex: 1 1 100% !important;
	display: flex !important;
	justify-content: center !important;
	margin: 0 0 8px !important;
	min-width: 0;
}

.sdd-searchbar {
	display: flex;
	width: 100%;
	max-width: 760px;
	background: #FFFFFF;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.sdd-searchbar:focus-within {
	box-shadow: 0 0 0 3px rgba(47, 109, 181, 0.22);
}

.sdd-search-input {
	width: 100%;
	max-width: 760px;
	padding: 15px 20px;
	background: #FFFFFF;
	color: #11316E;
	border: 0;
	border-radius: 8px;
	font: inherit;
	line-height: 1.4;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.sdd-search-input::placeholder {
	color: #93A3B8;
	opacity: 1;
}

/* Inside the bar the input is one half of a joined control, so it gives up its
   own corners and width to the wrapper. */
.sdd-searchbar .sdd-search-input {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	border-radius: 0;
}

.sdd-search-btn {
	flex: none;
	padding: 0 38px;
	background: #4A90D9;
	color: #FFFFFF;
	border: 0;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sdd-search-btn:hover {
	background: #3A7DC2;
}

/* ---------- Filter buttons ---------- */

/**
 * Both states are set here, not just the selected one.
 *
 * Elementor has no "active" state for a Button widget, so the selected chip has
 * to be coloured in CSS. But the resting colour has to be stated too: whatever
 * colour a button carries from its own Elementor settings would otherwise stay
 * put when another chip is chosen, and a button left green while a different
 * one is selected says the wrong thing.
 *
 * Only the three colour properties are set, so padding, radius, typography and
 * everything else on the Style tab still applies.
 *
 * These four values are the only place the chip colours are stated.
 */
.sdd-filter {
	--sdd-idle-bg: rgba(255, 255, 255, 0.72);
	--sdd-idle-color: #46587A;
	--sdd-idle-hover-bg: #FFFFFF;
	--sdd-idle-hover-color: #11316E;
	--sdd-active-bg: #2E7D32;
	--sdd-active-color: #FFFFFF;
	--sdd-chip-radius: 6px;

	cursor: pointer;
}

/**
 * All three states are forced.
 *
 * Two other rules already claim these buttons: the theme styles
 * `.elementor-button:hover` site-wide, and Elementor writes a per-element rule
 * for every colour set in the panel. Both outrank a plain class selector, and
 * the theme's hover turns the background white while leaving the label white
 * too — a chip that disappears under the pointer. Colour, border and radius are
 * therefore stated outright so a chip reads the same wherever it came from.
 *
 * Everything else on the Style tab — padding, typography, shadow — is left
 * alone and still edits normally.
 */
.sdd-filter .elementor-button {
	background-color: var(--sdd-idle-bg) !important;
	border-color: var(--sdd-idle-bg) !important;
	color: var(--sdd-idle-color) !important;
	border-radius: var(--sdd-chip-radius) !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover can land on the wrapper or on the anchor itself, so both are covered. */
.sdd-filter:not(.is-active):hover .elementor-button,
.sdd-filter:not(.is-active) .elementor-button:hover,
.sdd-filter:not(.is-active) .elementor-button:focus {
	background-color: var(--sdd-idle-hover-bg) !important;
	border-color: var(--sdd-idle-hover-bg) !important;
	color: var(--sdd-idle-hover-color) !important;
}

.sdd-filter.is-active .elementor-button,
.sdd-filter.is-active .elementor-button:hover,
.sdd-filter.is-active .elementor-button:focus {
	background-color: var(--sdd-active-bg) !important;
	border-color: var(--sdd-active-bg) !important;
	color: var(--sdd-active-color) !important;
}

/* ---------- Pagination ---------- */

.sdd-pagination {
	flex-wrap: wrap;
}

.sdd-page-btn {
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	font: inherit;
	line-height: 1;
}

.sdd-page-btn:not(.is-current):not(.is-dots) {
	opacity: 0.55;
}

.sdd-page-btn:hover:not(:disabled) {
	opacity: 1;
}

.sdd-page-btn:disabled {
	opacity: 0.25;
	cursor: default;
}

.sdd-page-btn.is-dots {
	background: transparent;
	box-shadow: none;
	min-width: 24px;
	padding: 0;
}

/* ---------- Card ---------- */

/* Cards in a row should line their content up, not float at different heights. */
.sdd-card {
	height: 100%;
}

/**
 * A fixed photo height keeps every card the same shape whatever the uploaded
 * images are. Change it with one of the sdd-photo-* classes on the card, or set
 * a height on the Image widget in Elementor — that is more specific and wins.
 */
.sdd-card {
	--sdd-photo-height: 240px;
}

.sdd-photo-160 { --sdd-photo-height: 160px; }
.sdd-photo-200 { --sdd-photo-height: 200px; }
.sdd-photo-240 { --sdd-photo-height: 240px; }
.sdd-photo-300 { --sdd-photo-height: 300px; }
.sdd-photo-360 { --sdd-photo-height: 360px; }
.sdd-photo-auto { --sdd-photo-height: auto; }

.sdd-card .sdd-photo img {
	display: block;
	width: 100%;
	height: var(--sdd-photo-height);
	object-fit: cover;
	object-position: center top;
}

/* The silhouette is artwork, not a photograph: show all of it, never crop it. */
.sdd-card .sdd-photo--placeholder img {
	object-fit: contain;
	object-position: center;
}

@media (prefers-reduced-motion: reduce) {
	.sdd-filter .elementor-button,
	.sdd-page-btn {
		transition: none;
	}
}