/**
 * Tanazul frame: masthead, page heading, footer.
 *
 * Loaded after tanazul-main.css so it wins on the elements it targets without
 * needing !important. Everything here is namespaced .tnz-* apart from a small
 * number of scoped overrides for markup that comes out of the page content and
 * cannot carry a class.
 *
 * Scope is deliberately the page frame only. Listing cards are untouched -
 * the one exception is the #comments/#wpdcom *outer* max-width below, which
 * overrides a leftover Divi cap (tanazul-main.css:2277) so the feed can go
 * full width like the rest of the page; card internals are unchanged.
 */


/* --------------------------------------------------------------------------
 * Overflow guard
 *
 * Site-wide horizontal-overflow bug (see CLAUDE.md Outstanding): a page
 * shifts sideways at narrow widths and the masthead gets pushed off-screen.
 * Root cause traced to #wpdiscuz-comment-message (a wpDiscuz toast
 * container, tanazul-main.css) being position:fixed with a stray left
 * offset that Chromium's mobile layout treats as page-widening content -
 * not anything inside a listing/comment card. That fixed div's own sizing
 * is fixed separately (tanazul-main.css); this is the defensive backstop
 * so any other fixed/absolute element (now or in the future) can't do the
 * same thing again. `overflow-x: hidden` rather than `clip` here because
 * it needs to establish a scroll-clip boundary on `html` itself, which is
 * what actually stops a position:fixed descendant from being able to
 * widen document.documentElement.scrollWidth in the first place.
 * ----------------------------------------------------------------------- */

html, body {
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
 * Tokens
 * ----------------------------------------------------------------------- */

:root {
	--tnz-accent:       #c96739;
	--tnz-accent-hover: #a8532c;
	--tnz-ink:          #292929;
	--tnz-ink-soft:     #4f4f4f;
	--tnz-ink-faint:    #838c8a;
	--tnz-rule:         #eaeaea;
	--tnz-tint:         #f6f4f2;
	--tnz-surface:      #ffffff;
	--tnz-whatsapp:     #1fa855;
	--tnz-whatsapp-strong: #137a38; /* the WhatsApp green darkened for buttons with white text: 5.4:1 (the base green is 3.0:1) */
	--tnz-silver:       #afafaf; /* palette: borders of inputs, cards and buttons */
	--tnz-eerie:        #1a1a1a; /* palette: deepest ink, dark hover */
	--tnz-chrome:       #0c0c0c;
	--tnz-chrome-line:  rgba(255, 255, 255, 0.1);
	/* Footer floating-chip background + its hover state - darker than
	   --tnz-chrome (#0c0c0c is the masthead/footer bar itself; these chips
	   sit on top of it and need to read as a distinct, slightly lighter
	   surface). */
	--tnz-chrome-2:       #2a2a2a;
	--tnz-chrome-2-hover: #1a1a1a;

	--tnz-measure: none;

	/* Radius: only --tnz-radius was defined before, so every other radius
	   in this file (and all of tanazul-main.css) was a bare literal. Two
	   more named steps for the two other values already in real use in
	   this file (a hard 4px on small controls, 999px for pill/circle
	   shapes) - not a full scale invented ahead of need. */
	--tnz-radius-sm:   4px;
	--tnz-radius:      8px;
	--tnz-radius-pill: 999px;

	/* Spacing: a 4px-based scale. Applied so far only where this pass
	   already touches a rule (buttons, footer chips) - not swept across
	   the file, which would be a much larger, harder-to-review diff for a
	   "consolidate, don't redesign" pass. Adopt further as rules are
	   touched for other reasons. */
	--tnz-space-1: 0.25rem;
	--tnz-space-2: 0.5rem;
	--tnz-space-3: 0.75rem;
	--tnz-space-4: 1rem;
	--tnz-space-5: 1.5rem;
	--tnz-space-6: 2.5rem;

	/* Type: collapses the ~11 ad-hoc rem steps this file used (main.css's
	   parallel px-based scale is legacy and out of scope - see "never
	   rewrite tanazul-main.css wholesale"). */
	--tnz-text-xs:   0.6875rem;
	--tnz-text-sm:   0.8125rem;
	--tnz-text-base: 1rem;
	--tnz-text-md:   1.125rem;
	--tnz-text-lg:   1.375rem;
	--tnz-text-xl:   clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
}

/* --------------------------------------------------------------------------
 * Type
 *
 * NeoSansArabic, self-hosted from media/et-fonts. This is the site's existing
 * brand face; only Light, Regular and Medium exist, mapped to 300/400/600.
 * Arabic needs more leading than Latin at the same size, hence 1.75 on body.
 * ----------------------------------------------------------------------- */


/* Self-hosted: no external request, and this is the face the site was
   originally designed with. Three weights are all that exist for it.
   WOFF2 first (~34 KB, Arabic-subsetted from the original TTFs with
   fonttools/pyftsubset - was ~80 KB unsubsetted WOFF), WOFF kept as the
   one fallback for the rare browser without WOFF2 support. The original
   TTFs (~200 KB each) are no longer referenced - nothing that takes WOFF2
   or WOFF needs them, and every browser that would need them predates the
   rest of this stylesheet anyway. unicode-range matches the subset so a
   browser never requests this face for a codepoint it doesn't cover. */
@font-face {
	font-family: 'NeoSansArabic';
	src: url('/media/et-fonts/NeoSansArabicLight.woff2') format('woff2'),
	     url('/media/et-fonts/NeoSansArabicLight.woff') format('woff');
	font-weight: 300;
	font-display: swap;
	unicode-range: U+0020-007F, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: 'NeoSansArabic';
	src: url('/media/et-fonts/NeoSansArabic.woff2') format('woff2'),
	     url('/media/et-fonts/NeoSansArabic.woff') format('woff');
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0020-007F, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: 'NeoSansArabic';
	src: url('/media/et-fonts/NeoSansArabicMedium.woff2') format('woff2'),
	     url('/media/et-fonts/NeoSansArabicMedium.woff') format('woff');
	font-weight: 600;
	font-display: swap;
	unicode-range: U+0020-007F, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

body {
	font-family: 'NeoSansArabic', system-ui, sans-serif;
	color: var(--tnz-ink);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
 * Masthead
 * ----------------------------------------------------------------------- */

.tnz-masthead {
	background: var(--tnz-chrome);
	border-bottom: 1px solid var(--tnz-chrome-line);
}

.tnz-masthead__inner {
	direction: ltr;
	max-width: var(--tnz-measure);
	margin-inline: auto;
	padding: 0 1.5rem;
	height: 64px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 1rem;
}

.tnz-wordmark {
	grid-column: 2;
	justify-self: center;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
	text-decoration: none;
	line-height: 1;
	/* Logo mark + word. The masthead grid is forced LTR, so the row is set RTL
	   here: the mark then sits at the start (right) of the Arabic word. */
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	direction: rtl;
}

.tnz-wordmark__logo {
	width: 1.75em;
	height: 1.75em;
	flex: none;
	display: block;
}

/* The word is hidden (logo only). display:none also removes it from the
   accessibility tree, so the logo <img> in header.php carries the name instead. */
.tnz-wordmark__text { display: none; }

.tnz-wordmark:hover { color: var(--tnz-accent); }

.tnz-masthead__images,
.tnz-masthead__video {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0; /* grid items default to min-width:auto - guards against a
	                 future button/label longer than today's icon set */
}

.tnz-masthead__images { justify-self: start; }
.tnz-masthead__video { justify-self: end; }

.tnz-masthead .tnz-modtoggle {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--tnz-chrome-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.78);
	cursor: pointer;
}

.tnz-masthead .tnz-modtoggle:hover {
	color: #fff;
	border-color: var(--tnz-accent);
	background: rgba(201, 103, 57, 0.18);
}

.tnz-lang {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--tnz-rule);
	border-radius: 999px;
	background: var(--tnz-surface);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.tnz-lang a {
	padding: 0.3rem 0.7rem;
	color: var(--tnz-ink-faint);
	text-decoration: none;
	line-height: 1.2;
}

.tnz-lang a + a { border-inline-start: 1px solid var(--tnz-rule); }
.tnz-lang a:hover { color: var(--tnz-ink); }
.tnz-lang a[aria-current] {
	color: #fff;
	background: var(--tnz-ink);
}
.tnz-lang a[aria-current]:hover { color: #fff; }

.tnz-iconbtn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--tnz-rule);
	border-radius: 50%;
	background: var(--tnz-surface);
	color: var(--tnz-ink-soft);
	cursor: pointer;
}

.tnz-iconbtn:hover {
	color: var(--tnz-accent);
	border-color: var(--tnz-accent);
}

/* --------------------------------------------------------------------------
 * Page heading
 *
 * These come out of the page content as linked h1/h2, which is why they were
 * rendering as default blue underlined links. Scoped to the content area so
 * headings elsewhere are unaffected.
 * ----------------------------------------------------------------------- */

.site-content .entry-content > h1 {
	max-width: var(--tnz-measure);
	margin: 2rem auto 0rem;
	padding-inline: 1.25rem;
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
	font-weight: 700;
	line-height: 1.35;
}

.site-content .entry-content > h2 {
	max-width: var(--tnz-measure);
	margin: 0 auto 1.25rem;
	padding-inline: 1.25rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--tnz-ink-soft);
}

.site-content .entry-content > h1 a,
.site-content .entry-content > h2 a {
	color: inherit;
	text-decoration: none;
}

.site-content .entry-content > h1 a:hover { color: var(--tnz-accent); }

/* Small site-name line above a static page's title (privacy, terms): what used to be the page's h1
   under the old Divi pattern. See tanazul_page_headline() in functions.php. */
.site-content .entry-content > .tnz-page-brand {
	max-width: var(--tnz-measure);
	margin: 1.5rem auto 0;
	padding-inline: 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--tnz-ink-soft);
}

.site-content .entry-content > .tnz-page-brand a {
	color: inherit;
	text-decoration: none;
}

.site-content .entry-content > .tnz-page-brand a:hover { color: var(--tnz-accent); }

.site-content .entry-content > hr.tn_divider {
	max-width: var(--tnz-measure);
	margin: 0 auto;
	border: 0;
	border-top: 1px solid var(--tnz-rule);
}

/* --------------------------------------------------------------------------
 * Panels (info / landing)
 * ----------------------------------------------------------------------- */

.tnz-panel {
	position: fixed;
	inset-block-start: 50%;
	inset-inline: 1rem;
	transform: translateY(-50%);
	max-width: 34rem;
	margin-inline: auto;
	padding: 1.75rem;
	background: var(--tnz-surface);
	border: 1px solid var(--tnz-rule);
	border-radius: var(--tnz-radius);
	box-shadow: 0 12px 40px rgba(28, 25, 23, 0.18);
	z-index: 60;
}

.tnz-panel[hidden] { display: none; }

.tnz-panel--media { padding: 0.5rem; }
.tnz-panel--media img { display: block; width: 100%; height: auto; border-radius: 4px; }

.tnz-panel__title {
	font-weight: 600;
	margin-block-end: 0.75rem;
}

.tnz-panel p { font-size: 0.9375rem; }

