/**
 * business.css
 * template-parts/business/*.php and single-dgc_business.php /
 * archive-dgc_business.php.
 *
 * Star rating colors intentionally match the existing red-through-
 * dark-green per-rating scale already standardized across the Didgat
 * plugins (didgat-comments-pro), so the theme-level star renderer
 * (didgat_render_star_scale()) looks consistent with plugin output.
 */

.business-header {
	background: var(--dg-background);
	border-bottom: 1px solid var(--dg-border);
	padding-block: var(--space-6);
}

.business-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	flex-wrap: wrap;
}

.business-header__logo img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.business-header__name {
	font-size: 1.75rem;
	font-weight: 800;
	margin-bottom: var(--space-2);
}

.business-header__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.business-page__layout {
	margin-top: var(--space-6);
}

.business-page__main > * + * {
	margin-top: var(--space-7);
}

/* ---------- Star rating ----------
   Two-layer technique: a full row of empty stars, with a second
   identical row on top of it clipped to (rating / max * 100%) width.
   This is the standard, reliable way to render partial star fills
   with plain CSS (no JS, no per-star markup). */
.didgat-stars {
	--star-size: 20px;
	position: relative;
	display: inline-flex;
	gap: 2px;
	line-height: 0;
}

.didgat-stars::after {
	content: '';
	position: absolute;
	inset: 0;
	display: flex;
	gap: 2px;
	overflow: hidden;
	width: calc(var(--rating, 0) / var(--max, 5) * 100%);
	background: var(--star-fill, var(--dg-primary));
	-webkit-mask-image: var(--stars-mask);
	mask-image: var(--stars-mask);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: var(--star-size) var(--star-size);
	mask-size: var(--star-size) var(--star-size);
}

.didgat-star {
	width: var(--star-size);
	height: var(--star-size);
	background: var(--dg-border);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.didgat-stars {
	--stars-mask: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Per-rating color, matching the red-through-dark-green scale already
   used across the Didgat comment/rating plugins. */
.didgat-stars[style*="--rating:5"],
.didgat-stars[style*="--rating:4"] { --star-fill: var(--color-success); }
.didgat-stars[style*="--rating:3"] { --star-fill: var(--color-warning); }
.didgat-stars[style*="--rating:2"],
.didgat-stars[style*="--rating:1"],
.didgat-stars[style*="--rating:0"] { --star-fill: var(--color-danger); }

.business-rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.business-rating__value {
	font-weight: 700;
}

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

/* ---------- Stats ---------- */
.business-stats {
	display: flex;
	gap: var(--space-6);
	flex-wrap: wrap;
}

.business-stats__item {
	display: flex;
	flex-direction: column;
}

.business-stats__value {
	font-size: 1.25rem;
	font-weight: 700;
}

.business-stats__label {
	font-size: 0.8125rem;
	color: var(--dg-text-secondary);
}

/* ---------- Links ---------- */
.business-links {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.business-links__item {
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--dg-border);
	border-radius: var(--radius-full);
	font-size: 0.875rem;
}

.business-links__item:hover {
	border-color: var(--dg-secondary);
	color: var(--dg-primary);
}

/* ---------- Summary / about ---------- */
.business-summary__specialty {
	font-weight: 600;
	color: var(--dg-primary-hover);
}

.business-summary__address {
	color: var(--dg-text-secondary);
	margin-top: var(--space-1);
}

/* ---------- Archive card rating row ---------- */
.business-card__rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}

/* =========================================================================
   Business profile page (template-parts/business/profile-card.php)
   -------------------------------------------------------------------------
   Ground-up rebuild driven by the plugin/theme's own data functions
   (didgat_get_rating_summary, didgat_get_business_topic_scores,
   dgc_biz_get_all_blocks, dgc_biz_get_hours, dg_sub_is_active, ...),
   not by the shortcodes' own markup — see profile-card.php header.
   Palette: white/ink base, purple used only as a deliberate accent
   (stars/bars keep their real red→green rating-tone colors on purpose).
   ========================================================================= */


.biz-page {
	background: var(--dg-surface);
	padding-block: var(--space-6) var(--space-7);
}

.biz-card {
	background: var(--dg-surface);
	border: 1px solid var(--dg-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.biz-card__title {
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--dg-text-primary);
	margin-bottom: var(--space-3);
}

.biz-overview,
.biz-about {
	scroll-margin-top: 64px;
}

/* ---------- Media / identity card ---------- */
.biz-media {
	padding: var(--space-5) var(--space-6);
	margin-bottom: var(--space-5);
	background: linear-gradient(135deg, var(--dg-primary-50), var(--dg-surface) 45%);
}

.biz-media__top {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.biz-media__logo img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--radius-md);
	border: 1px solid var(--dg-border);
}

.biz-media__heading {
	flex: 1;
	min-width: 0;
}

.biz-media__name {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--dg-text-primary);
	margin-bottom: var(--space-2);
}

