/* Divar Core — front-end styles (RTL first). */

:root {
	/*
	 * One palette, in roles rather than colours: a niche profile repaints the
	 * site by giving these tokens new values, so anything a profile should be
	 * able to change has to live here and nowhere else.
	 */

	/* brand */
	--divar-brand: #a62626;
	--divar-brand-dark: #8a1f1f;
	--divar-brand-deep: #7f1d1d;
	--divar-brand-soft: #fdeeee;

	/* ink */
	--divar-fg: #1f2937;
	--divar-muted: #6b7280;

	/* surfaces */
	--divar-bg: #ffffff;
	--divar-bg-soft: #f7f8fa;
	--divar-bg-faint: #fafafa;

	/* rules */
	--divar-line: #e5e7eb;
	--divar-line-soft: #eeeeee;
	--divar-line-strong: #d8d8d8;

	/* danger */
	--divar-danger: #b91c1c;
	--divar-danger-strong: #dc2626;
	--divar-danger-line: #fecaca;
	--divar-danger-bg: #fef2f2;

	/* warning */
	--divar-warning: #b45309;
	--divar-warning-ink: #6b4d00;
	--divar-warning-ink-soft: #8a6100;
	--divar-warning-strong: #f59e0b;
	--divar-highlight: #fcd34d;
	--divar-warning-line: #fde68a;
	--divar-warning-line-soft: #f0dca6;
	--divar-warning-bg: #fffbeb;
	--divar-warning-bg-soft: #fff4d6;

	/* success */
	--divar-success: #157347;
	--divar-success-ink: #1b6b4c;
	--divar-success-line: #bbf7d0;
	--divar-success-bg: #f0fdf4;
	--divar-success-bg-soft: #e6f5ee;

	/* notes and quiet panels */
	--divar-info: #24486f;
	--divar-info-strong: #14508f;
	--divar-info-ink: #3d4b5c;
	--divar-info-bg: #e4eefb;
	--divar-info-bg-soft: #eef3fb;
	--divar-info-bg-faint: #f3f6fa;

	/* accents */
	--divar-star: var(--divar-star);

	/* shape */
	--divar-radius: 10px;
	--divar-gap: 16px;
	--divar-width: 1160px;
}

.divar-form,
.divar-dashboard,
.divar-search,
.divar-chat,
.divar-auth {
	color: var(--divar-fg);
	direction: rtl;
	text-align: start;
}

/* ------------------------------- buttons ------------------------------- */

.divar-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--divar-line);
	border-radius: var(--divar-radius);
	background: var(--divar-bg);
	color: var(--divar-fg);
	font: inherit;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.divar-btn:hover { background: var(--divar-bg-soft); }
.divar-btn--primary { background: var(--divar-brand); border-color: var(--divar-brand); color: var(--divar-bg); }
.divar-btn--primary:hover { background: var(--divar-brand-dark); }
.divar-btn--danger { color: var(--divar-danger); border-color: var(--divar-danger-line); }
.divar-btn--link { border: 0; background: none; color: var(--divar-brand); padding: 6px 4px; }
.divar-btn--small { padding: 5px 10px; font-size: .875em; }
.divar-btn--wide { width: 100%; justify-content: center; }
.divar-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* -------------------------------- forms -------------------------------- */

.divar-field { margin-bottom: var(--divar-gap); }
.divar-field > label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .95em; }

.divar-field input[type="text"],
.divar-field input[type="tel"],
.divar-field input[type="search"],
.divar-field input[type="number"],
.divar-field input[type="file"],
.divar-field select,
.divar-field textarea,
.divar-auth input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--divar-line);
	border-radius: var(--divar-radius);
	background: var(--divar-bg);
	font: inherit;
	box-sizing: border-box;
}

.divar-field input:focus,
.divar-field select:focus,
.divar-field textarea:focus {
	outline: 2px solid var(--divar-brand);
	outline-offset: 1px;
}

.divar-field--range { display: flex; gap: 8px; }
.divar-check { display: flex; align-items: center; gap: 6px; font-weight: 400; margin-top: 8px; }
.divar-check input { width: auto; }
.divar-hint, .divar-unit { color: var(--divar-muted); font-size: .85em; }
.divar-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.divar-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.divar-inline-form { display: inline; }

/* ------------------------------- notices ------------------------------- */

.divar-notice {
	padding: 14px 16px;
	border: 1px solid var(--divar-line);
	border-radius: var(--divar-radius);
	background: var(--divar-bg-soft);
	margin-bottom: var(--divar-gap);
}

.divar-notice--success { border-color: var(--divar-success-line); background: var(--divar-success-bg); color: var(--divar-success); }
.divar-notice--warning { border-color: var(--divar-warning-line); background: var(--divar-warning-bg); color: var(--divar-warning); }
/* Used since the dashboard and the verification form were written; without
   it an error notice rendered in the neutral base style, so a failure read
   as information. */
