/**
 * MSAD Directory 2026 -- page-specific sections.
 * Spec: "MSAD Directory.dc.html".
 */

.msad-h26__dir {
	max-width: var(--h26-max);
	margin: 0 auto;
	padding: 48px var(--h26-gutter) 0;
}

.msad-h26__dir-controls {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 20px;
	align-items: center;
}

.msad-h26__dir-search {
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	border: 1.5px solid var(--h26-hairline);
	border-radius: 10px;
	padding: 14px 18px;
	font-family: var(--h26-font-body);
	font-size: 16px;
	color: var(--h26-text);
	background: #fff;
}

.msad-h26__dir-search:focus {
	outline: var(--h26-focus);
	outline-offset: 2px;
}

.msad-h26__dir-count {
	font-size: 14px;
	color: var(--h26-muted);
	white-space: nowrap;
}

/* Category pills (hidden until listings carry categories) */
.msad-h26__dir-cats {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.msad-h26__dir-cat {
	font-family: var(--h26-font-body);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1.5px solid var(--h26-cranberry);
	background: #fff;
	color: var(--h26-sky-700);
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	transition: background-color var(--h26-transition), color var(--h26-transition),
		border-color var(--h26-transition);
}

.msad-h26__dir-cat:hover {
	border-color: var(--h26-sky-700);
}

.msad-h26__dir-cat.is-active {
	background: var(--h26-navy);
	color: #fff;
	border-color: var(--h26-navy);
}

.msad-h26__dir-cat:focus-visible {
	outline: var(--h26-focus);
	outline-offset: 3px;
}

/* Listing cards */
.msad-h26__dir-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 32px;
}

.msad-h26__dir-card {
	display: flex;
	position: relative;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--h26-border);
	border-radius: 12px;
	padding: 24px 26px;
	transition: transform var(--h26-transition), box-shadow var(--h26-transition);
}

.msad-h26__dir-card[hidden] {
	display: none;
}

/* Tri-stripe hover cap: blue/green/red, weighted 4:3:2 (matches the News
   page cards' treatment). No overflow:hidden on this card, so the corner
   radius is set directly on the pseudo-element instead. */
.msad-h26__dir-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	border-radius: 0 0 12px 12px;
	background: linear-gradient(to right, var(--brand-bay-blue) 0 44.44%, var(--h26-sky) 44.44% 77.78%, var(--brand-cranberry) 77.78% 100%);
	opacity: 0;
	transition: opacity var(--h26-transition);
	pointer-events: none;
}

.msad-h26__dir-card:hover,
.msad-h26__dir-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(15, 25, 52, 0.12);
}

.msad-h26__dir-card:hover::after,
.msad-h26__dir-card:focus-visible::after {
	opacity: 1;
}

.msad-h26__dir-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.msad-h26__dir-card-cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--h26-sky-700);
}

.msad-h26__dir-deaf-led {
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	background: var(--h26-band);
	color: var(--h26-accent-700);
	padding: 4px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

.msad-h26__dir-card-name {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var(--h26-navy);
	margin-top: 12px;
	text-wrap: pretty;
}

.msad-h26__dir-card-top:empty + .msad-h26__dir-card-name {
	margin-top: 0;
}

.msad-h26__dir-card-desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--h26-muted);
	margin: 10px 0 0;
	flex: 1;
}

.msad-h26__dir-card-more {
	font-weight: 700;
	font-size: 14px;
	color: var(--h26-sky-700);
	margin-top: 16px;
}

.msad-h26__dir-empty {
	padding: 28px 8px;
	font-size: 15px;
	color: var(--h26-muted);
}

.msad-h26__dir-empty[hidden] {
	display: none;
}

/* Add-your-listing CTA band */
.msad-h26__dir-cta {
	background: var(--h26-band);
	border-top: 1px solid var(--h26-band-border);
	margin-top: 88px;
}

.msad-h26__dir-cta-inner {
	max-width: var(--h26-max);
	margin: 0 auto;
	padding: 72px var(--h26-gutter);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
}

.msad-h26__dir-cta-title {
	font-family: var(--h26-font-head);
	font-weight: 700;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--h26-navy);
	text-wrap: balance;
}

.msad-h26__dir-cta-sub {
	font-size: 16px;
	line-height: 1.6;
	color: var(--h26-muted);
	margin: 14px 0 0;
	max-width: 56ch;
}