.biz-media__heading .biz-rating-line {
	margin-bottom: var(--space-2);
}

.biz-media__breadcrumb {
	margin-bottom: var(--space-3);
}

.biz-media__breadcrumb:empty {
	display: none;
	margin: 0;
}

.biz-media__breadcrumb .dgc-cat-trail {
	background: var(--dg-background) !important;
	border-color: var(--dg-border) !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.biz-media__breadcrumb .dgc-cat-trail-pin {
	display: none !important;
}

.biz-media__breadcrumb .dgc-cat-trail-items a.dgc-cat-trail-leaf {
	background: var(--dg-primary) !important;
	box-shadow: none !important;
}

.biz-visit {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--dg-text-primary);
	border-radius: var(--radius-full);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--dg-text-primary);
	white-space: nowrap;
}

.biz-visit:hover {
	background: var(--dg-text-primary);
	color: var(--dg-surface);
}

/* Gallery strip inside the media card */
.biz-media__gallery {
	margin-top: var(--space-4);
}

.biz-media__gallery-track {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	padding-bottom: 2px;
}

.biz-media__gallery-item {
	flex: 0 0 72px !important;
	width: 72px !important;
	height: 72px !important;
	aspect-ratio: auto !important;
	padding: 0;
	border: 1px solid var(--dg-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: none;
	cursor: pointer;
}

.biz-media__gallery-item img {
	width: 72px !important;
	height: 72px !important;
	object-fit: cover;
	display: block;
}

/* The base .gallery__lightbox rule (layout.css) uses the `inset` shorthand,
   which the user's browser doesn't seem to support — without top/right/
   bottom/left it stays in normal document flow instead of covering the
   viewport, so the opened image renders low on the page instead of over
   everything. Set the longhand properties explicitly and push the
   z-index well above the sticky tab bar / any floating widgets. */
.biz-media__gallery .gallery__lightbox {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 99999 !important;
}

.biz-media__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.biz-claimed {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--radius-full);
	padding: 5px 12px;
	font-size: 0.8125rem;
	font-weight: 600;
}

.biz-claimed .dg-verified-seal {
	flex-shrink: 0;
}

.biz-claimed.is-unclaimed {
	background: var(--dg-background);
	border: 1px solid var(--dg-border);
	color: var(--dg-text-secondary);
}

.biz-claimed.is-claimed {
	background: linear-gradient(135deg, #eff6ff, #dbeafe);
	border: 1px solid #bfdbfe;
	color: #1d4ed8;
}

.biz-claimed__dot {
	color: currentColor;
	opacity: 0.5;
}

.biz-rating-line {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
}

.biz-rating-line .dgstar-row {
	flex-shrink: 0;
}

.biz-rating-line__score {
	font-size: 0.9375rem;
	font-weight: 800;
	flex-shrink: 0;
}

.biz-rating-line__sep {
	color: var(--dg-text-secondary);
	flex-shrink: 0;
}

.biz-rating-line__count {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--dg-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.biz-media__cta {
	margin-top: var(--space-4);
}

.biz-media__cta * {
	box-shadow: none !important;
}

.biz-media__cta a,
.biz-media__cta button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--dg-surface) !important;
	color: #2b2b2b !important;
	border: 1px solid #2b2b2b !important;
	border-radius: var(--radius-md) !important;
	padding: var(--space-3) var(--space-6) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.biz-media__cta a *,
.biz-media__cta button * {
	color: #2b2b2b !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}

.biz-media__cta a:hover,
.biz-media__cta button:hover,
.biz-media__cta a:active,
.biz-media__cta button:active,
.biz-media__cta a:focus-visible,
.biz-media__cta button:focus-visible {
	background: #2b2b2b !important;
	color: var(--dg-surface) !important;
	border-color: #2b2b2b !important;
	box-shadow: none !important;
}

.biz-media__cta a:hover *,
.biz-media__cta button:hover *,
.biz-media__cta a:active *,
.biz-media__cta button:active *,
.biz-media__cta a:focus-visible *,
.biz-media__cta button:focus-visible * {
	color: var(--dg-surface) !important;
}

/* .biz-score reuses .dtb-wrap/.dtb-row/.dtb-summary/.dtb-bars (the exact
   original [didgat_trustbox] look, printed globally on this page by
   site-custom-functions.php's wp_head action). It now lives inside
   .biz-media, right under the write-review button. */
.biz-score {
	margin: var(--space-5) 0 0 !important;
}

.biz-side-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

/* ---------- Accordion (AI summary + how-it-works: same component) ---------- */
.biz-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5);
	background: none;
	border: none;
	text-align: right;
	font-weight: 700;
	color: var(--dg-text-primary);
}

.biz-accordion__trigger-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--dg-primary);
	flex: 1;
}

.biz-accordion__trigger-label svg {
	flex-shrink: 0;
}