.divar-notice--error { border-color: var(--divar-danger-line); background: var(--divar-danger-bg); color: var(--divar-danger); }
.divar-error { color: var(--divar-danger); font-size: .95em; }
.divar-empty { color: var(--divar-muted); padding: 24px 0; text-align: center; }

/* -------------------------------- cards -------------------------------- */

.divar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--divar-gap);
}

.divar-card {
	position: relative;
	border: 1px solid var(--divar-line);
	border-radius: var(--divar-radius);
	overflow: hidden;
	background: var(--divar-bg);
}

.divar-card--featured { border-color: var(--divar-highlight); box-shadow: 0 0 0 1px var(--divar-highlight) inset; }
.divar-card__link { display: block; color: inherit; text-decoration: none; }

.divar-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--divar-bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}

.divar-card__media img { width: 100%; height: 100%; object-fit: cover; }
.divar-card__noimage { color: var(--divar-muted); font-size: .85em; }
.divar-card__body { padding: 10px 12px 14px; }
.divar-card__title { margin: 0 0 6px; font-size: 1em; line-height: 1.5; }
.divar-card__price { margin: 0 0 6px; font-weight: 700; }
.divar-card__meta { margin: 0; display: flex; gap: 10px; color: var(--divar-muted); font-size: .8em; }

/* --- comparison --------------------------------------------------------- */

.divar-compare__tools { margin: 0 0 12px; }

.divar-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95em;
}

.divar-compare__table th,
.divar-compare__table td {
	border: 1px solid var(--divar-line);
	padding: 10px 12px;
	text-align: start;
	vertical-align: top;
	/* Wide enough to read. Without a floor the columns squeeze until every
	   title breaks one word per line, which is unreadable in exchange for a
	   table that still does not fit — better to let the wrapper scroll. */
	min-width: 140px;
}

/*
 * The feature name stays put while the columns scroll. Without it, scrolling
 * sideways on a phone leaves a screen of numbers with nothing saying what they
 * are measurements of.
 */
.divar-compare__table th[scope="row"] {
	position: sticky;
	inset-inline-start: 0;
	background: var(--divar-bg-soft);
	font-weight: 700;
	min-width: 120px;
	z-index: 1;
}

.divar-compare__table thead th { background: var(--divar-bg-soft); }

/* Rows where everything agrees stay, but quietly: they are not what anyone
   opened a comparison to read. */
.divar-compare__table tr.is-same td,
.divar-compare__table tr.is-same th { color: var(--divar-muted); }
.divar-compare__table.hide-same tr.is-same { display: none; }

.divar-compare__head { display: block; color: inherit; text-decoration: none; font-weight: 700; }
.divar-compare__head img { display: block; width: 120px; height: auto; border-radius: calc(var(--divar-radius) - 4px); margin-bottom: 6px; }
.divar-compare__drop { display: inline-block; margin-top: 6px; font-size: .82em; color: var(--divar-muted); }

.divar-compare__lowest {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--divar-success-bg-soft);
	color: var(--divar-success);
	font-size: .78em;
	white-space: nowrap;
}

.divar-compare--empty { padding: 24px 0; }

.divar-compare-toggle {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--divar-line);
	background: var(--divar-bg);
	color: var(--divar-muted);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.divar-compare-toggle[aria-pressed="true"] {
	background: var(--divar-brand);
	border-color: var(--divar-brand);
	color: var(--divar-bg);
}

/* The bar only exists while something is selected, so it never sits empty
   over the bottom of the page. */
.divar-comparebar {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 16px;
	background: var(--divar-bg);
	border-top: 1px solid var(--divar-line);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}

.divar-comparebar__count { font-size: .9em; color: var(--divar-muted); }
.divar-comparebar .is-disabled { opacity: .5; pointer-events: none; }

/* Price history: a small step chart under the price on a listing page. */

.divar-pricehistory {
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 320px;
}

.divar-pricehistory__chart {
	width: 100%;
	height: 56px;
	display: block;
}

.divar-pricehistory figcaption {
	font-size: .85em;
	color: var(--divar-muted);
	line-height: 1.7;
}

.divar-pricehistory__range {
	display: block;
	font-size: .92em;
}

/*
 * Card shapes, chosen by the niche profile.
 *
 * One markup, three geometries. "photo" is the default and what a car or a
 * sofa needs; "compact" puts a small thumbnail beside the text for the
 * verticals where the picture is incidental — a hiring advert, a plumber —
 * and "row" gives one full-width line per listing for dense scanning.
 */

.divar-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.divar-card--compact .divar-card__link {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 12px;
	align-items: start;
	padding: 12px;
}

.divar-card--compact .divar-card__media {
	aspect-ratio: 1 / 1;
	border-radius: calc(var(--divar-radius) - 4px);
	overflow: hidden;
}