.msad-h26__dir-cta .msad-h26__btn--accent {
	min-height: 50px;
	padding: 0 26px;
	font-size: 16px;
	white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) {
	.msad-h26__dir-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.msad-h26__dir-cta-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 720px) {
	.msad-h26__dir {
		padding-top: 36px;
	}

	.msad-h26__dir-controls {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.msad-h26__dir-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msad-h26__dir-card:hover,
	.msad-h26__dir-card:focus-visible {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Add/Edit Listing form (Directories Pro's own frontend-submit markup,
   class "drts-entity-form" -- NOT Meta Box, so none of the .rwmb-* rules
   from news/event/bills-submit-2026.css apply here). Same card system as
   those three forms: 860px white card, same fonts/colors/button. Directories
   Pro renders every field as its own sibling row with no native grouping in
   this display, so "groups" here are done with a border-top + heading on
   the first field of each new section, same idea as the numbered-step
   dividers on the Meta Box forms, just without numbers (per the Bills
   Submission precedent of "just the title").
   --------------------------------------------------------------------------- */

/* Mirrors the section that wraps .form-submission-wrapper on the other
   three forms exactly: a full-bleed tinted band (so the white card actually
   stands out against something) with the same 64px-top/80px-bottom rhythm
   as that section's own padding. The band itself stays edge-to-edge here
   (background lives on #drts-content, not the inner wrapper below) --
   only the CONTENT column is capped/centered. */
#drts-content:has(.drts-entity-form) {
	background: var(--h26-band);
	padding: 26px 0 80px;
}

/* max-width/margin here match .msad-h26__page-hero-inner's own -- without
   it, #drts-body spans the full band while the hero text above is centered
   within --h26-max, so anything sitting at #drts-body's own left edge
   (like the Directory Dashboard's "Back to Manage Listings" button) drifts
   away from the hero text's left edge on any viewport wider than
   --h26-max. Scoped to this specific context, not #drts-body generally --
   that ID isn't unique to these two forms. */
#drts-content:has(.drts-entity-form) #drts-body {
	max-width: var(--h26-max);
	margin: 0 auto;
	padding: 0 var(--h26-gutter);
}

/* Same recipe as .form-submission-wrapper in news/event/bills-submit-2026.css
   -- max-width, background, border, radius, shadow, padding all identical,
   so this card reads as the same component. !important on max-width/margin
   because the plugin's own main.min.css sets ".drts-form { margin: 0 }" at
   equal (single-class) specificity -- rather than rely on stylesheet load
   order to win that tie, this settles it outright. */
.drts-entity-form {
	max-width: 860px !important;
	margin: 0 auto !important;
	width: 100%;
	background: #fff;
	border: 1px solid var(--h26-border);
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(15, 25, 52, 0.08);
	padding: 40px;
	font-family: var(--h26-font-body);
	color: var(--h26-text);
	box-sizing: border-box;
}

.drts-entity-form label {
	font-family: var(--h26-font-body);
}

/* Only the TOP-LEVEL field labels (Title, Address:, Phone Number:, ...) get
   the heading treatment -- "drts-entity-form-field" is a class the plugin
   only applies to its 17 top-level fields, never to a sub-field like
   "Address Line 1" or "City", so "> label" reaches exactly those and no
   deeper. */
.drts-entity-form-field > label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--h26-font-head);
	font-weight: 600;
	font-size: 21px;
	letter-spacing: -0.01em;
	color: var(--h26-navy);
}

.drts-form-field-required {
	color: var(--h26-danger);
	margin-left: 2px;
}

.drts-entity-form .drts-display-element {
	margin-bottom: 22px;
}

/* Grid items don't collapse adjacent margins the way normal block flow
   does -- a divider's own 26px padding-top would otherwise ADD to whatever
   margin-bottom the element right before it already carries, making that
   particular gap visibly bigger than the others. Zeroing margin-bottom on
   the last element of every group keeps each divider's own 26px the ONLY
   gap, everywhere, so every group-to-group gap reads the same size. */
.drts-entity-form [data-form-field-name="drts[post_title]"],
.drts-entity-form [data-form-field-name="drts[field_address]"],
.drts-entity-form [data-form-field-name="drts[field_extra_contact_info]"],
.drts-entity-form [data-form-field-name="drts[directory_photos]"],
.drts-entity-form [data-form-field-name="drts[field_social_accounts]"] {
	margin-bottom: 0;
}

/* Same reason, different boundary -- E-mail Address (still full-width, no
   divider) sits directly above Phone Number now. Without this it kept its
   default 22px on top of the grid's own row-gap, reading as a much bigger
   jump than the gap between the phone-fields rows themselves. */
.drts-entity-form [data-form-field-name="drts[field_email]"] {
	margin-bottom: 0;
}

