/**
 * W2DC directory FRONT-END layout grid for the [webdirectory] container.
 * Rows are flex; each slot's width comes from the 1|2|3|'twothirds' model. The
 * inline `width:%` the container emits is the raw fraction; these rules refine it
 * to subtract the row gap's share so slots + gaps fit one line (mirrors the
 * editor/listing-form gap math). w2dc-only; classes rmaps→w2dc via the build codemod.
 */
/* --w2dc-dir-gap drives every element's grid gap + spacing. It's set on the
 * container AND on each element wrapper, so a directory element rendered STANDALONE
 * (submit page / a hand-built [webdirectory-… custom_home] page — no .w2dc-dir
 * ancestor) still has the gap instead of collapsing to 0. Same 16px, so nesting
 * inside the container is unchanged. */
.w2dc-dir, .w2dc-dir-el { --w2dc-dir-gap: 16px; }
.w2dc-dir-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--w2dc-dir-gap);
	margin: 0 0 var(--w2dc-dir-gap);
	align-items: flex-start;
}
.w2dc-dir-row:last-child { margin-bottom: 0; }
.w2dc-dir-slot { box-sizing: border-box; min-width: 0; flex-grow: 0; flex-shrink: 0; }

/* Slot widths are set INLINE by the renderer as a 6-unit-grid, gap-aware calc()
 * — span/6 * (100% - (slots-1)*gap) — so any mix of 1/6·1/3·1/2·2/3·5/6·full sums
 * to the row width minus its flex gaps. (Legacy `columns` rows derive their spans
 * server-side, so they get the same inline calc — no per-cols rules needed.) */

/* Stack on small viewports. */
@media (max-width: 782px) {
	.w2dc-dir-row > .w2dc-dir-slot { width: 100% !important; }
}

.w2dc-dir-group { width: 100%; }

/* Placeholder for not-yet-implemented elements (dev-visible). */
.w2dc-dir-el--stub {
	padding: 24px;
	text-align: center;
	color: #6b7280;
	background: #f9fafb;
	border: 1px dashed #d1d5db;
	border-radius: 6px;
	font-size: 14px;
}
.w2dc-dir-error {
	padding: 16px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	border-radius: 6px;
}

/* ---------------------------------------------------------------------------
 * Search element (webdirectory-search). The rmaps search form defaults to a
 * position:absolute, 400px map OVERLAY (see search-form.css `.w2dc-search-form`
 * — z-index 700, anchored 50px from a map corner). Inside a directory slot it
 * must instead sit in normal flow and FILL the slot so its width matches the
 * layout the admin built, and its Locations dropdown must paint ABOVE a sibling
 * map element. All rules are scoped to `.w2dc-dir-el--search` only — the in-map
 * overlay form (rmaps `[webmap-search]` on a map page) is never touched, so the
 * golden master is unaffected.
 * ------------------------------------------------------------------------- */

/* Lift the whole search element above a sibling map slot. The map isolates its
 * 4-digit marker z-indexes (isolation:isolate on .w2dc-react-map-canvas-host)
 * and its wrapper is z-index:auto, so from a sibling slot the map composites at
 * ~0; a positioned z-index here reliably paints the form (incl. its inline
 * Locations dropdown) over the map (A4). */
.w2dc-dir-el--search { position: relative; z-index: 50; }
.w2dc-dir-el--search .w2dc-react-search-standalone { width: 100%; }

/* A2 — pull the overlay form back into flow and let it fill the slot, so the
 * width follows the constructor's layout instead of the fixed 400px overlay.
 * `width:auto !important` neutralises the inline `width:400` React writes from
 * the search_form_width option; the higher-specificity selector beats the base
 * `.w2dc-search-form--top-left` anchor rules. */
.w2dc-dir-el--search .w2dc-search-form {
	position: static;
	top: auto; left: auto; right: auto; bottom: auto;
	width: auto !important;
	max-width: 100%;
}

/* The base search-form.css dims the whole form to opacity:0.7 while a search is
 * in flight (`.is-submitting`) — sensible feedback when the form floats over a
 * map, but on a directory page the form's translucent-white background then lets
 * the page/theme background bleed through (looked like a "strange background"
 * under the Search button). Keep the interaction-block, drop the dim. w2dc-only
 * (directory-front.css is stripped from the rocket-maps build → map overlay keeps
 * its original 0.7 feedback). */
.w2dc-dir-el--search .w2dc-search-form.is-submitting { opacity: 1; }

/* A3 — the Address / Keyword inputs reserve `padding-right:30px` for their
 * icon; under the default content-box that made width:100% + padding overflow
 * the field. border-box keeps the padding inside the box. */