.biz-accordion__chevron {
	transition: transform var(--transition-fast);
	flex-shrink: 0;
	color: var(--dg-text-secondary);
}

[data-open="true"] .biz-accordion__chevron {
	transform: rotate(180deg);
}

/* Plain display toggle (not height/grid animated) — the animated 0fr-grid
   trick left a sliver of content visible while collapsed on the user's
   browser, so reliability wins over the transition here. */
.biz-accordion__panel {
	display: none;
}

[data-open="true"] > .biz-accordion__panel {
	display: block;
}

.biz-accordion__panel-inner {
	padding: 0 var(--space-5) var(--space-5);
	font-size: 0.875rem;
	line-height: 1.9;
	color: var(--dg-text-secondary);
}

.biz-accordion--howto {
	background: linear-gradient(135deg, var(--dg-primary-100), var(--dg-surface) 70%);
}

/* AI summary: no wrapper card/border/background at all — the shortcode
   ([dgri_summary]) already renders its own self-contained box, so this
   is just a spacing wrapper, not a visible frame. */
.biz-ai-summary {
	margin-top: var(--space-5);
	padding-inline: 12px;
}

/* ---------- Topic scores (square tile grid) ---------- */
/* Lightened per request — was a deliberately near-black card ("مثل شب");
   now a soft, minimal purple-tinted surface consistent with the rest of
   the page's light card family. This change applies everywhere,
   including mobile (unlike the tablet/desktop-only rules above). */
.biz-topics {
	padding: var(--space-5);
	background: linear-gradient(180deg, var(--dg-primary-50), var(--dg-surface) 100%);
	border: 1px solid var(--dg-primary-100);
}

.biz-topics__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--dg-text-primary);
	margin-bottom: var(--space-4);
}

.biz-topics__badge {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--dg-primary-100);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.biz-topics__badge svg {
	stroke: var(--dg-primary-hover) !important;
}

.biz-topics__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: dense;
	gap: var(--space-3);
}

.biz-topics__tile {
	border: 1px solid var(--dg-primary-100);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: linear-gradient(150deg, var(--dg-primary-100), var(--dg-surface) 70%);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.biz-topics__tile:hover {
	border-color: var(--dg-primary-300);
	box-shadow: var(--shadow-sm);
}

.biz-topics__icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--dg-primary-100);
	color: var(--dg-primary-hover);
	margin-bottom: var(--space-2);
}

.biz-topics__icon svg {
	width: 14px;
	height: 14px;
}

.biz-topics__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--dg-text-primary);
}

.biz-topics__value {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--dg-text-primary);
	margin: 2px 0 var(--space-2);
}

.biz-topics__track {
	display: block;
	width: 100%;
	height: 6px;
	border-radius: var(--radius-full);
	background: var(--dg-background);
	overflow: hidden;
}

.biz-topics__fill {
	display: block;
	height: 100%;
	border-radius: var(--radius-full);
	background: var(--dg-secondary);
}

.biz-topics__tile[data-tone="danger"] .biz-topics__fill { background: var(--color-danger); }
.biz-topics__tile[data-tone="warning"] .biz-topics__fill { background: var(--color-warning); }
.biz-topics__tile[data-tone="success"] .biz-topics__fill { background: var(--color-success); }
.biz-topics__tile[data-tone="muted"] .biz-topics__fill { background: var(--dg-border); }

.biz-topics__tile--full {
	grid-column: 1 / -1;
	aspect-ratio: auto;
	padding-block: var(--space-4);
}

.biz-topics__tile--full .biz-topics__track {
	max-width: 220px;
}

/* Recommend breakdown ("چند نفر پیشنهاد می‌کنند" — same data wpdiscuz_ratings
   computes, rebuilt with our own minimal styling). */
.biz-rec {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--dg-primary-100);
}

.biz-rec__bar {
	display: flex;
	height: 8px;
	border-radius: var(--radius-full);
	overflow: hidden;
	background: var(--dg-background);
	margin-bottom: var(--space-3);
}

.biz-rec__seg--yes { background: var(--color-success); }
.biz-rec__seg--neutral { background: var(--color-warning); }
.biz-rec__seg--no { background: var(--color-danger); }

.biz-rec__legend {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-2);
	justify-content: center;
	font-size: 0.625rem;
	color: var(--dg-text-secondary);
}

.biz-rec__item {
	flex-shrink: 0;
	white-space: nowrap;
}

.biz-rec__item b {
	color: var(--dg-text-primary);
}

.biz-rec__item--yes::before,
.biz-rec__item--neutral::before,
.biz-rec__item--no::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-inline-end: 4px;
}

.biz-rec__item--yes::before { background: var(--color-success); }
.biz-rec__item--neutral::before { background: var(--color-warning); }
.biz-rec__item--no::before { background: var(--color-danger); }

