/**
 * layout.css
 * Page shell + all template-parts/sections/*.php styling. This is the
 * bulk of the "build a page in the editor" visual language: sections
 * get consistent spacing/typography just by using the right class.
 */

.site {
	overflow-x: hidden;
}

.site-main {
	display: block;
}

.section {
	padding-block: var(--space-8);
}

.section__title {
	font-size: 1.0625rem;
	font-weight: 700;
	margin-bottom: var(--space-5);
	text-align: right;
}

/* ---------- Section surfaces ----------
   A small reusable palette so every homepage section reads as its own
   clearly separated "band" (the same way Trustpilot alternates white /
   dark-green / tinted blocks down the page) instead of everything
   sitting on one flat white background. Any section template can opt
   in with one of these classes. */
.section--surface-white {
	background: var(--dg-surface);
}

.section--surface-muted {
	background: var(--dg-background);
}

.section--surface-brand-soft {
	background: linear-gradient(180deg, var(--dg-primary-100) 0%, var(--dg-surface) 100%);
}

.section--surface-dark {
	background: var(--dg-surface);
	color: var(--dg-text-primary);
}

.section--surface-dark .section__title {
	color: var(--dg-text-primary);
}

.section--surface-dark .section__title::after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	margin: var(--space-3) 0 0;
	border-radius: var(--radius-full);
	background: var(--dg-secondary);
}

/* ---------- Hero ---------- */
.hero {
	background: linear-gradient(160deg, var(--dg-header), var(--dg-primary-800));
	color: var(--dg-surface);
}

.hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	flex-wrap: wrap;
}

.hero__content {
	flex: 1 1 420px;
}

.hero__title {
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 800;
	margin-bottom: var(--space-3);
}

.hero__subtitle {
	font-size: 1.125rem;
	color: var(--dg-primary-100);
	margin-bottom: var(--space-5);
	max-width: 640px;
}

.hero__media {
	flex: 1 1 360px;
}

.hero__media img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

/* ---------- Home hero (homepage-only) ----------
   Trustpilot-reference layout: soft off-white background with three
   blurred "confetti" corner blobs (reusing the site's own five-star
   rating colors instead of copying Trustpilot's palette verbatim), a
   big bold headline, an oversized pill search bar with a circular
   brand button riding inside it, a small "learn more" link, a
   bordered pill CTA underneath, and the existing rating-chip row. */
.home-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-7);
	background: var(--dg-background);
	border-bottom: 1px solid var(--dg-border);
	color: var(--dg-text-primary);
	text-align: center;
}

/* Decorative corner blobs — purely visual, clipped by .home-hero's
   overflow:hidden, sit behind the content (z-index:0). Colors reuse
   the site's rating-star palette (red/orange/yellow/green) at full
   solid strength — no fading/transparency — so the confetti motif
   reads as "Didgat" rather than a copy of another brand's colors.
   Each blob slowly morphs between a circle and a rounded square on a
   staggered, offset loop (like Trustpilot's animated hero blobs) —
   slow and subtle so it stays calm rather than distracting. */
.home-hero__blob {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.home-hero__blob--1 {
	width: 240px;
	height: 200px;
	top: -110px;
	left: 50%;
	margin-left: -120px; /* center it: half of width, independent of RTL/LTR */
	background: #A855F7; /* بنفش روشن */
	animation-name: home-hero-blob-morph-1;
	animation-duration: 13s;
}

.home-hero__blob--2 {
	width: 260px;
	height: 220px;
	bottom: -120px;
	inset-inline-start: -70px;
	background: #3B0764; /* بنفش خیلی تیره */
	animation-name: home-hero-blob-morph-2;
	animation-duration: 16s;
	animation-delay: -4s;
}

.home-hero__blob--3 {
	width: 300px;
	height: 260px;
	bottom: -130px;
	inset-inline-end: -90px;
	background: #6D28D9; /* بنفش تیره */
	animation-name: home-hero-blob-morph-3;
	animation-duration: 18s;
	animation-delay: -8s;
}

/* Same shape cycle for every blob: circle → rounded square → circle
   (uniform border-radius on all four corners, not asymmetric, so it
   reads as a clean square/circle morph). Each blob also drifts gently
   on its own path/timing so the three don't move in lockstep. */
@keyframes home-hero-blob-morph-1 {
	0%   { transform: translate(0, 0); }
	50%  { transform: translate(-22px, 4px); }
	100% { transform: translate(0, 0); }
}

@keyframes home-hero-blob-morph-2 {
	0%   { border-radius: 50%; transform: translate(0, 0); }
	50%  { border-radius: 22%; transform: translate(-14px, -12px); }
	100% { border-radius: 50%; transform: translate(0, 0); }
}

@keyframes home-hero-blob-morph-3 {
	0%   { border-radius: 50%; transform: translate(0, 0); }
	50%  { border-radius: 22%; transform: translate(12px, -16px); }
	100% { border-radius: 50%; transform: translate(0, 0); }
}

/* Respect reduced-motion preferences — blobs stay put, no animation. */
@media (prefers-reduced-motion: reduce) {
	.home-hero__blob {
		animation: none;
	}
}

@media (max-width: 640px) {
	.home-hero__blob--1 { width: 170px; height: 140px; top: -80px; margin-left: -85px; }
	.home-hero__blob--2 { width: 170px; height: 150px; }
	.home-hero__blob--3 { width: 190px; height: 170px; }
}

.home-hero__inner {
	position: relative;
	/* Must render above the sticky header (--z-header) and above the
	   decorative blobs, otherwise the header/blobs cover or clip
	   anything that expands out of the search box (results,
	   suggestions, the full search overlay, etc.). */
	z-index: var(--z-hero-search);
	max-width: 680px;
	margin-inline: auto;
}

.home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--dg-primary-100);
	color: var(--dg-primary-800);
	border-radius: var(--radius-full);
	padding: var(--space-2) var(--space-4);
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: var(--space-5);
}

