/* Dental Pro — GeneratePress structural integration.
 *
 * This file is NOT design CSS. It exists only to stop the parent theme's page
 * scaffolding from fighting the design's own container system.
 *
 * GeneratePress wraps everything in #page.grid-container (a max-width box with
 * side padding) and then in #content.site-content, which is a FLEX ROW built to
 * sit a content column next to a sidebar. The design has neither: every section
 * bleeds to the viewport edge and sets its own width with the design's .wrap.
 * Dropped into that flex row, a full-bleed <main> becomes a flex item with no
 * basis and collapses to its minimum content width — which is what turned the
 * front page into a single column of one-character-per-line text.
 *
 * So on this theme's pages the page container is unwrapped (see the
 * generate_page_class filter in inc/layout.php, which also removes the
 * grid-container class) and the content wrapper goes back to being a plain
 * block. The design's .wrap and .wrap.narrow then do all the width work, which
 * is what keeps the header, sections and footer edges aligned.
 */

body.dentalpro #page {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.dentalpro #content.site-content {
	display: block;
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.dentalpro .dentalpro-main {
	display: block;
	width: 100%;
	max-width: none;
	min-width: 0;
}

/* GeneratePress adds its own separators and padding around the content column
   in its "separate containers" mode; the design draws its own. */
body.dentalpro.separate-containers #content.site-content,
body.dentalpro.separate-containers .dentalpro-main {
	background: none;
	box-shadow: none;
}

/* The parent theme's skip link targets its own #content wrapper. The design's
   skip link is the one on screen, so hide GeneratePress' duplicate rather than
   letting two stack up in the tab order. */