.tnz-panel__close {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: var(--tnz-tint);
	color: var(--tnz-ink-soft);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.tnz-panel__close:hover { background: var(--tnz-rule); }

/* --------------------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------------- */

.tnz-footer {
	background: var(--tnz-chrome);
	border-top: 1px solid var(--tnz-chrome-line);
}

/* Floating WhatsApp / phone / channel keep their IDs; this wrapper
   should not occupy a blank band in the footer. */
.tnz-footer__contact {
	height: 0;
	overflow: visible;
}

.tnz-footer .footer-contact {
	display: contents;
}

.tnz-footer__bar {
	max-width: var(--tnz-measure);
	margin-inline: auto;
	padding: 1.5rem 1rem 0rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.tnz-footer__legal {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.4rem 0.65rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
}

.tnz-footer__legal a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.tnz-footer__legal a:hover { color: var(--tnz-accent); }

.tnz-footer__copy {
	opacity: 0.7;
}

.tnz-footer .tnz-lang {
	border-color: var(--tnz-chrome-line);
	background: rgba(255, 255, 255, 0.05);
}

.tnz-footer .tnz-lang a {
	color: rgba(255, 255, 255, 0.42);
}

.tnz-footer .tnz-lang a + a {
	border-inline-start-color: var(--tnz-chrome-line);
}

.tnz-footer .tnz-lang a:hover { color: #fff; }

.tnz-footer .tnz-lang a[aria-current] {
	color: var(--tnz-chrome);
	background: #fff;
}

.tnz-footer .tnz-lang a[aria-current]:hover { color: var(--tnz-chrome); }

/* Floating contact chips: keep IDs, tighten the look. */
.tnz-footer #iwhatsapp,
.tnz-footer #icall {
	width: 44px;
	height: 44px;
	bottom: 18px;
	display: grid;
	place-items: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.tnz-footer #iwhatsapp { left: 18px; background: var(--tnz-whatsapp); }
.tnz-footer #icall { right: 18px; background: var(--tnz-chrome-2); }

.tnz-footer #iwhatsapp .iwhatsapp,
.tnz-footer #icall .icall {
	margin: 0;
}

.tnz-footer #iwhatsch {
	width: 96px;
	min-width: 0;
	height: 36px;
	bottom: 20px;
	left: 0;
	right: 0;
	margin-inline: auto;
	padding: 0 var(--tnz-space-2);
	border-radius: var(--tnz-radius-pill);
	background: var(--tnz-chrome-2);
	font-size: var(--tnz-text-xs);
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.tnz-footer #iwhatsch:hover { background: var(--tnz-chrome-2-hover); }

/* -------------------------------------------------------------------------
 * SEO keyword links, printed after the footer copyright (see
 * <!--FOOTER-EXTRA--> in tanazul_split_content()). Roughly a hundred
 * internal links - they earn their place for search but are not something
 * a visitor needs to see, so the whole block is one closed-by-default
 * accordion with no title, just a centered chevron to open it.
 * ----------------------------------------------------------------------- */

.tnz-footer__keywords {
	max-width: var(--tnz-measure);
	margin-inline: auto;
	padding-inline: 1.5rem;
	border-top: 1px solid var(--tnz-chrome-line);
	padding-bottom: 0.5rem;
}

.tnz-footer__keywords > summary {
	display: flex;
	justify-content: center;
	padding: 1rem 0;
	cursor: pointer;
	list-style: none;
	color: rgba(255, 255, 255, 0.4);
    margin: 0 auto;
	width: 150px;
}
.tnz-footer__keywords > summary::-webkit-details-marker { display: none; }

.tnz-footer__keywords > summary::after {
	content: "⌄";
	font-size: 1.125rem;
	line-height: 1;
	transition: transform 0.15s ease;
}
.tnz-footer__keywords[open] > summary::after { transform: rotate(180deg); }
.tnz-footer__keywords > summary:hover::after { color: var(--tnz-accent); }

.tnz-footer__keywords p {
	max-width: none;
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	line-height: 2;
	text-align: center;
	color: rgba(255, 255, 255, 0.3);
}
.tnz-footer__keywords p:last-child { margin-bottom: 0; }

.tnz-footer__keywords a {
	color: rgba(255, 255, 255, 0.3);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.tnz-footer__keywords a:hover {
	color: #fff;
	border-bottom-color: var(--tnz-chrome-line);
}

/* --------------------------------------------------------------------------
 * Skeleton loaders
 *
 * Five placeholder cards (see tanazul-app.js's addSkeletons()) standing in
 * for real listing cards while wpDiscuz's first AJAX call is in flight.
 * Inserted as the first child of .wpd-thread-list, so width is inherited
 * from #wpdcom (90vw, set above) rather than reapplied here - it's the same
 * box a real card gets. Exact shape/spacing per the reference mockup
 * (skeleton-loader.html): rounded card, a label pill + round avatar-style
 * dot in the header, two text lines, a seven-segment fields strip, and a
 * two-icon footer.
 *
 * Every span rule below is prefixed with #tnz-skeletons (the wrapper's own
 * id), not just .tnz-skeleton*: wpdiscuz/themes/default/style.css has
 * `#wpdcom span{display:inline; ...}`, and an ID beats any number of
 * classes, so plain `.tnz-skeleton__label{width:...}` loses that fight -
 * forced to display:inline, width/height/flex all go inert. The #id prefix
 * is what actually wins the cascade here, not load order.
 * ----------------------------------------------------------------------- */

#tnz-skeletons {
	display: grid;
	gap: 10px;
	margin-bottom: 10px;
}

#tnz-skeletons .tnz-skeleton {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #afafaf;
	background: #fff;
	border-radius: 10px;
}

#tnz-skeletons .tnz-skeleton__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}
#tnz-skeletons .tnz-skeleton__label { width: 100px; height: 15px; border-radius: 5px; }
#tnz-skeletons .tnz-skeleton__image { width: 20px; height: 20px; border-radius: 50px; }

/* display:flex here isn't just layout - it's what makes the fix work.
   wpdiscuz's `#comments #wpdcom span{display:inline}` carries two ID
   selectors, which beats even #tnz-skeletons .tnz-skeleton__text span's one
   ID, so `display:block` on the span itself loses that fight. A flex
   container sidesteps it entirely: per spec, a flex item's own `display`
   is "blockified" regardless of what it's set to, so the span still lays
   out as a block-level bar. This is exactly why the header/fields/footer
   spans (already flex children) render fine while this one didn't. */
#tnz-skeletons .tnz-skeleton__text {
	display: flex;
	flex-direction: column;
	padding: 0 10px 10px;
}
#tnz-skeletons .tnz-skeleton__text span {
	height: 12px;
	margin-bottom: 10px;
}
#tnz-skeletons .tnz-skeleton__text span:first-child { width: 100%; }
#tnz-skeletons .tnz-skeleton__text span:last-child { width: 60%; margin-bottom: 0; }

#tnz-skeletons .tnz-skeleton__fields {
	display: flex;
	width: 100%;
	margin-top: 10px;
}
#tnz-skeletons .tnz-skeleton__fields span {
	flex: 1;
	height: 30px;
	border: 1px solid #afafaf;
	border-inline-start: 0;
}
#tnz-skeletons .tnz-skeleton__fields span:first-child { border-inline-start: 1px solid #afafaf; }

#tnz-skeletons .tnz-skeleton__footer {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px;
}
#tnz-skeletons .tnz-skeleton__footer span { width: 15px; height: 15px; border-radius: 5px; }

#tnz-skeletons .tnz-skeleton__label,
#tnz-skeletons .tnz-skeleton__image,
#tnz-skeletons .tnz-skeleton__text span,
#tnz-skeletons .tnz-skeleton__fields span,
#tnz-skeletons .tnz-skeleton__footer span {
	background: linear-gradient(90deg, #f0f0f0 25%, #e2e2e2 37%, #f0f0f0 63%);
	background-size: 400% 100%;
	animation: tnz-shimmer 1.4s ease infinite;
}

@keyframes tnz-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* --------------------------------------------------------------------------
 * Quality floor
 * ----------------------------------------------------------------------- */

/* Was scoped to four selectors only (masthead/footer links, icon buttons,
   the panel close button), while outline was separately suppressed with
   no real replacement in several other places (calculator/filter/poster-
   edit/verify-request inputs, the two survey/message forminput rules) -
   left the compact listing card link, pagination, share button, filter
   reset, FAQ summaries and those form fields with no visible focus state
   at all. One global rule instead: every focusable element gets it,
   :focus-visible so it only shows for keyboard/assistive nav, not a mouse
   click. */
:focus-visible {
	outline: 2px solid var(--tnz-accent);
	outline-offset: 2px;
	border-radius: var(--tnz-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	#tnz-skeletons .tnz-skeleton__label,
	#tnz-skeletons .tnz-skeleton__image,
	#tnz-skeletons .tnz-skeleton__text span,
	#tnz-skeletons .tnz-skeleton__fields span,
	#tnz-skeletons .tnz-skeleton__footer span {
		animation: none;
		background: #f0f0f0;
	}

	/* Was only the skeleton shimmer above - these are page-frame/filter UI
	   transitions (accordion chevron, filter reveal, filter controls), all
	   small and short (0.15s) but still real motion a reduced-motion
	   preference should suppress. Scoped to non-card chrome only; anything
	   living inside a comment/listing card is left alone here. */
	.tnz-footer__keywords > summary::after,
	.filtercontainer,
	.filterselect,
	.filtersresetbtn {
		transition: none;
	}
}

@media (max-width: 480px) {
	.tnz-masthead__inner { height: 56px; padding-inline: 1rem; }
	.tnz-wordmark { font-size: 1.3rem; }
	.tnz-footer__bar { padding-inline: 1rem; }
}

/* =========================================================================
 * Content sections recovered from page 260831 (nationality list, fee
 * calculator, requirements, Absher steps, listing-tier legend).
 *
 * Each one is a native <details>/<summary> accordion (.tnz-faq, with a
 * per-section modifier - --legend/--flags/--calc/--roles/--steps) styled
 * as a centered FAQ list: no JS, no ARIA plumbing to hand-roll, disclosure
 * semantics for free.
 *
 * The open answer still reuses the frame's tokens and the listing cards'
 * visual grammar - flat, hairline dividers, no shadows, small circular
 * badges - and each answer keeps its own layout (grid, form card, columns,
 * stepper, pill strip) so the page doesn't read as one repeated component.
 *
 * Scope is these sections only - .wpd-* (the comment/listing cards
 * themselves), .tnz-masthead and .tnz-footer are untouched.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * The accordion shell. Nesting: a .tnz-faq inside a .tnz-faq__a is a child
 * question - same disclosure, one size down, no outer top border doubling
 * up against the parent's already-open answer padding.
 * ----------------------------------------------------------------------- */

.tnz-faq {
	max-width: 90rem;
	margin: 0 auto;
	padding-inline: 1.25rem;
	border-top: 1px solid var(--tnz-rule);
	text-align: center;
}
.tnz-faq + .tnz-faq { border-top: 0; }
.tnz-faq:last-of-type { margin-bottom: 2rem; }
.tnz-faq:first-of-type { margin-top: 1.5rem; }

.tnz-faq__q {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	padding: 1.1rem 0;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	color: var(--tnz-ink);
	list-style: none;
}
.tnz-faq__q::-webkit-details-marker { display: none; }

.tnz-faq__q::after {
	content: "+";
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--tnz-rule);
	color: var(--tnz-ink-soft);
	font-size: 0.9375rem;
	line-height: 1;
}
.tnz-faq__q:hover::after { border-color: var(--tnz-accent); color: var(--tnz-accent); }
.tnz-faq[open] > .tnz-faq__q::after { content: "−"; border-color: var(--tnz-accent); color: var(--tnz-accent); }

.tnz-faq__a { padding-bottom: 1.75rem; }

.tnz-faq__lead { color: var(--tnz-ink-soft); margin-bottom: 1.25rem; }

/* Nested question: smaller, tighter, no side padding of its own (the
   ancestor .tnz-faq already provides the inset). */
.tnz-faq .tnz-faq {
	max-width: none;
	padding-inline: 0;
}
.tnz-faq .tnz-faq:first-of-type { margin-top: 0.25rem; }
.tnz-faq .tnz-faq:last-of-type { margin-bottom: 0; }
.tnz-faq .tnz-faq > .tnz-faq__q { padding: 0.85rem 0; font-size: 0.9375rem; }
.tnz-faq .tnz-faq > .tnz-faq__q::after { width: 18px; height: 18px; font-size: 0.8125rem; }
.tnz-faq .tnz-faq > .tnz-faq__a { padding-bottom: 1.25rem; }

/* -------------------------------------------------------------------------
 * Listing-tier legend: a pill strip, same construction as .tnz-lang in the
 * masthead (hairline dividers between inline items). The only section that
 * keeps its icons - they're the content being explained, not decoration.
 * ----------------------------------------------------------------------- */