.divar-card--compact .divar-card__noimage { font-size: .7em; text-align: center; }
.divar-card--compact .divar-card__body { padding: 0; }
.divar-card--compact .divar-card__title { font-size: .95em; }

/* The corner star would sit on the thumbnail here, so it moves to the text side. */
.divar-card--compact .divar-fav--corner { inset-block-start: auto; inset-block-end: 8px; }

.divar-grid--row { grid-template-columns: 1fr; gap: 8px; }

.divar-card--row .divar-card__link {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 14px;
	align-items: center;
	padding: 10px 12px;
}

.divar-card--row .divar-card__media { aspect-ratio: 4 / 3; border-radius: calc(var(--divar-radius) - 4px); overflow: hidden; }

/*
 * The price goes to the far end of the row, not under the title. A list read
 * by someone comparing suppliers is read down the price column; leaving the
 * figure tucked against the title turns a row into a card with most of its
 * width empty.
 */
.divar-card--row .divar-card__body {
	padding: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 16px;
}

.divar-card--row .divar-card__title { grid-column: 1; grid-row: 1; margin: 0; }
.divar-card--row .divar-card__meta { grid-column: 1; grid-row: 2; margin-top: 4px; }

.divar-card--row .divar-card__price {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
	white-space: nowrap;
	font-size: 1.05em;
	/* Clear of the corner star, which sits at the row's outer edge. */
	padding-inline-end: 28px;
}

@media (max-width: 560px) {
	/* Below this there is not room for a price column, so it goes back under
	   the title rather than squeezing the title to nothing. */
	.divar-card--row .divar-card__link { grid-template-columns: 72px 1fr; gap: 10px; }
	.divar-card--row .divar-card__body { grid-template-columns: 1fr; }
	.divar-card--row .divar-card__title { grid-row: 1; }
	.divar-card--row .divar-card__price { grid-column: 1; grid-row: 2; padding-inline-end: 0; }
	.divar-card--row .divar-card__meta { grid-row: 3; }
}

.divar-badge {
	position: absolute;
	top: 8px;
	inset-inline-start: 8px;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: .72em;
	color: var(--divar-bg);
}

.divar-badge--urgent { background: var(--divar-danger-strong); }
.divar-badge--featured { background: var(--divar-warning); inset-inline-start: auto; inset-inline-end: 8px; }

/* Two shapes, one behaviour. The corner variant floats over a card's image;
   the inline one is an ordinary button on the listing page. They used to
   share a class, so the inline button inherited `position:absolute` and
   collapsed into a 32px circle with its label clipped. */
.divar-fav--corner {
	position: absolute;
	bottom: 10px;
	inset-inline-start: 10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--divar-line);
	background: rgba(255,255,255,.9);
	color: var(--divar-muted);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}

.divar-fav--corner[aria-pressed="true"],
.divar-fav--inline[aria-pressed="true"] { color: var(--divar-warning-strong); border-color: var(--divar-warning-strong); }

/* ------------------------------- search -------------------------------- */

.divar-search { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.divar-filters { border: 1px solid var(--divar-line); border-radius: var(--divar-radius); padding: 16px; position: sticky; top: 16px; }
.divar-search__count { color: var(--divar-muted); margin-bottom: 12px; }
.divar-pagination { margin-top: 24px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.divar-pagination .page-numbers { padding: 6px 12px; border: 1px solid var(--divar-line); border-radius: 8px; text-decoration: none; }
.divar-pagination .current { background: var(--divar-brand); border-color: var(--divar-brand); color: var(--divar-bg); }

/* ------------------------------ dashboard ------------------------------ */

.divar-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--divar-line); margin-bottom: 20px; }
.divar-tabs__item { padding: 10px 14px; text-decoration: none; color: var(--divar-muted); border-bottom: 2px solid transparent; }
.divar-tabs__item.is-active { color: var(--divar-brand); border-bottom-color: var(--divar-brand); font-weight: 600; }
.divar-pill { background: var(--divar-brand); color: var(--divar-bg); border-radius: 999px; padding: 1px 7px; font-size: .75em; margin-inline-start: 4px; }

.divar-mylist { list-style: none; margin: 0; padding: 0; }
.divar-mylist__item { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--divar-line); }
.divar-mylist__main { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.divar-mylist__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.divar-mylist__views { color: var(--divar-muted); font-size: .85em; }

.divar-status { font-size: .78em; padding: 2px 8px; border-radius: 999px; background: var(--divar-bg-soft); color: var(--divar-muted); }
.divar-status--publish { background: var(--divar-success-bg); color: var(--divar-success); }
.divar-status--pending { background: var(--divar-warning-bg); color: var(--divar-warning); }

.divar-table { width: 100%; border-collapse: collapse; }
.divar-table th, .divar-table td { padding: 10px; border-bottom: 1px solid var(--divar-line); text-align: start; }

/* -------------------------------- auth --------------------------------- */

.divar-auth { max-width: 380px; margin: 0 auto; padding: 24px; border: 1px solid var(--divar-line); border-radius: var(--divar-radius); }
.divar-auth__title { margin-top: 0; font-size: 1.15em; }
.divar-auth label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9em; }
.divar-auth input { margin-bottom: 12px; }
.divar-auth__hint, .divar-auth__sent { color: var(--divar-muted); font-size: .85em; }
.divar-auth__error { color: var(--divar-danger); }