/* ---------- About section / info cards ---------- */
.biz-section {
	margin-top: var(--space-7);
}

.biz-section__title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--dg-text-primary);
	margin-bottom: var(--space-4);
}

.biz-grid--info {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.biz-info {
	padding: var(--space-4) var(--space-5);
}

.biz-info__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	font-weight: 800;
	color: var(--dg-text-primary);
	margin-bottom: var(--space-2);
}

.biz-info__body {
	font-size: 0.8125rem;
	color: var(--dg-text-secondary);
	line-height: 1.9;
}

.biz-info__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.biz-info__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
}

.biz-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, var(--dg-primary-50), var(--dg-background));
	border: 1px solid var(--dg-primary-100);
	border-radius: var(--radius-full);
	padding: 6px 14px 6px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--dg-text-primary);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.biz-pill::before {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--dg-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.biz-pill:hover {
	border-color: var(--dg-primary-300);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

/* Split-out special-link-box blocks (installment/stock/tanakura/etc.):
   neutralize the plugin's own inline purple rows down to ink/gray. */
.biz-info__body .didgat-installment-row,
.biz-info__body .didgat-stock-row,
.biz-info__body .didgat-tanakura-row,
.biz-info__body .didgat-wholesale-row,
.biz-info__body .didgat-retail-row,
.biz-info__body .didgat-instore-row,
.biz-info__body .didgat-online-row,
.biz-info__badges .didgat-meta-row,
.biz-info__badges .didgat-installment-row,
.biz-info__badges .didgat-stock-row,
.biz-info__badges .didgat-tanakura-row,
.biz-info__badges .didgat-wholesale-row,
.biz-info__badges .didgat-retail-row,
.biz-info__badges .didgat-instore-row,
.biz-info__badges .didgat-online-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: var(--dg-text-primary);
}

/* Website/Instagram/Telegram/phone rows: the plugin prints these with a
   purple border + glow (see .didgat-special-link-row in
   site-custom-functions.php) — strip that down to a clean, minimal card
   with a modern hover lift instead. The colorful icon badges (blue globe,
   Instagram gradient, purple phone circle) are left untouched, they
   already look good. */
.biz-info__body .didgat-link-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

.biz-info__body .didgat-link-grid .didgat-special-link-row,
.biz-info__body .didgat-link-grid .didgat-phone-row {
	flex: 0 0 auto !important;
	width: auto !important;
}

.biz-info__body .didgat-special-link-row,
.biz-info__body .didgat-phone-row {
	background: var(--dg-surface) !important;
	border: 1px solid var(--dg-border) !important;
	box-shadow: none !important;
	border-radius: var(--radius-md) !important;
	padding: var(--space-3) var(--space-4) !important;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}

.biz-info__body .didgat-special-link-row:hover,
.biz-info__body .didgat-phone-row:hover {
	border-color: var(--dg-primary-300) !important;
	box-shadow: var(--shadow-sm) !important;
	transform: translateY(-2px) !important;
	background: var(--dg-primary-50) !important;
}

.biz-info__body .didgat-special-link-row:active,
.biz-info__body .didgat-phone-row:active {
	transform: translateY(0) !important;
}

/* Address text: was using the same muted/light .biz-info__body styling
   as the cities/links blocks, making it hard to read — give it its own
   bolder, higher-contrast treatment plus room before the city chips. */
.biz-info__address {
	color: var(--dg-text-primary);
	font-weight: 700;
	margin-bottom: var(--space-3) !important;
}

/* Cities/location chips inside the merged address+contact card: the
   plugin's own .didgat-cities-line is centered by default — align it to
   the RTL start instead, and add breathing room before the links below. */
.biz-info__cities .didgat-cities-line {
	justify-content: flex-start !important;
	margin-bottom: var(--space-3);
}

/* Hours */
.biz-hours__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.biz-hours__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--radius-full);
	padding: 4px 12px;
	font-size: 0.75rem;
	font-weight: 700;
}

.biz-hours__status.is-open {
	background: var(--color-success-bg);
	color: var(--color-success);
}

.biz-hours__status.is-closed {
	background: var(--color-danger-bg);
	color: var(--color-danger);
}

.biz-hours__date {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--dg-text-secondary);
}

.biz-hours__list {
	display: flex;
	flex-direction: column;
}

.biz-hours__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	margin: 0 -10px;
	border-radius: var(--radius-md);
	font-size: 0.8125rem;
	border-bottom: 1px solid var(--dg-background);
}

.biz-hours__row:last-child {
	border-bottom: none;
}

.biz-hours__row.is-today {
	font-weight: 800;
	color: var(--dg-primary-hover);
	background: var(--dg-primary-50);
}

.biz-hours__val {
	color: var(--dg-text-secondary);
}

.biz-hours__row.is-today .biz-hours__val {
	color: var(--dg-primary-hover);
}

.biz-hours__val.is-closed-val {
	color: var(--color-danger);
	font-weight: 700;
}