.home-hero__eyebrow svg {
	width: 14px;
	height: 14px;
	color: var(--dg-primary);
	flex-shrink: 0;
}

.home-hero__title {
	font-size: clamp(1.4rem, 3.2vw + 0.5rem, 2.25rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin-top: var(--space-4);
	margin-bottom: var(--space-6);
	color: var(--dg-text-primary);
}

.home-hero__subtitle {
	font-size: clamp(1rem, 1vw + 0.7rem, 1.25rem);
	color: var(--dg-text-secondary);
	margin-bottom: var(--space-7);
}

.home-hero__search {
	position: relative;
	/* Higher than every other element in the hero (title, CTA button,
	   rating row) so the results/suggestions panel it opens can never
	   be painted over by them. */
	z-index: 10;
	margin-bottom: var(--space-5);
}

.home-hero__search input[type="search"],
.home-hero__search input[type="text"] {
	width: 100%;
	background: var(--dg-surface);
	border: 2px solid var(--dg-border);
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-full);
	padding-block: 13px;
	/* Equal side padding (instead of a start-only offset) so the
	   typed/placeholder text sits centered in the pill; the button
	   side still gets enough room that text never runs under the
	   circular submit button. */
	padding-inline-start: 84px;
	padding-inline-end: 84px;
	font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.05rem);
	color: var(--dg-text-secondary);
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Placeholder text (e.g. "جست‌وجوی کسب‌وکار") in gray instead of the
   search plugin's default brand-purple styling. */
.home-hero__search input[type="search"]::placeholder,
.home-hero__search input[type="text"]::placeholder {
	color: var(--dg-text-secondary);
	opacity: 1;
}

.home-hero__search input[type="search"]:focus,
.home-hero__search input[type="text"]:focus {
	border-color: var(--dg-secondary);
	box-shadow: var(--shadow-lg);
}

/* Circular brand-colored submit button riding inside the search
   pill, matching the reference design. Positioned absolutely so it
   works regardless of the search plugin's exact internal markup, as
   long as it renders a <button>/input[type=submit] as a descendant
   of .home-hero__search (which stays position:relative). */