/* -------------------------------- chat --------------------------------- */

.divar-chat { display: grid; grid-template-columns: 300px 1fr; gap: 16px; min-height: 460px; }
.divar-chat__threads { border: 1px solid var(--divar-line); border-radius: var(--divar-radius); padding: 12px; }
.divar-chat__threads h2 { margin: 0 0 10px; font-size: 1em; }
.divar-chat__list { list-style: none; margin: 0; padding: 0; }
.divar-chat__list li { padding: 10px; border-radius: 8px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.divar-chat__list li:hover, .divar-chat__list li.is-active { background: var(--divar-bg-soft); }
.divar-chat__list img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.divar-chat__list b { display: block; font-size: .92em; }
.divar-chat__list small { color: var(--divar-muted); }

.divar-chat__panel { display: flex; flex-direction: column; border: 1px solid var(--divar-line); border-radius: var(--divar-radius); }
.divar-chat__header { padding: 12px 14px; border-bottom: 1px solid var(--divar-line); font-weight: 600; }
.divar-chat__messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; max-height: 420px; }

.divar-msg { max-width: 72%; padding: 8px 12px; border-radius: 12px; background: var(--divar-bg-soft); }
.divar-msg--mine { align-self: flex-start; background: var(--divar-brand-soft); }
.divar-msg:not(.divar-msg--mine) { align-self: flex-end; }
.divar-msg time { display: block; color: var(--divar-muted); font-size: .72em; margin-top: 4px; }

.divar-chat__composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--divar-line); }
.divar-chat__composer textarea { flex: 1; resize: vertical; border: 1px solid var(--divar-line); border-radius: 8px; padding: 8px; font: inherit; }
.divar-chat__empty { color: var(--divar-muted); align-self: center; }

/* ------------------------------ categories ----------------------------- */

.divar-categories { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.divar-categories__item { display: flex; gap: 6px; align-items: center; padding: 8px 14px; border: 1px solid var(--divar-line); border-radius: 999px; text-decoration: none; color: inherit; }
.divar-categories__item:hover { border-color: var(--divar-brand); color: var(--divar-brand); }
.divar-categories__count { color: var(--divar-muted); font-size: .8em; }

/* --------------------------------- map --------------------------------- */

.divar-map { height: 240px; border-radius: var(--divar-radius); border: 1px solid var(--divar-line); margin-top: 10px; background: var(--divar-bg-soft); }

/* ------------------------------ responsive ----------------------------- */

@media (max-width: 900px) {
	.divar-search, .divar-chat { grid-template-columns: 1fr; }
	.divar-filters { position: static; }
	.divar-chat__panel { min-height: 380px; }
}

/* -------------------------------- dialog -------------------------------- */

.divar-dialog {
	border: 1px solid var(--divar-line);
	border-radius: var(--divar-radius);
	padding: 20px;
	max-width: 380px;
	width: calc(100% - 32px);
	direction: rtl;
	text-align: start;
	color: var(--divar-fg);
}

.divar-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.divar-dialog h3 { margin: 0 0 12px; font-size: 1.05em; }
.divar-dialog__note { display: block; margin: 12px 0; font-size: .9em; color: var(--divar-muted); }
.divar-dialog__note textarea { width: 100%; margin-top: 6px; border: 1px solid var(--divar-line); border-radius: 8px; padding: 8px; font: inherit; }
.divar-dialog__error { color: var(--divar-danger); font-size: .9em; }
.divar-dialog menu { display: flex; gap: 8px; justify-content: flex-start; margin: 12px 0 0; padding: 0; }

/* ---------------------------- saved searches ---------------------------- */

.divar-savesearch { border: 1px solid var(--divar-line); border-radius: var(--divar-radius); padding: 16px; margin-top: 16px; }

/* --------------------------- landing pages ------------------------------ */

.divar-landing__header { margin-bottom: 20px; }
.divar-landing__header h1 { margin: 0 0 6px; font-size: 1.35em; }
.divar-landing__summary { color: var(--divar-muted); margin: 0 0 14px; }
.divar-landing__intro { background: var(--divar-bg-soft); border-radius: var(--divar-radius); padding: 16px; margin-bottom: 24px; }
.divar-landing__intro p:last-child { margin-bottom: 0; }

.divar-landing__links { margin-top: 32px; }
.divar-landing__links h2 { font-size: 1.02em; margin: 0 0 12px; }
.divar-landing__links ul,
.divar-landing-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.divar-landing__links a,
.divar-landing-links a {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 7px 13px;
	border: 1px solid var(--divar-line);
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
	font-size: .9em;
}
.divar-landing__links a:hover,
.divar-landing-links a:hover { border-color: var(--divar-brand); color: var(--divar-brand); }

.divar-status--expired { background: var(--divar-danger-bg); color: var(--divar-danger); }
.divar-expired h2 { margin-top: 0; font-size: 1.05em; }

.divar-thumb { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; font-size: .78em; color: var(--divar-muted); }
.divar-thumb span { display: inline-flex; align-items: center; gap: 4px; }

.divar-landing-index__city { margin-bottom: 28px; }
.divar-landing-index__city h2 { font-size: 1.02em; margin: 0 0 10px; }

.divar-status--rejected { background: var(--divar-danger-bg); color: var(--divar-danger); }
.divar-reject-reason { display: block; width: 100%; color: var(--divar-danger); font-size: .85em; white-space: pre-line; }

.divar-seller__header { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; }
.divar-seller__header h1 { margin: 0 0 4px; font-size: 1.25em; }
.divar-seller__header img { border-radius: 50%; }
.divar-seller__meta { margin: 0; color: var(--divar-muted); font-size: .88em; }
.divar-verified { color: var(--divar-success); }

/* ------------------------- sponsored slots ------------------------------- */

.divar-slots { border: 1px solid var(--divar-line); border-radius: var(--divar-radius); padding: 14px; margin-bottom: 16px; }
.divar-slots__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .98em; }
.divar-slots__badge { background: var(--divar-bg-soft); color: var(--divar-muted); border: 1px solid var(--divar-line); border-radius: 999px; padding: 1px 8px; font-size: .72em; font-weight: 400; }
.divar-slots__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.divar-slots__list a { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; }
.divar-slots__list img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.divar-slots__list strong { display: block; font-size: .92em; }
.divar-slots__list small { color: var(--divar-muted); font-size: .8em; }
.divar-slots__disclosure { color: var(--divar-muted); font-size: .78em; margin: 10px 0 0; }
.divar-slots__offer { border: 1px dashed var(--divar-line); border-radius: var(--divar-radius); padding: 14px; }
.divar-slots__offer h3 { margin: 0 0 8px; font-size: .98em; }
.divar-slots__form select { width: 100%; padding: 8px; border: 1px solid var(--divar-line); border-radius: 8px; margin-bottom: 10px; font: inherit; }