/* Post content excerpt card */
.biz-content {
	padding: var(--space-5);
	margin: var(--space-7) 0 var(--space-5);
}

.biz-content__label {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--dg-text-secondary);
	margin-bottom: var(--space-2);
}

.biz-content__excerpt {
	font-size: 0.9375rem;
	line-height: 1.9;
	color: var(--dg-text-primary);
	margin-bottom: var(--space-3);
}

.biz-content__more {
	display: block;
	margin: 0 auto;
	background: var(--dg-surface);
	color: var(--dg-text-primary);
	border: 1px solid var(--dg-text-primary);
	border-radius: var(--radius-full);
	padding: var(--space-2) var(--space-6);
	font-weight: 700;
	font-size: 0.8125rem;
}

.biz-content__more:hover {
	background: var(--dg-text-primary);
	color: var(--dg-surface);
}

/* Slide-up (mobile) / slide-in-from-right (desktop) content panel */
.biz-panel-overlay {
	position: fixed;
	inset: 0;
	background: rgba(26, 10, 46, 0.45);
	z-index: var(--z-lightbox);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-base);
}

.biz-panel-overlay[hidden] {
	display: flex;
}

.biz-panel-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.biz-panel {
	background: var(--dg-surface);
	width: 100%;
	max-height: 85vh;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform var(--transition-base);
}

.biz-panel-overlay.is-open .biz-panel {
	transform: translateY(0);
}

.biz-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--dg-border);
}

.biz-panel__header h3 {
	font-size: 1rem;
	font-weight: 800;
}

.biz-panel__close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--dg-background);
	border: none;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--dg-text-primary);
}

.biz-panel__body {
	padding: var(--space-5);
	overflow-y: auto;
	font-size: 0.9375rem;
	line-height: 2;
	color: var(--dg-text-primary);
}

@media (min-width: 861px) {
	/* Was flex-end (= left, in this RTL layout) — opens from the right
	   edge of the screen instead now. */
	.biz-panel-overlay {
		align-items: stretch;
		justify-content: flex-start;
	}

	.biz-panel {
		width: 420px;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
		transform: translateX(100%);
	}

	.biz-panel-overlay.is-open .biz-panel {
		transform: translateX(0);
	}
}

@media (max-width: 860px) {
	.biz-grid--info {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.biz-media {
		padding: var(--space-4);
	}

	.biz-media__top {
		flex-wrap: wrap;
	}

	.biz-media__name {
		font-size: 1.375rem;
	}

	.biz-hours {
		padding-inline: var(--space-3);
		margin-inline: 4px;
	}
}

/* =========================================================================
   "تجربه دیدگات" accordion (template-parts/business/reviews.php)
   -------------------------------------------------------------------------
   Sits after comments_template() output — after the pagination buttons
   when present, right after the last review otherwise. Each row reuses
   the shared .biz-accordion component/JS (data-component="biz-accordion"),
   just with its own rounded-row look instead of the plain trigger style.
   ========================================================================= */

.biz-experience {
	padding: var(--space-5) var(--space-5) var(--space-6);
	margin: var(--space-6) 0 var(--space-8);
	background: linear-gradient(135deg, var(--dg-primary-100), var(--dg-surface) 55%);
}

.biz-experience__title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--dg-text-primary);
	margin-bottom: var(--space-4);
}