.tnz-legend {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.tnz-legend li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.1rem;
	font-size: 0.8125rem;
	color: var(--tnz-ink-soft);
}

.tnz-legend li:not(:last-child) { border-inline-end: 1px solid var(--tnz-rule); }
.tnz-legend img { width: 26px; height: 26px; }

/* -------------------------------------------------------------------------
 * Nationality flags: a dense grid of rows, each row a circular flag badge
 * (the flag SVG cropped to a coin, matching the comment avatar's circle)
 * over a muted caption. Nested inside the countries/occupations group.
 * ----------------------------------------------------------------------- */

.tnz-flags {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}

.tnz-flags li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0.5rem;
	border-top: 1px solid var(--tnz-rule);
	text-align: center;
}

.tnz-flags__badge {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--tnz-rule);
	background: var(--tnz-tint);
	display: grid;
	place-items: center;
}

.tnz-flags__badge img { width: 100%; height: 100%; object-fit: cover; }
.tnz-flags__name { font-size: 0.8125rem; color: var(--tnz-ink-soft); }

/* -------------------------------------------------------------------------
 * Fee calculator: the one true "form" among these sections, so it is the
 * one styled as a bordered card - the same surface/rule/radius combination
 * as .tnz-panel, just static instead of floating. Everything else in its
 * answer (the fee breakdowns) is nested .tnz-faq, so the card is the only
 * exception to the centered-text default.
 * ----------------------------------------------------------------------- */

.tnz-calc {
	max-width: 22rem;
	margin: 0 auto 1.5rem;
	padding: 1.5rem 1.25rem;
	text-align: initial;
	background: var(--tnz-surface);
	border: 1px solid var(--tnz-rule);
	border-radius: var(--tnz-radius);
}

.tnz-calc__row {
	padding: 0.85rem 0;
	border-top: 1px solid var(--tnz-rule);
}
.tnz-calc__row:first-child { border-top: 0; padding-top: 0; }

.tnz-calc__row label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.75rem;
	color: var(--tnz-ink-faint);
}

.tnz-calc select,
.tnz-calc input {
	width: 100%;
	height: 42px;
	box-sizing: border-box;
	border: 1px solid var(--tnz-rule);
	border-radius: 5px;
	padding: 0 0.85rem;
	font: inherit;
	color: var(--tnz-ink);
	background: var(--tnz-tint);
}

.tnz-calc select { direction: rtl; }
.tnz-calc input { direction: ltr; text-align: left; }

.tnz-calc select:focus,
.tnz-calc input:focus {
	border-color: var(--tnz-accent);
	box-shadow: 0 0 0 3px rgba(201, 103, 57, 0.15);
}
/* No outline:none here any more - the box-shadow above is a nice-to-have,
   not a substitute (rgba(...,0.15) is far below the 3:1 contrast a focus
   indicator needs). The global :focus-visible rule below supplies the
   real one for keyboard users; :focus (not :focus-visible) here keeps the
   box-shadow/border for mouse clicks too, without double-outlining. */

.tnz-calc__hint { display: block; margin-top: 0.4rem; font-size: 0.75rem; color: var(--tnz-ink-faint); }

.tnz-calc__submit {
	width: 100%;
	height: 44px;
	margin-top: 1.25rem;
	border: 0;
	border-radius: 5px;
	background: var(--tnz-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.tnz-calc__submit:hover { background: var(--tnz-accent-hover); }

.tnz-calc__result {
	display: block;
	margin-top: 0.85rem;
	padding: 0.9rem;
	border: 1px solid var(--tnz-accent);
	border-radius: 5px;
	text-align: center;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--tnz-ink);
}

/* Generic hairline-divided row list, reused by the calculator's fee
   breakdowns, the requirements conditions, and the Absher sections. */
.tnz-rows {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	counter-reset: tnzrow;
}
.tnz-rows li {
	padding: 0.6rem 0;
	border-top: 1px solid var(--tnz-rule);
	font-size: 0.9375rem;
	color: var(--tnz-ink-soft);
}
.tnz-rows li:first-child { border-top: 0; }
.tnz-rows li b { color: var(--tnz-ink); }

/* Numbered variant: the count sits inline right before the (centered) text
   rather than pinned to the row's edge, so it travels with the text instead
   of floating away from it once centered. */
.tnz-rows--numbered li { counter-increment: tnzrow; }
.tnz-rows--numbered li::before {
	content: counter(tnzrow) ".";
	color: var(--tnz-ink-faint);
	font-weight: 700;
	margin-inline-end: 0.4rem;
}

/* =========================================================================
 * Icon/number card grids
 *
 * The reference (original Divi) design showed steps, fees and roles as
 * always-open bordered card rows with an icon, a title and a one-line
 * subtitle. The accordion redesign above deliberately replaced these with
 * plain hairline-divided text rows to keep the closed page light. This
 * restores the card look for the *opened* answer of a handful of sections
 * where a 3-5 item card row genuinely fits, without reopening the "closed
 * by default" decision and without reviving tanazul-main.css's old
 * .tanazul_step/.tnzlss/.tnzlpp hover-filter mechanic (that was tied to the
 * still-unbuilt filter feature, not a static card look).
 * ========================================================================= */

.tnz-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.tnz-card {
	width: 160px;
	padding: 1.25rem 1rem;
	border: 1px solid var(--tnz-rule);
	border-radius: var(--tnz-radius);
	background: var(--tnz-surface);
	text-align: center;
}

.tnz-card img {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 0.75rem;
	object-fit: contain;
}

.tnz-card__title {
	margin: 0 0 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--tnz-ink);
}

.tnz-card__sub {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--tnz-ink-soft);
}

/* Fee cards read the amount as the subtitle, set larger and in the accent
   color - the screenshot's "big orange number" rather than a plain line. */
.tnz-card__amount {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--tnz-accent);
}

/* Numbered variant: a circular badge instead of an icon image, for step
   rows that never had per-step artwork (Absher's own top-level 5 steps). */
.tnz-cards--numbered { counter-reset: tnzcard; }
.tnz-cards--numbered .tnz-card { counter-increment: tnzcard; }
.tnz-badge-num {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0 auto 0.75rem;
	border-radius: 50%;
	background: var(--tnz-tint);
	border: 1px solid var(--tnz-rule);
	color: var(--tnz-accent);
	font-weight: 700;
	font-size: 1rem;
}
.tnz-badge-num::before { content: counter(tnzcard); }

/* Checkmark rows: swap the numbered-list prefix for a small check icon,
   scoped to the conditions list only. */
.tnz-rows--check { list-style: none; }
.tnz-rows--check li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	text-align: start;
}
.tnz-rows--check li::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 0.2rem;
	background: var(--tnz-accent);
	-webkit-mask: url('/media/check-icon.svg') center / contain no-repeat;
	        mask: url('/media/check-icon.svg') center / contain no-repeat;
}

/* Profession pills: flat outline chips, no icons (the reference's icons
   there are Musaned's own hosted SVGs - not worth self-hosting for a
   cosmetic chip). */
.tnz-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tnz-pill {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--tnz-rule);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var(--tnz-ink-soft);
	background: var(--tnz-tint);
}

/* =========================================================================
 * Page widths and responsiveness
 *
 * The masthead/footer and the sections above already cap themselves at
 * --tnz-measure or their own narrower max-width. Two things didn't: the
 * Divi-era message/contact overlays (width: 80%/90% with no ceiling, so
 * they stretched to a huge box on a wide monitor) and the legacy onboarding
 * icons, which came out of page 260831 still carrying position: absolute
 * meant for a Divi module that no longer exists - dropped into plain
 * content flow, they render wherever the ancestor's positioning context
 * happens to place them, not where the markup puts them.
 * ========================================================================= */

.messagecontainer,
.contactcontainer {
	max-width: 70rem;
	box-sizing: border-box;
}

/* Quick-action icon row: intro/rules/download/send, rendered by
   tanazul-rules' shortcodes (see tnz_quick_button() in
   includes/promo.php, merged from the former standalone Tanazul Promo
   plugin), in two flat, muted, wpDiscuz-style groups flanking the space between them
   (matching wpDiscuz's own hidden rating-widget side slots), sitting right
   above the wpDiscuz comment form (the markup already sits immediately
   before it - see page.php's <!--COMMENTS--> split). Was 6 dead "legacy"
   icons with no behavior behind them; 2 duplicate onboarding triggers were
   dropped and the other 4 wired up, hence the rename from .tnz-legacy-icons. */
.tnz-quick-icons {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	max-width: var(--tnz-measure);
	margin: 1rem auto;
	/* padding-inline: 1.25rem; */
	transform: translateY(50px);
}
.tnz-quick-icons__group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.tnz-quick-icons button {
	position: static;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
    border: 1px solid var(--tnz-rule);
    background: #fff;
	box-sizing: border-box;
	cursor: pointer;
}
.tnz-quick-icons button:hover {background:var(--tnz-rule);}
/* Was .tnz-quick-icons img - these 4 icons became inline <svg> (see
   tnz_quick_button() in tanazul-rules/includes/promo.php) instead of
   <img src="...svg">, same visual result without a separate HTTP request
   per icon. */
.tnz-quick-icons svg {
	display: block;
	width: 14px;
	height: 14px;
	opacity: 0.55;
	filter: grayscale(1);
}

@media (max-width: 768px) {
	.site-content .entry-content > h1,
	.site-content .entry-content > h2,
	.site-content .entry-content > .tnz-page-brand,
	.site-content .entry-content > hr.tn_divider,
	.tnz-quick-icons { padding-inline: 1rem; }

	.tnz-flags { gap: 1rem 0.5rem; }
	.tnz-flags li { width: 64px; }
	.tnz-flags__badge { width: 48px; height: 48px; }
}

@media (max-width: 480px) {
	.tnz-masthead__inner { height: 56px; padding-inline: 1rem; }
	.tnz-wordmark { font-size: 1.3rem; }
	.tnz-footer__bar { padding-inline: 1rem; }

	.tnz-faq { padding-inline: 1rem; }
	.tnz-calc { padding: 1.25rem 1rem; }
	.messagecontainer,
	.contactcontainer { width: 92%; padding: 1.25rem; }
	.tnz-quick-icons { gap: 0.5rem; }
	.tnz-quick-icons button { width: 30px; height: 30px; }

	.tnz-card { width: 42vw; padding: 1rem 0.75rem; }
	.tnz-card img { width: 44px; height: 44px; }
}

/* -------------------------------------------------------------------------
 * Contact section: previously a bare button/overlay/tagline sequence
 * dangling loose at the end of the page content, with no heading or
 * container of its own. Gives it the same centered-text/measure-width
 * treatment as the other top-level page-frame elements (h1/h2/hr above).
 * ----------------------------------------------------------------------- */

.tnz-contact {
	max-width: var(--tnz-measure);
	margin: 2rem auto;
	padding-inline: 1.25rem;
	text-align: center;
}

.tnz-contact h2 {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--tnz-ink);
}

.tnz-contact p {
	max-width: 34rem;
	margin: 0 auto 0.4rem;
	font-size: 0.875rem;
	color: var(--tnz-ink-soft);
}

.tnz-contact__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem;
}

.tnz-ads__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem;
}

/* .stnzbutton/.ak-whatsapp both come from tanazul-widgets.css/tanazul-main.css
   with position: absolute (meant for a Divi module that no longer exists) -
   same issue the legacy icon row had. Reset to static so they sit in the
   flex row where the markup actually puts them. */
.tnz-contact__actions .stnzbutton {
	position: static;
	margin: 0;
}

/* WhatsApp CTA: was a <form method="get" target="_blank"> whose only job was
   to build the wa.me URL and open it in a new tab - a plain link does the
   same thing with less markup. tanazul-main.css's button/input.ak-whatsapp
   rule doesn't cover the <a> case, so it's added here; the 25px auto-margin
   that rule gives the form/button variant is reset to line up in the flex
   row instead. */
/* Same component, two names (both baked into page post_content in the
   database, not this repo, so neither can be renamed here) - one shared
   declaration block, hover colour is the only real difference. */