/* -------------------------- paid capabilities ---------------------------- */

.divar-upgrades { border: 1px dashed var(--divar-line); border-radius: var(--divar-radius); padding: 14px; }
.divar-upgrades legend { font-weight: 600; padding: 0 6px; }
.divar-upgrades label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: .9em; }

.divar-brand { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--divar-bg-soft); border-radius: var(--divar-radius); margin-bottom: 14px; }
.divar-brand img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.divar-brand strong { font-size: .95em; }

.divar-contact-links { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.divar-contact-links a { justify-content: center; }
.divar-video { margin: 16px 0; }
.divar-video iframe, .divar-video video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--divar-radius); }

.divar-upsell { display: inline-block; }
.divar-upsell > summary { list-style: none; cursor: pointer; }
.divar-upsell > summary::-webkit-details-marker { display: none; }
.divar-upsell ul { list-style: none; margin: 8px 0 0; padding: 10px; border: 1px solid var(--divar-line); border-radius: var(--divar-radius); background: var(--divar-bg); min-width: 280px; }
.divar-upsell li { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--divar-line); }
.divar-upsell li:last-child { border-bottom: 0; }

/* --------------------------------- auctions ------------------------------ */

.divar-auctions__intro { margin-bottom: 20px; }
.divar-auctions__intro h2 { margin: 0 0 8px; font-size: 1.2em; }

.divar-auction-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }

.divar-auction {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 20px;
	border: 1px solid var(--divar-line);
	border-radius: var(--divar-radius);
	padding: 16px;
	background: var(--divar-bg);
}

.divar-auction.is-focus { border-color: var(--divar-brand); box-shadow: 0 0 0 1px var(--divar-brand) inset; }
.divar-auction__page h3 { margin: 0 0 10px; font-size: 1.02em; }
.divar-auction__page h3 a { color: inherit; text-decoration: none; }

.divar-auction__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.divar-auction__stats li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--divar-bg-soft); border-radius: 8px; }
.divar-auction__stats span { color: var(--divar-muted); font-size: .78em; }
.divar-auction__stats strong { font-size: .95em; }