/* Reorder Contact Info without touching the DOM: E-mail Address first (its
   own full-width row), then Phone/VP/TTY, Voice/Text/TTY-Voice, VP-Voice/
   Fax filling the 3-col grid row by row -- "order" resequences BOTH the
   full-span items and the 3-col ones together, so email (still full-span)
   forces its own row and the phone fields restart clean on the row after
   it. Every item needs an explicit order -- leaving any at the default 0
   would sort it before all of these. */
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[post_title]"]) { order: 1; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_address]"]) { order: 2; }
.drts-entity-form .msad-h26__dirform-group-heading { order: 3; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_email]"]) { order: 4; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_phone_number]"]) { order: 5; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_vp]"]) { order: 6; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_tty]"]) { order: 7; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_phone]"]) { order: 8; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_text_number]"]) { order: 9; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_tty_voice]"]) { order: 10; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_vp_voice]"]) { order: 11; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_fax]"]) { order: 12; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_extra_contact_info]"]) { order: 13; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[directory_photos]"]) { order: 14; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_website]"]) { order: 15; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_social_accounts]"]) { order: 16; }
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[post_content]"]) { order: 17; }

/* One divider per GROUP, not per field -- Address / Contact Info / Photos /
   Website (+ Social, right under it) / Description. Contact Info's divider
   sits on the injected heading row (.msad-h26__dirform-group-heading, added
   via JS -- see directory-2026.php) rather than on field_phone_number
   itself, so the heading and its border-top land on their own full-width
   row instead of inside the first (1-of-3) contact-field column. */
.drts-entity-form [data-form-field-name="drts[field_address]"],
.drts-entity-form [data-form-field-name="drts[directory_photos]"],
.drts-entity-form [data-form-field-name="drts[field_website]"],
.drts-entity-form [data-form-field-name="drts[post_content]"],
.drts-entity-form .msad-h26__dirform-group-heading {
	padding-top: 26px;
	border-top: 1px solid var(--h26-border);
}

.drts-entity-form .msad-h26__dirform-group-heading {
	grid-column: 1 / -1;
	margin-bottom: 6.3px;
	font-family: var(--h26-font-head);
	font-weight: 600;
	font-size: 21px;
	letter-spacing: -0.01em;
	color: var(--h26-navy);
}

/* The 8 Contact Info fields are top-level fields too (so they'd otherwise
   get the same big section-heading label as Title/Address/...) -- these
   read as fields WITHIN a group, not group headings themselves, so their
   labels match the smaller sub-field style (Address Line 1, City, ...). */
.drts-entity-form-field[data-form-field-name="drts[field_email]"] > label,
.drts-entity-form-field[data-form-field-name="drts[field_phone_number]"] > label,
.drts-entity-form-field[data-form-field-name="drts[field_vp]"] > label,
.drts-entity-form-field[data-form-field-name="drts[field_tty]"] > label,
.drts-entity-form-field[data-form-field-name="drts[field_phone]"] > label,
.drts-entity-form-field[data-form-field-name="drts[field_text_number]"] > label,
.drts-entity-form-field[data-form-field-name="drts[field_tty_voice]"] > label,
.drts-entity-form-field[data-form-field-name="drts[field_vp_voice]"] > label,
.drts-entity-form-field[data-form-field-name="drts[field_fax]"] > label {
	font-family: var(--h26-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: normal;
	color: var(--h26-text);
	margin-bottom: 6px;
}

/* Inputs -- match the same base recipe as news/event/bills-submit-2026.css
   (Directories Pro's bootstrap-remapped ".drts-bs-form-control" already
   carries box-model basics; this just brings the colors/type in line). */
.drts-entity-form .drts-bs-form-control {
	box-sizing: border-box;
	width: 100%;
	border: 1.5px solid var(--h26-border);
	border-radius: 8px;
	font-family: var(--h26-font-body);
	font-size: 15px;
	color: var(--h26-text);
	background: #fff;
}

.drts-entity-form .drts-bs-form-control:focus-visible {
	outline: var(--h26-focus);
	outline-offset: 2px;
}

.drts-entity-form .drts-bs-input-group-text {
	border: 1.5px solid var(--h26-border);
	border-right: 0;
	background: var(--h26-band);
	color: var(--h26-muted);
}

.drts-entity-form .drts-bs-form-text.drts-form-description {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--h26-muted);
}

.drts-entity-form .drts-form-error {
	font-size: 13px;
	color: var(--h26-danger);
}

/* ----- Address: Address Line 1 full width, then City / State / Zip in a
   row -- "some columns, not all in one column." ----------------------- */