a.tnz-whatsapp,
a.tnz-action {
	display: inline-block;
	margin: 0;
	padding: 15px 25px; /* doesn't land on the --tnz-space scale - kept literal
	                       rather than nudging the button's actual size by a
	                       pixel to force-fit it */
	border-radius: 5px; /* same - doesn't match --tnz-radius-sm (4px) */
	background-color: var(--tnz-ink);
	color: #fff;
	font-family: inherit;
	font-size: var(--tnz-text-md);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
}
/* #25D366 (WhatsApp's own brand green) is deliberately not --tnz-whatsapp
   (#1fa855, a different shade used elsewhere) - kept as its literal value
   rather than silently changing this button's hover colour to match. */
a.tnz-whatsapp:hover { background-color: #25D366; }
a.tnz-action:hover { background-color: var(--tnz-accent); }

/* --------------------------------------------------------------------------
 * Comment ID badge
 *
 * Inserted as the first child of .wpd-comment-text by addCommentIdBadges()
 * in tanazul-app.js, reading the ID from the comment wrapper's own
 * id="wpd-comm-{ID}_0" (always present, unlike the image-only attachments
 * markup this used to key off - see that function for why). Position:
 * absolute resolves against .wpd-comment-right (nearest positioned
 * ancestor), so top/left below places it at the card's top-left corner
 * (top-right on the English site) whether or not the listing has a photo.
 * ----------------------------------------------------------------------- */

#wpdcom .tnz-comment-id {
	position: absolute;
	top: 10px;
	left: 40px;
	z-index: 2;
	color: #505050;
	font-size: 11px;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 4px;
	direction: ltr;
	opacity: 0;
	transition: opacity 0.15s ease;
}
html[lang=en-US] #wpdcom .tnz-comment-id { left: auto; right: 40px; }
/* Smaller and the same light grey as the date (#afafaf, 11px): the id is a reference, not content. */
#wpdcom .wpd-comment-text .tnz-comment-id {
	color: var(--tnz-silver);
	font-size: 10px !important; /* something in the comment-text styles sets 15px with more weight than this rule */
	padding: 3px 4px;
}
#wpdcom .wpd-comment-wrap:hover .tnz-comment-id { opacity: 1; }

/* --------------------------------------------------------------------------
 * Comment-card decluttering
 *
 * Hides thread-level chrome (settings/filter bar) and per-comment controls
 * (vote, tools, and anything wpDiscuz itself marks .wpd-hidden - share/copy-
 * link, normally shown on hover) that add noise without adding value on a
 * classifieds feed. .wpd-space appeared in both groups in the original
 * request; kept once here.
 * ----------------------------------------------------------------------- */

.wpd-thread-head,
.wpd-thread-info,
.wpdiscuz-user-settings,
.wpd-space,
.wpd-thread-filter,
.wpd-filter-container,
.wpdiscuz-hidden,
.wpd-comment-left,
.wpd-vote,
.wpd-tools,
.wpd-hidden {
	display: none !important;
}

/* wpDiscuz's own .wpd-comment-header is display:flex with
 * justify-content:space-between, meant to spread author/date/share/vote/
 * tools across the full row width. With most of those hidden above,
 * space-between pulled the remaining author and date apart instead of
 * keeping them together; flex-start sits them side by side instead.
 * Selector matches wpDiscuz's own for equal specificity - this file loads
 * after wpdiscuz's, so it wins on cascade order without needing !important. */
#wpdcom .wpd-comment .wpd-comment-header {
	justify-content: flex-start;
}

/* .tnv-fixed-description (tanazulverified-scripts.js) is inserted right
 * after .wpd-comment-author in the DOM, so as a flex item it already rides
 * along next to the author name and date once the header stops spreading
 * everything apart above - no separate positioning needed here. */

/* --------------------------------------------------------------------------
 * Comment filter (tanazul-rules plugin's [tanazul_filter] shortcode)
 *
 * .filterlabel (visually-hidden label text) stays in tanazul-widgets.css;
 * everything visible here was hardcoded greys matching nothing else on the
 * page (#ccc/#666/#e2e6ea), with no responsive breakpoint - 4 selects plus
 * a reset button in one flex row, uncapped, on a phone screen.
 * ----------------------------------------------------------------------- */

.filtercontainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.625rem;
	max-width: var(--tnz-measure);
	margin: 0 auto;
	padding: 1rem 1.25rem;
	/* Stays invisible until positionFilter() (tanazul-app.js) has actually
	   moved it in front of .wpd-thread-list and adds .tnz-filter-ready -
	   otherwise a reload visibly shows it for a moment in its fallback
	   page-content position (before the whole wpDiscuz block) before
	   jumping to its real one. Layout space is still reserved (this isn't
	   display:none), so nothing else on the page shifts once it appears. */
	opacity: 0;
	transition: opacity 0.15s ease;
}
.filtercontainer.tnz-filter-ready { opacity: 1; }

.filtercontainerselect {
	flex: 1 1 160px;
	display: flex;
	align-items: center;
}

.filterselect {
	width: 100%;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--tnz-rule);
	border-radius: var(--tnz-radius);
	background: var(--tnz-surface);
	color: var(--tnz-ink-soft);
	font: inherit;
	font-size: 0.875rem;
	text-align: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.filterselect:hover { border-color: var(--tnz-ink-faint); }

.filterselect:focus {
	border-color: var(--tnz-accent);
	color: var(--tnz-ink);
}

/* An active filter (anything but "all", always the first option) gets a
 * visible accent border - otherwise the only sign a visitor has that the
 * feed below is currently narrowed is the feed itself being shorter. */
.filterselect:not(:focus):has(option:checked:not(:first-child)) {
	border-color: var(--tnz-accent);
	color: var(--tnz-ink);
}

.filtersresetbtn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--tnz-rule);
	border-radius: 50%;
	background: var(--tnz-surface);
	color: var(--tnz-ink-soft);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.filtersresetbtn:hover {
	color: var(--tnz-accent);
	border-color: var(--tnz-accent);
}

@media (max-width: 768px) {
	.filtercontainer { padding-inline: 1rem; }
	.filtercontainerselect { flex-basis: calc(50% - 0.625rem); }
}

@media (max-width: 480px) {
	.filtercontainer { gap: 0.5rem; }
	.filtercontainerselect { flex-basis: 100%; }
	.filterselect { font-size: 0.8125rem; }
}

/* Link to the tnz_listing archive, printed by tanazul-site-functions.php
   right after wpDiscuz's own comment pagination. */
.tnz-archive-link {
	text-align: center;
	margin: 1.5rem 0;
}

.tnz-archive-link a {
	color: var(--tnz-ink-soft);
	text-decoration: underline;
	font-size: 0.9375rem;
}

.tnz-archive-link a:hover {
	color: var(--tnz-accent);
}

/* Archive & single templates for the tnz_listing CPT (older listings).
 * These pages get a capped width - the one deliberate exception to the
 * site's otherwise full-bleed (--tnz-measure: none) layout, since a
 * multi-column grid needs a bound or it stretches awkwardly on wide
 * monitors. The homepage feed and regular pages are unaffected. */
.tnz-archive,
.tnz-single-listing {
	max-width: 1300px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Page-level text (headings, intros, empty states) centers - cards, forms
   and field values inside them keep their own natural alignment; this is
   about the page's overall middle-of-the-page feel, not every string on it. */
.tnz-archive__title,
.tnz-related-section h2,
.tnz-related-section__intro,
.tnz-archive__empty,
.tnz-verify-request,
.tnz-verify-request__pending {
	text-align: center;
}

.tnz-agent-profile {
	text-align: center;
}

/* Pagination: the_posts_pagination()'s default markup on the archive/
   taxonomy pages (<nav class="navigation pagination"><div class="nav-links">
   ...</div></nav>), and the agent page's own paginate_links() output
   (<nav class="tnz-archive__pagination">...</nav>, same default
   "page-numbers" class names) - one ruleset covers both since they share
   the link markup, just a different wrapper. Same pill/border language as
   everything else on the page; current page filled with the accent color,
   same "accent used sparingly, for meaning" rule as the field labels and
   hub count pills. */
.tnz-archive .nav-links,
.tnz-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.tnz-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.75rem;
	border: 1px solid var(--tnz-rule);
	border-radius: var(--tnz-radius);
	background: var(--tnz-surface);
	color: var(--tnz-ink-soft);
	font-size: 0.9375rem;
	text-decoration: none;
}

.tnz-archive a.page-numbers:hover {
	border-color: var(--tnz-ink-faint);
	background: var(--tnz-tint);
	color: var(--tnz-ink);
}

.tnz-archive .page-numbers.current {
	border-color: var(--tnz-accent);
	background: var(--tnz-accent);
	color: #fff;
	font-weight: bold;
}

.tnz-archive .page-numbers.dots {
	border-color: transparent;
	background: none;
}

.tnz-archive .page-numbers.prev,
.tnz-archive .page-numbers.next {
	padding: 0 1.125rem;
	font-weight: bold;
}

/* Standard WP utility class, generated by the_posts_pagination() (a hidden
   "Posts navigation" heading) and other core markup, but never defined by
   this theme before now - without it that heading was rendering visibly
   right above the pagination links. Canonical _s-theme snippet. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link: reverses the clip on focus so a keyboard user tabbing from
   page load sees it before the masthead. First screen-reader-text use
   that needs to become visible again - the honeypot/filter-label uses of
   the same class never should. */
.tnz-skip-link:focus {
	position: fixed;
	inset-block-start: var(--tnz-space-2);
	inset-inline-start: var(--tnz-space-2);
	z-index: 999;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--tnz-space-2) var(--tnz-space-4);
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--tnz-surface);
	color: var(--tnz-ink);
	border-radius: var(--tnz-radius-sm);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.tnz-archive__title,
.tnz-agent-archive__stats {
	color: var(--tnz-ink);
}

/* Profile header (/p/{id}/): the one composition the live feed has no
   equivalent for, since it shows people rather than listings. Same card
   DNA and tier mechanism as listings (data-tnz-tier), so "is this poster
   trustworthy" reads with the same grammar a visitor already learned from
   the homepage feed - now also the same overlapping identity icon as the
   listing card and hub tiles. */
.tnz-agent-profile {
	position: relative;
	margin-top: 2.5rem; /* room for the avatar overlapping the top edge */
	margin-bottom: 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--tnz-rule);
	border-radius: var(--tnz-radius);
	background: var(--tnz-surface);
}

.tnz-agent-profile[data-tnz-tier="pending"] {
	border-style: dashed;
	border-color: var(--tnz-ink-faint);
}

.tnz-agent-profile[data-tnz-tier="verified"] {
	border-width: 2px;
	border-color: var(--tnz-accent);
	padding: calc(1.25rem - 1px) calc(1.5rem - 1px);
}

.tnz-agent-profile__avatar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	transform: translate(0, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border: 3px solid var(--tnz-surface);
	border-radius: 100%;
	background: var(--tnz-accent);
	color: #fff;
	font-size: 1.375rem;
	font-weight: bold;
}

.tnz-agent-profile__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tnz-agent-profile .tnz-archive__title {
	padding: 2rem 0;
}

/* Keeps the heading + share button visually inline together (the button
   used to be inline content inside the h1 itself, before being moved out
   for accessibility - see archive-tnz-agent.php) without either wrapping
   oddly on narrow screens. */
.tnz-agent-profile__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.tnz-agent-profile__title-row .tnz-archive__title {
	margin: 0;
}

.tnz-agent-profile .tnz-agent-archive__bio {
	margin: 0 0 0.5rem;
}

.tnz-agent-profile .tnz-agent-archive__stats {
	margin: 0;
}

.tnz-agent-profile__contact {
	margin-top: 1rem;
}

/* Website/Instagram/Snapchat/TikTok - neutral outline chips (same
   .tnz-pill construction as the profession pills elsewhere) rather than the
   filled accent/whatsapp-green treatment of the primary contact buttons
   above: these are secondary, "also find me here" links, not the main
   call-to-action. */