body.dentalpro .screen-reader-text.skip-link {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Admin-only sample-content notice.
 *
 * Not part of the design — it is a build-time aid that only users who can
 * manage options ever see, so it stays visually quiet and borrows design tokens
 * rather than introducing a colour.
 * ------------------------------------------------------------------------ */

.dentalpro-adminnote {
	background: var(--acc2);
	border-bottom: 1px solid var(--line);
	font-size: 14px;
	color: var(--mute);
}

.dentalpro-adminnote .wrap {
	padding-block: 10px;
}

.dentalpro-adminnote p {
	margin: 0;
}

.dentalpro-adminnote strong {
	color: var(--fg);
}

/* ---------------------------------------------------------------------------
 * Footer accordion — correcting a defect in the prototype.
 *
 * In the design, EVERY rule for the footer's <summary> and its .chev arrow sits
 * inside @media (max-width:719.98px): the columns are an accordion on phones
 * and are forced open above that, so the arrow is a mobile affordance only.
 *
 * Above 720px the prototype therefore leaves the arrow unstyled. An <svg> with
 * no width, height or viewBox falls back to the replaced-element default of
 * 300x150, so the arrow renders enormous, and the native <summary> disclosure
 * triangle is never hidden either. Rendering the prototype's own footer at
 * 1280px reproduces both, so this is a bug in the design rather than in the
 * transcription of it.
 *
 * Corrected here, in theme CSS, so assets/css/theme.css stays byte-identical to
 * the design. The mobile accordion is untouched.
 * ------------------------------------------------------------------------ */

@media (min-width: 720px) {

	.ftr .col > summary {
		list-style: none;
		display: block;
		cursor: default;
	}

	.ftr .col > summary::-webkit-details-marker {
		display: none;
	}

	.ftr .col > summary::marker {
		content: "";
	}

	.ftr .col > summary .chev {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Search-form field groups off the results-page filter rail.
 *
 * The design declares its two filter-group classes scoped to the rail only:
 * assets/css/directorist.css has `.filt .fgrp` (line 24) and `.filt .fl`
 * (line 25) and never a bare `.fgrp` or `.fl`. directorist/sidebar-archive-
 * contents.php puts `filt` on `.listing-with-sidebar__sidebar`, so the rail is
 * covered — but the same field templates also render on three surfaces that are
 * not the rail: the standalone [directorist_search_listing] form
 * (`.directorist-search-form__top`), the basic search modal and the advanced
 * search modal. There `.fgrp` and `.fl` match nothing, so the stacked controls
 * lose their 8px gap and every label falls back to inherited body text.
 *
 * The design's own values are repeated here rather than in directorist.css,
 * which is verbatim design CSS. Both rules are scoped to
 * `.directorist-search-field` so they cannot reach any other surface — in the
 * prototype `fgrp` and `fl` appear on the three search pages only, always
 * inside `aside.filt` — and so they outrank the plugin's single-class rules,
 * including `.directorist-search-field__label`'s absolute float, which these
 * templates deliberately drop. The declarations are identical to `.filt .fgrp`
 * / `.filt .fl`, so whichever stylesheet the browser resolves last the rail
 * renders the same.
 * ------------------------------------------------------------------------ */

.directorist-search-field.fgrp {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

.directorist-search-field .fl {
	font-size: 13.5px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Directorist archive — reconciling the plugin's stylesheet with the design's.
 *
 * Every rule below exists because the plugin's own CSS and the design's CSS are
 * property-disjoint rather than in a specificity contest: the design never
 * declares the property the plugin sets, so the plugin's declaration survives
 * whatever order the two stylesheets resolve in. None of this can be fixed in
 * assets/css/directorist.css, which is verbatim design CSS.
 *
 * Every selector is prefixed with `body.dentalpro` and pairs the plugin's hook
 * class with the design's, so each rule outranks both stylesheets and can only
 * ever match this theme's own Directorist markup.
 * ------------------------------------------------------------------------ */

/* The filter rail, at every width.
 *
 * `@media only screen and (max-width:1367px)` in the plugin's all-listings.css
 * turns `.listing-with-sidebar__sidebar` into a hidden off-canvas drawer
 * (`visibility:hidden; opacity:0`) and pins it to `min-width:300px;
 * max-width:300px`, while the base rule adds `height:100%`. The design's `.filt`
 * declares none of those four properties at any width, so without this rule the
 * rail is invisible from 1024px to 1367px — and 300px wide inside the 260px
 * track `.srch` reserves for it. */
body.dentalpro .listing-with-sidebar__sidebar.filt {
	visibility: visible;
	opacity: 1;
	min-width: 0;
	max-width: none;
	height: auto;
}

/* The mobile drawer's open state.
 *
 * Below 1024px the design parks `.filt` at `transform:translateY(105%)` and
 * opens it with `.filt.open`. The plugin's off-canvas script toggles
 * `listing-with-sidebar__sidebar--open` instead and its rule for that class
 * sets only `left`, `visibility` and `opacity` — it never touches `transform`,
 * so the sheet stayed 105% below the viewport. This bridges the plugin's class
 * onto the design's open geometry. */
body.dentalpro .listing-with-sidebar__sidebar--open.filt {
	transform: none;
}

@media (max-width: 1023.98px) {

	/* The design's bottom-sheet geometry, restated so the plugin's
	   `left:-360px; top:0` (same single-class specificity) cannot apply. Only
	   the four offsets: everything else the sheet needs is design CSS. */
	body.dentalpro .listing-with-sidebar__sidebar.filt {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
	}

	/* The plugin's close button is the sheet's only dismiss control besides
	   the backdrop, so it stays -- as a small ghost circle in the sheet's top
	   right corner, where the design's own `.xbtn` sits on its sheets. The
	   plugin's `__top` bar that carries it (a bordered title row, printed
	   after the keyword form) collapses to that one control. */
	body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-advanced-filter__top {
		position: absolute;
		top: 12px;
		right: 12px;
		z-index: 2;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		width: auto;
		display: block;
	}

	body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-advanced-filter__close {
		width: 36px;
		height: 36px;
		padding: 0;
		border-radius: 50%;
		border: 1px solid var(--line);
		background: var(--card);
		color: var(--fg);
		display: grid;
		place-items: center;
		--dentalpro-btn-rest: var(--card);
	}

	body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-advanced-filter__close .directorist-icon-mask::after {
		width: 14px;
		height: 14px;
		background-color: currentColor;
	}

	/* The design's dimmer. `.filtbd` in assets/css/theme.css is an element the
	   prototype's own script inserted; the plugin already paints a backdrop on
	   `body.modal-overlay-enabled::before` when the drawer opens, so the
	   design's values go there rather than inventing a second element. Scoped
	   with `:has()` to the drawer specifically, so the plugin's other modals
	   keep their own faint overlay — and so a browser without `:has()` simply
	   drops the rule and shows the sheet with no dimmer. */
	body.dentalpro.modal-overlay-enabled:has( .listing-with-sidebar__sidebar--open )::before {
		position: fixed;
		inset: 0;
		width: auto;
		height: auto;
		z-index: 114;
		background: rgba(4, 12, 14, .55);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}
}

@media (min-width: 1024px) {

	/* Above 1024px the rail is the design's sticky column, so the plugin's
	   off-canvas chrome has nothing to close. The plugin hides the close button
	   itself above 1367px; forcing the rail visible from 1024px would otherwise
	   expose it across the three breakpoints in between, and leave
	   `.directorist-advanced-filter__top` as an empty 25px/30px bordered bar. */
	body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-advanced-filter__top,
	body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-advanced-filter__close {
		display: none;
	}
}

/* The rail's heading.
 *
 * The design's rail opens with `<h3>Filters</h3>`, styled by `.filt h3`
 * (display font, 17px). The plugin's archive/advance-search-form.php prints the
 * same label as `<h2 class="directorist-advanced-filter__title">`, styled 20px
 * by a two-class plugin selector. directorist/sidebar-archive-contents.php
 * prints the design's `<h3>` from the plugin's own `sidebar_filter_text`
 * option, so the plugin's copy is hidden here rather than rendering twice. */
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-advanced-filter__title {
	display: none;
}

/* The results bar.
 *
 * The design's `.bar2` holds exactly two children — `.sortw` and `.seg` — with
 * `justify-content:space-between`. archive/header-bar.php still emits the
 * plugin's `__left` / `__right` wrappers, because the instant-search updater in
 * all-listings.min.js appends the re-rendered header title into `__left` and
 * uses `__right` as its fallback landing spot for the sort control. `__left`
 * carries no design content, so it is hidden; `__right` becomes `display:contents`
 * so the sort control and the view switch stay direct flex children of `.bar2`
 * and the design's space-between still resolves. */
body.dentalpro .bar2 .directorist-listings-header__left {
	display: none;
}

body.dentalpro .bar2 .directorist-listings-header__right {
	display: contents;
}

/* The results grid inside the plugin's loop wrappers.
 *
 * The plugin's infinite-scroll handler looks the loop container up by the exact
 * chain `.directorist-infinite-scroll .directorist-container-fluid
 * .directorist-row`, so archive/grid-view.php and archive/list-view.php keep
 * both wrappers and put the design's grid class on the row. These rules undo
 * the row's flex layout, its -15px gutters and the per-cell 15px padding the
 * plugin's own grid system applies — including on the `.directorist-col-*`
 * cells that the AJAX response appends, which are the plugin's markup, not
 * ours. The reset is scoped to those cells by class: the cards themselves are
 * also direct children of the row, and `.doc.v2` owns a 22px padding that a
 * bare `> *` reset was stripping. */
body.dentalpro .directorist-archive-items > .directorist-container-fluid {
	padding-left: 0;
	padding-right: 0;
}

body.dentalpro .directorist-row.doc-grid {
	display: grid;
	margin: 0;
	min-width: 0;
}

body.dentalpro .directorist-row.doc-grid > * {
	margin-top: 0;
}

body.dentalpro .directorist-row.doc-grid > [class*="directorist-col-"] {
	width: auto;
	max-width: 100%;
	min-width: 0;
	margin-top: 0;
	padding-left: 0;
	padding-right: 0;
	flex: none;
}

/* The map canvas.
 *
 * The design sizes the panel with `.gmap { height: min(72vh, 680px);
 * min-height: 440px }` and absolutely fills it with `.gmap .lmap`. Both of the
 * plugin's map renderers print their own container with an inline
 * `style="height:<listings_map_height>px"` (Listings.php:1617 for
 * OpenStreetMap, :1782 for Google), and an inline style beats any stylesheet —
 * so the canvas rendered at the plugin's configured height inside a 440-680px
 * panel. `!important` is the only thing that outranks the inline height. */
body.dentalpro .gmap .lmap > .directorist-openstreet-map,
body.dentalpro .gmap .lmap > .atbdp-map {
	height: 100% !important;
	min-height: 0;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * GeneratePress button colours.
 *
 * The parent theme paints EVERY <button> on the site — `background:#55555e`,
 * and `#3f4047` on hover and focus — through selectors like
 * `button:hover, html input[type="button"]:hover, …`, specificity (0,1,1).
 *
 * The design styles its own controls and mostly changes only the border on
 * hover, trusting the resting background to persist: `.sw:hover` is just
 * `border-color:var(--acc)`, specificity (0,2,0). Its RESTING rule `.sw` is
 * (0,1,0), which loses to the parent's (0,1,1) hover rule. So the theme toggle,
 * the sort dropdown, the favourite buttons and the filter toggle all flashed a
 * grey that belongs to neither palette — identical in light and dark, because
 * it is a literal rather than a token.
 *
 * Rather than list every control and repaint it, each one declares its own
 * resting background once, and a single rule hands that value back on every
 * interactive state. A design rule that genuinely defines a hover background is
 * at least (0,2,0) and still wins over the (0,1,1) restore below.
 * ------------------------------------------------------------------------ */

body.dentalpro button,
body.dentalpro input[type="button"],
body.dentalpro input[type="reset"],
body.dentalpro input[type="submit"] {
	--dentalpro-btn-rest: transparent;
}

/* Controls whose resting surface must survive hover and focus. */
body.dentalpro .sw,
body.dentalpro .menu-btn,
body.dentalpro .xbtn,
body.dentalpro .filtbtn,
body.dentalpro .directorist-archive-sidebar-toggle,
body.dentalpro .dsa-ss__check {
	--dentalpro-btn-rest: var(--card);
}

body.dentalpro .ddb,
body.dentalpro .directorist-dropdown__toggle {
	--dentalpro-btn-rest: var(--field);
}

body.dentalpro .skip,
body.dentalpro .directorist-btn-search,
body.dentalpro .directorist-btn-primary,
body.dentalpro .directorist-btn-submit {
	--dentalpro-btn-rest: var(--acc);
}

body.dentalpro .directorist-dropdown__links__single-js.active {
	--dentalpro-btn-rest: var(--acc2);
}

/* The plugin's modal close button ships a hardcoded #ededed. */
body.dentalpro .directorist-search-modal__contents__btn {
	--dentalpro-btn-rest: var(--cardS);
}

/* One rule replaces the parent theme's grey with whatever the control rests on.
   Matching (0,1,1) exactly, and loading after the parent, is deliberate: it
   beats GeneratePress and loses to every design rule that means it. */
button:hover,
button:focus,
button:active,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: var(--dentalpro-btn-rest, transparent);
	color: inherit;
}

/* Buttons inside post content are ordinary content buttons and keep the parent
   theme's styling, which is what an editor placing one would expect. */
body.dentalpro .entry-content button:hover,
body.dentalpro .entry-content input[type="submit"]:hover {
	background-color: revert;
	color: revert;
}


/* ---------------------------------------------------------------------------
 * The page container.
 *
 * Every non-home page in the prototype renders inside `<main id="app">`, which
 * theme.css styles as `#app { min-height:60vh; padding-block:48px 112px }`
 * (120px bottom below 1024px). This theme's pages render inside
 * `<main id="dentalpro-main">` instead -- the id changed because GeneratePress
 * already owns `#content` and the design's `#app` would collide with the
 * plugin's own `#app` mount points -- so the same box is restated here. The
 * front page is excluded: its sections carry their own vertical rhythm and its
 * hero already sits where the prototype's does.
 * ------------------------------------------------------------------------ */

body.dentalpro:not(.dentalpro-front-page) .dentalpro-main {
	min-height: 60vh;
	padding-block: 48px 120px;
}

@media (min-width: 1024px) {

	body.dentalpro:not(.dentalpro-front-page) .dentalpro-main {
		padding-bottom: 112px;
	}
}

/* ---------------------------------------------------------------------------
 * `.ddb` -- the dropdown toggle -- as the prototype actually renders it.
 *
 * directorist.css declares `.ddb { font: 500 14.5px inherit; font-family:
 * inherit }`. The `font` shorthand there is invalid -- `inherit` is a CSS-wide
 * keyword and cannot stand in for the font-family component -- so browsers drop
 * the whole declaration and the toggle falls back to the user agent's button
 * font: 13.333px, weight 400, line-height normal. That is what every screenshot
 * of the design shows. Under GeneratePress the fallback is different -- the
 * parent theme sets `body, button { font-size:17px; line-height:1.5 }` -- which
 * made the toggle 17px. This pins the toggle to the values the prototype
 * renders with.
 * ------------------------------------------------------------------------ */

body.dentalpro .ddb {
	font-size: 13.3333px;
	font-weight: 400;
	line-height: normal;
}

/* ---------------------------------------------------------------------------
 * The filter rail's field templates against the plugin's own rail rules.
 *
 * The plugin's all-listings stylesheet lays the rail out for its own markup:
 * `.listing-with-sidebar__sidebar .directorist-advanced-filter__advanced` gets
 * `padding:25px 30px 0`, each `.directorist-search-field` a 40px bottom margin
 * and `align-items:flex-start`, and every `> label` 16px black text. The design
 * rail is an 18px-padded flex column with a 12px gap, 13.5px 600 labels and
 * stretched controls. These rules give the plugin's structural wrappers the
 * design's geometry; the design values themselves come from `.filt`, `.fgrp`,
 * `.fl` and `.ck` in directorist.css.
 * ------------------------------------------------------------------------ */

body.dentalpro .listing-with-sidebar__sidebar.filt .listing-with-sidebar__searchform,
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-search-form,
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-search-form__box,
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-advanced-filter__advanced,
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-search-form__top {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	width: 100%;
	min-height: 0;
	/* The plugin sizes these for its horizontal bar (`flex:0 0 100%`, `flex:1 1 0%`)
	   and, below 1368px, for its off-canvas drawer (`.directorist-search-form__box
	   { height:100svh }`); inside the rail's column both would make the keyword
	   form a viewport tall. */
	height: auto;
	flex: none;
}

body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-advanced-filter__advanced__element,
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-search-field {
	margin: 0;
	padding: 0;
	width: 100%;
	align-items: stretch;
	flex: none;
	/* The plugin sets its field groups to 15px; the design's `.fgrp` inherits the
	   body size, which the `.inp` controls inside it then take. */
	font-size: var(--bsz);
	line-height: var(--blh);
}

/* The design's own `.filt .fgrp { margin-top:4px }`, restated because the
   plugin's `.directorist-search-form__top .directorist-search-field { flex:30%;
   margin:0 }` (0,2,0) would otherwise zero it on the keyword field and hand
   that field a 30% flex basis inside the rail's column. */
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-search-field.fgrp {
	margin-top: 4px;
}

/* The design's `.filt > label` values, which `.ck` picks up in the prototype
   because there it IS a direct child of the rail: 13.5px, a 6px gap. */
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-search-field > label.ck,
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-search-field .ck {
	font-size: 13.5px;
	line-height: var(--blh);
	color: var(--fg);
	gap: 6px;
}

body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-search-field > label.fl,
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-search-field > .fl,
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-search-field .fl {
	font-size: 13.5px;
	font-weight: 600;
	line-height: var(--blh);
	color: var(--fg);
	margin: 0;
}

/* The plugin's off-canvas "Clear all" bar has no place in the design rail; the
   reset link keeps working from the rail's own field controls. */
body.dentalpro .listing-with-sidebar__sidebar.filt .directorist-advanced-filter__action {
	display: none;
}

/* The keyword form, when the plugin prints it inside the rail (see
   directorist/sidebar-archive-contents.php): its clear button sits inside the
   design's `.inp` box. */
body.dentalpro .listing-with-sidebar__sidebar.filt .listing-with-sidebar__searchform {
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Text controls in plugin forms.
 *
 * `.directorist-form-group .directorist-form-element` (0,2,0) in the plugin's
 * stylesheet turns every text control into an underline -- `padding:0; border:
 * none; border-bottom:1px solid #d9d9d9; border-radius:0; background:
 * transparent; min-height:unset` -- and outranks the design's single-class
 * `.inp`. The design's field box is restated at (0,1,2,1) for every text-like
 * control the plugin prints: the search fields on the results and search
 * pages, the sign-in and registration forms, the dashboard, add-listing, the
 * contact-owner form and the report modal.
 * ------------------------------------------------------------------------ */

body.dentalpro .directorist-form-group .directorist-form-element:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]), textarea, select) {
	width: 100%;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: 12px 14px;
	font: inherit;
	color: var(--fg);
	background: var(--field);
	outline: none;
	min-height: 46px;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
}

body.dentalpro .directorist-form-group .directorist-form-element:is(input, textarea, select):focus {
	border-color: var(--acc);
	box-shadow: 0 0 0 4px var(--acc2);
}

body.dentalpro .directorist-form-group .directorist-form-element::placeholder {
	color: var(--mute);
	opacity: 1;
}

body.dentalpro .directorist-form-group > label,
body.dentalpro .directorist-form-group .directorist-form-label {
	font-weight: 600;
	font-size: 14px;
	color: var(--fg);
	margin-bottom: 8px;
}

/* The plugin's clear-field cross rides inside the box now. */
body.dentalpro .directorist-search-field .directorist-search-field__btn--clear {
	top: 50%;
	transform: translateY(-50%);
	right: 12px;
}

/* Plugin buttons -- sign-in, register, dashboard, add-listing, the contact-owner
   form, the report modal -- take the design's `.btn.p` geometry. Colour comes
   from the token bridge in plugins.css. */
body.dentalpro .directorist-btn {
	min-height: 46px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 14.5px;
	font-family: inherit;
	box-shadow: none;
}

body.dentalpro .directorist-btn.directorist-btn-sm {
	min-height: 40px;
	font-size: 13.5px;
}

/* ---------------------------------------------------------------------------
 * Single listing: specialty tags.
 *
 * The plugin prints each tag as a link. The design's `.tags span` is plain
 * text; the link keeps working but stops looking like body copy. */
body.dentalpro .tags span a {
	color: inherit;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Single listing: the header action group.
 *
 * The plugin's quick actions -- back link, edit link, Bookmark, Share, Report
 * -- sit on the right of the profile header card (`.phead`), which the design
 * lays out as a flex row of avatar + text column. `.pacts` is the third flex
 * child, pushed to the card's edge and aligned with the title. Back / Edit /
 * Continue are the design's `.lnk` text links; the three widgets are `.pact`
 * icon buttons in the geometry of the design's `.ib` (44px bordered square,
 * 12px radius, 1.5px `--line` border, accent on hover), with the plugin's Line
 * Awesome glyph as the icon and the label as a tooltip. The plugin's script re-renders the bookmark
 * button's contents (icon + label) after a toggle, so the label text is
 * silenced with font-size rather than removed from the markup.
 *
 * Below 720px the header card is still a row; the group wraps to a full-width
 * line under the text column, left-aligned.
 * ------------------------------------------------------------------------ */

body.dentalpro .phead {
	flex-wrap: wrap;
}

/* The text column takes what is left beside the avatar and the action group,
   and wraps the group under itself only when that leftover is too narrow. */
body.dentalpro .phead > div:not(.pacts) {
	flex: 1 1 0;
	min-width: min(280px, 100%);
}

body.dentalpro .phead .pacts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
	min-height: 44px; /* centres the text links on the icon buttons' height */
}

body.dentalpro .phead .pacts .directorist-listing-single__quick-actions {
	display: contents;
}

body.dentalpro .phead .pacts .lnk {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0 !important; /* .directorist-single-listing-action sets a 2px white border with !important. */
	border-radius: 0;
	padding: 0 4px;
	color: var(--acc);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
	box-shadow: none;
	/* min-height is left to the design: 44px on coarse pointers (theme.css). */
}

body.dentalpro .phead .pacts .pact {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	gap: 0;
	border: 1.5px solid var(--line) !important; /* the plugin's !important border, see above */
	border-radius: 12px;
	background: var(--card);
	color: var(--fg);
	font-size: 0; /* the label text is for the tooltip and the plugin's script, not the box */
	line-height: 0;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	transition: border-color .2s, color .2s, background .2s;
	--dentalpro-btn-rest: var(--card);
}

/* The plugin's `.directorist-single-listing-action:hover, :focus` paints its
   own background with !important; the design's tint has to say it too. */
body.dentalpro .phead .pacts .pact:hover,
body.dentalpro .phead .pacts .pact:focus-visible,
body.dentalpro .phead .pacts .pact[aria-pressed="true"] {
	border-color: var(--acc) !important;
	color: var(--acc);
	background: var(--acc2) !important;
}

/* The saved state as the plugin marks it, on its own so a browser without
   :has() drops only this rule (aria-pressed above covers it there). */
body.dentalpro .phead .pacts .pact:has( > .directorist-added-to-favorite ) {
	border-color: var(--acc) !important;
	color: var(--acc);
	background: var(--acc2) !important;
}

/* Keyboard focus keeps the design's global ring (theme.css `:focus-visible`,
   3px accent outline); nothing here overrides it. */

/* The icon is centred in the box on its own, so the label text node the plugin
   prints beside it (and re-prints after a toggle) cannot push it off centre. */
body.dentalpro .phead .pacts .pact .directorist-icon-mask {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 18px;
	height: 18px;
	background: none;
	margin: 0;
}

/* The unsaved bookmark shows the outline heart, so the three glyphs share one
   weight and the filled heart means "saved". The URL comes from the button
   (see directorist/single/fields/bookmark.php). */
body.dentalpro .phead .pacts .directorist-action-bookmark[style*="--dentalpro-heart-outline"] .directorist-icon-mask:not(.directorist-added-to-favorite)::after {
	-webkit-mask-image: var(--dentalpro-heart-outline);
	mask-image: var(--dentalpro-heart-outline);
}

body.dentalpro .phead .pacts .pact .directorist-icon-mask::after {
	width: 18px;
	height: 18px;
	background-color: currentColor;
}

body.dentalpro .phead .pacts .pact .directorist-favorite-tooltip,
body.dentalpro .phead .pacts .pact .directorist-single-listing-action__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The share menu, hanging from its button as the design's `.ddm`: opened on
   hover for pointer users and by the button's expanded state for everyone
   else (assets/js/directorist.js), right-aligned to the button so it stays
   inside the card. Focus alone does not open it, so Escape can close it while
   the button keeps focus. The plugin only hides this list inside its own
   `.directorist-single-listing-quick-action` bar, which is not printed here. */
body.dentalpro .phead .pacts .directorist-social-share-links {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 30;
	min-width: 180px;
	margin: 0;
	padding: 6px;
	list-style: none;
	font-size: 14px;
	line-height: var(--blh);
	text-align: left;
	background: var(--bg2);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .2s, transform .2s, visibility .2s;
}

body.dentalpro .phead .pacts .directorist-social-share:hover .directorist-social-share-links,
body.dentalpro .phead .pacts .dentalpro-share__btn[aria-expanded="true"] + .directorist-social-share-links {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* The share wrapper is only the menu's positioning box; the button inside it
   is the visible control. The plugin's action styling on the wrapper (border,
   background, min-height, gap) is cleared. */
body.dentalpro .phead .pacts .dentalpro-share {
	position: relative;
	display: inline-grid;
	padding: 0;
	margin: 0;
	border: 0 !important;
	background: none;
	min-height: 0;
	box-shadow: none;
}

body.dentalpro .phead .pacts .dentalpro-share__btn[aria-expanded="true"] {
	border-color: var(--acc) !important;
	color: var(--acc);
	background: var(--acc2) !important;
}

body.dentalpro .phead .pacts .directorist-social-share-links li {
	margin: 0;
}

body.dentalpro .phead .pacts .directorist-social-share-links a {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: 10px;
	color: var(--fg);
	font-weight: 500;
	text-decoration: none;
}

body.dentalpro .phead .pacts .directorist-social-share-links a:hover,
body.dentalpro .phead .pacts .directorist-social-share-links a:focus-visible {
	background: var(--acc2);
	color: var(--acc);
}

body.dentalpro .phead .pacts .directorist-social-share-links .directorist-icon-mask {
	display: block;
	width: 16px;
	height: 16px;
	background: none;
}

body.dentalpro .phead .pacts .directorist-social-share-links .directorist-icon-mask::after {
	width: 16px;
	height: 16px;
	background-color: currentColor;
}

@media (max-width: 719.98px) {

	/* The design's phone header: avatar and text column stay on one row
	   (`.phead > div { min-width:0; flex:1 }`), and the action group takes a
	   full-width line beneath them. */
	body.dentalpro .phead > div:not(.pacts) {
		flex: 1 1 0;
		min-width: 0;
	}

	body.dentalpro .phead .pacts {
		margin-left: 0;
		width: 100%;
		flex-basis: 100%;
		order: 3;
		padding-top: 2px;
	}
}

/* ---------------------------------------------------------------------------
 * Pagination.
 *
 * The prototype paginates nothing, so there is no design rule to transcribe;
 * the plugin's `.page-numbers` take the geometry of the design's `.ib` icon
 * buttons (44px, 12px radius, 1.5px `--line`) with the `.seg` active fill. */
body.dentalpro .directorist-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 28px 0 0;
	padding: 0;
}

body.dentalpro .directorist-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	margin: 0;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	background: var(--card);
	color: var(--fg);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: border-color .2s, color .2s, background .2s;
}