.home-hero__search button,
.home-hero__search input[type="submit"],
.home-hero__search input[type="image"] {
	position: absolute;
	top: 50%;
	inset-inline-end: 5px;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--dg-primary);
	color: var(--dg-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.home-hero__search button:hover,
.home-hero__search input[type="submit"]:hover {
	background: var(--dg-primary-hover);
}

.home-hero__search button svg,
.home-hero__search button img {
	width: 18px;
	height: 18px;
}

/* Force the magnifying-glass icon to a gray outline with a
   hollow (white) lens center — not a solid filled dot — whatever
   element the search plugin renders it as. This overrides the
   plugin's own brand-purple icon color. */
.home-hero__search svg,
.home-hero__search svg * {
	color: var(--dg-text-secondary) !important;
	fill: none !important;
	stroke: var(--dg-text-secondary) !important;
	stroke-width: 2px;
}

.home-hero__search i,
.home-hero__search .icon {
	color: var(--dg-text-secondary) !important;
}

/* Exception: the circular submit button's own icon must stay white
   (it sits on the solid purple circle above, not on the white field)
   — the gray override above is meant only for the plain magnifying-
   glass icon shown inline in the field itself. */
.home-hero__search button svg,
.home-hero__search button svg *,
.home-hero__search input[type="submit"] svg,
.home-hero__search input[type="submit"] svg * {
	color: var(--dg-surface) !important;
	stroke: var(--dg-surface) !important;
}

/* Small "learn more" link under the search box. */
.home-hero__more-link {
	position: relative;
	z-index: 1;
	font-size: 0.875rem;
	color: var(--dg-text-secondary);
	margin-bottom: var(--space-7);
}

.home-hero__more-link a {
	color: var(--dg-primary-hover);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.home-hero__more-link-arrow {
	display: inline-block;
	margin-inline-start: var(--space-1);
}

/* Bordered pill CTA (e.g. "wrote a review lately?"), replacing the
   old solid brand button so the hero matches the reference's calmer,
   outlined secondary action. */
.home-hero__actions {
	position: relative;
	z-index: 1;
	margin-bottom: var(--space-8);
}

.home-hero__secondary {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--dg-header);
	border: 1.5px solid var(--dg-header);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-6);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--dg-surface);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.home-hero__secondary:hover,
.home-hero__secondary:focus-visible,
.home-hero__secondary:active {
	background: var(--dg-surface);
	color: var(--dg-text-primary);
	transform: translateY(-1px);
}

/* On mobile this pill read as oversized next to the rest of the hero —
   step its padding/font down, same pattern already used elsewhere on
   the site (e.g. .latest-posts__more .btn) for an lg button on small
   phones. Tablet/desktop keep the original size. */
@media (max-width: 640px) {
	.home-hero__secondary {
		padding: var(--space-2) var(--space-4);
		font-size: 0.875rem;
	}
}

/* When the search box is open (input focused, or the results panel is
   present as a child of .home-hero__search), hide every other bit of
   hero decoration completely — eyebrow, title, subtitle, more-link,
   CTA pill, rating row — so nothing can visually sit on top of the
   search results. :has() is supported in all current mobile/desktop
   browsers. */
.home-hero:has(.home-hero__search:focus-within) .home-hero__eyebrow,
.home-hero:has(.home-hero__search:focus-within) .home-hero__title,
.home-hero:has(.home-hero__search:focus-within) .home-hero__subtitle,
.home-hero:has(.home-hero__search:focus-within) .home-hero__more-link,
.home-hero:has(.home-hero__search:focus-within) .home-hero__actions,
.home-hero:has(.home-hero__search:focus-within) .home-hero__rating {
	visibility: hidden;
}

/* Rating chip row: flat, static, no glow or animation — five small
   colored squares matching the site's existing category-star motif,
   restyled to read as a calm trust indicator instead of a busy neon
   accent. Right-to-left DOM order: red, orange, yellow, light green,
   dark green. */
.home-hero__rating {
	position: relative;
	z-index: 1;
}