.tnz-agent-profile__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.tnz-agent-profile__link {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--tnz-rule);
	border-radius: 999px;
	color: var(--tnz-ink-soft);
	font-size: 0.8125rem;
	text-decoration: none;
}

.tnz-agent-profile__link:hover {
	border-color: var(--tnz-accent);
	color: var(--tnz-accent);
}

/* Share button: plain icon-button styling, same family as .tnz-iconbtn in
   the masthead but sized for inline placement next to the profile name
   rather than the header bar. Spacing from the heading now comes from
   .tnz-agent-profile__title-row's flex gap, not its own margin (that
   margin only made sense back when this button was inline content inside
   the h1 itself). */
.tnz-agent-profile__share {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--tnz-rule);
	border-radius: 999px;
	background: var(--tnz-surface);
	color: var(--tnz-ink-soft);
	font-size: 0.8125rem;
	font-family: inherit;
	cursor: pointer;
	vertical-align: middle;
}

.tnz-agent-profile__share:hover {
	border-color: var(--tnz-accent);
	color: var(--tnz-accent);
}

.tnz-agent-profile__share svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.tnz-agent-profile__badge {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-inline-start: 0.375rem;
	vertical-align: middle;
	background: var(--tnz-accent);
	-webkit-mask: url('/media/check-icon.svg') center / contain no-repeat;
	        mask: url('/media/check-icon.svg') center / contain no-repeat;
}

.tnz-agent-archive__stats {
	color: var(--tnz-ink-soft);
}

.tnz-agent-archive__bio {
	max-width: 60ch;
	margin-inline: auto;
	color: var(--tnz-ink-soft);
}

.tnz-poster-edit,
.tnz-verify-request {
	margin: 1rem 0 1.5rem;
	padding: 1rem;
	border: 1px solid var(--tnz-rule);
	border-radius: var(--tnz-radius);
	background: var(--tnz-tint);
}

.tnz-ad-lead-request fieldset,
.tnz-verify-request fieldset {
	display: inline-flex;
	direction: rtl;
	gap: 20px;
	width: 95%;
	justify-content: center;
}

.tnz-poster-edit label,
.tnz-verify-request label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--tnz-ink-soft);
	font-size: 0.875rem;
}

.tnz-poster-edit input[type="text"],
.tnz-poster-edit textarea,
.tnz-verify-request input[type="tel"],
.tnz-verify-request textarea {
	width: 100%;
	max-width: 480px;
	padding: 0.5rem;
	margin-bottom: 0.75rem;
	border: 1px solid var(--tnz-rule);
	border-radius: 4px;
	font-family: inherit;
}

/* .tnz-verify-request itself is centered text, but width:100% inputs
   still need an explicit auto margin to center as a block. */
.tnz-verify-request input[type="tel"],
.tnz-verify-request textarea {
	margin-inline: auto;
}

.tnz-verify-request form p {
	text-align: start; /* labels/inputs stay left-anchored; the hint/message above stay centered */
}

.tnz-poster-edit input[type="text"]:focus,
.tnz-poster-edit textarea:focus,
.tnz-poster-edit__listing-form input[type="text"]:focus,
.tnz-poster-edit__listing-form textarea:focus,
.tnz-verify-request input[type="tel"]:focus,
.tnz-verify-request textarea:focus {
	border-color: var(--tnz-accent);
}

.tnz-poster-edit button[type="submit"],
.tnz-verify-request button[type="submit"] {
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--tnz-accent);
	border-radius: 6px;
	background: var(--tnz-accent);
	color: #fff;
	font-weight: bold;
	font-family: inherit;
	cursor: pointer;
}

.tnz-poster-edit__notice {
	color: var(--tnz-accent);
	font-weight: bold;
}

.tnz-verify-request__hint {
	max-width: 48ch;
	margin: 0 auto 1rem;
	color: var(--tnz-ink-soft);
	font-size: 0.875rem;
}

.tnz-verify-request__rejected {
	margin: 0 0 0.75rem;
	color: var(--tnz-ink-faint);
	font-style: italic;
}

.tnz-verify-request__message {
	margin-bottom: 0.75rem;
	color: var(--tnz-accent);
	font-weight: bold;
}

/* Per-listing edit/delete forms: a card grid now, same visual grammar as
   the read-only .tnz-listing-card above (border/radius/surface) instead of
   the earlier dashed full-width stack. auto-fill/minmax rather than a fixed
   4-column count: inside .tnz-archive's 1300px cap that math naturally
   lands on 4 per row, but it still reflows to fewer columns - never a fixed
   count that would force horizontal scrolling - on a narrower viewport,
   same defensive pattern as .tnz-flags above. */
.tnz-poster-edit__listing-forms {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
	margin: 0.5rem 0 1.5rem;
}

.tnz-poster-edit__listing-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	border: 1px solid var(--tnz-rule);
	border-radius: var(--tnz-radius);
	background: var(--tnz-surface);
}

.tnz-poster-edit__listing-form-title {
	margin: 0 0 0.25rem;
	color: var(--tnz-ink);
	font-weight: bold;
	font-size: 1.0625rem;
}

.tnz-poster-edit__listing-form input[type="text"],
.tnz-poster-edit__listing-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem;
	border: 1px solid var(--tnz-rule);
	border-radius: 4px;
	font-family: inherit;
}

.tnz-poster-edit__listing-form label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	color: var(--tnz-ink-soft);
	font-size: 0.8125rem;
}

.tnz-poster-edit__listing-form label input {
	flex: 1;
	min-width: 0;
}

.tnz-poster-edit__listing-form-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.25rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--tnz-rule);
}

.tnz-poster-edit__listing-form-actions button {
	flex: 1;
}

.tnz-poster-edit__listing-form button[type="submit"] {
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--tnz-accent);
	border-radius: 6px;
	background: var(--tnz-accent);
	color: #fff;
	font-weight: bold;
	font-family: inherit;
	cursor: pointer;
}

/* Delete is the one destructive action on the whole CPT front end - plain
   outline, no new "danger" color token, per the "boring, fewer moving
   parts" call. */
.tnz-poster-edit__listing-form button[value="delete"] {
	border-color: var(--tnz-rule);
	background: transparent;
	color: var(--tnz-ink-soft);
}

.tnz-poster-edit__listing-form button[value="delete"]:hover {
	border-color: var(--tnz-ink-faint);
	color: var(--tnz-ink);
}

.tnz-verify-request__pending {
	color: var(--tnz-ink-faint);
	font-style: italic;
}

/* Flex-wrap + justify-content:center rather than CSS grid: a grid's
   auto-fill tracks stay put (and empty) when a row isn't full, leaving
   cards stuck to the start edge - flex has no phantom tracks, so a partial
   last row (or a hub/search result with just a couple of cards) centers
   itself naturally instead of hugging one side. */
.tnz-archive__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.tnz-archive__item {
	display: flex;
	flex: 1 1 300px;
	max-width: 380px;
}

.tnz-archive__item .tnz-listing-card--compact {
	flex: 1;
}

/* Taxonomy hub landing pages (/nationality/, /profession/, /region/, /poster/).
   No live-feed equivalent to borrow from (the feed has no "browse by
   category" concept) - same "ID-card" language as the listing cards: a
   small round icon overlapping the tile's top edge, a centered name, an
   accent count pill below. Nationality terms get their real flag (already
   an existing asset); the other three taxonomies fall back to a plain
   accent-filled initial-letter circle rather than sourcing/maintaining a
   whole new icon set per term. */
.tnz-hub-archive__list {
	list-style: none;
	margin: 2.5rem auto 0; /* room for the icons overlapping the tiles above */
	max-width: 72rem;
	padding: 0 var(--tnz-space-4);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.25rem 1rem; /* a row gap over half the icon, so the icons never touch the row above */
}

.tnz-hub-archive__item {
	flex: 1 1 9rem; /* two per row on a phone, six on a desktop */
	max-width: 220px;
}

.tnz-hub-archive__item a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1.75rem 1rem 1.25rem;
	border: 1px solid var(--tnz-rule);
	border-radius: var(--tnz-radius);
	background: var(--tnz-surface);
	color: var(--tnz-ink);
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}

.tnz-hub-archive__item a:hover {
	border-color: var(--tnz-ink-faint);
	background: var(--tnz-tint);
}

.tnz-hub-archive__icon {
	position: absolute;
	top: 0;
	/* Centring is not directional: a physical left. With inset-inline-start the -50% shift moved the icon
	   a further half-width off centre in right-to-left (the Arabic hubs). */
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border: 2px solid var(--tnz-surface);
	border-radius: 100%;
	background: var(--tnz-accent);
	color: #fff;
	font-size: 1.0625rem;
}

.tnz-hub-archive__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tnz-hub-archive__term-name {
	margin-top: 0.375rem; /* clears the overlapping icon */
}

/* Filled accent pill - the count is the one place these tiles have a
   reason to use the accent color functionally, same "sparingly, for
   meaning" rule as everywhere else on the site. */
.tnz-hub-archive__term-count {
	flex-shrink: 0;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	background: var(--tnz-tint);
	color: var(--tnz-ink-soft);
	font-size: 0.8125rem;
	font-weight: bold;
}

/* -----------------------------------------------------------------------
 * Listing cards: a larger standalone version of the live feed's own
 * .wpd-comment card (single-tnz_listing.php's --full variant) and a
 * smaller preview version (--compact, used by every "3 latest" section,
 * the archive list, and the agent archive). See tanazul-main.css:2638+ for
 * the live card this is modeled on; written fresh here rather than reusing
 * .wpd-comment itself, since that class also carries ~1,000 unrelated
 * legacy selectors this page has no reason to inherit.
 * -------------------------------------------------------------------- */

.tnz-listing-card {
	position: relative;
	display: block;
	border: 1px solid var(--tnz-rule);
	border-radius: var(--tnz-radius);
	background: var(--tnz-surface);
	color: var(--tnz-ink);
	text-decoration: none;
}

/* Defensive wrapping for the headline text pieces on these cards/tiles -
   real listing titles, author names, and term names are unbounded content
   with no length limit enforced anywhere upstream. */
.tnz-listing-card__title,
.tnz-listing-card__identity-name,
.tnz-listing-card__compact-title,
.tnz-hub-archive__term-name,
.tnz-agent-profile .tnz-archive__title {
	overflow-wrap: break-word;
}

/* Single "profile card" layout: a taller, narrower, centered card (large
   and roughly square, not a wide two-column spread) with stacked rows -
   identity, title/date, body, image+fields, contact, agent-link. */
.tnz-listing-card--full {
	max-width: 760px;
	margin-inline: auto;
	margin-top: 5rem; /* room for the identity icon's overlap above the card */
	margin-bottom: 2rem;
	padding: 1.5rem;
}

/* Row 1: nationality flag + name + poster-role type, centered - a
   prominent header rather than the live feed's small corner badge, since
   this card has the room and the badge would just repeat what's below it. */
.tnz-listing-card__identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin-bottom: 1rem;
}

.tnz-listing-card__identity-icon {
	width: 100px;
	height: 100px;
	border-radius: 100%;
	object-fit: cover;
	transform: translateY(-70px); /* pulls the icon up to overlap the card's top edge */
}

.tnz-listing-card__identity-name {
	color: var(--tnz-ink);
	font-size: 1.0625rem;
	font-weight: bold;
}

.tnz-listing-card__identity-type {
	color: var(--tnz-ink-faint);
	font-size: 0.8125rem;
}

/* Row 2: title + date, centered. */
.tnz-listing-card__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin-bottom: 1rem;
	text-align: center;
}

.tnz-listing-card__title {
	margin: 0;
	font-size: 1.375rem;
	color: var(--tnz-ink);
}

.tnz-listing-card__date {
	color: var(--tnz-ink-faint);
	font-size: 0.8125rem;
}

/* Row 3: body text, centered. */
.tnz-listing-card__body {
	margin-bottom: 1.25rem;
	color: var(--tnz-ink-soft);
	text-align: center;
}