.w2dc-dir-el--search .w2dc-search-form__input,
.w2dc-dir-el--search .w2dc-search-form__input-wrap { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
 * Sub-page chrome (Ф3b): page title / breadcrumbs / term description / buttons.
 * Plain palette colors matching the placeholders above — this front file
 * carries no customization vars (the --w2dc-* set lives on admin screens);
 * spacing rides the container's --w2dc-dir-gap.
 * ------------------------------------------------------------------------- */

.w2dc-dir-el--page-title {
	margin: 0 0 var(--w2dc-dir-gap);
	font-size: 28px;
	line-height: 1.25;
}

/* Breadcrumbs: inline crumbs; the '›' separator is CSS-generated so assistive
 * tech never announces it. */
.w2dc-dir-el--breadcrumbs {
	margin: 0 0 var(--w2dc-dir-gap);
	font-size: 13px;
	color: #6b7280;
}
.w2dc-dir-crumb { display: inline; }
.w2dc-dir-crumb:not(:last-child)::after {
	content: '›';
	margin: 0 6px;
	color: #9ca3af;
}
.w2dc-dir-crumb a { color: inherit; text-decoration: none; }
.w2dc-dir-crumb a:hover { color: #374151; text-decoration: underline; }
.w2dc-dir-crumb[aria-current='page'] { color: #374151; }

/* Term description: muted intro block under the title. Edge p margins collapse
 * into the element's own gap margin. */
.w2dc-dir-el--term-description {
	margin: 0 0 var(--w2dc-dir-gap);
	color: #6b7280;
	font-size: 14px;
	line-height: 1.6;
}
.w2dc-dir-el--term-description p:first-child { margin-top: 0; }
.w2dc-dir-el--term-description p:last-child { margin-bottom: 0; }

/* Buttons row: plain-text pill links (dashicon-free by design). */
.w2dc-dir-el--buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--w2dc-dir-gap);
}
.w2dc-dir-btn {
	display: inline-block;
	padding: 6px 14px;
	/* Utility pill — outline style tinted to the Customization button color, so
	 * it FOLLOWS the settings without being a heavy solid like the primary CTA. */
	background: #fff;
	border: 1px solid var(--w2dc-button-primary, #d1d5db);
	border-radius: 6px;
	color: var(--w2dc-button-primary, #374151);
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
}
.w2dc-dir-btn:hover {
	background: var(--w2dc-button-primary, #f3f4f6);
	border-color: var(--w2dc-button-primary, #9ca3af);
	color: var(--w2dc-button-text, #111827);
}

/* ---------------------------------------------------------------------------
 * SPA navigation loading state (directory-front.js). While a sub-page fetch
 * is in flight the CURRENT container dims and stops taking clicks; the class
 * never survives a swap (the fetched container ships without it) and a failed
 * fetch falls back to a full page load, so the state cannot stick.
 * ------------------------------------------------------------------------- */
.w2dc-dir.w2dc-dir-loading {
	opacity: .55;
	pointer-events: none;
	transition: opacity .15s ease;
}

/* ---------------------------------------------------------------------------
 * Single-listing sub-page (Ф3c). Content elements (listing body fields /
 * gallery) + the interaction elements (comments / contact form / report).
 * Same muted palette as the chrome above (#111827/#374151 text, #6b7280
 * muted, #d1d5db/#f3f4f6 lines); spacing rides --w2dc-dir-gap. Field values
 * may embed engine-rendered popup markup (chips / hours table / file lists —
 * `w2dc-popup__*`, rebranded w2dc-* by the build codemod), so the value
 * scope restyles those classes here where popup.css isn't loaded.
 * ------------------------------------------------------------------------- */

/* Listing body / single-field / group elements share one block class. */
.w2dc-dir-el--listing-fields {
	margin: 0 0 var(--w2dc-dir-gap);
	font-size: 14px;
	color: #374151;
}

/* post_content block above the field rows. NB: NOT `.w2dc-listing-content` —
 * that name collides with the popup/sidebar/card scope class (core
 * `.w2dc-listing-content`, which the w2dc codemod rebrands to
 * `.w2dc-listing-content`), so this rule's margin/line-height leaked into the
 * map popup as a stray bottom gap. Named distinctly to stay scoped to the
 * directory listing page. */
.w2dc-dir-listing-content {
	margin: 0 0 var(--w2dc-dir-gap);
	line-height: 1.6;
}
.w2dc-dir-listing-content p:first-child { margin-top: 0; }
.w2dc-dir-listing-content p:last-child { margin-bottom: 0; }

/* Label + value rows. Hairline separators, no zebra — muted modern. */
.w2dc-listing-field {
	display: flex;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #f3f4f6;
	line-height: 1.5;
}
.w2dc-listing-field:last-child { border-bottom: 0; }
.w2dc-listing-field__label {
	flex: 0 0 180px;
	min-width: 0;
	color: #6b7280;
	font-weight: 500;
}
.w2dc-listing-field__value {
	flex: 1;
	min-width: 0;
	color: #111827;
	overflow-wrap: anywhere;
}
.w2dc-listing-field__value p:first-child { margin-top: 0; }
.w2dc-listing-field__value p:last-child { margin-bottom: 0; }
.w2dc-listing-field__value a { color: #2563eb; text-decoration: none; }
.w2dc-listing-field__value a:hover { text-decoration: underline; }

/* Stack label over value on small viewports. */
@media (max-width: 600px) {
	.w2dc-listing-field { flex-direction: column; gap: 2px; }
	.w2dc-listing-field__label { flex-basis: auto; }
}

/* Template groups: titled block, title underlined hairline. */
.w2dc-listing-group { margin: var(--w2dc-dir-gap) 0 0; }
.w2dc-listing-group:first-child { margin-top: 0; }
.w2dc-listing-group__title {
	margin: 0 0 4px;
	padding: 0 0 6px;
	border-bottom: 1px solid #e5e7eb;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #111827;
}

/* Chips — both the element's own term chips and the engine's list-field
 * chips (`w2dc-popup__chip`) inside a field value. */
.w2dc-listing-field__chip,
.w2dc-listing-field__value .w2dc-popup__chip {
	display: inline-block;
	margin: 2px 6px 2px 0;
	padding: 2px 10px;
	background: #f3f4f6;
	border-radius: 999px;
	color: #374151;
	font-size: 12px;
	line-height: 1.6;
	text-decoration: none;
}
a.w2dc-listing-field__chip:hover { background: #e5e7eb; color: #111827; text-decoration: none; }

/* Engine hours table + open/closed badge inside a field value (popup.css
 * isn't enqueued on directory pages). */
.w2dc-listing-field__value .w2dc-popup__hours { border-collapse: collapse; margin-top: 4px; }
.w2dc-listing-field__value .w2dc-popup__hours td { padding: 2px 14px 2px 0; border: 0; font-size: 13px; }
.w2dc-listing-field__value .w2dc-popup__hours tr.is-today td { font-weight: 600; }
.w2dc-listing-field__value .w2dc-popup__hours-status {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}
.w2dc-listing-field__value .w2dc-popup__hours-status--open { background: #dcfce7; color: #166534; }
.w2dc-listing-field__value .w2dc-popup__hours-status--closed { background: #fee2e2; color: #991b1b; }

/* Engine file-upload list inside a field value. */
.w2dc-listing-field__value .w2dc-popup__files { margin: 0; padding-left: 18px; }

/* Gallery: CSS-var column grid (the shortcode inlines --w2dc-gallery-cols);
 * plain <a> cells (no lightbox), uniform 4/3 crops. */
.w2dc-dir-el--listing-gallery {
	display: grid;
	grid-template-columns: repeat(var(--w2dc-gallery-cols, 3), 1fr);
	gap: calc(var(--w2dc-dir-gap) / 2);
	margin: 0 0 var(--w2dc-dir-gap);
}
.w2dc-listing-gallery__item {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	background: #f9fafb;
	line-height: 0;
}
.w2dc-listing-gallery__item img,
.w2dc-listing-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: opacity .15s ease;
}
.w2dc-listing-gallery__item:hover img { opacity: .88; }

/* Listing-card images in the directory GRID view — uniform proportion + height.
 * The fields-mode card renders the popup image markup, whose img defaults to
 * `height:auto; object-fit:contain` → each card's image took its own natural
 * height (ragged rows, letterboxing). In grid view every card is the SAME width
 * (equal grid columns), so pinning the image to one aspect-ratio makes every
 * card's image the same HEIGHT at any column count — 4 cols → shorter, 1 col →
 * taller, but always uniform within a row. `cover` fills the box (no letterbox).
 * Ratio is a CSS var so a theme can retune it (e.g. 16/9, 1/1). Scoped to the
 * grid view only — list view + the map popup/sidebar keep their own sizing. */
.w2dc-dir-cards--grid .w2dc-listing-content .w2dc-popup__images--single img,
.w2dc-dir-cards--grid .w2dc-listing-content .w2dc-popup__slide img {
	width: 100%;
	height: 100%;
	aspect-ratio: var(--w2dc-card-img-ratio, 4 / 3);
	object-fit: cover;
	max-width: none;
}
/* The slide flex-item + track must fill the aspect box so every slide matches. */
.w2dc-dir-cards--grid .w2dc-listing-content .w2dc-popup__slide {
	aspect-ratio: var(--w2dc-card-img-ratio, 4 / 3);
}
@media (max-width: 600px) {
	/* Cap at 2 columns on phones WITHOUT overriding an explicit 1-column
	 * editor setting — min() picks the smaller of the configured count and 2. */
	.w2dc-dir-el--listing-gallery { grid-template-columns: repeat(min(var(--w2dc-gallery-cols, 3), 2), 1fr); }
}

/* Interaction elements (comments / contact form / report). Shared muted form
 * styling — the renderers emit standard inputs/textarea/button. */
.w2dc-dir-el--listing-comments,
.w2dc-dir-el--listing-contact,
.w2dc-dir-el--listing-report,
.w2dc-dir-el--listing-claim {
	margin: 0 0 var(--w2dc-dir-gap);
	font-size: 14px;
	color: #374151;
	line-height: 1.6;
}
.w2dc-dir-el--listing-comments h3,
.w2dc-dir-el--listing-contact h3,
.w2dc-dir-el--listing-report h3,
.w2dc-dir-el--listing-claim h3 {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 600;
	color: #111827;
}
.w2dc-dir-el--listing-comments input[type='text'],
.w2dc-dir-el--listing-comments input[type='email'],
.w2dc-dir-el--listing-comments input[type='url'],
.w2dc-dir-el--listing-comments textarea,
.w2dc-dir-el--listing-contact input[type='text'],
.w2dc-dir-el--listing-contact input[type='email'],
.w2dc-dir-el--listing-contact textarea,
.w2dc-dir-el--listing-contact select,
.w2dc-dir-el--listing-report input[type='text'],
.w2dc-dir-el--listing-report input[type='email'],
.w2dc-dir-el--listing-report textarea,
.w2dc-dir-el--listing-report select,
.w2dc-dir-el--listing-claim input[type='text'],
.w2dc-dir-el--listing-claim input[type='email'],
.w2dc-dir-el--listing-claim textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 10px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	color: #111827;
	font: inherit;
	line-height: 1.4;
}
.w2dc-dir-el--listing-comments textarea,
.w2dc-dir-el--listing-contact textarea,
.w2dc-dir-el--listing-report textarea,
.w2dc-dir-el--listing-claim textarea { min-height: 96px; resize: vertical; }
.w2dc-dir-el--listing-comments input:focus,
.w2dc-dir-el--listing-comments textarea:focus,
.w2dc-dir-el--listing-contact input:focus,
.w2dc-dir-el--listing-contact textarea:focus,
.w2dc-dir-el--listing-contact select:focus,
.w2dc-dir-el--listing-report input:focus,
.w2dc-dir-el--listing-report textarea:focus,
.w2dc-dir-el--listing-report select:focus,
.w2dc-dir-el--listing-claim input:focus,
.w2dc-dir-el--listing-claim textarea:focus {
	outline: none;
	border-color: #6b7280;
}
.w2dc-dir-el--listing-comments button[type='submit'],
.w2dc-dir-el--listing-comments input[type='submit'],
.w2dc-dir-el--listing-contact button[type='submit'],
.w2dc-dir-el--listing-contact input[type='submit'],
.w2dc-dir-el--listing-report button[type='submit'],
.w2dc-dir-el--listing-report input[type='submit'],
.w2dc-dir-el--listing-claim button[type='submit'],
.w2dc-dir-el--listing-claim input[type='submit'] {
	display: inline-block;
	padding: 8px 18px;
	background: var(--w2dc-button-primary, #111827);
	border: 0;
	border-radius: 6px;
	color: var(--w2dc-button-text, #fff);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}
.w2dc-dir-el--listing-comments button[type='submit']:hover,
.w2dc-dir-el--listing-comments input[type='submit']:hover,
.w2dc-dir-el--listing-contact button[type='submit']:hover,
.w2dc-dir-el--listing-contact input[type='submit']:hover,
.w2dc-dir-el--listing-report button[type='submit']:hover,
.w2dc-dir-el--listing-report input[type='submit']:hover,
.w2dc-dir-el--listing-claim button[type='submit']:hover,
.w2dc-dir-el--listing-claim input[type='submit']:hover { background: var(--w2dc-button-secondary, #374151); }

/* AJAX response message for the contact / report / claim forms. Hidden until the
 * shared interceptor sets an is-ok / is-err class alongside the message. */
.w2dc-dir-form-status {
	display: none;
	margin-top: 12px;
	padding: 9px 13px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-size: 13px;
	line-height: 1.45;
}
.w2dc-dir-form-status.is-ok,
.w2dc-dir-form-status.is-err { display: block; }
.w2dc-dir-form-status.is-ok  { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.w2dc-dir-form-status.is-err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ---------------------------------------------------------------------------
 * Ф3d: bookmark toggle + slider element.
 * The bookmark is a `.w2dc-dir-btn` pill whose heart glyph is CSS-generated
 * (::before, plain Unicode U+2661 outline / U+2665 filled — no icon-font
 * dependency); the directory JS only flips aria-pressed / `is-bookmarked` /
 * the label text, so the empty-vs-filled state is pure class-driven CSS.
 * The slider is a server-rendered horizontal scroll-snap strip — no JS
 * library. Same muted palette as the rest of this file (#111827 overlay,
 * #f9fafb card base, #991b1b accent from the closed-badge pair above).
 * ------------------------------------------------------------------------- */

.w2dc-dir-bookmark::before {
	content: '\2661';
	margin-right: 6px;
	color: #6b7280;
}
.w2dc-dir-bookmark.is-bookmarked::before {
	content: '\2665';
	color: #991b1b;
}

/* Horizontal scroll-snap strip; cards snap to the strip's leading edge. */
.w2dc-dir-el--slider {
	display: flex;
	gap: calc(var(--w2dc-dir-gap) / 2);
	margin: 0 0 var(--w2dc-dir-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.w2dc-dir-slide {
	position: relative;
	flex: 0 0 auto;
	width: 260px;
	scroll-snap-align: start;
	border-radius: 8px;
	overflow: hidden;
	background: #f9fafb;
	line-height: 0;
	text-decoration: none;
}
.w2dc-dir-slide img,
.w2dc-dir-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: opacity .15s ease;
}
.w2dc-dir-slide:hover img { opacity: .88; }

/* Title bar overlay: bottom gradient (#111827 = rgb(17,24,39) at 3/4 alpha)
 * keeps the label readable on any image; single-line ellipsis. */
.w2dc-dir-slide__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 12px 8px;
	background: linear-gradient(transparent, rgba(17, 24, 39, .75));
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 600px) {
	.w2dc-dir-slide { width: 210px; }
}

/* ---------------------------------------------------------------------------
 * Plans / pricing table (webdirectory-plans).
 *
 * The CARD reuses the submit wizard's plan-card look — element-plans.tpl.php
 * emits `.w2dc-submit-plans__grid` and element-plans-card.tpl.php emits
 * `.w2dc-submit-plan`, so the pricing table and the submit step-1 chooser are
 * ONE design (see the .w2dc-submit-plan* block further down): centered
 * title/price, centered ribbon, hover border, equal-height cards, solid CTA.
 *
 * The rules below are the SHARED building blocks BOTH plan-card contexts render
 * through the w2dc_dir_plans_* helpers — the price line, the comparison feature
 * rows, and the highlight ribbon. `.w2dc-submit-plan …` overrides these per-card
 * where it needs to; they stay here as the base (e.g. the large price amount,
 * which has no per-card override and the submit card relies on).
 * ------------------------------------------------------------------------- */
/* Ribbon: centered pill overhanging the top edge. z-index lifts it above the
 * auto-z sibling cards so a card to the right can't paint over the label. */
.w2dc-plan-ribbon {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding: 2px 12px;
	background: var(--w2dc-primary, #2271b1);
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.6;
	white-space: nowrap;
}
.w2dc-plan-price {
	margin: 0 0 12px;
	color: #111827;
	text-align: center;
}
.w2dc-plan-price__amount {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
}
.w2dc-plan-price__period {
	font-size: 14px;
	font-weight: 500;
	color: #6b7280;
}
/* Feature list: no bullets, hairline-separated rows with a check glyph. */
.w2dc-plan-features {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.w2dc-plan-features li {
	position: relative;
	padding: 6px 0 6px 22px;
	border-bottom: 1px solid #f3f4f6;
	color: #374151;
}
.w2dc-plan-features li:last-child { border-bottom: 0; }
.w2dc-plan-features li::before {
	content: '\2713'; /* ✓ */
	position: absolute;
	left: 0;
	top: 6px;
	color: #166534;
	font-weight: 600;
}
/* Comparison rows: a checked-but-off feature renders as a muted ✗ row
 * ("No videos") so plan cards compare row-by-row. Bare li keeps the ✓. */
.w2dc-plan-features li.is-no { color: #9ca3af; }
.w2dc-plan-features li.is-no::before {
	content: '\2715'; /* ✕ */
	color: #9ca3af;
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * Per-term icon (category/location term grids). Rendered by w2dc_dir_render_term
 * BEFORE the term name — a Font-Awesome glyph (`w2dc-fa`, colored inline) or a
 * PNG/uploaded image. Sits inline just left of the name with a small gap; the
 * image is capped so a large upload can't blow out the row. w2dc-only.
 * ------------------------------------------------------------------------- */
.w2dc-term-icon {
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 6px;
	vertical-align: middle;
	text-align: center;
	line-height: 22px;
	flex: 0 0 auto;
}
.w2dc-term-icon .w2dc-fa {
	font-size: 20px;
	line-height: 22px;
	vertical-align: middle;
}
.w2dc-term-icon-img {
	max-width: 24px;
	max-height: 24px;
	width: auto;
	height: auto;
	vertical-align: middle;
	object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * Term grids ([webdirectory-categories] / [webdirectory-locations]).
 * The template chunks cells into .w2dc-terms-row groups of exactly N (the
 * element's "Columns" setting, 1-6) and stamps .w2dc-terms-columns-N on the
 * wrapper — each row is a CSS grid of N tracks, so widths stay exact even on
 * a partial last row. Collapses to a single column on phones (same 782px
 * breakpoint the layout slots use). w2dc-only.
 * ------------------------------------------------------------------------- */
.w2dc-terms-table .w2dc-terms-row {
	display: grid;
	gap: calc(var(--w2dc-dir-gap, 16px) / 2) var(--w2dc-dir-gap, 16px);
	margin: 0 0 calc(var(--w2dc-dir-gap, 16px) / 2);
}
.w2dc-terms-table .w2dc-terms-row:last-child { margin-bottom: 0; }
.w2dc-terms-columns-1 .w2dc-terms-row { grid-template-columns: minmax(0, 1fr); }
.w2dc-terms-columns-2 .w2dc-terms-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w2dc-terms-columns-3 .w2dc-terms-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w2dc-terms-columns-4 .w2dc-terms-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.w2dc-terms-columns-5 .w2dc-terms-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.w2dc-terms-columns-6 .w2dc-terms-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.w2dc-terms-col { min-width: 0; }
@media (max-width: 782px) {
	.w2dc-terms-table .w2dc-terms-row { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------------------------------------------------------------------------
 * Term-grid CARDS. Each cell (.w2dc-term-link) becomes a bordered card: a
 * rounded accent tile for the term icon, the name, and a right-aligned count
 * pill; hover lifts the card and fills the pill. The name keeps the palette
 * link color (the global `.w2dc-dir a` rule), so cards still respect the admin's
 * Customization colors. Accent = --w2dc-primary. Nested (depth>1) terms drop to
 * a flatter indented list. w2dc-only stylesheet → no golden-master impact.
 * ------------------------------------------------------------------------- */
.w2dc-terms-table .w2dc-term-item { min-width: 0; }
.w2dc-terms-table .w2dc-term-link {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid #e6e8ec;
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	line-height: 1.3;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.w2dc-terms-table .w2dc-term-link:hover,
.w2dc-terms-table .w2dc-term-link:focus-visible {
	border-color: var(--w2dc-primary, #2271b1);
	box-shadow: 0 6px 20px rgba(16, 24, 40, .10);
	transform: translateY(-1px);
}
/* Icon → rounded accent tile (the glyph keeps its own admin-set color). */
.w2dc-terms-table .w2dc-term-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 10px;
	background: #eef5fb; /* fallback for no color-mix */
	background: color-mix(in srgb, var(--w2dc-primary, #2271b1) 12%, #fff);
	line-height: 1;
	flex: 0 0 auto;
	transition: background-color .15s ease;
}
.w2dc-terms-table .w2dc-term-link:hover .w2dc-term-icon {
	background: color-mix(in srgb, var(--w2dc-primary, #2271b1) 20%, #fff);
}
.w2dc-terms-table .w2dc-term-icon .w2dc-fa { font-size: 18px; line-height: 1; }
.w2dc-terms-table .w2dc-term-icon-img { max-width: 26px; max-height: 26px; }
/* Name — flexes, one line, ellipsis on overflow. */
.w2dc-terms-table .w2dc-term-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}
/* Count → pill, pushed to the right; fills with the accent on hover. */
.w2dc-terms-table .w2dc-term-count {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: #f1f3f5;
	color: #667085;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
}
.w2dc-terms-table .w2dc-term-link:hover .w2dc-term-count {
	background: var(--w2dc-primary, #2271b1);
	color: #fff;
}
/* Nested terms (depth > 1): a lighter, indented list under the parent card. */
.w2dc-terms-table .w2dc-subterms { list-style: none; margin: 6px 0 0; padding: 0; }
.w2dc-terms-table .w2dc-subterms li { margin: 0; }
.w2dc-terms-table .w2dc-subterms .w2dc-term-link {
	gap: 10px;
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	transform: none;
}
.w2dc-terms-table .w2dc-subterms .w2dc-term-link:hover { background: #f6f8fa; }
.w2dc-terms-table .w2dc-subterms .w2dc-term-icon { width: 26px; height: 26px; border-radius: 7px; }
.w2dc-terms-table .w2dc-subterms .w2dc-term-icon .w2dc-fa { font-size: 14px; }
.w2dc-terms-table .w2dc-subterms .w2dc-term-name { font-weight: 500; }

/* =========================================================================
 * SUBMIT WIZARD (moved out of inline <style> blocks in submission.php so a
 * child theme can override everything from w2dc-plugin/front-custom.css).
 * ========================================================================= */

/* --- Step indicator: Plan → Listing details → Payment ------------------- */
.w2dc-submit-steps {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	flex-wrap: wrap;
}
.w2dc-submit-steps li { display: flex; align-items: center; gap: 6px; color: #64748b; }
.w2dc-submit-steps li + li::before { content: '\2192'; margin-right: 8px; color: #cbd5e1; }
.w2dc-submit-steps .w2dc-submit-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e2e8f0;
	color: #475569;
	font-weight: 600;
	font-size: 12px;
}
.w2dc-submit-steps li.is-current { color: #0f172a; font-weight: 600; }
.w2dc-submit-steps li.is-current .w2dc-submit-steps__num,
.w2dc-submit-steps li.is-done .w2dc-submit-steps__num { background: var(--w2dc-primary, #2271b1); color: #fff; }

/* --- Step-2 "Selected plan" bar ----------------------------------------- */
.w2dc-submit-selected-plan {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 10px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #f8fafc;
	font-size: 13px;
}
/* The "Change" link follows the Customization → Links colour. The submit
 * wizard lives under .w2dc-dash--submit, NOT .w2dc-dir, so the general
 * `.w2dc-dir a { color: var(--w2dc-links) }` rule never reached it — this
 * link fell back to the theme's default anchor colour, out of sync with the
 * plan-card accents (--w2dc-primary) and the Choose CTA (--w2dc-button-primary). */
.w2dc-submit-selected-plan a { font-weight: 600; color: var(--w2dc-links, #2271b1); }
.w2dc-submit-selected-plan a:hover { color: var(--w2dc-links-hover, #135e96); }

/* --- Step-1 plan chooser cards ------------------------------------------ */
.w2dc-submit-plans { margin: 0 0 24px; }
.w2dc-submit-plans__heading { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
.w2dc-submit-plans__grid {
	display: grid;
	/* Columns per row = the Listings-plans metabox setting (dir_plans_columns),
	 * emitted by submit-step1.tpl.php as an inline --w2dc-plans-cols. The `3`
	 * fallback covers theme template overrides that don't emit the var. */
	grid-template-columns: repeat(var(--w2dc-plans-cols, 3), minmax(0, 1fr));
	gap: 14px;
	align-items: stretch;
}
/* Narrow viewports ignore the configured count and stay adaptive (2 → 1 cols
 * as the cards hit their 230px floor) — same behavior the grid had before the
 * columns setting existed. */
@media (max-width: 782px) {
	.w2dc-submit-plans__grid {
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	}
}
.w2dc-submit-plan {
	display: flex;
	flex-direction: column;
	position: relative;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	padding: 18px 16px 16px;
	cursor: pointer;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.w2dc-submit-plan:hover,
.w2dc-submit-plan.is-highlight {
	border-color: var(--w2dc-primary, #2271b1);
	box-shadow: 0 0 0 1px var(--w2dc-primary, #2271b1);
	text-decoration: none;
}
.w2dc-submit-plan .w2dc-plan-ribbon {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	/* Cards are position:relative/z-index:auto and don't form stacking contexts,
	 * so a later sibling card would paint OVER this centered ribbon where it
	 * overhangs into the gap — clipping the label (e.g. "RECOMMENDED"). A
	 * positive z-index lifts the ribbon above all the auto-z sibling cards so the
	 * full text stays visible. */
	z-index: 2;
	background: var(--w2dc-primary, #2271b1);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 2px 10px;
	border-radius: 10px;
	white-space: nowrap;
	text-align: center;
}
/* Explicit color: the card is an <a>, so without its own color the title would
 * inherit the anchor color and flip to the theme's link-hover color on hover. */
.w2dc-submit-plan__title { font-size: 16px; font-weight: 600; margin: 0 0 6px; text-align: center; color: #111827; }
.w2dc-submit-plan__desc { font-size: 13px; color: #475569; margin: 8px 0; }
.w2dc-submit-plan .w2dc-plan-price { font-size: 22px; font-weight: 700; margin: 2px 0 10px; text-align: center; }
.w2dc-submit-plan .w2dc-plan-price__period { font-size: 13px; font-weight: 400; color: #64748b; }
.w2dc-submit-plan .w2dc-plan-features { margin: 8px 0 12px; padding: 0; list-style: none; font-size: 13px; color: #334155; }
.w2dc-submit-plan .w2dc-plan-features li { position: relative; padding: 5px 0 5px 20px; border-bottom: 1px solid #f1f5f9; }
.w2dc-submit-plan .w2dc-plan-features li:last-child { border-bottom: 0; }
.w2dc-submit-plan .w2dc-plan-features li::before { content: '\2713'; position: absolute; left: 0; top: 5px; color: #166534; font-weight: 600; }
.w2dc-submit-plan .w2dc-plan-features li.is-no { color: #9ca3af; }
.w2dc-submit-plan .w2dc-plan-features li.is-no::before { content: '\2715'; color: #9ca3af; font-weight: 400; }
.w2dc-submit-plan__choose {
	display: block;
	margin-top: auto;
	padding: 8px 12px;
	text-align: center;
	font-weight: 600;
	color: var(--w2dc-button-text, #fff);
	background: var(--w2dc-button-primary, #2271b1);
	border-radius: 4px;
	text-decoration: none; /* the [webdirectory-plans] card renders this as an <a> */
}
.w2dc-submit-plan__choose:hover {
	background: var(--w2dc-button-secondary, var(--w2dc-button-primary, #135e96));
	color: var(--w2dc-button-text, #fff);
	text-decoration: none;
}

/* -----------------------------------------------------------------------------
 * Submit form + logged-in dashboard — fill the PAGE CONTAINER width on w2dc.
 *
 * The plugin capped these at a narrow column at THREE levels:
 *   1. the dashboard shell        .w2dc-dash                (1100px)
 *   2. the submit shell           .w2dc-dash--submit        (48rem)
 *   3. the React listing form     .w2dc-listing-form-wrap   (Tailwind
 *      `max-w-3xl` → max-width:var(--container-3xl)=48rem, on the form root
 *      in ListingFormApp.tsx). This is the one the user sees: the React form
 *      renders its OWN `.w2dc-listing-form-wrap max-w-3xl` INSIDE the mount,
 *      on BOTH the submit page (under .w2dc-dash--submit) AND the dashboard
 *      "edit listing" view (under a plain .w2dc-dash — the earlier override
 *      only reached the submit one, so the dashboard edit form stayed capped).
 *
 * `.w2dc-dash .w2dc-listing-form-wrap` (0,2,0 + !important) beats the plain
 * `.max-w-3xl` utility (0,1,0, no !important) and covers the form in BOTH shells
 * (the submit shell also carries `.w2dc-dash`). The two shell selectors drop
 * caps 1 + 2. `!important` is kept because dashboard.css can load after this file.
 *
 * Scoped to w2dc only — this file ships nowhere else (the rocket-maps build strips
 * directory-front.*), so core / the golden master are untouched. The `:not()`
 * guard leaves the --auth login card as a centered 420px box.
 * ------------------------------------------------------------------------- */
.w2dc-dash--submit,
.w2dc-dash:not(.w2dc-dash--auth):not(.w2dc-dash--submit),
.w2dc-dash .w2dc-listing-form-wrap {
	max-width: none !important;
}

/* --- Sticky / featured badge -----------------------------------------------
 * A star in the top-right corner of listings whose plan grants `sticky`. The
 * badge html is prepended inside `.w2dc-popup` (→ `.w2dc-popup` after the
 * codemod) by core's build_popup_html seam (`w2dc_popup_prepend_html`), so it
 * rides on BOTH the directory grid cards and the map popups from one hook.
 * `position: relative` on the popup wrapper anchors the absolute badge to the
 * card/popup corner. */
.w2dc-popup { position: relative; }
.w2dc-sticky-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 3;
	pointer-events: none;
	background: #e8452c;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 6px;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* "Edit directory" front-end affordance — the directory twin of the map's
 * .w2dc-map-frontend-edit-link. Right-aligned at the bottom of the container,
 * shown only to users who can edit the directory; tinted to the theme accent
 * (--w2dc-button-primary), filled on hover. */
.w2dc-dir-frontend-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--w2dc-dir-gap, 16px);
}
.w2dc-dir-frontend-edit-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 500;
	background: #fff;
	color: var(--w2dc-button-primary, #2563eb);
	border: 1px solid var(--w2dc-button-primary, #2563eb);
	border-radius: 4px;
	text-decoration: none;
	line-height: 1.2;
}
/* Fill ONLY on hover (physical mouse-over). Focus never fills — the button opens
 * the editor in a new tab, and any focus fill (even :focus-visible on the
 * restored focus when you switch back) would leave it stuck highlighted. Keyboard
 * focus gets a ring instead, so accessibility is preserved without the sticky fill. */
.w2dc-dir-frontend-edit-link:hover {
	background: var(--w2dc-button-primary, #2563eb);
	color: var(--w2dc-button-text, #fff);
	text-decoration: none;
}
.w2dc-dir-frontend-edit-link:focus-visible {
	outline: 2px solid var(--w2dc-button-primary, #2563eb);
	outline-offset: 2px;
}
.w2dc-dir-frontend-edit-link::before {
	content: "\270E";
	font-size: 14px;
	line-height: 1;
}

/* Sticky-scroll elements (per-element constructor option → w2dc_dir_render_item
 * wraps the element in .w2dc-dir-sticky with an inline position:sticky;top). For
 * the pin to have travel room its holding slot/cell must be as tall as the row,
 * so stretch the one that contains a sticky wrapper — the flex row is
 * align-items:flex-start and the responsive grid is align-items:start by default.
 * :has() is progressive: where unsupported the element just scrolls normally.
 * Sticky is meaningful when the element sits BESIDE a taller one (e.g. a
 * map/search/filters column next to the listings); on mobile the columns stack
 * (slots go width:100%), so a sticky slot is alone on its line and has no effect. */
.w2dc-dir-sticky { position: sticky; }
.w2dc-dir-slot:has(> .w2dc-dir-sticky),
.w2dc-dir-cell:has(> .w2dc-dir-sticky),
[data-el]:has(> .w2dc-dir-sticky) { align-self: stretch; }

/* A directory map set to a PERCENTAGE height ("Map height: 100%") has no
 * fixed-height ancestor here (document flow), so height:100% resolves to 0 and
 * the map disappears. Map_Controller flags such a mount with .w2dc-react-mount--fill
 * and exposes the value as --w2dc-map-fill (e.g. 100% → 100vh); pin the mount to
 * that viewport height so it actually shows — and a sticky map gets a viewport-tall
 * pin. Fixed-px maps carry their own inline px height and are untouched. */
.w2dc-dir-el--map .w2dc-react-mount--fill {
	height: var(--w2dc-map-fill, 80vh) !important;
}
/* Mobile (<=768px): the in-map search form reflows out of the corner overlay
 * into an in-flow row above the map (search-form.css), and core's sidebar.css
 * grows .w2dc-react-mount to fit form + canvas. The viewport-pin above would
 * defeat that — the mount stays exactly one viewport tall while the wrapper
 * grows past it, so the canvas overflows the mount and (inside a sticky
 * wrapper) spills onto the listings below. Release the pin so the mount grows
 * with its content — same specificity, so it wins by source order at <=768px. */
@media (max-width: 768px) {
	.w2dc-dir-el--map .w2dc-react-mount--fill {
		height: auto !important;
	}
}

/* Score badge wrapper — emitted BOTH by the constructor's standalone "Rating"
 * element and by the synthetic `rating` row of the Listing body field picker.
 * The badge itself is a self-contained inline-flex chip (it also renders inside
 * the maps engine's markup, so it carries its own inline styles and no margins),
 * which left it flush against the title above and the next field below. The
 * vertical breathing room belongs on the wrapper, where the page layout owns it. */
.w2dc-dir-listing-rating {
	padding-top: 10px;
	padding-bottom: 10px;
}