.drts-entity-form [data-form-field-name="drts[field_address]"] .drts-form-group {
	margin: 0;
	padding: 0;
}

.drts-entity-form [data-form-field-name$="[address]"] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 24px;
}

/* Grid items default to "min-width: auto", which lets a text input's own
   intrinsic content width refuse to shrink to its 1fr track -- exactly what
   was pushing City/State/Zip flush against each other despite the gap
   above. min-width: 0 lets each column actually respect the gap. Bootstrap's
   own .row/.col gutter system (negative margin on the row, compensating
   padding on the col) is what was indenting Address Line 1/City relative to
   every other field -- !important here because that gutter padding comes
   from a wildcard ".drts-bs-row > *" rule, and nuking it outright is more
   reliable than chasing its exact specificity. */
.drts-entity-form [data-form-field-name$="[address]"] .drts-bs-row {
	display: block;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.drts-entity-form [data-form-field-name$="[address]"] .drts-bs-col-sm-3,
.drts-entity-form [data-form-field-name$="[address]"] .drts-bs-col-sm-9 {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

.drts-entity-form [data-form-field-name$="[address]"] .drts-bs-col-form-label {
	margin-bottom: 6px;
}

.drts-entity-form [data-form-field-name$="[address]"] .drts-bs-col-form-label label {
	font-weight: 600;
	font-size: 14px;
	color: var(--h26-text);
}

.drts-entity-form [data-form-field-name$="[address][street]"] {
	grid-column: 1 / -1;
}

.drts-entity-form [data-form-field-name$="[address][city]"] {
	order: 1;
}

.drts-entity-form [data-form-field-name$="[address][province]"] {
	order: 2;
}

.drts-entity-form [data-form-field-name$="[address][zip]"] {
	order: 3;
}

/* ----- Contact Info: Phone/VP/TTY/Voice/Text/TTY-Voice/VP-Voice/Fax, three
   to a row -- Extra Contact Info + E-mail stay full width right after.
   Every field in this display is a sibling, so the grid lives on their
   shared parent; everything defaults to full width, and only these 8
   fields opt into the 3-column flow. ----------------------------------- */
.drts-entity-form .drts-display-name-form-default {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 20px;
}

.drts-entity-form .drts-display-element {
	grid-column: 1 / -1;
}

.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_phone_number]"]),
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_vp]"]),
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_tty]"]),
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_phone]"]),
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_text_number]"]),
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_tty_voice]"]),
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_vp_voice]"]),
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_fax]"]) {
	grid-column: auto;
	margin-bottom: 0;
}

/* Give the 3-col contact block its own row-gap, independent from the
   22px margin-bottom every other field uses. */
.drts-entity-form .drts-display-element:has([data-form-field-name="drts[field_fax]"]) {
	margin-bottom: 22px;
}

/* ----- Photos: they only ever need one, so this stays compact -- muted
   empty state, outline "Add Image" button instead of a filled one. ---- */
.drts-entity-form .drts-form-upload-current {
	border: 1px solid var(--h26-border);
	border-radius: 10px;
	overflow: hidden;
}

/* Paired with the JS in directory-2026.php that swaps this <img>'s src from
   WordPress's pre-cropped 150x150 thumbnail to the original uncropped file
   -- object-fit: contain shows that full image proportionally instead of
   stretching/cropping it to fill a fixed square, so the preview stops
   misrepresenting what will actually show on the live listing page. */
/* !important on max-width because the plugin's own sitewide ".drts img"
   rule sets "max-width: 100% !important" -- without matching that, this
   image inherits the width of its table cell instead of its own cap,
   which is what was rendering it far larger than intended. */
.drts-entity-form .drts-form-upload-current img {
	width: auto !important;
	height: auto !important;
	max-width: 220px !important;
	max-height: 140px !important;
	object-fit: contain;
}

.drts-entity-form .drts-bs-table {
	margin: 0;
	font-size: 14px;
}

.drts-entity-form .drts-bs-table th {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--h26-muted);
}

.drts-entity-form .drts-bs-table td[colspan] {
	color: var(--h26-muted);
	font-size: 14px;
}

.drts-entity-form .drts-wp-mediamanager-upload {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 2px solid var(--h26-navy);
	border-radius: var(--radius-md, 8px);
	background: none;
	color: var(--h26-navy);
	font-family: var(--h26-font-body);
	font-weight: 700;
	font-size: 15px;
	transition: background-color var(--h26-transition), color var(--h26-transition);
}