/* Row 4: fields (start/right side) + a fixed 400x400 image (end/left side).
   DOM order is fields-then-image: in this RTL-default site a flex row's
   first child lands on the visual right, so this order alone produces
   "image left, fields right" with no direction hacks needed. */
.tnz-listing-card__media {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
	padding: 1rem;
	border: 2px solid #eaeaea;
	border-radius: 7px;
}

.tnz-listing-card__fields {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	min-width: 0; /* let long field values wrap instead of forcing the row wider */
}

.tnz-listing-card__image {
	flex: 0 0 auto;
}

.tnz-listing-card__image img {
	display: block;
	width: 355px;
	height: 355px;
	max-width: 100%;
	object-fit: fill;
	border-radius: 7px;
	border: 1px solid #f6f4f2;
}

@media (max-width: 680px) {
	.tnz-listing-card__media {
		flex-direction: column;
		align-items: center;
	}

	/* Stacked on mobile: image first (visual lead), fields below - the
	   left/right DOM order above stops mattering once there's no row. */
	.tnz-listing-card__image {
		order: -1;
		width: 100%; /* without this, align-items:center leaves the wrapper
		                shrink-to-fit, so the img's own width:100% has no
		                real width to resolve against and falls back to its
		                max-width cap regardless of viewport - overflowing
		                on any phone narrower than that cap. */
	}

	.tnz-listing-card__fields {
		width: 100%;
	}

	.tnz-listing-card__image img {
		width: 100%;
		max-width: 355px;
		aspect-ratio: 1 / 1;
		height: auto;
	}
}

/* Spec-sheet field strip, imported from the live feed's own
   .wpd-cf-label/.wpd-cf-value (tanazul-main.css) - an accent-filled label
   next to a neutral value is the homepage's strongest visual signature and
   these fields only half-borrowed it before (plain grey text). */
.tnz-listing-card__field {
	display: flex;
	border-radius: 6px;
	overflow: hidden; /* clip both halves to the shared corner radius */
}

.tnz-listing-card__field--label {
	/* flex-shrink:0 + white-space:nowrap would refuse to shrink below the
	   longest label's unwrapped width ("الراتب الشهري"/"مدة الوصول") - fine
	   on a wide card, but on a narrow phone that's wider than the whole
	   card, forcing the entire page to overflow sideways. Letting it wrap
	   and shrink works at every width, so no media-query override needed. */
	flex: 0 1 30%;
	min-width: 5.5rem;
	margin: 0;
	padding: 0.5rem;
	background: var(--tnz-accent);
	color: #fff;
	font-size: 1rem;
}

.tnz-listing-card__field--value {
	flex: 1;
	margin: 0;
	padding: 0.5rem;
	background: var(--tnz-tint);
	color: var(--tnz-ink);
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.tnz-listing-card__flag {
	border-radius: 100%;
}

/* Row 5: WhatsApp and phone/call buttons at opposite ends - real links
   (tel:/wa.me), but the number itself is never shown as text, only as the
   link target. DOM order is phone-then-WhatsApp: under this site's default
   RTL, that puts phone on the visual right and WhatsApp on the left, same
   ordering trick as the media row. */
.tnz-listing-card__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tnz-rule);
}

/* Full-width blocks, same visual weight as the footer bar below (solid
   color fill, centered white text, square corners) rather than small
   inline pills. */
.tnz-listing-card__phone,
.tnz-listing-card__whatsapp {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	color: #fff;
	font-weight: bold;
	font-size: 1rem;
	text-decoration: none;
}

.tnz-listing-card__phone {
	background: var(--tnz-accent);
}

.tnz-listing-card__whatsapp {
	background: var(--tnz-whatsapp);
}

/* Row 6: link to the poster's other listings, centered below everything. */
.tnz-listing-card__footer {
	margin-top: 1rem;
	padding: 1rem;
	background: #292929;
	text-align: center;
}

.tnz-listing-card__agent-link {
	color: #fff;
	font-size: 1rem;
	text-decoration: none;
}

/* Tier escalation: border weight/color only, matching the live feed's own
   convention (tanazul-main.css .tnvgold/.tnvplatinum/etc.) rather than
   icons or ribbons. Attribute-driven like data-tnz-poster, set server-side
   from wp_tnz_posters.status via tnz_get_poster_tier_for_post(). Only
   verified/pending are real today - unverified is the default look, so it
   has no rule of its own. gold/platinum have no CPT-side data source yet
   (see the function's docblock) but the rules are ready for when one exists,
   so adding a paid tier later is a data change, not a redesign. */
.tnz-listing-card[data-tnz-tier="pending"] {
	border-style: dashed;
	border-color: var(--tnz-ink-faint);
}

.tnz-listing-card[data-tnz-tier="verified"] {
	border-width: 2px;
	border-color: var(--tnz-accent);
}

.tnz-listing-card--full[data-tnz-tier="verified"] {
	padding: calc(1.5rem - 1px); /* extra border width eats into the padding box */
}

.tnz-listing-card--compact[data-tnz-tier="verified"] {
	padding: calc(1rem - 1px);
}

/*
.tnz-listing-card[data-tnz-tier="gold"] {
	border-width: 3px;
	border-color: var(--tnz-accent);
	background: var(--tnz-tint);
}

.tnz-listing-card[data-tnz-tier="platinum"] {
	border-width: 3px;
	border-color: var(--tnz-ink);
	background: var(--tnz-tint);
}
*/

/* Compact preview variant: the same "ID-card" idea as the full card, at
   miniature scale - a framed square photo up top (or a small poster-role
   avatar standing in when there's no photo) with a centered text stack
   below, instead of the old horizontal thumbnail-and-text row. */
.tnz-listing-card--compact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem;
	text-align: center;
}

.tnz-listing-card--compact:hover {
	border-color: var(--tnz-ink-faint);
	background: var(--tnz-tint);
}

.tnz-listing-card--compact__frame {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 2px solid var(--tnz-rule);
	border-radius: 7px;
	height: 200px;
	width: 200px;
}

.tnz-listing-card--compact__frame img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
}

/* No photo on the listing: a poster-role icon, or (lacking even that) a
   generic glyph, stands in - but always inside the exact same 200x200
   .tnz-listing-card--compact__frame box a real photo would use, so every
   card in a grid reserves identical space regardless of whether it has a
   photo. This modifier switches the frame from "photo filling the box" to
   "icon centered on a tinted background". */
.tnz-listing-card--compact__frame--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tnz-tint);
}

.tnz-listing-card--compact__frame.tnz-listing-card--compact__frame--icon img,
.tnz-listing-card--compact__frame--icon svg {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

/* No photo AND no poster-role icon to fall back to (e.g. the listing's
   poster-role term isn't one of tanazul-rules' known categories) - a
   neutral generic-person glyph rather than leaving the frame empty. */
.tnz-listing-card--compact__frame--default svg {
	color: var(--tnz-ink-faint);
}

/* Nationality flag, centered below the image - large enough to read as its
   own signal rather than a small inline icon (the title also spells the
   nationality out in words, so this isn't duplicating text, just giving it
   a visual anchor). */
.tnz-listing-card--compact__flag-large {
	width: 72px;
	height: auto;
	margin-top: 0.125rem;
	border: 1px solid var(--tnz-rule);
	border-radius: 4px; /* rounded corners, not a circle crop - flags aren't square */
}

.tnz-listing-card__compact-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
}

.tnz-listing-card__compact-title {
	font-weight: bold;
	color: var(--tnz-ink);
}

.tnz-listing-card__compact-body time {
	color: var(--tnz-ink-faint);
	font-size: 0.8125rem;
}

/* -----------------------------------------------------------------------
 * Related-content sections (single-tnz_listing.php).
 * -------------------------------------------------------------------- */

.tnz-related-section {
	margin: 2rem 0;
}

.tnz-related-section h2 {
	font-size: 1.125rem;
	color: var(--tnz-ink);
}

.tnz-related-section__intro {
	max-width: 60ch;
	margin-inline: auto;
	color: var(--tnz-ink-soft);
}

.tnz-related-section__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.tnz-related-section__cards > .tnz-listing-card--compact {
	flex: 1 1 300px;
	max-width: 380px;
}

/* -----------------------------------------------------------------------
 * Per-term global rich content (taxonomy.php + single-tnz_listing.php) -
 * one big author-managed section per term, e.g. country/profession/region
 * facts. Wider than .tnz-related-section__intro since it carries headings
 * and lists, not a one-line caption.
 * -------------------------------------------------------------------- */

.tnz-term-rich-content {
	margin: 2rem 0;
	max-width: 70ch;
	margin-inline: auto;
	line-height: 1.7;
	color: var(--tnz-ink);
}

.tnz-term-rich-content h2,
.tnz-term-rich-content h3,
.tnz-term-rich-content h4 {
	color: var(--tnz-ink);
	margin-top: 1.25em;
}

.tnz-term-rich-content p {
	margin: 0.75em 0;
}

.tnz-term-rich-content ul,
.tnz-term-rich-content ol {
	margin: 0.75em 0;
	padding-inline-start: 1.5em;
}

.tnz-term-rich-content a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 480px) {
	.tnz-listing-card--full {
		padding: 1rem;
	}
}

/* Honeypot field: injected into the wpDiscuz form by injectHoneypotField()
   in tanazul-app.js, and reused by tnz_honeypot_field() (tanazul-rules) for
   the header's verify/advertise modals - real visitors never see or tab
   into it. Visual hiding now comes from .screen-reader-text (added
   alongside this class wherever it's used) rather than its own copy of
   the same declarations - .tnz-hp-field is kept purely as the honeypot's
   identifying hook. Was previously its own "visually hidden" block
   (bounded 1x1px box with a -1px margin, clipped) rather than
   `left: -9999px`, which has no bounding box of its own - the browser
   treats the field as real page content miles off-screen and adds a
   scrollbar reaching it, which is exactly what pushed the homepage into
   horizontal scroll site-wide. */

/* Comment-body moderation classes, applied by moderateCommentText() in
   tanazul-app.js. TESTING: dimmed by opacity instead of hidden, so an
   admin can see how many/which listings each rule would actually catch
   before switching to display:none - revert to the hide rule below once
   the word lists and phone-shaped threshold have been checked against the
   live feed.
   - Final version: `.tnzcomment_hardban, .tnzcomment_softban { display: none; }`
     (tnzcomment_spam stays flag-only, no rule at all). */
.tnzcomment_spam,
.tnzcomment_hardban,
.tnzcomment_softban {
	opacity: 0.25;
}

/* -------------------------------------------------------------------------
 * wpDiscuz submission form tweaks, on top of the base rules in
 * tanazul-main.css (see that file for the un-overridden versions).
 * ----------------------------------------------------------------------- */

/* Overrides tanazul-main.css's width:100%/max-width:var(--tnz-measure) -
   matches #wpdcom's own 90vw (tanazul-main.css:34) directly instead of
   inheriting it via percentage. */
.tnz-quick-icons {
	width: 90vw;
}

/* Fainter placeholder than the base 100%-opacity text in tanazul-main.css. */
#wpdcom .wpd-form .wpdiscuz-textarea-wrap textarea::placeholder {
	text-align: center;
	padding-top: 30px;
	font-size: 150% !important;
	opacity: 0.25;
}

#wpdcom textarea {
	color: #292929;
}

/* Was display:inline-block in tanazul-main.css; width/height below are
   inert under display:contents (the element no longer generates a box to
   apply them to) - kept as-is per request. */
#wpdcom .wpd-field-radio .wpd-field-label, #wpdcom .wpd-field-checkbox .wpd-field-label {
	display: block;
	width: 100%;
	height: 18px;
	font-size: 14px;
}

/* Sample-format hints, matching the existing wc_time/wc_salary/wc_cost/
   wc_age pattern (tanazul-main.css:2610-2637) - wc_mobile/wc_whatsapp had
   none until now. */
