/* =========================================================================
 * Sponsored slots on the listing archives (archive-listing.php, page 1).
 *
 * A paid card looks like every other card. The disclosure is one quiet
 * word, "آگهی", the way search ads label themselves: at the head of the
 * card's meta line for a single slot, or beside a small heading when two
 * or more slots are grouped. The ⓘ opens a native [popover] explaining it.
 * Search engines read the disclosure from rel="sponsored" on the links and
 * from the slots' absence in the ItemList, not from these styles.
 * ====================================================================== */

.ad-label {
	display: inline-flex; align-items: center; gap: 2px;
	font-weight: var(--fw-black);
	color: var(--text);
	white-space: nowrap;
}

.ad-why {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; padding: 0;
	border: 0; border-radius: 50%;
	background: none; color: var(--muted);
	cursor: pointer;
}
.ad-why svg { width: 15px; height: 15px; }
.ad-why:hover, .ad-why:focus-visible { color: var(--text); background: var(--fill); }

.ad-why-pop {
	max-width: min(340px, calc(100vw - 32px));
	margin: auto;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--white);
	color: var(--text-soft);
	font-size: var(--fs-meta);
	line-height: 1.8;
	box-shadow: var(--shadow-pop);
}
.ad-why-pop::backdrop { background: color-mix(in srgb, var(--navy-900) 25%, transparent); }
.ad-why-close {
	margin-top: 12px;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-chip);
	background: var(--white);
	color: var(--text);
	font: inherit; font-weight: var(--fw-bold);
	cursor: pointer;
}

/* Two or more slots: one heading, one label, then the cards, closed by a
   hairline so the organic results visibly start after it. */
.ad-group {
	display: flex; flex-direction: column; gap: inherit;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line-strong);
	margin-bottom: 4px;
}
.ad-group-head {
	display: flex; align-items: center; gap: 10px;
	font-size: var(--fs-meta);
}
.ad-group-title {
	font-size: var(--fs-meta);
	font-weight: var(--fw-bold);
	color: var(--text-soft);
}
.ad-group-head .ad-label { color: var(--muted); font-weight: var(--fw-bold); }
.ad-group-head .ad-label::before { content: "·"; margin-inline-end: 6px; }