.divar-auction__bidding { border-inline-start: 1px solid var(--divar-line); padding-inline-start: 20px; }
.divar-auction__price { margin: 0 0 4px; display: flex; flex-direction: column; }
.divar-auction__price span { color: var(--divar-muted); font-size: .78em; }
.divar-auction__price strong { font-size: 1.25em; }
.divar-auction__meta { margin: 0 0 12px; color: var(--divar-muted); font-size: .82em; }
.divar-auction__form label { display: block; margin-bottom: 4px; font-size: .85em; font-weight: 600; }
.divar-auction__form select, .divar-auction__form input { width: 100%; padding: 8px 10px; border: 1px solid var(--divar-line); border-radius: 8px; margin-bottom: 10px; font: inherit; box-sizing: border-box; }

.divar-auction__history { list-style: none; margin: 12px 0 0; padding: 0; font-size: .85em; }
.divar-auction__history li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--divar-line); }
.divar-auction__history span { color: var(--divar-muted); }
.divar-auction-won h3 { margin: 0 0 6px; font-size: 1em; }

@media (max-width: 780px) {
	.divar-auction { grid-template-columns: 1fr; }
	.divar-auction__bidding { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--divar-line); padding-top: 14px; }
}

/* ---------------------------- wallet & plans ----------------------------- */

.divar-wallet__balance { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--divar-bg-soft); border-radius: var(--divar-radius); margin-bottom: 20px; }
.divar-wallet__balance span { color: var(--divar-muted); font-size: .85em; }
.divar-wallet__balance strong { font-size: 1.6em; }
.divar-wallet__topup { border: 1px solid var(--divar-line); border-radius: var(--divar-radius); padding: 16px; margin-bottom: 24px; }
.divar-wallet__topup h3 { margin: 0 0 10px; font-size: 1em; }
.divar-wallet__topup label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: .9em; }
.divar-wallet__topup input { width: 100%; padding: 10px 12px; border: 1px solid var(--divar-line); border-radius: var(--divar-radius); font: inherit; box-sizing: border-box; }
.divar-wallet__presets { display: flex; gap: 8px; flex-wrap: wrap; }
.divar-wallet__amount--in { color: var(--divar-success); }
.divar-wallet__amount--out { color: var(--divar-danger); }
.divar-warn { color: var(--divar-warning); }

.divar-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 16px 0; }
.divar-plan { border: 1px solid var(--divar-line); border-radius: var(--divar-radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.divar-plan.is-current { border-color: var(--divar-brand); box-shadow: 0 0 0 1px var(--divar-brand) inset; }
.divar-plan h3 { margin: 0; font-size: 1.05em; }
.divar-plan__price { margin: 0; font-size: 1.25em; font-weight: 700; display: flex; flex-direction: column; }
.divar-plan__price small { font-size: .55em; font-weight: 400; color: var(--divar-muted); }
.divar-plan__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9em; }
.divar-plan__benefits li::before { content: '✓ '; color: var(--divar-success); }

/* --------------------------------- reviews -------------------------------- */

.divar-rating { color: var(--divar-warning); font-weight: 600; }
.divar-reviews { margin-top: 32px; }
.divar-reviews h2 { display: flex; align-items: baseline; gap: 10px; font-size: 1.05em; }
.divar-reviews__score { color: var(--divar-warning); font-size: 1.15em; }
.divar-reviews__score small { color: var(--divar-muted); font-size: .62em; font-weight: 400; }
.divar-reviews__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.divar-review { border: 1px solid var(--divar-line); border-radius: var(--divar-radius); padding: 14px; }
.divar-review__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.divar-review__stars { color: var(--divar-warning); letter-spacing: 1px; }
.divar-review__meta { color: var(--divar-muted); font-size: .8em; }
.divar-review__meta a { color: inherit; }
.divar-review__body { margin: 0; }
.divar-review__reply { margin-top: 10px; padding: 10px 12px; background: var(--divar-bg-soft); border-radius: 8px; font-size: .92em; }
.divar-review__reply-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.divar-review__reply-form textarea { width: 100%; border: 1px solid var(--divar-line); border-radius: 8px; padding: 8px; font: inherit; box-sizing: border-box; }

.divar-review-form { border: 1px solid var(--divar-line); border-radius: var(--divar-radius); padding: 16px; }
.divar-review-form h3 { margin: 0 0 10px; font-size: 1em; }
.divar-review-form label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: .9em; }
.divar-review-form textarea { width: 100%; border: 1px solid var(--divar-line); border-radius: 8px; padding: 8px; font: inherit; box-sizing: border-box; margin-bottom: 10px; }

/* The stars sit in reverse order so a hover lights everything to its right. */
.divar-stars { border: 0; margin: 0; padding: 0; display: inline-flex; flex-direction: row; }
.divar-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.divar-stars label { font-size: 1.7em; color: var(--divar-line); cursor: pointer; line-height: 1; padding: 0 2px; }
.divar-stars label:hover, .divar-stars label:hover ~ label,
.divar-stars input:checked ~ label { color: var(--divar-star); }
.divar-stars input:focus-visible + label { outline: 2px solid var(--divar-brand); outline-offset: 2px; }