.wc_whatsapp-wrapper:after {
	content: "0500000000";
	position: absolute;
	top: 10px;
	color: #afafaf;
	left: 35px;
	font-size: 14px;
}
.wc_mobile-wrapper:after {
	content: "0500000000";
	position: absolute;
	top: 10px;
	color: #afafaf;
	left: 35px;
	font-size: 14px;
}

/* Empty live feed: message + archive link, shown instead of the loading
 * skeletons when there are no cards (see showEmptyFeedNotice() in tanazul-app.js). */
.tnz-feed-empty {
	text-align: center;
	padding: var(--tnz-space-6) var(--tnz-space-4);
	color: var(--tnz-ink-soft);
	font-size: var(--tnz-text-md);
}
.tnz-feed-empty p { margin: 0 0 var(--tnz-space-2); }
.tnz-feed-empty a {
	color: var(--tnz-accent-hover); /* #A8532C on white is 5.3:1; the base accent is 3.8:1 */
	font-weight: 600;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Header description drop-down (template-parts/tnz-drop.php, printed under the
 * masthead on the homepage). Collapsed by default once the script has run (the
 * head script sets html.tnz-js, so a page load never shows it open then closing);
 * without JavaScript it stays open. The slide is switched on only after the
 * visitor uses the tab (.is-anim). Ported from musaned.net's title drop-down.
 * ---------------------------------------------------------------------- */

.tnz-drop {
	position: relative;
	margin-bottom: 1.75rem; /* room for the hanging tab */
}

.tnz-drop__panel {
	position: relative; /* the tab hangs from the bottom edge */
	display: grid;
	grid-template-rows: 1fr;
	background: var(--tnz-surface);
}

html.tnz-js .tnz-drop:not(.is-open) .tnz-drop__panel { grid-template-rows: 0fr; }
.tnz-drop.is-anim .tnz-drop__panel { transition: grid-template-rows 0.25s ease; }

/* Hairline under the open panel (also when JavaScript is off and it is always open). */
html:not(.tnz-js) .tnz-drop__panel,
.tnz-drop.is-open .tnz-drop__panel { border-bottom: 1px solid var(--tnz-rule); }

.tnz-drop__clip { min-height: 0; overflow: hidden; }

.tnz-drop__inner {
	max-width: 46rem;
	margin-inline: auto;
	padding: 1rem 1.25rem 0.75rem;
}

.tnz-drop__title {
	margin: 0 0 0.5rem;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--tnz-ink);
}

.tnz-drop__rule {
	width: 4rem;
	margin: 0.75rem auto;
	border: 0;
	border-top: 1px solid var(--tnz-rule);
}

.tnz-drop__desc p {
	margin: 0 0 0.75rem;
	text-align: center;
	font-size: 0.9375rem;
	line-height: 1.9;
	color: var(--tnz-ink-soft);
}
.tnz-drop__desc p:last-child { margin-bottom: 0; }

.tnz-drop__tab {
	position: absolute;
	top: 100%;
	left: 50%; /* physical on purpose: with translate it centres in both RTL and LTR */
	translate: -50% 0;
	width: 56px;
	height: 24px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: var(--tnz-surface);
	border: 1px solid var(--tnz-rule);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	color: var(--tnz-ink-soft); /* 7.9:1 on white; the musaned tab's silver chevron is about 2:1 */
}
.tnz-drop__tab[hidden] { display: none; }

.tnz-drop__tab::after { /* bigger touch target than the visible tab */
	content: "";
	position: absolute;
	inset: -8px -12px -12px;
}

.tnz-drop__chev {
	/* Physical right + bottom borders: points down when closed, up (rotated) when open. Logical borders would flip in RTL. */
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	rotate: 45deg;
	margin-top: -4px;
	transition: rotate 0.2s ease, margin 0.2s ease;
}
.tnz-drop.is-open .tnz-drop__chev { rotate: 225deg; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
	.tnz-drop.is-anim .tnz-drop__panel,
	.tnz-drop__chev { transition: none; }
}

@media (max-width: 767px) {
	.tnz-drop__inner { padding: 0.75rem 1rem 0.5rem; }
	.tnz-drop__title { font-size: 1.1rem; }
}


/* --------------------------------------------------------------------------
 * Footer links (About, Contact, Privacy, Terms) - see tanazul_footer_pages()
 * ----------------------------------------------------------------------- */

.tnz-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--tnz-space-5);
}

.tnz-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* touch target */
	padding-inline: var(--tnz-space-1);
	font-size: var(--tnz-text-sm);
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}

.tnz-footer__links a:hover { color: var(--tnz-accent); }

/* --------------------------------------------------------------------------
 * Documents (privacy, terms, about, contact) - .tnz-doc
 *
 * Long text in a readable column. The page's h1 and divider come from
 * tanazul_page_headline() as siblings before the content, so they are pulled into the
 * same column with :has(). Logical properties only, so /en/ mirrors for free.
 * ----------------------------------------------------------------------- */

.site-content .entry-content:has(> .tnz-doc) > h1,
.site-content .entry-content:has(> .tnz-doc) > hr.tn_divider {
	max-width: 46rem;
	margin-inline: auto;
}

.site-content .entry-content:has(> .tnz-doc) > h1 { padding-inline: var(--tnz-space-4); }

/* The divider is as wide as the text column. */
.site-content .entry-content:has(> .tnz-doc) > hr.tn_divider {
	width: min(calc(100% - 2rem), 46rem);
	max-width: none;
}

.tnz-doc {
	max-width: 46rem;
	margin: var(--tnz-space-5) auto var(--tnz-space-6);
	padding-inline: var(--tnz-space-4);
	font-size: var(--tnz-text-base);
	line-height: 1.85;
	color: var(--tnz-ink);
}

.tnz-doc__meta {
	margin: 0 0 var(--tnz-space-3);
	font-size: var(--tnz-text-sm);
	color: var(--tnz-ink-soft);
}

.tnz-doc__lead {
	margin: 0 0 var(--tnz-space-5);
	font-size: var(--tnz-text-md);
	line-height: 1.9;
	color: var(--tnz-ink);
}

.tnz-doc section { margin-top: var(--tnz-space-6); }

.tnz-doc h2 {
	margin: 0 0 var(--tnz-space-3);
	padding-top: var(--tnz-space-4);
	border-top: 1px solid var(--tnz-rule);
	font-size: var(--tnz-text-lg);
	font-weight: 600;
	line-height: 1.5;
}

.tnz-doc h3 {
	margin: var(--tnz-space-5) 0 var(--tnz-space-1);
	font-size: var(--tnz-text-base);
	font-weight: 600;
	line-height: 1.6;
}

.tnz-doc p { margin: 0 0 var(--tnz-space-3); }

.tnz-doc ul {
	margin: 0 0 var(--tnz-space-3);
	padding-inline-start: 1.4rem;
}

.tnz-doc li { margin-bottom: var(--tnz-space-2); }

.tnz-doc strong { font-weight: 600; }

.tnz-doc a {
	color: var(--tnz-accent-hover); /* 5.3:1 on white */
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tnz-doc a:hover { color: var(--tnz-eerie); }

/* The one thing a reader must not miss on a page (independence, official platforms). */
.tnz-doc__note {
	margin: var(--tnz-space-4) 0;
	padding: var(--tnz-space-3) var(--tnz-space-4);
	background: var(--tnz-tint);
	border-inline-start: 3px solid var(--tnz-accent);
	border-radius: var(--tnz-radius-sm);
}

/* Contact channels */
.tnz-doc .tnz-contact-cards {
	display: grid;
	gap: var(--tnz-space-3);
	margin: 0 0 var(--tnz-space-5);
	padding: 0; /* beats ".tnz-doc ul" */
	list-style: none;
}

@media (min-width: 34rem) {
	.tnz-contact-cards { grid-template-columns: 1fr 1fr; }
}

.tnz-contact-cards li { margin: 0; }

.tnz-contact-cards a {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	box-sizing: border-box;
	min-height: 44px;
	height: 100%;
	padding: var(--tnz-space-3) var(--tnz-space-4);
	background: var(--tnz-surface);
	border: 1px solid var(--tnz-silver);
	border-radius: var(--tnz-radius);
	color: var(--tnz-ink);
	text-decoration: none;
	line-height: 1.5;
}

.tnz-contact-cards a:hover {
	border-color: var(--tnz-accent);
	background: var(--tnz-tint);
	color: var(--tnz-ink);
}

.tnz-contact-cards strong { font-size: var(--tnz-text-base); }

.tnz-contact-cards span {
	font-size: var(--tnz-text-sm);
	color: var(--tnz-ink-soft);
}

/* WhatsApp green means WhatsApp only: the two WhatsApp cards get a green edge. */
.tnz-contact-cards li:nth-child(-n+2) a { border-inline-start: 4px solid var(--tnz-whatsapp); }

/* Inline form ([tnz_contact_page]) */
.tnz-form { margin: 0; }

.tnz-form__row { margin: 0 0 var(--tnz-space-4); }

.tnz-form label {
	display: block;
	margin-bottom: var(--tnz-space-1);
	font-size: var(--tnz-text-sm);
	font-weight: 600;
}

.tnz-form input[type="text"],
.tnz-form input[type="tel"],
.tnz-form textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: var(--tnz-space-3);
	background: var(--tnz-surface);
	border: 1px solid var(--tnz-silver);
	border-radius: var(--tnz-radius);
	font: inherit;
	color: var(--tnz-ink);
}

.tnz-form textarea { resize: vertical; min-height: 8rem; }

.tnz-form input:focus,
.tnz-form textarea:focus {
	outline: none;
	border-color: var(--tnz-accent);
	box-shadow: 0 0 0 3px rgba(201, 103, 57, 0.15);
}

.tnz-form [aria-invalid="true"] { border-color: var(--tnz-accent-hover); }

.tnz-form__actions { margin: 0 0 var(--tnz-space-3); }

.tnz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 9rem;
	padding: 0 var(--tnz-space-5);
	background: var(--tnz-accent-hover); /* white on #a8532c is 5.3:1; on the base Flame it fails AA */
	border: 0;
	border-radius: var(--tnz-radius);
	font: inherit;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
}

.tnz-btn:hover { background: var(--tnz-eerie); }
.tnz-btn:disabled { opacity: 0.6; cursor: progress; }

.tnz-form__status { margin: 0 0 var(--tnz-space-2); font-weight: 600; }
.tnz-form__status:empty { display: none; }
.tnz-form__status.is-ok::before { content: "\2713\00a0"; }
.tnz-form__status.is-error { color: var(--tnz-accent-hover); }
.tnz-form__status.is-error::before { content: "!\00a0"; }

.tnz-form__note {
	margin: 0;
	font-size: var(--tnz-text-sm);
	color: var(--tnz-ink-soft);
}

/* Honeypot: off screen, not display:none (some bots skip hidden fields). */
.tnz-hp {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* --------------------------------------------------------------------------
 * Request forms (/advertise/, /verify/ and the lost-link form): .tnz-verify-request
 *
 * One consistent style, same tokens as the contact form above. The older rules further up covered
 * only tel inputs and textareas (text inputs and the select were left at browser defaults), used
 * width:100% without border-box (so fields ran past the panel), and gave the panel no side margin.
 * ----------------------------------------------------------------------- */

.tnz-verify-request {
	box-sizing: border-box;
	width: calc(100% - 2rem);
	max-width: 40rem;
	margin: var(--tnz-space-4) auto var(--tnz-space-5);
	padding: var(--tnz-space-4) var(--tnz-space-4) var(--tnz-space-5);
}

.tnz-verify-request form p { margin: 0 0 var(--tnz-space-4); }

.tnz-verify-request label {
	margin-bottom: var(--tnz-space-1);
	font-size: var(--tnz-text-sm);
	font-weight: 600;
	color: var(--tnz-ink);
}

/* :not(.tnz-hp-field): the hidden honeypot input must keep its visually-hidden sizing. */
.tnz-verify-request input[type="text"]:not(.tnz-hp-field),
.tnz-verify-request input[type="tel"],
.tnz-verify-request select,
.tnz-verify-request textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--tnz-space-3);
	background: var(--tnz-surface);
	border: 1px solid var(--tnz-silver);
	border-radius: var(--tnz-radius);
	font: inherit;
	color: var(--tnz-ink);
}