.home-hero__stars {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.home-hero__star {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	width: 26px;
	height: 26px;
	border-radius: var(--radius-sm);
	color: var(--dg-surface);
	font-size: 1.125rem;
	line-height: 1;
	animation: home-hero-star-pulse 2.6s ease-in-out infinite;
}

/* Subtle staggered pulse so the row doesn't feel static, without
   moving or resizing the colored squares themselves. */
.home-hero__star--red         { background: #ef4444; animation-delay: 0s; }
.home-hero__star--orange      { background: #f97316; animation-delay: 0.15s; }
.home-hero__star--yellow      { background: #f2c94c; animation-delay: 0.3s; }
.home-hero__star--green-light { background: #22c55e; animation-delay: 0.45s; }
.home-hero__star--green-dark  { background: #15803d; animation-delay: 0.6s; }

@keyframes home-hero-star-pulse {
	0%, 100% { transform: scale(1) translateY(0); }
	50%      { transform: scale(1.12) translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
	.home-hero__star {
		animation: none;
	}
}

.home-hero__rating-caption {
	font-size: 0.8125rem;
	color: var(--dg-text-secondary);
}

/* ---------- Why-us feature grid ---------- */
.why-us__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-3);
}

.why-us__card {
	background: linear-gradient(160deg, var(--dg-surface) 0%, var(--dg-primary-50) 100%);
	border: 1px solid var(--dg-primary-100);
	border-radius: var(--radius-lg);
	box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
	padding: var(--space-4) var(--space-3);
	text-align: center;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
	position: relative;
	overflow: hidden;
}

.why-us__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(124, 58, 237, 0.16);
	border-color: var(--dg-primary-200);
}

.why-us__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--dg-primary), var(--dg-primary-800));
	color: var(--dg-surface);
	margin-bottom: var(--space-2);
	margin-inline: auto;
	box-shadow: 0 4px 10px rgba(124, 58, 237, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	position: relative;
}

.why-us__icon svg {
	width: 20px;
	height: 20px;
}

/* Same color across all 4 icons — a consistent brand-purple badge
   instead of a different shade per card, which read as accidental/
   inconsistent rather than intentional. */
.why-us__card .why-us__icon { background: linear-gradient(135deg, var(--dg-primary), var(--dg-primary-800)); }

.why-us__title {
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: var(--space-1);
}

.why-us__desc {
	color: var(--dg-text-secondary);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* ---------- Latest posts (homepage) ---------- */
.latest-posts .archive__grid {
	margin-top: var(--space-2);
}

/* Desktop: 4 per row. Tablet: 3 per row. Mobile: single column.
   Overrides the generic auto-fit .archive__grid (grid.css) only for
   this homepage section — the real blog archive keeps its auto-fit
   behavior. */
.latest-posts__grid {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
	.latest-posts__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.latest-posts__grid {
		grid-template-columns: 1fr;
	}
}

/* Extra inset on small phones — the section's own container padding
   was technically non-zero but read as "stuck to the edges" once a
   full-bleed card image sits right against it. A little more room on
   just this section gives the cards clear breathing space. */
@media (max-width: 480px) {
	.latest-posts .container {
		padding-inline: var(--space-5);
	}
}

.latest-posts__more {
	display: flex;
	justify-content: center;
	margin-top: var(--space-6);
}

/* On small phones the lg button reads as oversized next to the
   article cards; step it down to a more proportionate size. */
@media (max-width: 640px) {
	.latest-posts__more .btn {
		padding: var(--space-2) var(--space-5);
		font-size: 0.9rem;
	}
}
.banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	padding-block: var(--space-4);
	border-radius: var(--radius-md);
}

.banner {
	padding-block: var(--space-5);
}

.banner--brand .banner__inner {
	background: var(--dg-primary-100);
	color: var(--dg-primary-950);
	padding-inline: var(--space-5);
}

.banner--dark .banner__inner {
	background: var(--dg-header);
	color: var(--dg-surface);
	padding-inline: var(--space-5);
}

.banner--light .banner__inner {
	background: var(--dg-background);
	color: var(--dg-text-primary);
	padding-inline: var(--space-5);
}

.banner__message {
	margin: 0;
	font-weight: 600;
}

/* ---------- FAQ ---------- */
.faq__list {
	max-width: 760px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.faq__item {
	border: 1px solid var(--dg-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	font-weight: 600;
	text-align: right;
	background: var(--dg-background);
}

.faq__icon {
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--transition-fast);
	flex-shrink: 0;
}

.faq__item[data-open="true"] .faq__icon {
	transform: rotate(225deg);
}

.faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--transition-base);
}

.faq__item[data-open="true"] .faq__answer {
	grid-template-rows: 1fr;
}

.faq__answer > p {
	overflow: hidden;
	padding: 0 var(--space-5);
	color: var(--dg-text-secondary);
}

.faq__item[data-open="true"] .faq__answer > p {
	padding: var(--space-4) var(--space-5);
}

/* ---------- Contact ---------- */
.contact__inner {
	max-width: 620px;
	margin-inline: auto;
}

.contact__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- CTA ---------- */
.cta {
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
	/* Gap on BOTH sides now — previously only margin-bottom existed, so
	   the card touched whatever section sat right above it while having
	   visible breathing room below; margin-top matches it so the card
	   reads as a floating card on every side, not just the bottom. */
	margin-block: var(--space-6);
	/* Inset from the screen edges on mobile too, so the colored card
	   reads as a floating card instead of a full-bleed strip stuck to
	   both sides of the viewport. */
	margin-inline: var(--space-4);
	/* Center the title/subtitle/button block vertically within the
	   colored background instead of it sitting pinned to the top with
	   empty space below (only actually visible once .cta--growth below
	   gives this card extra height for the bar-chart graphic). */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Tablet/desktop: match the card's own width to .trust-visual__inner
   below it (max-width: 620px) instead of stretching edge-to-edge, so
   the two stacked "cards" read as the same size. */
@media (min-width: 783px) {
	.cta {
		max-width: 620px;
		margin-inline: auto;
	}
}

.cta__inner {
	text-align: center;
	position: relative;
	z-index: 2;
	width: 100%;
}

.cta__title {
	font-size: clamp(1.25rem, 4vw + 0.5rem, 1.75rem);
	font-weight: 800;
	margin-bottom: var(--space-2);
}

.cta__subtitle {
	font-size: clamp(0.9rem, 1vw + 0.7rem, 1rem);
	color: var(--dg-text-secondary);
	margin-bottom: var(--space-5);
}

/* Tone: brand (default) — soft lavender card. */
.cta--brand {
	background: var(--dg-primary-100);
}

/* Tone: growth — the Trustpilot "looking to grow your business?" promo
   card, with decorative rising bar-chart silhouettes. */
.cta--growth {
	background: linear-gradient(180deg, var(--dg-primary-50) 0%, var(--dg-primary-200) 100%);
	/* Fixed, generous top padding is the actual mechanism here — the
	   earlier reliance on min-height + flex centering had no real effect
	   once the text content's own height already exceeds min-height
	   (which it does), since the box then just shrinks to content+padding
	   regardless of min-height. Bottom padding = top padding + 70px (the
	   bar-chart graphic's height, .cta--growth::after) so the empty gap
	   above the title matches the empty gap below the button/before the
	   bars, instead of the card visually hugging the top edge. No
	   min-height — the box's height is exactly content + this padding,
	   nothing forced taller than that. */
	padding-top: 72px;
	padding-bottom: 142px;
}

@media (max-width: 480px) {
	.cta--growth {
		padding-top: 56px;
		padding-bottom: 126px;
	}
}

.cta--growth .cta__title,
.cta--growth .cta__subtitle {
	color: var(--dg-primary-950);
}

.cta--growth::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 70px;
	z-index: 1;
	/* Seven evenly-spaced bars, steadily rising, so the chart reads as
	   one continuous row across the card's full width — the previous
	   4 bars (4%/20%/36%/88%) left a big empty gap between 36% and 88%. */
	background:
		linear-gradient(var(--dg-primary-300), var(--dg-primary-300)) 4% 100% / 8% 25% no-repeat,
		linear-gradient(var(--dg-primary-300), var(--dg-primary-300)) 18% 100% / 8% 38% no-repeat,
		linear-gradient(var(--dg-primary-300), var(--dg-primary-300)) 32% 100% / 8% 50% no-repeat,
		linear-gradient(var(--dg-primary-300), var(--dg-primary-300)) 46% 100% / 8% 62% no-repeat,
		linear-gradient(var(--dg-primary-300), var(--dg-primary-300)) 60% 100% / 8% 75% no-repeat,
		linear-gradient(var(--dg-primary-300), var(--dg-primary-300)) 74% 100% / 8% 88% no-repeat,
		linear-gradient(var(--dg-primary-300), var(--dg-primary-300)) 88% 100% / 8% 100% no-repeat;
	opacity: 0.6;
	pointer-events: none;
}

/* This card's own CTA button: soft black instead of the site's usual
   purple primary button (scoped to .cta--growth only — every other
   primary button on the site is untouched). */
.cta--growth .btn--primary {
	background: #262626;
	color: var(--dg-surface);
}

.cta--growth .btn--primary:hover {
	background: #1a1a1a;
}

@media (max-width: 480px) {
	.cta--growth .btn--lg {
		padding: var(--space-2) var(--space-4);
		font-size: 0.9375rem;
	}
}

/* Tone: dark — bold brand gradient with white text. */
.cta--dark {
	background: linear-gradient(135deg, var(--dg-primary-800), var(--dg-header));
}

.cta--dark .cta__title {
	color: var(--dg-surface);
}

.cta--dark .cta__subtitle {
	color: var(--dg-primary-100);
}

/* ---------- Trust visual (Trustpilot-style overlapping-circle badge card) ----------
   Second of the two requested decorative visual elements (the first is
   .cta--growth above). Styled to match .cta--growth's soft lavender
   card look instead of a separate dark theme, for visual consistency
   between the two stacked promo cards. Pure CSS — no external images.

   Mobile (default, below): stays the original stacked "square" card —
   badge above, title/subtitle centered below, button centered at the
   bottom. Tablet/desktop (min-width: 783px, further down this block)
   reshapes the same markup into a single narrow horizontal bar, the
   same width as the rest of the page's elements, Trustpilot-strip
   style — same colors, just a different silhouette. */
.trust-visual__inner {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
	background: linear-gradient(180deg, var(--dg-primary-50) 0%, var(--dg-primary-200) 100%);
	border-radius: var(--radius-lg);
	padding: var(--space-7) var(--space-6);
	position: relative;
	overflow: hidden;
}

.trust-visual__content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.trust-visual__badge {
	position: relative;
	z-index: 1;
	width: 116px;
	height: 92px;
	margin: 0 auto var(--space-5);
}

.trust-visual__ring {
	position: absolute;
	inset-inline-end: 0;
	top: 0;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 6px solid var(--dg-primary-300);
	box-sizing: border-box;
}

.trust-visual__circle {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	border: 3px solid var(--dg-surface);
	box-shadow: 0 6px 18px rgba(69, 34, 122, 0.25);
}

.trust-visual__circle svg {
	width: 30px;
	height: 30px;
}

.trust-visual__circle--back {
	inset-inline-start: 0;
	bottom: 0;
	background: linear-gradient(135deg, var(--dg-secondary), var(--dg-primary-800));
	color: var(--dg-surface);
}

.trust-visual__circle--front {
	inset-inline-end: 6px;
	top: 6px;
	background: var(--dg-surface);
	color: var(--dg-primary-hover);
}

.trust-visual__title {
	position: relative;
	z-index: 1;
	color: var(--dg-primary-950);
	font-size: clamp(1.1rem, 4vw + 0.4rem, 1.375rem);
	font-weight: 800;
	margin-bottom: var(--space-2);
}

.trust-visual__subtitle {
	position: relative;
	z-index: 1;
	color: var(--dg-primary-950);
	opacity: 0.75;
	font-size: clamp(0.9rem, 1vw + 0.7rem, 1rem);
	margin-bottom: var(--space-5);
	max-width: 440px;
	margin-inline: auto;
	margin-block-end: var(--space-5);
}

.trust-visual__actions {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
}

.trust-visual .btn--outline {
	background: transparent;
	color: var(--dg-primary-950);
	border-color: var(--dg-primary-950);
}

.trust-visual .btn--outline:hover {
	background: var(--dg-primary-950);
	color: var(--dg-surface);
}

@media (max-width: 480px) {
	.trust-visual__inner {
		padding: var(--space-5) var(--space-4);
		/* Pull in from the screen edges beyond the normal container
		   gutter, and add extra vertical padding so the card reads as a
		   squarer, more compact box instead of a wide short banner. */
		margin-inline: var(--space-3);
	}

	.trust-visual__badge {
		width: 92px;
		height: 74px;
		margin-bottom: var(--space-3);
	}

	.trust-visual__ring {
		width: 64px;
		height: 64px;
	}

	.trust-visual__circle {
		width: 54px;
		height: 54px;
	}

	.trust-visual__circle svg {
		width: 24px;
		height: 24px;
	}

	.trust-visual__title {
		font-size: 1rem;
		margin-bottom: var(--space-1);
	}

	.trust-visual__subtitle {
		font-size: 0.8125rem;
		margin-bottom: var(--space-3);
		margin-block-end: var(--space-3);
	}
}

/* Tablet/desktop: same breakpoint as .cta above (min-width: 783px).
   Turn the stacked square card into one narrow horizontal bar, full
   .container width (matching the rest of the page's elements) instead
   of the 620px card width used on mobile. Badge + title/subtitle group
   sits on the right (RTL start), the button sits on the left (RTL
   end) — plain flex row, no reordering needed since RTL already puts
   the first markup child on the right. Colors/gradient are untouched;
   only the shape changes. */
@media (min-width: 783px) {
	.trust-visual__inner {
		max-width: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-5);
		text-align: right;
		padding: var(--space-4) var(--space-6);
		border-radius: var(--radius-lg);
	}

	.trust-visual__content {
		flex-direction: row;
		align-items: center;
		gap: var(--space-4);
		text-align: right;
	}

	.trust-visual__badge {
		flex-shrink: 0;
		width: 76px;
		height: 60px;
		margin: 0;
	}

	.trust-visual__ring {
		width: 52px;
		height: 52px;
		border-width: 4px;
	}

	.trust-visual__circle {
		width: 44px;
		height: 44px;
		border-width: 2px;
	}

	.trust-visual__circle svg {
		width: 20px;
		height: 20px;
	}

	.trust-visual__circle--front {
		inset-inline-end: 4px;
		top: 4px;
	}

	.trust-visual__text {
		text-align: right;
	}

	.trust-visual__title {
		margin-bottom: var(--space-1);
		font-size: clamp(1rem, 0.6vw + 0.85rem, 1.125rem);
	}

	.trust-visual__subtitle {
		margin: 0;
		max-width: none;
	}

	.trust-visual__actions {
		flex-shrink: 0;
	}
}