.biz-experience__badge {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-md);
	background: var(--dg-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.biz-experience__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.biz-exp-item {
	background: linear-gradient(135deg, var(--dg-primary-50), var(--dg-surface) 75%);
	border: 1px solid var(--dg-primary-100);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.biz-exp-item[data-open="true"] {
	background: linear-gradient(135deg, var(--dg-primary-100), var(--dg-primary-200) 130%);
	border-color: var(--dg-primary-300);
	box-shadow: var(--shadow-sm);
}

.biz-exp-item__trigger {
	justify-content: space-between;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--dg-text-primary);
	padding: var(--space-4) var(--space-5);
}

.biz-exp-item .biz-accordion__chevron {
	color: var(--dg-primary-hover);
}

.biz-exp-item .biz-accordion__panel-inner {
	padding: 0 var(--space-5) var(--space-4);
	color: var(--dg-text-secondary);
	font-size: 0.875rem;
	line-height: 1.9;
}

@media (max-width: 600px) {
	.biz-experience {
		padding: var(--space-4);
	}
}

/* =========================================================================
   Desktop/Tablet page architecture — Trustpilot-style layout rebuild
   -------------------------------------------------------------------------
   Scope: template-parts/business/profile-card.php's own .container (nav
   tabs, media/identity card, side-stack, about section) plus
   single-dgc_business.php's .business-page__layout (reviews main +
   widget sidebar), plus a couple of small additions inside the media
   card and comments.php. A centered, wider container and — from 1200px
   up — a real two-column grid: a wide main column and a narrow 340px
   info column, placed via CSS Grid so it's genuinely RTL-aware
   (grid-template-areas / grid-template-columns follow `dir`, no manual
   left/right mirroring) rather than a mirrored copy of Trustpilot's LTR
   layout.

   Deliberately placed at the very end of this file (after every base
   .biz-* rule) rather than left near the top where it was first
   written: several of these overrides share a selector and property
   with a later, unscoped base rule at equal specificity (e.g.
   .biz-media__gallery's margin-top) — in plain CSS the LATER rule in
   the file wins a tie, regardless of which one sits inside a media
   query, so those overrides were silently losing until this section
   was moved down here.

   A little HTML/JS was needed for a couple of pieces CSS alone can't do
   (moving an element across two different card containers) —
   template-parts/business/profile-card.php (a couple of extra classes)
   and app.js (initBizSpecialtyRelocate() / initBizClaimedBadgeRelocate()),
   gated to (min-width: 861px) and reverted below it, so mobile's markup
   and JS behavior are unchanged.

   Everything here lives at (min-width: 861px) and up — that is the
   same "not mobile" boundary the rest of this file already uses (see
   the panel breakpoint above, and .biz-grid--info's own collapse at
   860px) — so nothing at or below it is touched; the mobile layout is
   byte-for-byte what it was before this section existed.
   ========================================================================= */

@media (min-width: 861px) {
	/* ---- Tablet (861–1199px): its own tuned single-column layout,
	   not just a shrunk desktop — a narrower centered reading column
	   (960px, versus the sitewide 1200px default) so single-column
	   cards don't stretch thin, plus a 3-up topic-tile grid that puts
	   the extra tablet width to use before the sidebar split kicks in
	   on desktop. */
	.biz-page .container,
	.business-page__layout {
		max-width: 960px;
	}

	/* Center the reviews column when there's no widget sidebar to share
	   the row with (single-dgc_business.php adds --full in that case,
	   same is_active_sidebar() check template-parts/business/sidebar.php
	   already makes) — a capped, centered reading width instead of the
	   review column just filling the whole row edge-to-edge. Previous
	   attempt centered .business-page__main within its own grid CELL,
	   which — with the sidebar column still reserved next to it even
	   though nothing rendered there — kept it looking shifted toward
	   the reviews column's own (right-hand, in RTL) side of the page
	   rather than the page's actual center; the desktop half of this
	   fix (≥1200px, below) removes that reserved column entirely
	   instead, the same way grid.css's .single-post__layout--full does
	   for the blog template. */
	.business-page__layout--full .business-page__main {
		max-width: 760px;
		margin-inline: auto;
	}

	.biz-topics__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.biz-topics__tile--full {
		grid-column: span 3;
	}

	/* ---- "اطلاعات کسب وکار" card order: آدرس/تماس، بعد ساعات کاری، بعد
	   خدمات و امکانات. Only `order` changes — DOM order (and so the
	   mobile layout, which never applies `order`) is untouched. Also a
	   fixed 3-column grid here (instead of the auto-fill default) so
	   "نوع خرید و فروش" below can span exactly the width of these three. */
	.biz-grid--info {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-flow: dense;
		align-items: start;
	}

	.biz-info--contact { order: 1; }
	.biz-hours { order: 2; }
	.biz-info--features { order: 3; }

	.biz-info--badges {
		order: 4;
		grid-column: 1 / -1;
		align-self: start;
	}

	.biz-info--category { order: 5; }

	/* تخصص leaves the info grid entirely on tablet/desktop — it's
	   relocated under the photo gallery inside the media card instead
	   (initBizSpecialtyRelocate() in app.js). Hide its slot here only
	   while it's still a child of the grid, so this rule can't hide the
	   relocated copy once JS has moved it into .biz-media below. */
	.biz-grid--info .biz-info--specialty {
		display: none;
	}

	/* ---- Media/identity card becomes its own small grid: the trust
	   score sits beside the logo/title row, and the "دیدگاه خودتو بنویس"
	   button sits right under it in that same narrow column (instead of
	   its own full-width row) — .biz-media__gallery/specialty/meta keep
	   stacking in the wide column alongside them. The relocated تخصص
	   card is sized to its own content, not stretched. */
	.biz-media {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 480px;
		grid-template-areas:
			"breadcrumb breadcrumb"
			"top        score"
			"gallery    cta"
			"specialty  cta"
			"meta       cta";
		column-gap: var(--space-4);
		row-gap: var(--space-4);
	}

	.biz-media__breadcrumb { grid-area: breadcrumb; margin-bottom: 0; }
	.biz-media__top { grid-area: top; }

	/* Pulled up a bit — less gap above the gallery than the grid's own
	   row-gap would otherwise leave. */
	.biz-media__gallery {
		grid-area: gallery;
		margin-top: calc(-1 * var(--space-2));
	}

	/* Center the thumbnail row itself — the plugin's default flex row
	   packs items against the RTL start (right) instead. */
	.biz-media__gallery-track {
		justify-content: center;
	}

	/* The "پروفایل دریافت شده" badge moves out of here to sit under the
	   rating line instead (initBizClaimedBadgeRelocate() in app.js) —
	   once it's gone this container is empty, so collapse it instead of
	   leaving a blank gap in the grid row. */
	.biz-media__meta { grid-area: meta; margin-top: 0; }
	.biz-media__meta:empty { display: none; }

	.biz-media__cta {
		grid-area: cta;
		align-self: start;
		margin-top: var(--space-6);
	}

	/* .biz-claimed is `display: inline-flex` (shrink-to-fit) by default,
	   so as a plain sibling after .biz-rating-line it was just sitting on
	   the same line next to it instead of wrapping — this is what
	   actually forces it onto its own line below, still only as wide as
	   its own content. */
	.biz-media__heading .biz-claimed {
		display: flex;
		width: fit-content;
		margin-top: var(--space-2);
	}

	/* تخصص: width and height both hug its own (short) text instead of
	   stretching to the row/column, centered under the (now also
	   centered) gallery, and pulled up a bit closer to it — this is
	   what keeps it from looking like an empty, half-finished,
	   off-to-one-side, floating-too-far-down bar. */
	.biz-media .biz-info--specialty {
		grid-area: specialty;
		align-self: start;
		justify-self: center;
		width: fit-content;
		max-width: 100%;
		margin-top: calc(-1 * var(--space-2));
	}

	/* Trust box: kept close to how [didgat_trustbox] renders everywhere
	   else on the site — narrowed via the 480px column above (up from
	   440px) and less side padding on the wrapper. Score number, status
	   text, review-count text, and the stars are sized down a bit more
	   too (still just these four pieces, nothing restructured), by
	   request — a full row now comfortably fits inside the card. A
	   little top margin nudges the whole box down from dead-center in
	   its row. */
	.biz-media .biz-score {
		grid-area: score;
		align-self: center;
		width: 100%;
		margin: var(--space-4) 0 0 !important;
		padding-inline: var(--space-2) !important;
	}

	.biz-media .biz-score .dtb-score {
		font-size: 1.5rem !important;
	}

	.biz-media .biz-score .dtb-status,
	.biz-media .biz-score .dtb-count {
		font-size: 0.75rem !important;
	}

	.biz-media .biz-score .didgat-stars {
		--star-size: 14px;
	}
}

@media (min-width: 1200px) {
	/* ---- Desktop: wide centered container + real two-column split ---- */
	.biz-page .container,
	.business-page__layout {
		max-width: 1320px;
	}

	/* Section 1: tab nav spans the top; media/identity + about stack in
	   the main column; the trust/topics/how-it-works stack becomes a
	   real sidebar next to them, sitting to the left of main — mirrored
	   from Trustpilot's LTR main-left/aside-right the way `dir` on this
	   page naturally places named grid areas, not a hand mirror. */
	.biz-page .container.biz-content-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		grid-template-areas:
			"media side"
			"about side";
		column-gap: var(--space-6);
		row-gap: var(--space-5);
		align-items: start;
	}

	.biz-media {
		grid-area: media;
		margin-bottom: 0;
	}

	.biz-side-stack {
		grid-area: side;
		margin-bottom: 0;
	}

	#biz-about {
		grid-area: about;
		margin-top: 0;
	}

	.biz-topics__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.biz-topics__tile--full {
		grid-column: 1 / -1;
	}

	/* Section 2: reviews list stays the wide main column; the widget
	   sidebar (if any widgets are active) becomes a matching 340px
	   column, so both sections line up on the same vertical seam. */
	.business-page__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		column-gap: var(--space-6);
		align-items: start;
	}

	/* No widget sidebar → don't reserve its column at all (collapse to
	   one centered column), instead of centering .business-page__main
	   inside a column that's still sharing the row with an empty
	   340px+gap reservation — that's what was leaving it looking
	   shifted toward its own side of the page rather than truly
	   centered. Same pattern as grid.css's .single-post__layout--full. */
	.business-page__layout--full {
		grid-template-columns: minmax(0, 760px);
		justify-content: center;
	}
}