.drts-entity-form .drts-wp-mediamanager-upload:hover,
.drts-entity-form .drts-wp-mediamanager-upload:focus-visible {
	background: var(--h26-navy);
	color: #fff;
}

/* ----- Social Accounts: 2 columns (4 fields each), 1 on mobile. The
   plugin's own ".drts-col-md-6" split is driven by a CSS container query
   on ".drts-row" (container-type: inline-size) rather than a viewport
   media query -- its threshold wasn't clearing inside the 860px card, so
   it was rendering as a single column. Overriding with a plain grid
   sidesteps that container query instead of fighting it. */
.drts-entity-form [data-form-field-name="drts[field_social_accounts]"] .drts-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 20px;
	margin: 0;
}

.drts-entity-form [data-form-field-name="drts[field_social_accounts]"] .drts-row > [class*="drts-col-"] {
	width: 100%;
	max-width: 100%;
	flex: none;
	padding: 0;
	margin-bottom: 0;
}

.drts-entity-form .drts-social-media-field .drts-bs-input-group-text {
	color: var(--h26-sky-700);
}

/* ----- Listing Description: no "Add Media" button -- one photo, added
   above, is all this listing type needs. ------------------------------ */
.drts-entity-form [data-form-field-name="drts[post_content]"] .wp-media-buttons {
	display: none;
}

/* ----- Submit -- Add Listing has only the submit button (flex:1 on a lone
   flex item still fills the whole row); the Dashboard's Edit form also has
   a "cancel" link right after it, so both are flex:1 here and split the
   row 50/50 automatically without needing to tell the two cases apart. --- */
.drts-entity-form .drts-form-buttons {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
	border: 0;
}

.drts-entity-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 3 1 0%;
	width: auto;
	min-height: 52px;
	margin: 0 !important;
	padding: 0 26px;
	border: 0;
	border-radius: var(--radius-md, 8px);
	background: var(--brand-cranberry);
	color: var(--white);
	font-family: var(--h26-font-body);
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background-color var(--h26-transition), color var(--h26-transition);
}

.drts-entity-form button[type="submit"]:hover,
.drts-entity-form button[type="submit"]:focus-visible {
	background: var(--brand-cranberry-700);
	color: var(--white);
}

/* "cancel" link -- same outline-button treatment as the "Back to Manage
   Listings" button above. 25% vs. the submit button's 75% (3:1 flex-grow
   ratio, same row). */
.drts-entity-form .drts-form-cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0%;
	min-height: 52px;
	padding: 0 26px;
	border: 2px solid var(--h26-navy);
	border-radius: var(--radius-md, 8px);
	background: none;
	color: var(--h26-navy);
	font-family: var(--h26-font-body);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	transition: background-color var(--h26-transition), color var(--h26-transition);
}

.drts-entity-form .drts-form-cancel:hover,
.drts-entity-form .drts-form-cancel:focus-visible {
	background: var(--h26-navy);
	color: #fff;
}

@media (max-width: 720px) {
	.drts-entity-form {
		padding: 28px 20px;
		margin: 20px auto 40px;
	}

	.drts-entity-form [data-form-field-name$="[address]"],
	.drts-entity-form .drts-display-name-form-default {
		grid-template-columns: 1fr;
	}

	.drts-entity-form [data-form-field-name="drts[field_social_accounts]"] .drts-row {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Directory Dashboard (291791) -- used only for the frontend "edit an
   existing listing" form (see the Manage Listings snippet's Edit icon).
   Its own sidebar (My Listings / Bookmarks panels) isn't part of that flow
   here, so it's hidden and the form area takes the full width. Class names
   are unique to Directories Pro's Dashboard component, so this is safe to
   leave unscoped by page ID.
   --------------------------------------------------------------------------- */

.drts-dashboard-aside {
	display: none;
}

/* Bootstrap's own ".drts .drts-bs-col-md-9" rule is TWO classes (0,0,2,0)
   -- a single-class override here (0,0,1,0) never actually wins the width
   fight regardless of load order, which is why the card kept rendering
   wider than 860px and unevenly offset instead of centered. !important
   settles it the same way it does elsewhere in this file. Zeroing the
   row's own negative margin and this column's own gutter padding (rather
   than leaving them to roughly cancel out) is also what was throwing the
   "Back to listing" button out of alignment with the hero text above it --
   both now measure their left inset from the exact same place:
   #drts-content's own `padding: ... var(--h26-gutter) ...`. */
.drts-dashboard.drts-bs-row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.drts-dashboard-main {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.msad-h26__dirform-back-btn {
	margin-bottom: 24px;
}