/* --- verified seller ---
   Named .divar-trust, not .divar-badge: that class already belongs to the
   corner ribbons on a card ('فوری', 'ویژه') and reusing it repainted them. ---------------------------------------------------- */

.divar-trust {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	white-space: nowrap;
	vertical-align: middle;
}

/* Two levels, one visual family: a business is the stronger claim, so it gets
   the stronger colour, but neither is allowed to look like a paid promotion. */
.divar-trust--individual {
	color: var(--divar-success-ink);
	background: var(--divar-success-bg-soft);
}

.divar-trust--business {
	color: var(--divar-info-strong);
	background: var(--divar-info-bg);
}

.divar-shop {
	margin: 12px 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--divar-line-soft);
	border-radius: 10px;
	background: var(--divar-bg-faint);
}

.divar-shop__about {
	margin: 0 0 10px;
	line-height: 1.9;
}

.divar-shop__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	margin: 0;
	font-size: 14px;
}

.divar-shop__facts dt {
	color: var(--divar-muted);
}

.divar-shop__facts dd {
	margin: 0;
}

.divar-verify__promise {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--divar-info-bg-faint);
	color: var(--divar-info-ink);
	font-size: 14px;
	line-height: 1.9;
}

/* --- offline snapshot --------------------------------------------------- */

/* A cached page has to say so before the reader acts on its price, so the
   banner sits at the very top of the document rather than inside the layout. */
.divar-offline-banner {
	padding: 10px 16px;
	background: var(--divar-warning-bg-soft);
	border-bottom: 1px solid var(--divar-warning-line-soft);
	color: var(--divar-warning-ink);
	font-size: 13px;
	line-height: 1.9;
	text-align: center;
}

.divar-offline-banner:empty {
	display: none;
}

[data-divar-install] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* --- duplicate notice --------------------------------------------------- */

.divar-duplicate {
	display: block;
	margin: 6px 0;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.9;
}

/* A repost of one's own advert is a misunderstanding, not an offence, and the
   colour says so; a copied advert is the one that gets a warning tone. */
.divar-duplicate--own {
	background: var(--divar-info-bg-soft);
	color: var(--divar-info);
}

.divar-duplicate--copied {
	background: var(--divar-brand-soft);
	color: var(--divar-brand-dark);
}

.divar-duplicate .divar-inline-form {
	display: inline-block;
	margin-inline-start: 8px;
}

/* --- offline drafts ----------------------------------------------------- */

.divar-drafts {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px dashed var(--divar-line-soft);
	border-radius: 10px;
	background: var(--divar-bg-faint);
}

.divar-draft {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 6px 0;
}

.divar-draft + .divar-draft {
	border-top: 1px solid var(--divar-line-soft);
}

/* A draft old enough to need a second look says so rather than looking
   identical to one written a minute ago. */
.divar-draft__stale {
	flex-basis: 100%;
	margin: 0;
	color: var(--divar-warning-ink-soft);
	font-size: 12px;
	line-height: 1.8;
}

/* --- safety ------------------------------------------------------------- */

/* Advice next to a revealed phone number. Quiet by design: it appears at the
   moment of risk, so it does not need to shout to be read. */
.divar-safety {
	margin: 10px 0 0;
	padding: 10px 14px 10px 14px;
	padding-inline-start: 28px;
	border-radius: 8px;
	background: var(--divar-info-bg-faint);
	color: var(--divar-info-ink);
	font-size: 12.5px;
	line-height: 2;
}

/* A warning under a chat message. The three levels differ because a card
   number alone is often an honest seller, while a card number plus a courier
   story is the scam itself — shouting equally at both is how warnings stop
   being read. */
.divar-scam {
	margin: 4px 0 10px;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.9;
}

.divar-scam--low {
	background: var(--divar-info-bg-faint);
	color: var(--divar-info-ink);
}

.divar-scam--medium {
	background: var(--divar-warning-bg-soft);
	color: var(--divar-warning-ink);
}

.divar-scam--high {
	background: var(--divar-brand-soft);
	color: var(--divar-brand-dark);
	font-weight: 600;
}

/* --- controls that had no style ----------------------------------------- */

/* A <button> wearing .divar-tabs__item, which was written for an <a>: without
   this it kept the browser's native button chrome inside the tab strip. */