.tnz-verify-request input[type="tel"] { direction: ltr; text-align: start; }
.tnz-verify-request textarea { resize: vertical; min-height: 6rem; }

.tnz-verify-request input[type="text"]:not(.tnz-hp-field):focus,
.tnz-verify-request input[type="tel"]:focus,
.tnz-verify-request select:focus,
.tnz-verify-request textarea:focus {
	outline: none;
	border-color: var(--tnz-accent);
	box-shadow: 0 0 0 3px rgba(201, 103, 57, 0.15);
}

/* Options as a grid of 44px rows instead of one cramped line of six. */
.tnz-ad-lead-request fieldset,
.tnz-verify-request fieldset {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	justify-content: stretch;
	direction: inherit;
	gap: 0 var(--tnz-space-3);
	box-sizing: border-box;
	width: auto;
	margin: 0 0 var(--tnz-space-4);
	padding: var(--tnz-space-1) var(--tnz-space-3) var(--tnz-space-2);
	background: var(--tnz-surface);
	border: 1px solid var(--tnz-silver);
	border-radius: var(--tnz-radius);
}

.tnz-verify-request legend {
	padding-inline: var(--tnz-space-2);
	font-size: var(--tnz-text-sm);
	font-weight: 600;
}

.tnz-verify-request .tnz-check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.tnz-verify-request .tnz-check input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--tnz-accent-hover);
}

.tnz-verify-request button[type="submit"] {
	min-height: 44px;
	padding: 0 var(--tnz-space-5);
	background: var(--tnz-accent-hover); /* white on #a8532c is 5.3:1; on the base Flame it fails AA */
	border-color: var(--tnz-accent-hover);
	border-radius: var(--tnz-radius);
	font-weight: 600;
	color: #fff;
}

.tnz-verify-request button[type="submit"]:hover {
	background: var(--tnz-eerie);
	border-color: var(--tnz-eerie);
}

.tnz-verify-request__message { color: var(--tnz-accent-hover); }


/* --------------------------------------------------------------------------
 * Contrast (2026-09-21): white text on the base Flame (#c96739) is 3.83:1 and on the base WhatsApp
 * green (#1fa855) 3.0:1, both below the 4.5:1 AA minimum for normal text. Buttons with white text now
 * use the darker Flame step (5.3:1) or --tnz-whatsapp-strong (5.4:1); hover goes to eerie black.
 * The feed cards (.wpd-comment, tanazul-main.css) and the card field labels are untouched: locked.
 * ----------------------------------------------------------------------- */

.tnz-listing-card__phone,
.tnz-calc__submit,
.tnz-poster-edit button[type="submit"],
.tnz-poster-edit__listing-form button[type="submit"],
.tnz-archive .page-numbers.current,
.tnz-hub-archive__icon {
	background: var(--tnz-accent-hover);
}

.tnz-archive .page-numbers.current,
.tnz-poster-edit button[type="submit"],
.tnz-poster-edit__listing-form button[type="submit"] { border-color: var(--tnz-accent-hover); }

.tnz-listing-card__whatsapp { background: var(--tnz-whatsapp-strong); }

.tnz-listing-card__phone:hover,
.tnz-listing-card__whatsapp:hover,
.tnz-calc__submit:hover,
.tnz-poster-edit button[type="submit"]:hover,
.tnz-poster-edit__listing-form button[type="submit"]:hover {
	background: var(--tnz-eerie);
	border-color: var(--tnz-eerie);
}

.tnz-poster-edit__notice { color: var(--tnz-accent-hover); }


/* --------------------------------------------------------------------------
 * Ad placements share the feed's column (2026-09-21)
 *
 * The listing feed (#comments, #wpdcom) is 90vw wide and centred, but the banner, footer and square
 * placements filled the whole window, so on a desktop a 1280px-wide banner sat above a 1152px feed
 * and on a phone the banner touched both screen edges while the cards had a margin.
 * ----------------------------------------------------------------------- */

.tanazulbanners-container,
.tanazulfooters-container,
.tanazulsquares-container {
	box-sizing: border-box;
	width: 90vw;
	max-width: 90vw;
}


/* --------------------------------------------------------------------------
 * Icon set and the quick-icons row (2026-09-22)
 *
 * The icons come from tnz_icon_svg() (mu-plugins/tanazul-site-functions.php): 24px grid, 1.75px round
 * strokes, drawn in currentColor, so the colour is decided here.
 *
 * The row keeps its original arrangement: four buttons at each end, space-between, laid over the same line as
 * the wpDiscuz rating stars (pushed down with transform, so the stars stay in the middle) just above the
 * comment form. The buttons are sized from the viewport so eight of them never reach the stars.
 * ----------------------------------------------------------------------- */

.tnz-icon {
	display: block;
	flex: none;
	width: 22px;
	height: 22px;
}

.tnz-masthead .tnz-modtoggle .tnz-icon { width: 20px; height: 20px; }

/* Directional icons (megaphone, message) mirror in right-to-left pages. */
html[dir="rtl"] .tnz-icon--dir { transform: scaleX(-1); }

.tnz-quick-icons {
	--tnz-qi: clamp(20px, 6.6vw, 32px); /* button size: 26px at 390px wide, 32px on a desktop */
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	width: 90vw; /* the feed's column */
	max-width: none;
	margin: 1rem auto;
	padding-inline: 0;
	transform: translateY(52px); /* lands the row's centre on the rating stars' centre (measured, +-1px) */
}

.tnz-quick-icons__group {
	display: flex;
	align-items: center;
	gap: clamp(2px, 0.8vw, 8px);
}

/* wpautop puts a <br> between the shortcodes. */
.tnz-quick-icons br { display: none; }

.tnz-quick-icons button {
	width: var(--tnz-qi);
	height: var(--tnz-qi);
	background: var(--tnz-surface);
	border: 1px solid var(--tnz-silver);
	border-radius: 50%;
	color: var(--tnz-ink-soft);
	transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.tnz-quick-icons button:hover {
	background: var(--tnz-tint);
	border-color: var(--tnz-accent-hover);
	color: var(--tnz-accent-hover);
}

.tnz-quick-icons svg.tnz-icon {
	width: 62%;
	height: 62%;
	opacity: 1;
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.tnz-quick-icons button { transition: none; }
}

/* On phones the eight buttons and the five rating stars share one line; the stars (26px each, 130px) are
   drawn at 20px there so the outer buttons never touch them. */
@media (max-width: 430px) {
	.tnz-quick-icons { transform: translateY(calc(33px + 3.2vw)); } /* 43px at 320px wide, 47px at 430px: follows the 20px stars */

	#wpd-post-rating .wpd-rating-wrap .wpd-rating-stars svg,
	#wpd-post-rating .wpd-rating-wrap .wpd-rate-starts svg {
		width: 20px;
		height: 20px;
	}
}

/* Share popup (photo of a listing plus four actions). The four buttons stay on ONE row at every width, small and
   square, with SVG icons (js/tanazul-app.js, TNZ_SHARE_ICONS). Loads after tanazul-main.css, which still holds the
   older .btn.screenshot-* rules (width 20%, padding 10px 15px, 30-50px tall), so these are written to beat them. */
.screenshot-container {
	max-height: 92vh;
	overflow-y: auto;
	padding: 14px !important;
}

.tnz-share-actions {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
}

.screenshot-container .tnz-share-actions .btn {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--tnz-radius);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: background-color 0.15s, transform 0.15s;
}

.screenshot-container .tnz-share-actions .btn svg {
	width: 20px;
	height: 20px;
	display: block;
}

.screenshot-container .tnz-share-actions .btn:active { transform: scale(0.94); }
.screenshot-container .tnz-share-actions .screenshot-copy-btn     { background: var(--tnz-ink-soft); height: 40px; }
.screenshot-container .tnz-share-actions .screenshot-download-btn { background: var(--tnz-accent-hover); }
.screenshot-container .tnz-share-actions .screenshot-whatsapp-btn { background: var(--tnz-whatsapp-strong); }
.screenshot-container .tnz-share-actions .screenshot-xtwitter-btn { background: #000; }
.screenshot-container .tnz-share-actions .screenshot-copy-btn.clicked { background: var(--tnz-whatsapp-strong); }

.screenshot-container .tnz-share-actions .btn:focus-visible {
	outline: 2px solid var(--tnz-ink);
	outline-offset: 2px;
}

@media (max-width: 430px) {
	.tnz-share-actions { gap: 8px; }
	.screenshot-container .tnz-share-actions .btn { width: 36px; height: 36px; }
	.screenshot-container .tnz-share-actions .btn svg { width: 18px; height: 18px; }
}

/* --------------------------------------------------------------------------
 * Feed gate: no visible restyle of the cards while the page loads.
 *
 * The listing cards are in the HTML raw and only get their final look when tanazul-app.js and the verified-ads script
 * have run their first pass (classes, poster label, hidden author and date, masked phone, tiers, pinned cards). Until
 * both have, <html> carries .tnz-feed-pending (set in <head> by tnz_feed_gate_head() in the mu-plugin, removed by
 * tnzFeedReady()) and the list is hidden behind two card-shaped placeholders of about the final card height. The list
 * keeps a fixed height while pending so nothing below it jumps. If a script never finishes, the animation at the end of
 * each rule reveals the real list after 4 seconds (visibility and height are switched by the animation, not by JS).
 * ----------------------------------------------------------------------- */
html.tnz-feed-pending #wpd-threads .wpd-thread-list {
	position: relative;
	visibility: hidden;
	height: 540px;
	overflow: hidden;
	animation: tnz-feed-failsafe 0s 4s both;
}

/* Some descendants set their own visibility (the Edit button did), so hide them explicitly. */
html.tnz-feed-pending #wpd-threads .wpd-thread-list * {
	visibility: hidden;
	animation: tnz-feed-failsafe-children 0s 4s both;
}

html.tnz-feed-pending #wpd-threads .wpd-thread-list::before,
html.tnz-feed-pending #wpd-threads .wpd-thread-list::after {
	content: "";
	visibility: visible;
	position: absolute;
	left: 0;
	right: 0;
	height: 250px;
	box-sizing: border-box;
	border: 1px solid var(--tnz-rule);
	border-radius: var(--tnz-radius);
	background:
		linear-gradient(var(--tnz-rule), var(--tnz-rule)) right 16px top 16px / 45% 14px no-repeat,
		linear-gradient(var(--tnz-tint), var(--tnz-tint)) right 16px top 52px / calc(100% - 32px) 12px no-repeat,
		linear-gradient(var(--tnz-tint), var(--tnz-tint)) right 16px top 76px / 70% 12px no-repeat,
		linear-gradient(var(--tnz-tint), var(--tnz-tint)) center top 108px / calc(100% - 32px) 30px no-repeat,
		linear-gradient(var(--tnz-tint), var(--tnz-tint)) center top 146px / calc(100% - 32px) 30px no-repeat,
		linear-gradient(var(--tnz-tint), var(--tnz-tint)) center top 184px / calc(100% - 32px) 30px no-repeat,
		var(--tnz-surface);
	animation: tnz-feed-failsafe-skeleton 0s 4s both;
}
html.tnz-feed-pending #wpd-threads .wpd-thread-list::before { top: 0; }
html.tnz-feed-pending #wpd-threads .wpd-thread-list::after  { top: 274px; }

@keyframes tnz-feed-failsafe {
	to { visibility: visible; height: auto; overflow: visible; }
}
@keyframes tnz-feed-failsafe-children {
	to { visibility: visible; }
}
@keyframes tnz-feed-failsafe-skeleton {
	to { visibility: hidden; }
}

/* The server (section 28 of the mu-plugin) marks the phone and WhatsApp values data-tnz-phone-raw; tanazul-app.js masks the digits
   and removes the marker. Until then the digits are not shown, so a raw number never flashes. The cell keeps its size. */
.wpd-cf-value[data-tnz-phone-raw] { visibility: hidden; }