@media (min-width: 861px) and (max-width: 1199px) {
	/* "خلاصه عملکرد" tiles were turning into oversized squares once the
	   card had the full single-column tablet width to stretch across —
	   cap each tile's own width and center the row instead of letting
	   auto-fill columns grow edge-to-edge. Desktop doesn't need this:
	   the card already sits in a narrow 340px sidebar there. */
	.biz-topics__grid {
		grid-template-columns: repeat(3, minmax(0, 150px));
		justify-content: center;
	}

	/* The PHP-computed .biz-topics__tile--full flag decides "is this the
	   last tile in an odd-count list" for a 2-column grid — meaningless
	   here at 3 columns, so it's neutralized back to a normal tile and
	   the actual gap-avoidance for 3 columns is recomputed purely in CSS
	   below, based on how many tiles really end up in the last row. */
	.biz-topics__grid .biz-topics__tile--full {
		grid-column: auto;
		aspect-ratio: 1 / 1;
		padding-block: var(--space-3);
	}

	/* Exactly 1 tile left over (count ≡ 1 mod 3): it would otherwise sit
	   alone in a new row with two empty cells next to it — span all 3
	   columns instead. */
	.biz-topics__grid .biz-topics__tile:last-child:nth-child(3n+1) {
		grid-column: 1 / -1;
		aspect-ratio: auto;
		padding-block: var(--space-4);
	}

	/* Exactly 2 tiles left over (count ≡ 2 mod 3): the last one takes the
	   remaining 2 columns (the one before it keeps its normal single
	   column) so together they fill the row with no empty cell. */
	.biz-topics__grid .biz-topics__tile:last-child:nth-child(3n+2) {
		grid-column: span 2;
	}
}