body.dentalpro .directorist-pagination a.page-numbers:hover {
	border-color: var(--acc);
	color: var(--acc);
	background: var(--acc2);
}

body.dentalpro .directorist-pagination .page-numbers.current {
	background: var(--acc);
	border-color: var(--acc);
	color: var(--accfg);
}

/* The plugin draws its icons on the element's ::after (an 18px box masked by
   `--directorist-icon`), so the element itself stays unpainted. */
body.dentalpro .directorist-pagination .page-numbers .directorist-icon-mask {
	display: block;
	width: 14px;
	height: 14px;
	background: none;
}

body.dentalpro .directorist-pagination .page-numbers .directorist-icon-mask::after {
	width: 14px;
	height: 14px;
	background-color: currentColor;
}

/* ---------------------------------------------------------------------------
 * Plugin notices -- "You need to be logged in", "Nothing to show!".
 *
 * The plugin paints these on its own amber/blue/red pastels. Restated on the
 * design's card surface with an accent rule; coral stays reserved for the
 * red-flag warning, as the brand rules require. */
body.dentalpro .directorist-alert {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--acc);
	border-radius: 14px;
	color: var(--fg);
	font-size: 14.5px;
	padding: 14px 18px;
}

body.dentalpro .directorist-alert.directorist-alert-danger {
	border-left-color: var(--urg);
}