/* ---------- Categories (Trustpilot-style chip row) ---------- */
.categories__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
}

.categories__chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	width: 132px;
	padding: var(--space-4) var(--space-3);
	border-radius: var(--radius-lg);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	backdrop-filter: blur(var(--glass-blur));
	color: var(--dg-text-primary);
	text-align: center;
	font-size: 0.875rem;
	font-weight: 600;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.categories__chip:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	background: var(--dg-primary-100);
}

.categories__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background: linear-gradient(135deg, var(--dg-secondary), var(--dg-primary-hover));
	font-size: 1.375rem;
}

.categories__chip:nth-child(4n+2) .categories__icon { background: linear-gradient(135deg, #16a34a, #15803d); }
.categories__chip:nth-child(4n+3) .categories__icon { background: linear-gradient(135deg, #eab308, #ca8a04); }
.categories__chip:nth-child(4n+4) .categories__icon { background: linear-gradient(135deg, #dc2626, #b91c1c); }

@media (max-width: 640px) {
	.categories__row {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: var(--space-2);
		scroll-snap-type: x proximity;
	}

	.categories__chip {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* ---------- Pricing ---------- */
.pricing__plan {
	position: relative;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--glass-shadow);
	backdrop-filter: blur(var(--glass-blur));
	text-align: center;
}

.pricing__plan--featured {
	border-color: var(--dg-secondary);
	box-shadow: var(--shadow-lg);
}

.pricing__plan-name {
	font-size: 1.125rem;
	font-weight: 700;
	margin-block: var(--space-3);
}

.pricing__amount {
	font-size: 2rem;
	font-weight: 800;
}

.pricing__period {
	color: var(--dg-text-secondary);
	font-size: 0.875rem;
}

.pricing__features {
	margin-block: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	color: var(--dg-text-secondary);
}

/* ---------- Gallery / lightbox ---------- */
.gallery__item {
	display: block;
	width: 100%;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.gallery__item:hover img {
	transform: scale(1.05);
}

.gallery__lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-lightbox);
	background: rgba(26, 10, 46, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5);
}

.gallery__lightbox[hidden] {
	display: none;
}

.gallery__lightbox-image {
	max-width: 90vw;
	max-height: 90vh;
	border-radius: var(--radius-md);
}

.gallery__lightbox-close {
	position: absolute;
	top: var(--space-5);
	left: var(--space-5);
	color: var(--dg-surface);
	font-size: 2rem;
	line-height: 1;
}

/* ---------- No-results ---------- */
.no-results {
	text-align: center;
	padding-block: var(--space-8);
}

.no-results__body .search-form {
	margin-top: var(--space-5);
}

.no-results__link {
	margin-top: var(--space-4);
	font-size: 0.9375rem;
}

/* ---------- Related posts ---------- */
.related-posts {
	margin-top: var(--space-8);
	padding-top: var(--space-7);
	border-top: 1px solid var(--dg-border);
}

/* ---------- Author box ---------- */
.author-box {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	margin-top: var(--space-6);
	padding: var(--space-5);
	background: var(--dg-surface);
	border: 1px solid var(--dg-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.author-box__avatar img {
	border-radius: var(--radius-full);
}

.author-box__label {
	font-size: 0.75rem;
	color: var(--dg-text-secondary);
}

.author-box__name {
	font-size: 1.125rem;
	margin-block: var(--space-1);
}

.author-box__bio {
	color: var(--dg-text-secondary);
}

/* ---------- Breadcrumb ---------- */
.didgat-breadcrumb {
	padding-block: var(--space-4);
}

.didgat-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	font-size: 0.875rem;
	color: var(--dg-text-secondary);
}

.didgat-breadcrumb li:not(:last-child)::after {
	content: '\2039';
	margin-inline-start: var(--space-2);
}

.didgat-breadcrumb a:hover {
	color: var(--dg-primary);
}

/* ---------- Page header (archives, 404) ---------- */
.page-header {
	margin-bottom: var(--space-6);
}

.category-business-list {
	margin-top: var(--space-2);
}

/* ---------- Category page: page spacing ----------
   Scoped to this template's own wrapper class, not the shared
   .container, so nothing else on the site shifts. */
.category-archive__wrap {
	padding-block: 15px;
}

/* ---------- Category page header ----------
   Scoped to .category-page-header only (category.php), so the
   generic .page-title used elsewhere (business directory, 404, blog
   archive) is unaffected. Minimal redesign: no card/box, no gradient
   fill, no accent bar — just a small icon badge + the category name,
   sitting on a thin bottom rule, the way Trustpilot/Digikala keep
   their listing-page headers quiet so the results underneath do the
   talking. (The "دسته: " prefix WordPress normally prepends is
   stripped for is_category() by didgat_strip_category_archive_title_prefix()
   in inc/template-tags.php, so this only ever shows the plain name.) */
.category-page-header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-5);
	border-bottom: 1px solid var(--dg-border);
	text-align: start;
}

.category-page-header__icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, var(--dg-primary-600), var(--dg-primary-900));
	color: #fff;
}

.category-page-header__icon svg {
	width: 20px;
	height: 20px;
}

.category-page-header__text {
	min-width: 0;
}

.category-page-header .page-title {
	font-size: clamp(1.0625rem, 1.6vw + 0.5rem, 1.375rem);
	font-weight: 800;
	line-height: 1.35;
	color: var(--dg-text-primary);
	margin: 0;
}

.category-page-header .archive-description {
	margin-top: 3px;
	font-size: 0.8125rem;
	color: var(--dg-text-secondary);
}

@media (max-width: 640px) {
	.category-page-header {
		gap: var(--space-2);
		padding-bottom: var(--space-3);
		margin-bottom: var(--space-4);
	}

	.category-page-header__icon {
		width: 34px;
		height: 34px;
	}

	.category-page-header__icon svg {
		width: 17px;
		height: 17px;
	}
}

.category-filter-bar {
	margin-bottom: var(--space-4);
}

.page-title {
	font-size: 1.75rem;
	font-weight: 700;
}

.archive-description {
	color: var(--dg-text-secondary);
	margin-top: var(--space-2);
}

/* ---------- Articles archive header (index.php) ----------
   Minimal, centered masthead: title + one-line subtitle and a thin
   brand-colored underline for a touch of polish, without the
   heavier gradient-card treatment used on category pages. */
.articles-page-header {
	text-align: center;
	margin-bottom: var(--space-6);
}

.articles-page-header .page-title {
	position: relative;
	display: inline-block;
	font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2rem);
	padding-bottom: var(--space-4);
}

.articles-page-header .page-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 3px;
	border-radius: var(--radius-full);
	background: var(--dg-primary);
}

/* Breathing room between the articles listing and the footer. */
.articles-archive {
	padding-bottom: 20px;
}

/* Responsive per-viewport card count: the main query always fetches
   a full 12 posts (see inc/query.php), and this just hides the extra
   cards on smaller viewports — 6 visible on mobile, 8 on tablet, all
   12 on desktop — using the same breakpoints as the rest of the grid
   system (assets/css/layout.css .latest-posts__grid, grid.css). */
@media (max-width: 640px) {
	.articles-archive__grid > :nth-child(n + 7) {
		display: none;
	}
}

@media (min-width: 641px) and (max-width: 1024px) {
	.articles-archive__grid > :nth-child(n + 9) {
		display: none;
	}
}

/* ---------- Pagination ----------
   Minimal pill-style control: plain numbers with no boxes/borders in
   their resting state (just muted text), a solid brand-colored pill
   for the current page, a soft hover fill on the rest, and prev/next
   set apart slightly with arrows so the whole thing reads calm and
   uncluttered rather than like a grid of buttons. */
.didgat-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-8);
}

.didgat-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--space-3);
	border-radius: var(--radius-full);
	color: var(--dg-text-secondary);
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

a.didgat-pagination .page-numbers,
.didgat-pagination a.page-numbers {
	cursor: pointer;
}

.didgat-pagination a.page-numbers:hover {
	background: var(--dg-background);
	color: var(--dg-text-primary);
}

.didgat-pagination .page-numbers.dots {
	background: none;
	color: var(--dg-text-secondary);
	min-width: auto;
	padding-inline: var(--space-1);
}

.didgat-pagination .page-numbers.current {
	background: var(--dg-primary);
	color: var(--dg-surface);
	box-shadow: var(--shadow-sm);
}

.didgat-pagination .page-numbers.prev,
.didgat-pagination .page-numbers.next {
	padding-inline: var(--space-4);
	background: var(--dg-surface);
	border: 1px solid var(--dg-border);
	color: var(--dg-text-primary);
}

.didgat-pagination .page-numbers.prev:hover,
.didgat-pagination .page-numbers.next:hover {
	background: var(--dg-background);
	border-color: var(--dg-border);
}