/* =========================================================================
   Category / archive listing — minimal card redesign
   -------------------------------------------------------------------------
   Applies to template-parts/business/card.php, used by the theme's own
   fallback loops (archive-dgc_business.php, category.php's WP_Query
   fallback). Trustpilot/Digikala-style minimal card: logo, name, a
   rounded score tile, star row, purchase-type pills, website row.
   NOTE: on category pages the site normally renders businesses through
   the didgat-filter-search plugin's [dgc_business_list]/[dgfs_filter_sort_bar]
   shortcodes instead (see category.php) — this CSS only styles this
   theme's own fallback markup, not that plugin's output.
   ========================================================================= */

.business-archive__page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-bottom: var(--space-5);
}

.business-archive__count {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--dg-primary-50);
	color: var(--dg-primary-700);
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: var(--radius-full);
}

.biz-card-mini {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	background: var(--dg-surface);
	border: 1px solid var(--dg-border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	text-decoration: none;
	color: inherit;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.biz-card-mini:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--dg-primary-200);
}

.biz-card-mini__top {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.biz-card-mini__logo {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-md);
	background: var(--dg-primary-50);
	border: 1px solid var(--dg-primary-100);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-weight: 800;
	font-size: 1rem;
	color: var(--dg-primary-700);
}

.biz-card-mini__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.biz-card-mini__id {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.biz-card-mini__name {
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--dg-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.biz-card-mini__verified {
	width: 14px;
	height: 14px;
	flex: none;
}

.biz-card-mini__desc {
	font-size: 0.75rem;
	color: var(--dg-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.biz-card-mini__score {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	color: #fff;
	font-weight: 800;
	font-size: 0.875rem;
	line-height: 1;
	gap: 2px;
}

.biz-card-mini__score small {
	font-size: 0.5rem;
	font-weight: 700;
	opacity: 0.85;
}

.biz-card-mini__score--high {
	background: linear-gradient(150deg, var(--dg-primary-600), var(--dg-primary-900));
}

.biz-card-mini__score--mid {
	background: linear-gradient(150deg, var(--dg-primary-300), var(--dg-primary-600));
}

.biz-card-mini__score--low {
	background: linear-gradient(150deg, #d1a3ff, var(--dg-primary-400));
}

.biz-card-mini__score--none {
	background: var(--dg-background);
	color: var(--dg-text-secondary);
}

.biz-card-mini__rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.75rem;
	color: var(--dg-text-secondary);
}

.biz-card-mini__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.biz-card-mini__pill {
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	background: var(--dg-background);
	color: var(--dg-text-secondary);
	border: 1px solid var(--dg-border);
	white-space: nowrap;
}

.biz-card-mini__pill--online {
	background: var(--color-success-bg);
	color: var(--color-success);
	border-color: rgba(22, 163, 74, 0.2);
}

.biz-card-mini__pill--instore {
	background: var(--color-warning-bg);
	color: var(--color-warning);
	border-color: rgba(217, 119, 6, 0.2);
}

.biz-card-mini__divider {
	height: 1px;
	background: var(--dg-border);
	margin-inline: calc(var(--space-4) * -1);
}

.biz-card-mini__site {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

.biz-card-mini__site-url {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--dg-primary-700);
	overflow: hidden;
}

.biz-card-mini__site-url svg {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--dg-primary-600);
}

.biz-card-mini__site-url span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.biz-card-mini__arrow {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--dg-text-secondary);
	transition: transform var(--transition-fast), color var(--transition-fast);
}

.biz-card-mini:hover .biz-card-mini__arrow {
	transform: translateX(-3px);
	color: var(--dg-primary-600);
}

/* Grid: same auto-fit system as before, just a bit tighter minimum so
   3 columns land comfortably on desktop. */
.business-archive__grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}