body.dentalpro .directorist-alert a {
	color: var(--acc);
	font-weight: 600;
}

body.dentalpro .directorist-alert .directorist-icon-mask::after {
	background-color: var(--acc);
}

/* ---------------------------------------------------------------------------
 * Account screens -- sign-in, registration, dashboard, add-listing, author.
 *
 * The plugin's grid wrappers bring their own gutters; inside the design's
 * `.wrap` (which page.php adds around these screens) those gutters would
 * double up. */
body.dentalpro .dentalpro-directorist > .wrap > .directorist-w-100 > .directorist-container-fluid,
body.dentalpro .dentalpro-directorist > .wrap > .directorist-container-fluid {
	padding-left: 0;
	padding-right: 0;
}

body.dentalpro .directorist-authentication__form,
body.dentalpro .directorist-registration__form {
	border-radius: var(--r);
	border: 1px solid var(--line);
	background: var(--tile);
	box-shadow: none;
}

/* The symptom checker page: the widget sits inside the design's `.card.ckc`,
   so the widget's own frame and the card's chrome must not stack. */
body.dentalpro .ckc > .dsa-symptom-search .dsa-ss__frame,
body.dentalpro .ckc .dsa-ss {
	border: 0;
	box-shadow: none;
	background: transparent;
	padding: 0;
}