.divar-tabs__install {
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* A secondary action next to a primary one — discarding a queued draft. */
.divar-btn--ghost {
	background: none;
	border: 1px solid var(--divar-line);
	color: var(--divar-muted);
}

.divar-btn--ghost:hover {
	color: var(--divar-fg);
	border-color: var(--divar-muted);
}

.divar-chat__loading {
	padding: 16px;
	color: var(--divar-muted);
	text-align: center;
}

/* A draft old enough that it will not send itself any more. */
.divar-draft.is-stale {
	background: var(--divar-warning-bg);
	border-radius: 8px;
	padding-inline: 10px;
}

.divar-wallet__amount {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- near me ------------------------------------------------------------ */

.divar-near__row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.divar-near__row select {
	flex: 1;
	min-width: 0;
}

.divar-near__status {
	margin: 6px 0 0;
	color: var(--divar-muted);
	font-size: 12px;
	line-height: 1.8;
}

.divar-near__status:empty {
	display: none;
}

/* --- chat: keyboard and narrow screens ---------------------------------- */

/* Each row is a real button now, so it needs the look the <li> used to have. */
.divar-chat__thread {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
}

.divar-chat__thread:hover {
	background: var(--divar-bg-soft);
}

.divar-chat__back {
	display: none;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	padding: 0;
	margin-inline-end: 8px;
}

@media (max-width: 700px) {
	/* Stacked, the conversation opens below the list, so the two behave as one
	   view at a time with a way back — otherwise tapping a thread scrolls
	   nowhere and looks like nothing happened. */
	.divar-chat.is-reading .divar-chat__threads {
		display: none;
	}

	.divar-chat__back {
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}

	.divar-chat__messages {
		/* Not a fixed 420px: on a 640px-tall phone that boxes the transcript
		   inside the page scroll, giving two nested scrollers. */
		max-height: 60dvh;
	}
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 480px) {
	/* One column below ~440px was the default; every Persian classifieds app
	   shows two on a phone, and so should this. Not the row and compact
	   variants, though: both are already a horizontal layout, and two of them
	   side by side on a phone leaves each about a hundred and fifty pixels
	   wide, which is narrower than the price it has to print. */
	.divar-grid:not(.divar-grid--row):not(.divar-grid--compact) {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.divar-grid--compact { grid-template-columns: 1fr; }

	.divar-card__title {
		font-size: .95em;
	}
}

/* A five-column ledger cannot fit 360px, so let it scroll on its own rather
   than pushing the whole page sideways. */
.divar-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* A long term must not size the first track and push the value off-screen. */
.divar-shop__facts {
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}

.divar-draft__error {
	flex-basis: 100%;
	margin: 0;
	color: var(--divar-danger);
	font-size: 12px;
	line-height: 1.8;
}

.divar-draft__error:empty {
	display: none;
}

/* --- blocked users ------------------------------------------------------- */

.divar-blocked {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.divar-blocked li {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 8px 0;
	border-top: 1px solid var(--divar-line);
}

.divar-blocked small {
	color: var(--divar-muted);
}

.divar-blocked li form {
	margin-inline-start: auto;
}

.divar-profile__hint {
	color: var(--divar-muted);
	font-size: 13px;
	line-height: 1.9;
	margin: 4px 0 0;
}

/* The block control sits at the far end of the conversation header. */
.divar-chat__block {
	margin-inline-start: auto;
}

/* --- seller statistics --------------------------------------------------- */

.divar-mylist__stats {
	margin-top: 10px;
	border-top: 1px solid var(--divar-line);
	padding-top: 8px;
}

.divar-mylist__stats summary {
	cursor: pointer;
	color: var(--divar-muted);
	font-size: 13px;
}

.divar-stats h3 {
	margin: 12px 0 8px;
	font-size: 14px;
	color: var(--divar-muted);
	font-weight: 500;
}

/* The headline sits apart from the four panels because it is the one number
   a seller can act on today; the panels are the evidence behind it. */
.divar-stats__rate {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--divar-bg-soft);
	line-height: 1.9;
}

.divar-stats__rate strong {
	font-size: 28px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.divar-stats__unit {
	font-size: 13px;
	font-weight: 400;
	margin-inline-start: 3px;
	color: var(--divar-muted);
}

.divar-stats__rate span {
	font-size: 13px;
	color: var(--divar-muted);
}

.divar-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
}

.divar-stats__card {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--divar-line);
	border-radius: 10px;
}

.divar-stats__card figcaption {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--divar-muted);
}

/* Identity is never colour alone: the swatch names the panel, the caption
   names it in words, and the total is printed beside it. */
.divar-stats__swatch {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex: none;
}

.divar-stats__card figcaption strong {
	margin-inline-start: auto;
	font-size: 15px;
	color: var(--divar-fg);
	font-variant-numeric: tabular-nums;
}

.divar-stats__spark {
	display: block;
	width: 100%;
	height: 40px;
	margin: 8px 0 4px;
}

.divar-stats__peak {
	color: var(--divar-muted);
	font-size: 11px;
}

.divar-stats__table {
	margin-top: 12px;
}

.divar-stats__table summary {
	cursor: pointer;
	color: var(--divar-muted);
	font-size: 13px;
}

/* Without naming the direction, a decline and a rise are the same picture —
   in an RTL page "newest on the right" is only one of two fair readings. */
.divar-stats__axis {
	margin: 8px 0 0;
	color: var(--divar-muted);
	font-size: 11.5px;
	line-height: 1.8;
}