/* ---------------------------------------------------------------------------
 * The map chip inside a Leaflet container.
 *
 * The plugin initialises Leaflet on the `.gmap` element itself, which adds
 * `.leaflet-container { font: 12px/1.5 "Helvetica Neue", … }` around the
 * design's `.gchip`. In the prototype the chip inherits the page font and
 * line-height; restated so the chip does not switch typeface on the map. */
body.dentalpro .gmap .gchip {
	font-family: var(--fb);
	line-height: var(--blh);
}

/* ---------------------------------------------------------------------------
 * <button class="btn"> under GeneratePress.
 *
 * The design's `.btn` sets no line-height, so a <button class="btn"> in the
 * prototype has the user agent's `normal`; an <a class="btn"> inherits the
 * body's. GeneratePress sets `button { line-height:1.5 }`, which nudges the
 * label of every button-element `.btn` down by a pixel against its anchor
 * twins. Pinned to the prototype's value. */
body.dentalpro button.btn {
	line-height: normal;
}

/* ---------------------------------------------------------------------------
 * Map zoom control.
 *
 * The design parks Leaflet's zoom buttons in the panel's bottom-right corner
 * (`.gmap .leaflet-top.leaflet-right { top:auto; bottom:34px; right:14px }`).
 * The plugin creates the control at Leaflet's default top-left, where it sat
 * under the design's `.gchip`; the same corner is restated for that variant. */
body.dentalpro .gmap .leaflet-top.leaflet-left {
	top: auto;
	bottom: 34px;
	left: auto;
	right: 14px;
}

body.dentalpro .gmap .leaflet-top.leaflet-left .leaflet-control {
	margin: 0;
}

@media (max-width: 1023.98px) {

	body.dentalpro .resl .gmap .leaflet-top.leaflet-left {
		bottom: 96px;
	}
}