/* Visitor-facing styles.
   Deliberately restrained: the theme owns the page's typography and colour, and
   this only defines the structures the theme has no opinion about. */

.ar-results,
.ar-single,
.ar-archive,
.ar-favorites {
	max-width: 1100px;
	margin: 0 auto;
}

/* The board: one soft panel holding the search and its results, as on the
   boards already running. It gives the white controls and the white table
   something to sit on.

   Wider than the rest of the site — 1340, matching the live board — because the
   table has many columns and the extra width is what lets them all fit without
   a sideways scroll. */
.ar-board {
	max-width: 1340px;
	margin: 0 auto 26px;
	padding: 22px 24px 26px;
	background: #f7f8f9;
	border: 1px solid #ecedf0;
	border-radius: 10px;
}

/*
 * Full width, for a page whose width is set by the page builder instead.
 *
 * The frame is dropped with it: a card with a border and a background, stretched
 * edge to edge, reads as a broken layout rather than a wide one. What is left is
 * the content, taking whatever room the column it sits in gives it — which is the
 * point, since Elementor is then the one deciding that.
 */
.ar-board.is-full,
.ar-board.is-full .ar-results,
.ar-board.is-full .ar-single,
.ar-board.is-full .ar-archive,
.ar-board.is-full .ar-favorites {
	max-width: none;
}

.ar-board.is-full {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.ar-board .ar-search,
.ar-board .ar-results {
	max-width: none;
	margin-inline: 0;
}

/* The results sit on white inside the grey panel, so the separation from the
   filters comes from the surface itself rather than from a drawn line: grey is
   where you choose, white is what you get. */
.ar-board .ar-results {
	margin-top: 18px;
	padding: 16px 18px 20px;
	background: #fff;
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 8px;
}

@media (max-width: 600px) {
	.ar-board {
		padding: 14px 12px 18px;
		border-radius: 8px;
	}
}

/* Search
   Shaped after the boards already running on the site: a single row of pill
   controls, with the filters in a panel that opens beneath. */

.ar-search {
	margin-bottom: 20px;
	--ar-pill-border: #e3e6ec;
	--ar-pill-bg: #fbfcfd;
	--ar-accent: var(--ar-primary, #1596a8);
}

.ar-search-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

/* One pill shape for every control in the bar — fields and buttons alike.
   Stated in full because the theme styles buttons and links heavily. */
.ar-search .ar-sb-field,
.ar-search .ar-sb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	min-height: 46px;
	padding: 0 18px;
	margin: 0;
	border: 1px solid var(--ar-pill-border);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	color: var(--ar-dark, #0e2846);
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.ar-sb-search {
	flex: 1 1 260px;
	min-width: 200px;
}

.ar-sb-icon {
	opacity: .45;
}

/* The pill carries the border; the control inside carries none.
   Themes give every input a border, a background and a shadow of their own,
   which produced a second frame drawn inside the first. Every property that
   could arrive from outside is stated here. */
.ar-search .ar-sb-field input,
.ar-search .ar-sb-field select {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	outline: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.ar-search .ar-sb-field input:focus,
.ar-search .ar-sb-field select:focus {
	border: 0;
	box-shadow: none;
	outline: none;
	background: none;
}

/* The focus ring belongs on the pill, so it traces the shape people see. */
.ar-search .ar-sb-field:focus-within {
	border-color: var(--ar-primary, #1596a8);
	box-shadow: 0 0 0 1px var(--ar-primary, #1596a8);
}

.ar-search .ar-sb-field input::placeholder {
	color: #9aa1ac;
	opacity: 1;
}

.ar-sb-select {
	flex: 0 1 220px;
	padding-inline-end: 14px;
}

.ar-search .ar-sb-select select {
	cursor: pointer;
	/* Room for the theme's dropdown arrow, which sits at the inline end. */
	padding-inline-end: 4px;
}

.ar-search .ar-sb-btn:hover {
	border-color: #c8cdd6;
	background: #fff;
	color: var(--ar-dark, #0e2846);
}

.ar-filter-toggle.is-open {
	border-color: var(--ar-accent);
	box-shadow: 0 0 0 1px var(--ar-accent);
}

.ar-filter-toggle.is-open .ar-sb-caret {
	transform: rotate(180deg);
}

.ar-sb-caret {
	font-size: 11px;
	opacity: .6;
	transition: transform .15s;
}

.ar-sb-glyph {
	opacity: .6;
}

.ar-fav-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 4px;
	background: var(--ar-primary-soft, #e8f4f6);
	color: var(--ar-accent);
	font-size: 13px;
	font-weight: 600;
}

.ar-search .ar-sb-submit {
	background: var(--ar-primary, #1596a8);
	border-color: var(--ar-primary, #1596a8);
	color: #fff;
	font-weight: 600;
}

.ar-search .ar-sb-submit:hover {
	background: var(--ar-primary-dark, #11798a);
	border-color: var(--ar-primary-dark, #11798a);
	color: #fff;
}

/* Filter panel */

.ar-filter-panel {
	margin-top: 12px;
	padding: 22px 24px 14px;
	border: 1px solid var(--ar-pill-border);
	border-radius: 8px;
	background: #fff;
}

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

.ar-filter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px 24px;
}

.ar-filter-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	color: #6b7280;
}

.ar-pill {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--ar-pill-border);
	border-radius: 6px;
	background: var(--ar-pill-bg);
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.ar-range-pair {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ar-range-dash {
	color: #9aa1ac;
}

/* Two-handle price slider.
   Two range inputs stacked in the same space: the track is drawn once, and
   each input contributes only its handle. */

/* The handles are drawn by the two range inputs stacked here. They must line
   up with the track exactly, so both the inputs and the track are positioned
   against the same box with the same inset — anything approximate leaves the
   circles floating off the line. */
.ar-slider {
	position: relative;
	height: 30px;
	margin-top: 6px;
	padding: 0 9px;
	box-sizing: border-box;
	--ar-from: 0%;
	--ar-to: 100%;
}

.ar-slider::before {
	content: "";
	position: absolute;
	inset-inline: 9px;
	top: 13px;
	height: 4px;
	border-radius: 2px;
	background: #e3e6ec;
}

/* The selected span. In RTL the track runs right to left, so the highlight is
   positioned from the right edge. */
.ar-slider::after {
	content: "";
	position: absolute;
	top: 13px;
	height: 4px;
	border-radius: 2px;
	background: var(--ar-primary, #1596a8);
	/* The percentages are of the track's own length, which is the width minus the
	   two 9px insets — the same distance the inputs now run over. */
	right: calc(9px + (100% - 18px) * var(--ar-from) / 100%);
	left: calc(9px + (100% - 18px) * (100% - var(--ar-to)) / 100%);
}

/*
 * ⚠️ The handles must run on the SAME axis as the bar.
 *
 * The bar was inset 9px at each end (half a handle, so a handle at either end
 * sits over the track rather than past it) while the range inputs spanned the
 * full width. The two therefore measured "100%" over different distances, and
 * the handles drifted away from the coloured span — furthest apart in the
 * middle, which is exactly where they are read.
 */
.ar-slider input[type="range"] {
	position: absolute;
	inset-inline: 9px;
	top: 0;
	width: calc(100% - 18px);
	margin: 0;
	padding: 0;
	height: 30px;
	background: none;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.ar-slider input[type="range"]:focus {
	outline: none;
}

.ar-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ar-accent, var(--ar-primary, #1596a8));
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	cursor: grab;
	pointer-events: auto;
}

.ar-slider input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ar-accent, var(--ar-primary, #1596a8));
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	cursor: grab;
	pointer-events: auto;
}

.ar-slider-readout {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

/* Saved searches */

.ar-saved {
	position: relative;
}

.ar-saved-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 4px;
	background: #f0f2f5;
	font-size: 13px;
	font-weight: 600;
}

.ar-saved-menu {
	position: absolute;
	top: calc(100% + 6px);
	inset-inline-start: 0;
	z-index: 20;
	min-width: 250px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--ar-pill-border, #e3e6ec);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
}

.ar-saved-menu[hidden] {
	display: none;
}

.ar-saved-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.ar-saved-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid #f2f4f7;
}

.ar-saved-list a {
	text-decoration: none;
	flex: 1 1 auto;
}

.ar-saved-remove {
	border: 0;
	background: none;
	color: #c0392b;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.ar-saved-empty {
	margin: 0 0 8px;
	font-size: 14px;
	opacity: .7;
}

.ar-saved-add {
	width: 100%;
	padding: 8px;
	border: 1px dashed var(--ar-pill-border, #e3e6ec);
	border-radius: 8px;
	background: none;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.ar-saved-add:hover {
	border-color: var(--ar-accent, var(--ar-primary, #1596a8));
	color: var(--ar-accent, var(--ar-primary, #1596a8));
}

/* Sortable table headings */

.ar-table th a {
	text-decoration: none;
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ar-table th.is-sorted {
	color: var(--ar-accent, var(--ar-primary, #1596a8));
}

.ar-sort-arrow {
	font-size: 10px;
}

/*
 * ⚠️ Columns, not one long wrapping line.
 *
 * Eighteen tick-boxes on a flexible row came out as one line running the full
 * width of the screen and a second line with two items on it — nothing lined up,
 * and the eye had no column to run down. A grid of even columns makes it a list
 * that can be read rather than a sentence that has to be scanned.
 */
.ar-filter-flags {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px 16px;
	margin-top: 6px;
}

.ar-filter-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	cursor: pointer;
}

.ar-filter-amenities {
	margin-top: 18px;
}

.ar-filter-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #f0f2f5;
}

.ar-filter-close {
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	color: #6b7280;
	cursor: pointer;
}

.ar-filter-close:hover {
	color: var(--ar-accent);
}

.ar-shortcuts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.ar-chip {
	padding: 5px 14px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid #ccc;
	text-decoration: none;
	font-size: 14px;
}

.ar-chip:hover {
	border-color: var(--ar-primary, #1596a8);
}

/* ⚠️ A chosen chip must LOOK chosen. Without this, pressing "שבתות" reloaded the
   page and left no sign at all that anything had been asked for — the commonest
   way a filter is pressed twice and then given up on. */
.ar-chip.is-on {
	background: var(--ar-primary, #1596a8) !important;
	border-color: var(--ar-primary, #1596a8) !important;
	color: #fff !important;
	font-weight: 600;
}

.ar-chip.is-on::before {
	content: "\2713";
	margin-inline-end: 6px;
}

/* ---- Multi-select with a search line ---- */

/* Category and sub-category on one line, stacking on a phone. */
.ar-cat-pair { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-cat-pair select { flex: 1 1 160px; min-width: 0; }
.ar-cat-pair select[hidden] { display: none; }

.ar-multi { position: relative; padding: 0 !important; }

/* Standing on its own — the exchange board's "עיר" — it has to bring the pill
   with it. Inside the search bar .ar-sb-field already draws one, and a second
   border there would be a box inside a box. */
.ar-multi:not(.ar-sb-field) {
	border: 1px solid var(--ar-pill-border);
	border-radius: 6px;
	background: var(--ar-pill-bg);
}

.ar-multi:not(.ar-sb-field) .ar-multi-toggle { min-height: 42px; }

.ar-multi-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 0 14px;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--ar-dark, #0e2846) !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400 !important;
	text-align: start;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ar-multi.has-choice .ar-multi-toggle { font-weight: 600 !important; }
.ar-multi-caret { color: #9aa1ac; font-size: 11px; }

.ar-multi-panel {
	position: absolute;
	z-index: 30;
	inset-inline: 0;
	top: calc(100% + 6px);
	padding: 10px;
	background: #fff;
	border: 1px solid var(--ar-pill-border, #e3e6ec);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(14, 40, 70, .14);
	min-width: 240px;
}

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

.ar-multi-search {
	width: 100%;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--ar-pill-border, #e3e6ec) !important;
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
}

.ar-multi-tools { display: flex; gap: 8px; margin: 8px 0; }

.ar-multi-tools button {
	flex: 1;
	padding: 5px 8px;
	border: 1px solid var(--ar-pill-border, #e3e6ec) !important;
	border-radius: 7px;
	background: #fff !important;
	color: var(--ar-primary-dark, #107886) !important;
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}

/* ⚠️ Its own scroll, and a short one. Two hundred towns must not push the
   search box off the screen — the box is the whole point of the panel. */
.ar-multi-list {
	max-height: 240px;
	overflow-y: auto;
	display: grid;
	gap: 2px;
}

.ar-multi-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 6px;
	border-radius: 6px;
	font-size: 14.5px;
	cursor: pointer;
}

.ar-multi-opt:hover { background: var(--ar-primary-soft, #e8f4f6); }
.ar-multi-opt[hidden] { display: none; }

.ar-multi-empty {
	margin: 8px 2px 0;
	font-size: 13.5px;
	color: var(--ar-muted, #6b7684);
}

/* Results bar */

.ar-results-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.ar-results-tools {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ar-layouts {
	display: flex;
	border: 1px solid #ccc;
	border-radius: 6px;
	overflow: hidden;
}

/* Stated explicitly: the theme colours every link, and the inactive tabs came
   out pink beside the teal one. */
.ar-layouts .ar-layout-btn {
	padding: 7px 15px;
	text-decoration: none;
	font-size: 14px;
	background: #fff;
	color: var(--ar-dark, #0e2846);
	border: 0;
}

.ar-layouts .ar-layout-btn:hover {
	background: #f4f6f8;
	color: var(--ar-dark, #0e2846);
}

.ar-layouts .ar-layout-btn.is-active,
.ar-layouts .ar-layout-btn.is-active:hover {
	background: var(--ar-primary, #1596a8);
	color: #fff;
}

/* Grid */

.ar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}

/* A fixed number of cards per row, set in the admin. Still collapses on smaller
   screens so a five-across grid does not become five slivers on a phone. */
.ar-grid.ar-grid-fixed {
	grid-template-columns: repeat(var(--ar-grid-cols, 3), minmax(0, 1fr));
}

@media (max-width: 900px) {
	.ar-grid.ar-grid-fixed {
		grid-template-columns: repeat(min(var(--ar-grid-cols, 3), 3), minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.ar-grid.ar-grid-fixed {
		grid-template-columns: repeat(min(var(--ar-grid-cols, 3), 2), minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.ar-grid.ar-grid-fixed {
		grid-template-columns: 1fr;
	}
}

.ar-card {
	/*
	 * ⚠️ Positioned, so the things placed ON the card — the ★ מודגש badge, the
	 * "חדש" flag, the price — are measured from the card. Without it they hang off
	 * whatever positioned ancestor happens to be further up the page: the gold
	 * badge floated out of the grid entirely and appeared beside the search bar,
	 * belonging to nothing.
	 */
	position: relative;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.ar-card-img {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f2f2f2;
}

/*
 * ⚠️ Positioned, not just sized. `height: 100%` inside a box whose own height
 * comes from aspect-ratio is not a height the browser can resolve — it falls back
 * to the picture's real height, and the picture then makes the box as tall as it
 * likes. That is why one card with a photograph stood taller than the placeholder
 * cards beside it. Taken out of the flow, the picture cannot affect the box at
 * all: the frame is 4:3, always, and object-fit crops whatever goes in it.
 */
.ar-card-img img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * The "no picture" placeholder fills the same frame — but it is a flex box that
 * centres a drawn house over the word VILOT, not a picture. Given the img rules
 * above it collapsed into the corner: object-fit means nothing to a span, and the
 * centring was lost. Its own rules are restated here, at this specificity, so the
 * frame is filled AND the mark stays in the middle of it.
 */
.ar-card-img .ar-no-img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* ---- Featured listing: the gold donation highlight (★ מודגש) ---- */
.ar-feat-badge {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--ar-accent, #efb02c);
	color: #4a3708;
	font-size: 12px;
	font-weight: 800;
	border-radius: 20px;
	padding: 4px 12px;
	box-shadow: 0 2px 6px rgba(201, 146, 43, .35);
}
/*
 * A promoted listing wears the gold frame — but no LABEL.
 *
 * ⚠️ The two were removed together once and that was a misreading: it is the
 * word "מודגש" that had to go, not the highlight. The badge stated a commercial
 * fact about someone else's listing to a person who only wanted a flat; the
 * frame says "look here" without explaining itself, which is all it was ever for.
 */
.ar-card.is-featured,
.ar-list-item.is-featured {
	border: 2px solid var(--ar-accent, #efb02c);
	background: #fff9ec;
}

.ar-list-item { position: relative; }

/*
 * ⚠️ Two shades, alternating. Promoted listings lead the board, so they arrive
 * as a block — and one flat colour turned that block into a single orange slab
 * with no line between one listing and the next. Alternating a lighter and a
 * darker cream keeps every row readable as its own row while the group still
 * reads as a group.
 *
 * nth-of-type counts ALL rows including the hidden note and short-view rows that
 * follow each listing, so the tint would land on the wrong ones. Counting only
 * the featured rows themselves is what makes the stripe land right.
 */
.ar-table tr.is-featured > td { background: #fdf1d8; }

/* Every other one, marked in the template — see layout-table.php for why the
   counting cannot be done here. */
.ar-table tr.is-featured.is-alt > td { background: #fffaed; }

/* The owner's status panel at the head of the edit form. */
.ar-feat-box { background: #f3f5f7; border-radius: 10px; padding: 14px 16px; margin: 0 0 16px; }
.ar-feat-box.is-active { background: #fff7e6; border: 1px solid #f0d488; }
.ar-feat-on { margin: 0; font-size: 15px; }
.ar-feat-star { color: var(--ar-accent, #efb02c); }
.ar-feat-off { margin: 0 0 10px; color: var(--ar-muted, #6b7684); }
.ar-feat-renew {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ar-accent, #efb02c);
	color: #4a3708;
	border: 0;
	border-radius: 8px;
	padding: 10px 18px;
	font: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
}
.ar-feat-renew:hover { background: #e0a521; }
.ar-feat-renew[disabled] { opacity: .6; cursor: default; }
.ar-feat-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ar-muted, #6b7684); }
.ar-draft-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-draft-clear { background: none; border: 0; color: var(--ar-primary, #1596a8);
	text-decoration: underline; cursor: pointer; font: inherit; }

.ar-feat-strip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px;
	background: var(--ar-accent, #efb02c); color: #4a3708; font-weight: 800; font-size: 13px;
	border-radius: 20px; padding: 5px 14px; }

/* ---- Banner ads (פרסומת) — image only, slotted into the board ---- */
.ar-ad { position: relative; text-align: center; }
.ar-ad-img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px; }
/* Full-width banner: stretch to the whole row, but cap the height so a tall image
   cannot take over the page. */
.ar-ad-card .ar-ad-img,
.ar-ad-item .ar-ad-img { width: 100%; max-height: 280px; object-fit: contain; }
.ar-ad-tag { position: absolute; top: 8px; inset-inline-end: 8px; background: rgba(14, 40, 70, .8);
	color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.ar-ad-card { grid-column: 1 / -1; padding: 6px 0; }   /* full width across the grid */
.ar-ad-item { margin: 4px 0; }
.ar-table .ar-ad-row td { padding: 10px 8px; background: #fff8e6; text-align: center; }
.ar-table .ar-ad-row .ar-ad-img { max-height: 150px; width: auto; }
@media print { .ar-ad-row, .ar-ad-card, .ar-ad-item { display: none !important; } }

.ar-card-price {
	position: absolute;
	bottom: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	background: rgba(14, 40, 70, .9);
	color: #fff;
	padding: 5px 12px;
	border-radius: 5px;
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.35;
}

/* The Saturday rate lives inside the price tag rather than taking a chip of
   its own — it is secondary, and it was costing a whole line. */
.ar-card-price small {
	display: block;
	font-weight: 400;
	font-size: 11.5px;
	opacity: .85;
}

/* "New" — the one place the gold earns its keep. Two weeks, then it goes.

   line-height is restated because the image wrapper sets it to zero to close
   the gap beneath the picture, and a badge inheriting that collapses to a
   sliver poking over the top edge. */
.ar-card-new {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	background: var(--ar-accent, #efb02c);
	color: #3d2c05;
	padding: 4px 12px;
	border-radius: 5px;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: .3px;
}

/* Money reads left to right wherever it appears. */
/* .ar-money was removed here. It styled a <span> from an earlier round; that
   markup was dropped when prices had to travel through the CSV export and the
   print sheet, where a span is escaped and shown as source code. The rule
   stayed behind with nothing using it, and every round since has been tempted
   to "fix" the sign by reviving it. The order lives in AR_Display::money(),
   in the string itself. Verified unused before deleting: no match in any
   template, class or script. */

/* One thin line of facts, dots between. */
.ar-facts-line {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #46536a;
}

.ar-facts-line b {
	font-weight: 600;
}

.ar-facts-line i {
	font-style: normal;
	color: #c3c8d0;
	margin: 0 4px;
}

.ar-card-place {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--ar-muted, #7a8595);
}

.ar-card-place svg {
	flex-shrink: 0;
}

.ar-card-body {
	padding: 12px 14px;
	flex: 1 1 auto;
}

.ar-card-body h3 {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.35;
}

.ar-card-body h3 a {
	text-decoration: none;
}

/* Every value with its label beside it: "5 חדרים", never a bare "5". */
.ar-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13.5px;
}

.ar-facts li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	background: #f5f7f9;
	border-radius: 5px;
}

.ar-facts b {
	font-weight: 600;
}

.ar-facts span {
	color: var(--ar-muted, #7a8595);
}

/* ⚠️ The two personal controls sit TOGETHER, and "פרטים" is pushed to the far
   side on its own. Under space-between the three children were spread evenly, so
   the cross landed in the middle of the row — equidistant from the heart and
   from the link, and looking like it belonged to neither. */
.ar-card-foot {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-top: 1px solid #f0f0f0;
}

.ar-card-foot .ar-more {
	margin-inline-start: auto;
}

/* Category headings on the favourites page — what turns a mixed pile into a
   list you can work from. */
.ar-favorites .ar-fav-group {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 26px 0 12px;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--ar-primary, #1596a8);
	font-size: 18px;
	color: var(--ar-dark, #0e2846);
}

.ar-favorites .ar-fav-group:first-of-type {
	margin-top: 8px;
}

.ar-fav-group-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--ar-primary-soft, #e8f4f6);
	color: var(--ar-primary-dark, #107886);
	font-size: 13px;
	font-weight: 700;
}

/* ---------- The items board ---------- */

/*
 * "אבד לי" / "מצאתי" — the first thing to know on the lost-property board, and
 * the one thing a title cannot say for itself. Two colours, because the two are
 * opposite requests: one is asking, the other offering.
 */
.ar-item-flag {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	padding: 4px 12px;
	border-radius: 20px;
	background: #b45309;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	z-index: 2;
}

.ar-item-flag.is-found { background: #1e6b41; }

.ar-item-flag-big {
	display: inline-block;
	margin: 0 0 12px;
	padding: 6px 16px;
	border-radius: 20px;
	background: #b45309;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.ar-item-flag-big.is-found { background: #1e6b41; }

/* Given away: said in the place the price would be, so the eye finds it where
   it is already looking. */
.ar-card-price.ar-item-free {
	background: #1e6b41;
}

.ar-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 22px;
}

.ar-page {
	min-width: 38px;
	padding: 8px 12px;
	border: 1px solid var(--ar-pill-border, #e3e6ec);
	border-radius: 8px;
	background: #fff;
	color: var(--ar-dark, #0e2846);
	text-align: center;
	text-decoration: none;
}

.ar-page.is-current {
	background: var(--ar-primary, #1596a8);
	border-color: var(--ar-primary, #1596a8);
	color: #fff;
}

.ar-spec-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	margin: 0;
}

.ar-spec-grid dt { color: var(--ar-muted, #6b7684); }
.ar-spec-grid dd { margin: 0; font-weight: 600; }

/* The same pair in the list layout. */
.ar-marks {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* No photograph → the site's own placeholder, not the words "אין תמונה". A soft
   brand-coloured panel with the logo, so a listing without a picture reads as
   one that simply has none, not as a broken card. Shown only when no default
   image is configured; a chosen default image replaces it. */
.ar-no-img {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e8f4f6, #d3e8ec);
	color: var(--ar-primary-dark, #107886);
	font-size: 0; /* hide any stray text node from older markup */
}

.ar-no-img::before {
	content: "";
	width: 56px;
	height: 56px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23107886' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3l9 7.6'/%3E%3Cpath d='M5 9.8V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.8'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ar-no-img::after {
	content: "VILOT";
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ar-primary-dark, #107886);
	opacity: .7;
	margin-top: 6px;
}

/* List
   Each listing is a card of its own rather than a row divided by a hairline:
   the separation is unmistakable, and it speaks the same language as the grid.

   The old row also left a wide empty stripe down the middle — the details were
   stacked in a narrow column beside the picture while the space beyond went
   unused. The details now spread across the width. */

.ar-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ar-list-item {
	display: flex;
	gap: 18px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 8px;
	align-items: stretch;
}

/* display:block, or the browser leaves room beneath for a line of text that
   is not there — which showed up as a grey gap under every list image. */
.ar-list-img {
	position: relative;
	display: block;
	flex: 0 0 180px;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
	background: #f2f2f2;
	line-height: 0;
}

.ar-list-price {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--ar-dark, #0e2846);
	white-space: nowrap;
}

.ar-list-price small {
	font-size: 13px;
	font-weight: 400;
	color: var(--ar-muted, #7a8595);
}

.ar-list-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ar-list-item {
	align-items: flex-start;
}

.ar-list-body {
	flex: 1 1 auto;
	min-width: 0;
}

.ar-list-body h3 {
	margin: 0 0 8px;
}

/* Across the width, not down a narrow column. */
.ar-list-body .ar-facts {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
}

.ar-fact-label {
	opacity: .7;
}

.ar-list-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	flex-shrink: 0;
}

/* Table */

/* Table.
   Full grid lines, quiet headings, alternating rows — the look of the boards
   already on the site, so the two read as one system. */

/* No frame around the table: the grid lines are the frame, as on the boards
   already running. */
.ar-table-wrap {
	overflow-x: auto;
}

/* ⚠️ table-layout: fixed — the whole reason the live board fits without a
   sideways scroll. The browser divides the width by the column widths declared
   below, instead of stretching columns to fit their longest cell. The wide
   text columns (מאפיינים, הערות) are set to auto and share whatever is left,
   wrapping to a line or two rather than demanding room and pushing the table
   off the screen. This mirrors the old plugin exactly. */
.ar-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 13.5px;
	background: #fff;
}

/* Fixed widths, read off the live board. Numbers stay tight; the two wordy
   columns take what remains. */
.ar-table .ar-col-fav      { width: 44px; }
.ar-table .ar-col-dis      { width: 38px; }
.ar-table .ar-col-note     { width: 40px; }
.ar-table .ar-col-img      { width: 64px; }
.ar-table .ar-col-date     { width: 80px; }  /* עודכן */
/* ⚠️ Wraps, never nowrap. With table-layout:fixed a cell that refuses to wrap
   does not widen its column — it spills out of it and prints straight over the
   next one, which is how "קריית יערים טלז סטון" ended up written across the
   street column. A two-line city name is the correct answer here. */
.ar-table .ar-col-city     { width: 104px; overflow-wrap: break-word; word-break: break-word; }
.ar-table .ar-col-address  { width: 120px; text-align: right; overflow-wrap: break-word; word-break: break-word; }
.ar-table .ar-col-rooms    { width: 66px; }
.ar-table .ar-col-beds     { width: 66px; }
.ar-table .ar-col-rental_periods { width: 100px; }
.ar-table .ar-col-price    { width: 110px; }
.ar-table .ar-col-more     { width: 74px; }

/* The two that share the rest, wrapping instead of demanding a width. */
.ar-table .ar-col-amenities,
.ar-table .ar-col-notes,
.ar-table .ar-col-prose {
	width: auto;
	min-width: 150px;
	text-align: right;
	white-space: normal;
	word-break: break-word;
}

.ar-table th {
	position: sticky;
	top: 0;
	background: #fff;
	text-align: center;
	padding: 12px 10px;
	border: 1px solid var(--ar-line, #e6e9ef);
	border-top: 0;
	font-weight: 600;
	color: var(--ar-dark, #0e2846);
	/* Wraps like the cells below it: a field renamed to something long in the
	   field manager would otherwise print over the next heading. */
	overflow-wrap: break-word;
	z-index: 1;
}

.ar-table td {
	padding: 12px 10px;
	border: 1px solid var(--ar-line, #e6e9ef);
	text-align: center;
	vertical-align: middle;
	color: var(--ar-dark, #0e2846);
}

/* Plain white rows. The cream on the existing boards marks a saved listing,
   not every other row — striping with it would make half the board look
   saved. */
.ar-table tbody tr td {
	background: #fff;
}

/* Links inside the table follow the plugin's colour, not the theme's — the
   theme paints every link its own shade, and the titles came out pink. */
.ar-table a,
.ar-table th a {
	color: var(--ar-primary, #1596a8);
	text-decoration: none;
}

.ar-table a:hover {
	text-decoration: underline;
}

.ar-table .ar-col-title {
	text-align: start;
	min-width: 150px;
	font-weight: 600;
}

.ar-table .ar-col-more a {
	white-space: nowrap;
	font-weight: 600;
}

.ar-table .ar-col-fav,
.ar-table .ar-col-dis,
.ar-table .ar-col-note {
	width: 46px;
	padding: 6px;
	text-align: center;
}

.ar-table .ar-col-dis { width: 40px; }

.ar-table .ar-col-img {
	width: 66px;
	padding: 6px;
}

.ar-table .ar-col-img img {
	width: 54px;
	height: 54px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

/* The table thumbnail is tiny — too small for the "דירות להחלפה" line, so just
   the logo, smaller. */
.ar-no-img-small {
	width: 54px;
	height: 54px;
	border-radius: 6px;
	gap: 0;
}

.ar-no-img-small::before { width: 28px; height: 28px; }
.ar-no-img-small::after { display: none; }

/* Note pencil */

/* A bare icon, no box — matching the boards already on the site. */
.ar-table .ar-note-btn {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #b6bcc6;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ar-table .ar-note-btn:hover {
	color: var(--ar-primary, #1596a8);
	background: none;
	border: 0;
}

/* Coloured in when a note exists, so the column is scannable at a glance. */
.ar-table .ar-note-btn.has-note {
	color: var(--ar-primary, #1596a8);
}

.ar-note-row td {
	text-align: start;
	background: #fbfcfd;
}

.ar-note-row .ar-note-input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 8px;
	font: inherit;
	font-size: 14.5px;
	resize: vertical;
}

.ar-note-row .ar-note-status {
	display: inline-block;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--ar-muted, #7a8595);
}

/* Favourites button */

/*
 * ⚠️ Grey when empty, teal when saved. It used to be red in both states, which
 * made even an unsaved heart read as a pink smudge on every card — and put a
 * colour in the palette that appears nowhere else on the site. Teal is what the
 * popup already used, so saved now looks the same wherever it is shown.
 *
 * Bigger, too: at 20px against a card this size the mark was easy to miss, and
 * the padding gives a finger something to land on.
 */
/*
 * The heart, matching the board people already know: one filled shape whose
 * COLOUR carries the state — grey when not chosen, gold when chosen. Red was
 * wrong twice over: it marked the empty state as loudly as the full one, and it
 * put a colour in the palette that appears nowhere else on the site.
 */
.ar-fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-size: 27px;
	line-height: 1;
	color: #cccccc;
}

.ar-fav .ar-fav-icon {
	display: block;
	transition: transform .15s;
}

.ar-fav:hover { color: #d4ae1a; }
.ar-fav:hover .ar-fav-icon { transform: scale(1.15); }

.ar-fav.is-active { color: #d4ae1a; }

/* The press itself: a quick swell and back, so the tap is felt as well as seen. */
.ar-fav.is-pop .ar-fav-icon { animation: ar-heartpop .25s ease; }

@keyframes ar-heartpop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.5); }
	100% { transform: scale(1); }
}

/* Single listing */

.ar-single {
	--ar-line: #e6e9ef;
	--ar-muted: #7a8595;
	--ar-ink: var(--ar-dark, #0e2846);
}

.ar-single-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.ar-breadcrumb {
	margin: 0;
	font-size: 14px;
	color: var(--ar-muted);
}

.ar-single-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.ar-single-head h1 {
	margin: 0;
	font-size: 30px;
	line-height: 1.25;
}

/* The address, given its own weight — it was getting lost between the title and
   the picture. Street in strong, a coloured pin, a touch larger. */
.ar-single-addr {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 8px 0 0;
	font-size: 16px;
	color: var(--ar-dark, #0e2846);
}

.ar-single-addr svg { color: var(--ar-primary, #1596a8); flex: none; }
.ar-single-addr strong { font-weight: 700; }

/* ⭐ The key-facts strip on the single listing — rooms, beds, mattresses,
   floor, read at a glance.

   ⚠️ Named ar-keyfacts, NOT ar-facts. The list cards have their own long-standing
   .ar-facts (a wrapped line of spec chips), and giving this the same name laid a
   4-column grid over them and broke every card. Different thing, different name. */
.ar-keyfacts {
	display: grid;
	/* As many columns as there are facts, not a fixed four — an empty box for a
	   missing one (no mattresses count) left a blank grey cell on the end. The
	   count is set inline on the element as --ar-facts. */
	grid-template-columns: repeat(var(--ar-facts, 4), 1fr);
	gap: 1px;
	margin: 18px 0 0;
	background: var(--ar-line, #e6e9ef);
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 12px;
	overflow: hidden;
}

.ar-keyfact {
	background: #fff;
	padding: 15px 8px;
	text-align: center;
}

.ar-keyfact svg { width: 23px; height: 23px; color: var(--ar-primary, #1596a8); }
.ar-keyfact-v { display: block; font-size: 20px; font-weight: 800; margin-top: 3px; }
.ar-keyfact-l { display: block; font-size: 12px; color: var(--ar-muted, #6b7684); }

@media (max-width: 560px) {
	.ar-keyfacts { grid-template-columns: repeat(min(var(--ar-facts, 4), 2), 1fr); }
}

/* "מיועד ל־" — when the flat is free. Its own quiet row of chips, not mixed in
   with the size facts. */
.ar-periods-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	font-size: 14px;
}

.ar-periods-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ar-muted, #6b7684);
}

.ar-periods-label svg { color: var(--ar-primary, #1596a8); }

.ar-period-chip {
	background: var(--ar-primary-soft, #e8f4f6);
	color: var(--ar-primary-dark, #107886);
	border-radius: 20px;
	padding: 3px 12px;
	font-weight: 600;
}

/* The two actions beside the title. A bare heart and a plain "הדפסה" link
   looked like leftovers; as matching pills they read as a pair of controls. */
.ar-single-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.ar-single .ar-action-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 8px;
	background: #fff;
	color: var(--ar-dark, #0e2846);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.ar-single .ar-action-pill:hover {
	border-color: var(--ar-primary, #1596a8);
	color: var(--ar-primary, #1596a8);
}

/* The favourite IS the pill now — button and label in one control, so the whole
   thing answers a click rather than the heart alone. */
.ar-single .ar-action-fav.ar-fav {
	width: auto;
	height: 40px;
	font-family: inherit;
}

.ar-single .ar-action-fav .ar-fav-icon {
	font-size: 18px;
	line-height: 1;
}

.ar-single .ar-action-fav:hover {
	border-color: var(--ar-primary, #1596a8);
	color: var(--ar-primary, #1596a8);
	background: #fff;
}

.ar-single .ar-action-fav.is-active .ar-fav-icon {
	color: var(--ar-primary, #1596a8);
}

/* Text inside the button: never its own click target, so a press always reaches
   the button underneath it. */
.ar-action-label,
.ar-fav-label {
	pointer-events: none;
}

@media (max-width: 600px) {
	/* On a phone the labels go and the icons stay. */
	.ar-single .ar-action-pill {
		padding: 0 12px;
	}

	.ar-single .ar-action-label,
	.ar-single .ar-fav-label,
	.ar-single .ar-action-pill span:last-child:not(.ar-fav) {
		display: none;
	}
}

/* ---------- The gallery ----------
   The thumbnails ride on the picture.

   Beside it, the column's height was its contents while the picture was a fixed
   420px. The arithmetic worked for exactly one case — five or more pictures,
   where four thumbnails plus the two stepping arrows came to 418 against the
   420 — and that is the case the old note here worked out. Every other count
   fell short and left white space under the column: 350 with four pictures,
   260 with three, which is 160px of nothing where photographs should be.

   A rule that holds only at one value of a number the owner chooses is not a
   rule. On the picture there is no second height to agree with, so no count can
   break it, and the picture takes the full width instead of sharing it. */

/* Gallery: the main picture, with the rest of the pictures beside it in a
   column — visible without a click, so it is plain there is more to see. The
   thumbnails moved off the picture (where they sat on a fade) and out to the
   side. On a phone the column drops under the picture as a scrolling row. */
.ar-gallery-view.has-thumbs {
	display: grid;
	grid-template-columns: 1fr 132px;
	gap: 8px;
	align-items: stretch;
}

/* The whole side column: a scroll arrow, the strip, a scroll arrow. Capped to the
   main picture's height (see .ar-gallery-main img) so a long strip scrolls inside
   it instead of stretching the gallery — thirteen thumbnails were ~780px of content
   against a 420px picture, and a grid row grows to its tallest cell. */
.ar-gallery-thumbs-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 500px;
	min-width: 0;
}

.ar-gallery-thumbs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	scrollbar-width: none;
	min-width: 0;
	min-height: 0;
	flex: 1 1 auto;
}

.ar-gallery-thumbs::-webkit-scrollbar { display: none; }

/* Up / down scroll arrows, shown by the script only when the strip overflows. */
.ar-thumbs-nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	padding: 0;
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 8px;
	background: #fff;
	color: #444;
	cursor: pointer;
}

.ar-thumbs-nav[hidden] { display: none; }

.ar-thumbs-nav:hover { background: #f3f5f8; color: var(--ar-primary, #1596a8); }

.ar-thumbs-nav:disabled { opacity: .35; cursor: default; }

.ar-thumb-btn {
	/* A fixed, larger thumbnail — the flexible one shrank to fit however many
	   there were, so thirteen pictures came out as a cramped ladder. Fixed at 92px
	   the strip shows about five at a time and scrolls (with the arrows) for the
	   rest. In the column the basis is the height; in the phone's row it is the
	   width — the same 92 works for both. */
	flex: 0 0 92px;
	box-sizing: border-box;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: #eef1f5;
	line-height: 0;
	cursor: pointer;
}

.ar-thumb-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ⚠️ No borrowed frame from the theme, whatever element or property it used.
   The theme paints a pink frame somewhere on the gallery (a border, an outline or
   a shadow, on the picture, its wrapper or the buttons); rather than chase which,
   every candidate is cleared across the whole gallery and its children. The only
   marker left is our own teal ring on the active thumbnail, reasserted below. */
.ar-gallery-view,
.ar-gallery-view *,
.ar-lightbox,
.ar-lightbox * {
	border-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Reassert the one border we do want: the teal ring on the active thumbnail. */
.ar-gallery-view .ar-thumb-btn.is-active {
	border-color: var(--ar-primary, #1596a8) !important;
}

.ar-thumb-btn.is-active {
	border-color: var(--ar-primary, #1596a8);
}

.ar-gallery-main {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: #f3f5f8;
}

/* 16:9 with a ceiling, not a fixed 420 — the taller frame swallowed the screen
   on a wide monitor. */
.ar-gallery-main img {
	width: 100%;
	/* A definite height, not aspect-ratio + max-height. The picture has to be the
	   one thing that sets the gallery's height so the thumbnail strip beside it can
	   be capped to match; an intrinsic (aspect-ratio) height left the row free to
	   grow to the taller thumbnail column instead. 420 is the same ceiling as
	   before — kept in step with .ar-gallery-thumbs above. */
	height: 500px;
	object-fit: cover;
	display: block;
}

/* The counter sits back on the picture, one corner, since the shelf it used to
   live in is gone. */
.ar-gallery-view .ar-gal-counter {
	position: absolute;
	bottom: 12px;
	inset-inline-start: 14px;
	flex: none;
	padding: 4px 11px;
	border-radius: 20px;
	background: rgba(14, 40, 70, .72);
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.ar-gallery-view.has-thumbs { grid-template-columns: 1fr; }
	.ar-gallery-thumbs-col { max-height: none; }
	.ar-gallery-thumbs { flex-direction: row; height: 70px; overflow-x: auto; overflow-y: hidden; }
	.ar-thumb-btn { flex: 0 0 92px; min-height: 0; }
	/* The strip scrolls sideways on a phone; the up/down arrows do not apply. */
	.ar-thumbs-nav { display: none !important; }
}

/* Arrows sit on the image and appear only when there is more than one. */
.ar-gal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--ar-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.ar-gal-prev { inset-inline-start: 12px; }
.ar-gal-next { inset-inline-end: 12px; }

.ar-gal-nav:hover {
	background: #fff;
}

/* "2 / 9" — isolated and left to right, or Hebrew reorders it into "9 / 2".
   The same applies anywhere two numbers sit either side of a separator. */
.ar-gal-counter,
.ar-lb-counter,
.ar-slider-readout {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Map and similar listings */

/* A fixed height rather than a ratio: at 16:8 a wide screen produced a map
   seven hundred pixels tall. A map is a glance, not a feature. */
.ar-map {
	position: relative;
	height: 320px;
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 8px;
	overflow: hidden;
	background: #eef1f5;
}

.ar-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 600px) {
	.ar-map {
		height: 220px;
	}
}

/* The exchange board: two questions, side by side, always open.

   Not a filter panel. On that board these two ARE the search — one asks what
   the visitor wants, the other who wants what the visitor has — and putting
   them behind a toggle is why nobody found them. */
/* The two questions come FIRST on this board — above the search row, not under
   it. They are the search; the row beneath is the rest of the tooling.
   Ordered rather than moved in the markup, so the form's HTML stays in the one
   order that makes sense when read without styles. */
.ar-search {
	display: flex;
	flex-direction: column;
}

.ar-swap {
	order: -1;
	display: flex;
	gap: 14px;
	align-items: stretch;
	margin-bottom: 14px;
}

.ar-swap-side {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	border: 1px solid #cfe6ea;
	border-radius: 8px;
	padding: 20px 16px 12px;
	background: #f4fafb;
}

/* The reversed half in its own colour — the clearest way to say "this one asks
   something else", and what the old board did. */
.ar-swap-side.is-swap {
	border-color: #dcd2ee;
	background: #f8f5fd;
}

/* The title sits ON the border, like a fieldset legend. */
.ar-swap-title {
	position: absolute;
	top: -11px;
	inset-inline-start: 14px;
	padding: 2px 12px;
	border-radius: 20px;
	background: var(--ar-primary, #1596a8);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.ar-swap-side.is-swap .ar-swap-title {
	background: #7b5ea7;
}

.ar-swap-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.ar-swap-row .ar-filter-item {
	flex: 1 1 110px;
	min-width: 0;
}

/* The place gets the room the numbers do not need — city names are long,
   "4+" is not. */
.ar-swap-row .ar-filter-item.is-wide {
	flex: 2 1 170px;
}

@media (max-width: 700px) {
	.ar-swap {
		flex-direction: column;
	}
}

/* The short view, opened from a table row. */

/* The store row holds the short view until it is asked for. Hidden with a rule
   and not only with the attribute: the table styles set a display on every row,
   and a display beats `hidden` — which would print the whole short view under
   every line of the table. Stated for the collapsed phone layout too. */
.ar-pop-store,
.ar-pop-store td {
	display: none !important;
}

.ar-row-pop {
	cursor: pointer;
}

.ar-row-pop:hover {
	background: var(--ar-primary-soft, #e8f4f6);
}

.ar-pop {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ar-pop-back {
	position: absolute;
	inset: 0;
	background: rgba(14, 40, 70, .55);
}

.ar-pop-card {
	position: relative;
	width: 100%;
	max-width: 540px;
	max-height: 88vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 14px;
	padding: 18px 22px 0; /* no bottom padding: the CTA bar fills to the edge */
	box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

/* Top-left in a right-to-left page: the far end of the line, where a reader
   finishes rather than starts. It was on the same side the title begins on,
   and sat on top of the first word. The title's spare room is on that side to
   match. Stated in full, or the theme paints a box round it. */
.ar-pop .ar-pop-x,
.ar-pop-x {
	position: absolute;
	inset-inline-end: 10px;
	top: 8px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	/* ⚠️ Forced, OUTLINE INCLUDED. The theme paints this control pink and rings
	   it; border:0 alone left a hard dark circle drawn by an outline, which read
	   as a heavy button beside the soft heart next to it. A plain grey circle, as
	   on the live board. */
	/* ⚠️ The same ring as the heart beside it. A filled grey disc next to a
	   white outlined circle read as two unrelated controls sitting together by
	   accident; they are a pair and must look like one. */
	border: 1.5px solid #dfe3e8 !important;
	outline: 0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: 17px;
	line-height: 1;
	color: #4a5568 !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ar-pop .ar-pop-x:hover {
	border-color: #a8b0ba !important;
	background: #fff !important;
	color: var(--ar-dark, #0e2846) !important;
}

/* Holds the page still behind the dialog — otherwise a phone scrolls the list
   under the finger while the dialog is open. */
body.ar-pop-locked {
	overflow: hidden;
}

/* ---- The rich popup, matching the live board ---- */

.ar-pop-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding-inline-end: 34px; /* clear of the dialog's own X */
}

.ar-pop-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	flex: 1;
}

/* ⚠️ First in the row, so the heart sits at the right edge beside the title and
   the X keeps the left corner to itself. Sharing the left corner, two grey rings
   of the same size read as a pair of related controls — and the one that saves a
   flat looked like a second way to close the panel. */
.ar-pop-fav { flex: none; order: -1; }
/* ⚠️ Forced past the theme's pink box to a quiet outline, like the X. */
/* ⚠️ The same ringed heart as everywhere else — a circle, not a rounded box.
   Beside the round close button it read as a second, differently-shaped control,
   and its grey-then-teal colouring belonged to nothing else on the site.
   The resting state is a soft gold rather than grey: the distance from the X is
   what stops the confusion, and colour holds even when they end up close. */
.ar-pop-fav .ar-fav {
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	border: 1.5px solid #ecdfb8 !important;
	border-radius: 50% !important;
	background: #fffdf6 !important;
	box-shadow: none !important;
	color: #c9ae5a !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ar-pop-fav .ar-fav .ar-fav-icon { font-size: 19px; line-height: 1; }

.ar-pop-fav .ar-fav:hover {
	border-color: #e6d49a !important;
	color: #d4ae1a !important;
}

.ar-pop-fav .ar-fav.is-active,
.ar-pop-fav .ar-fav[aria-pressed="true"] {
	border-color: #e2c469 !important;
	background: #fffdf3 !important;
	color: #d4ae1a !important;
}

/* A soft divider between every part, so the popup reads as sections rather than
   a wall — but tight. The panel has to hold price, facts, contact, extras and a
   description without becoming a page of its own to scroll. */
.ar-pop-top,
.ar-pop-facts,
.ar-pop-contact,
.ar-pop-sec {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--ar-line, #e6e9ef);
}

/* The numbers block: it was the loosest thing in the panel and earned the most
   room for the least said. */
.ar-pop-facts .ar-keyfacts { margin-top: 6px; }
.ar-pop-facts .ar-keyfact { padding: 8px 4px; }
.ar-pop .ar-contact h2 { margin: 0 0 6px; font-size: 15px; }
.ar-pop .ar-contact-row { gap: 6px; }
.ar-pop .ar-contact .ar-btn,
.ar-pop .ar-contact-phone { min-height: 42px; }

.ar-pop-lbl {
	font-size: 13px;
	color: var(--ar-muted, #6b7684);
	margin-bottom: 6px;
}

/* ⚠️ One line — label, figure, note. The figure was 32px on a line of its own
   under a "מחיר" caption, with the periods stacked in a column beside it: four
   lines of panel height to carry one sentence, in a panel whose whole purpose is
   to be shorter than the page it stands in for. */
.ar-pop-top { display: block; }

.ar-pop-price-line {
	line-height: 1.5;
	/* Nothing floats here — the parts are inline and keep their written order,
	   so the comma before the note stays welded to the note. */
}

.ar-pop-price-lbl { font-size: 13px; color: var(--ar-muted, #6b7684); }

.ar-pop-price {
	font-size: 20px;
	font-weight: 800;
	color: var(--ar-primary, #1596a8);
}

.ar-pop-price small { font-size: 15px; font-weight: 500; color: var(--ar-muted, #6b7684); }
.ar-pop-price-note { font-size: 13px; color: var(--ar-muted, #6b7684); }

/* The qualifier, at the foot: one grey sentence, not a titled section. */
.ar-pop-rentfor { font-size: 13px; color: var(--ar-muted, #6b7684); line-height: 1.6; }

.ar-pop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
}

.ar-pop-chips-start { justify-content: flex-start; }

.ar-pop-chip {
	background: var(--ar-soft, #f5f7f9);
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 20px;
	padding: 5px 13px;
	font-size: 13.5px;
	color: var(--ar-dark, #0e2846);
}

/* ⭐ The facts strip — big numbers, three cells in a card of its own.
   ⚠️ The section rule above gives every block a border-top to divide it from
   what came before. Here the card IS the division, so that line is dropped —
   but by cancelling border-top outright the card lost its own top edge and sat
   there as a frame with one side missing. padding-top is what the section rule
   set, and it is the only thing that needs undoing. */
.ar-pop-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 14px;
	background: #fbfcfd;
	overflow: hidden;
	padding-top: 0;
	margin-top: 13px;
}

/* ⚠️ And nothing draws a line straight after it either: the card's own bottom
   edge and the next section's border-top landed six pixels apart and read as a
   double rule under the numbers. */
.ar-pop-facts + * {
	border-top: 0;
	padding-top: 0;
	margin-top: 13px;
}

.ar-pop-fact {
	text-align: center;
	padding: 11px 8px;
	border-inline-start: 1px solid var(--ar-line, #e6e9ef);
}

.ar-pop-fact:last-child { border-inline-start: 0; }
.ar-pop-fact-v { font-size: 22px; font-weight: 800; }
.ar-pop-fact-l { font-size: 13px; color: var(--ar-muted, #6b7684); margin-top: 2px; }
.ar-pop-fact-sub { font-size: 11px; color: var(--ar-muted, #6b7684); }

.ar-pop-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-line;
	color: #2a3b52;
}

.ar-pop-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px solid var(--ar-line, #e6e9ef);
}

.ar-pop-id { font-size: 12px; color: var(--ar-muted, #6b7684); margin-inline-start: auto; }
.ar-pop-oldid { margin-inline-start: 6px; opacity: .75; }

/* The full-page link, a full-width bar at the very bottom of the card. */
.ar-pop-cta {
	display: block;
	/* ⚠️ The negative margin must equal the card's side padding (22px). When they
	   differed the bar stuck out a couple of pixels and the whole popup grew a
	   horizontal scrollbar. */
	margin: 16px -22px 0; /* bleed to the card's side edges; card has no bottom padding */
	padding: 15px;
	background: var(--ar-primary, #1596a8);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	position: sticky;
	bottom: 0;
}

.ar-pop-cta:hover { background: var(--ar-primary-dark, #107886); }

/* ---- The embedded components (contact, note) inside the popup are dressed for
   the sidebar; here they are made compact so the popup stays a preview. ---- */

/* Contact: in the preview it is a single compact row, not the full-width
   stacked buttons of the sidebar. Those buttons — 50px tall, one per line, with
   the big phone above — were most of the height that made the popup scroll. Here
   the heading is a quiet label on its own line, and the phone and the two
   buttons sit together on the line beneath, wrapping only if they must. */
.ar-pop .ar-contact {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}
.ar-pop .ar-contact h2 {
	width: 100%;
	font-size: 13px;
	font-weight: 400;
	color: var(--ar-muted, #6b7684);
	margin: 0;
}
/* The phone on the right, the buttons pushed to the far end of the row. */
.ar-pop .ar-contact-phone {
	margin: 0;
	margin-inline-end: auto;
	font-size: 17px;
	text-align: start;
}
.ar-pop .ar-contact .ar-wa-btn,
.ar-pop .ar-contact .ar-mail-btn {
	width: auto;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0 15px;
	font-size: 14px;
}
.ar-pop .ar-contact .ar-wa-btn svg,
.ar-pop .ar-contact .ar-mail-btn svg { width: 18px; height: 18px; }
.ar-pop .ar-contact-result { width: 100%; margin: 0; }
.ar-pop .ar-contact > .ar-note { display: none; }

/* Like the live board: phone and mail, no WhatsApp button; the phone number is a
   button of its own beside "שלח מייל". */
.ar-pop .ar-contact .ar-wa-btn { display: none !important; }
/* Phone and mail share the row and fill it, so no empty gap is left where the
   WhatsApp button used to be. */
.ar-pop .ar-contact-phone { margin: 0; order: 2; flex: 1; }
.ar-pop .ar-contact-phone a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 40px;
	border: 1.5px solid var(--ar-primary, #1596a8);
	border-radius: 8px;
	padding: 0 15px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ar-primary, #1596a8);
	text-decoration: none;
}
.ar-pop .ar-contact-phone a:hover { background: var(--ar-primary, #1596a8); color: #fff; }
.ar-pop .ar-contact .ar-mail-btn { flex: 1; order: 3; }

/* ⚠️ All three on one line. "שליחה לחבר" carried a 150px basis while the other
   two started from zero, and none of them was allowed to shrink below its own
   text — flex items default to min-width:auto. The sum came out a few pixels
   over the panel and the third button dropped to a line of its own, which is
   exactly the "it looks like the main action" problem the order:99 was added to
   solve. Equal shares plus permission to shrink, and the row holds.
   Below 460px it may wrap again on purpose: three buttons squeezed across a
   phone are unreadable, and a second line is the better failure. */
.ar-pop .ar-contact-row .ar-contact-phone,
.ar-pop .ar-contact-row .ar-mail-btn,
.ar-pop .ar-contact-row .ar-share-btn {
	/* ⚠️ Basis auto, NOT zero: the button is never narrower than its own words.
	   With a zero basis the three split the row into equal thirds regardless of
	   what they say, and "055-948-9556" and "שליחה לחבר" each broke across two
	   lines inside their own frame. They share the LEFTOVER space instead, and
	   if there is none the row wraps — a second line is the honest failure, a
	   two-line button is not. */
	flex: 1 1 auto;
	white-space: nowrap;
}

.ar-pop .ar-contact-row .ar-mail-btn,
.ar-pop .ar-contact-row .ar-share-btn { padding-inline: 10px; }

/* The number was 17px beside two 14px labels — half again as wide as it needed
   to be, and it was what pushed the row over the edge. */
.ar-pop .ar-contact-row .ar-contact-phone,
.ar-pop .ar-contact-row .ar-contact-phone a { font-size: 14px; }

@media (max-width: 460px) {
	.ar-pop .ar-contact-row .ar-contact-phone,
	.ar-pop .ar-contact-row .ar-mail-btn,
	.ar-pop .ar-contact-row .ar-share-btn { flex: 1 1 150px; }
}

/* The description is a preview, not the whole thing — clamped to a few lines,
   with the rest on the full page. */
.ar-pop .ar-pop-text {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The note box loses its frame and heading weight — it is a small aside at the
   foot, not a section of its own. */
.ar-pop .ar-pop-foot { align-items: flex-start; }
.ar-pop .ar-note-box {
	flex: 1;
	padding: 0;
	border: 0;
	background: none;
}
/* Minimal, like the live board: only the small "ההערה שלי" line shows; the
   editor — textarea, privacy note, status — opens on click. */
.ar-pop .ar-note-box h2 {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--ar-primary, #1596a8);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ar-pop .ar-note-box .ar-note-privacy,
.ar-pop .ar-note-box .ar-note-input,
.ar-pop .ar-note-box .ar-note-status,
.ar-pop .ar-note-box .ar-note-hint,
.ar-pop .ar-note-box .description { display: none; }
.ar-pop .ar-note-box.is-open .ar-note-input { display: block; margin-top: 8px; min-height: 40px; }
.ar-pop .ar-note-box.is-open .ar-note-status { display: block; }

/* Minimal note anywhere it appears (popup, listing page): only the small
   heading shows; the editor opens on click. The heading is the trigger. */
.ar-note-collapsible h2 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ar-primary, #1596a8);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ar-note-collapsible .ar-note-privacy,
.ar-note-collapsible .ar-note-input,
.ar-note-collapsible .ar-note-status { display: none; }
.ar-note-collapsible.is-open .ar-note-input { display: block; margin-top: 8px; }
.ar-note-collapsible.is-open .ar-note-status { display: block; }
.ar-note-collapsible.is-open .ar-note-privacy { display: inline; }

@media (max-width: 560px) {
	.ar-pop { padding: 0; }
	.ar-pop-card { max-width: none; max-height: 100vh; border-radius: 0; }
	.ar-pop-cta { margin: 20px -20px 0; }
}

/* The description column: three lines, then "עוד". */
.ar-col-prose {
	min-width: 190px;
	max-width: 280px;
	white-space: normal;
	line-height: 1.5;
}

.ar-col-prose .ar-clip {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13.5px;
}

.ar-col-prose.is-open .ar-clip {
	-webkit-line-clamp: unset;
	overflow: visible;
}

.ar-table .ar-clip-more {
	display: inline-block;
	margin-top: 2px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ar-primary, #1596a8);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* A second line inside a cell — the neighbourhood under its street. */
.ar-cell-sub {
	display: block;
	font-size: 12.5px;
	color: var(--ar-muted, #6b7684);
}

.ar-filter-clear {
	margin-inline-end: auto;
	font-size: 14px;
	color: #b32d2e;
	text-decoration: none;
}

.ar-filter-hint {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--ar-muted, #6b7684);
}

/* Printing the favourites. */

.ar-fav-print {
	margin-top: 14px;
	font-size: 14px;
	color: var(--ar-muted, #6b7684);
}

.ar-fav-print a {
	font-weight: 600;
}

.ar-fav-print .ar-print-cap {
	font-size: 13px;
}

/* Reporting a listing.

   Quiet on purpose. It sits at the foot of the page and reads as a small link,
   not a button — a prominent "report" control beside the price suggests that
   something is expected to be wrong with the listing. */

.ar-report {
	margin-top: 10px;
	text-align: center;
}

.ar-report .ar-report-open {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 12px;
	color: var(--ar-muted, #6b7684);
	text-decoration: underline;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ar-report .ar-report-open:hover,
.ar-report .ar-report-open:focus {
	color: var(--ar-dark, #0e2846);
	background: none;
}

/* Opens inside the contact panel, so it is sized for a narrow column rather
   than for the width of the page. */
.ar-report-form {
	margin-top: 10px;
	padding: 12px;
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 8px;
	background: #fcfdfe;
	text-align: right;
}

.ar-report-intro {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--ar-muted, #6b7684);
}

.ar-report-row {
	display: block;
	margin-bottom: 10px;
}

.ar-report-row > span {
	display: block;
	margin-bottom: 3px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ar-dark, #0e2846);
}

.ar-report-row select,
.ar-report-row textarea,
.ar-report-row input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	padding: 7px 9px;
	border: 1px solid var(--ar-line, #d7dde5);
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	background: #fff;
}

/* The decoy field. Kept out of sight without display:none, which some robots
   check for. */
.ar-report-hp {
	position: absolute;
	right: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.ar-report .ar-report-send {
	width: 100%;
	padding: 9px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--ar-primary, #1596a8);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.ar-report .ar-report-send[disabled] {
	opacity: .6;
	cursor: default;
}

.ar-report-result {
	margin: 10px 0 0;
	font-size: 14px;
}

.ar-report-result.is-error {
	color: #b32d2e;
}

.ar-report-result.is-ok {
	color: #1a7f37;
	font-weight: 600;
}

/* Private note */

.ar-note-box {
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 8px;
	padding: 12px 16px 10px;
	background: #fcfdfe;
}

.ar-note-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.ar-note-box h2 {
	font-size: 16px;
	margin: 0;
}

.ar-note-privacy {
	font-size: 12.5px;
	color: var(--ar-muted, #7a8595);
}

.ar-note-box .ar-note-input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 6px;
	font: inherit;
	font-size: 15px;
	background: #fff;
	resize: vertical;
}

.ar-note-box .ar-note-input:focus {
	outline: 2px solid var(--ar-primary, #1596a8);
	outline-offset: 1px;
	border-color: transparent;
}

.ar-note-status {
	min-height: 18px;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--ar-muted, #7a8595);
}

.ar-note-status.is-saved {
	color: #1e6b41;
}

.ar-similar {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--ar-line, #e6e9ef);
}

/* The update date is not shown on a card: it is a detail for the owner and for
   the table, not something a visitor scanning twenty flats needs. */

/* Full-screen picture viewer */

.ar-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(10, 14, 20, .93);
	padding: 40px 60px;
}

.ar-lightbox.is-open {
	display: flex;
}

/* The page behind must not scroll while the viewer is open. */
body.ar-lb-locked {
	overflow: hidden;
}

.ar-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
}

.ar-lb-nav,
.ar-lb-close {
	position: absolute;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	cursor: pointer;
	line-height: 1;
}

.ar-lb-nav {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	font-size: 26px;
}

.ar-lb-nav:hover,
.ar-lb-close:hover {
	background: rgba(255, 255, 255, .3);
}

.ar-lb-prev { inset-inline-start: 16px; }
.ar-lb-next { inset-inline-end: 16px; }

.ar-lb-close {
	top: 16px;
	inset-inline-end: 16px;
	width: 42px;
	height: 42px;
	font-size: 19px;
}

.ar-lb-counter {
	position: absolute;
	bottom: 18px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	color: #fff;
	font-size: 14px;
	opacity: .8;
}

@media (max-width: 600px) {
	.ar-lightbox {
		padding: 50px 8px;
	}

	/* On a phone the arrows sit under the picture, where a thumb reaches. */
	.ar-lb-nav {
		top: auto;
		bottom: 14px;
		transform: none;
		width: 44px;
		height: 44px;
	}

	.ar-lb-prev { inset-inline-start: 22%; }
	.ar-lb-next { inset-inline-end: 22%; }

	.ar-lb-counter {
		bottom: 26px;
	}
}

/* Columns */

.ar-single-cols {
	display: grid;
	grid-template-columns: 1fr 330px;
	gap: 34px;
	margin-top: 30px;
}

.ar-single h2 {
	font-size: 20px;
	margin: 0 0 14px;
}

.ar-single section {
	margin-bottom: 32px;
}

/* Specification grid — label above value, separated by hairlines. */

/* A row of cells, wrapping only when it truly must.
   The grid version left empty cells on the last row, and those showed the
   grid's own background as a grey slab beside the final value. Flex leaves no
   phantom cells: the last row simply ends. */
.ar-spec-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: var(--ar-line);
	border: 1px solid var(--ar-line);
	border-radius: 8px;
	overflow: hidden;
}

.ar-spec {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 13px 16px;
	background: #fff;
	flex: 1 1 130px;
	min-width: 120px;
}

.ar-spec-label {
	font-size: 13px;
	color: var(--ar-muted);
}

.ar-spec-value {
	font-size: 16px;
	font-weight: 600;
}

/* Amenities as chips */

.ar-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ar-chip-static {
	padding: 6px 15px;
	border-radius: 6px;
	background: var(--ar-primary-soft, #e8f4f6);
	color: var(--ar-primary, #1596a8);
	font-size: 14px;
}

/* What the flat has: three columns, no boxes.

   The point of the columns is the icons. Lined up under each other they form a
   straight edge the eye runs down; the same items as a wrapping row of pills
   end every line in a different place, because the words are different
   lengths. */
.ar-amen-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 11px 20px;
}

.ar-amen-grid li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	color: var(--ar-dark, #0e2846);
}

.ar-amen-icon {
	width: 18px;
	height: 18px;
	flex: none;
	stroke: var(--ar-primary, #1596a8);
	fill: none;
}

/* An amenity with no drawing of its own. Sized and placed exactly where an
   icon would be, so it reads as a deliberate mark rather than a gap. */
.ar-amen-dot {
	width: 6px;
	height: 6px;
	margin: 0 6px;
	border-radius: 50%;
	background: var(--ar-primary, #1596a8);
	flex: none;
}

@media (max-width: 780px) {
	.ar-amen-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.ar-amen-grid {
		grid-template-columns: 1fr;
		gap: 9px;
	}
}

/* Contact card */

.ar-side-card {
	position: sticky;
	top: 20px;
	border: 1px solid var(--ar-line);
	border-radius: 8px;
	background: #fff;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(20, 30, 45, .05);
}

.ar-price-block {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--ar-line);
	text-align: center;
}

.ar-price {
	display: block;
	font-size: 27px;
	font-weight: 700;
	color: var(--ar-ink);
}

.ar-price small {
	font-size: 15px;
	font-weight: 400;
	color: var(--ar-muted);
}

.ar-price-extra {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: var(--ar-muted);
}

.ar-price-note {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ar-muted);
	text-align: start;
}

/* Video */

.ar-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
}

.ar-video iframe,
.ar-video-play {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.ar-video-play {
	position: relative;
	padding: 0;
	cursor: pointer;
	background: none;
}

.ar-video-play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ar-video-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 0 18px 30px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

/* Contact */

/* Sits inside .ar-side-card, so it carries no frame of its own. */
.ar-contact h2 {
	font-size: 17px;
	margin-bottom: 10px;
}

/* The way back and the breadcrumb share one line: the action first, where the
   eye starts, and the location after it. */
.ar-single-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.ar-single-top .ar-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1.5px solid var(--ar-primary, #1596a8);
	border-radius: 8px;
	background: #fff;
	color: var(--ar-primary, #1596a8);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: background .15s, color .15s;
}

.ar-single-top .ar-back:hover {
	background: var(--ar-primary, #1596a8);
	color: #fff;
}

.ar-back-arrow {
	font-size: 19px;
	line-height: 1;
}

.ar-single-top {
	margin-bottom: 14px;
}

.ar-breadcrumb {
	margin: 0 0 10px;
}

/* Contact buttons.
   WhatsApp leads and stays green — that colour is recognised without reading.
   Mail is outlined so the two do not compete for the same glance.

   Written at .ar-contact specificity, and one is a link while the other is a
   button: left to themselves the theme styles them as two different things,
   which is exactly what went wrong — the green turned teal and the mail button
   came out pink and half the size. Every property that could be inherited is
   stated here. */

.ar-contact .ar-wa-btn,
.ar-contact .ar-mail-btn {
	/* Icon to the left of the label: in a right-to-left row the first child
	   sits on the right, so the row is reversed. */
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
	gap: 9px;

	box-sizing: border-box;
	width: 100%;
	height: 50px;
	min-height: 50px;
	padding: 0 18px;
	margin: 0 0 10px;

	border-radius: 6px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s, color .15s;
}

/* The contact row: telephone, message, share — in that order, wrapping together
   rather than each finding its own line. */
.ar-contact-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
}

.ar-contact-row > * { margin: 0; }

.ar-contact-row .ar-contact-phone,
.ar-contact-row .ar-wa-btn,
.ar-contact-row .ar-mail-btn {
	flex: 1 1 200px;
}

/* ⚠️ Last in the row, and IN the row — not on a line of its own.
   Given a full-width basis it always broke to its own line and then looked like
   the main action rather than the afterthought. It takes a share of the row like
   the other two, and only drops below when the panel is genuinely too narrow. */
.ar-contact-row .ar-share-btn {
	order: 99;
	flex: 1 1 150px;
}

/* "שליחה לחבר" — the same shape as the two above it, in outline. Sending a link
   to a friend is a smaller act than writing to the owner, and reads as the
   quieter option without being hidden. */
.ar-contact .ar-share-btn {
	background: #fff !important;
	border: 1.5px solid var(--ar-primary, #1596a8) !important;
	color: var(--ar-primary-dark, #107886) !important;
}

.ar-contact .ar-share-btn:hover {
	background: var(--ar-primary-soft, #e8f4f6) !important;
}

.ar-contact .ar-share-btn svg,
.ar-contact .ar-wa-btn svg,
.ar-contact .ar-mail-btn svg {
	flex-shrink: 0;
	width: 21px;
	height: 21px;
}

/* On-brand teal rather than WhatsApp green: the green fought the header, and the
   site is meant to read as one thing. */
.ar-contact .ar-wa-btn {
	background: var(--ar-primary, #1596a8);
	border: 1.5px solid var(--ar-primary, #1596a8);
	color: #fff;
}

.ar-contact .ar-wa-btn:hover,
.ar-contact .ar-wa-btn:focus {
	background: var(--ar-primary-dark, #107886);
	border-color: var(--ar-primary-dark, #107886);
	color: #fff;
}

.ar-contact .ar-mail-btn {
	background: #fff;
	border: 1.5px solid var(--ar-primary, #1596a8);
	color: var(--ar-primary, #1596a8);
}

.ar-contact .ar-mail-btn:hover,
.ar-contact .ar-mail-btn:focus {
	background: var(--ar-primary, #1596a8);
	border-color: var(--ar-primary, #1596a8);
	color: #fff;
}

.ar-contact .ar-mail-btn[disabled] {
	opacity: .6;
	cursor: default;
}

/* .ar-mail-note was removed with the note it styled: the buttons already say
   "שליחת הודעה בוואטסאפ" and "שליחת מייל", and a line underneath explaining
   that they open WhatsApp and mail said it a second time. */

.ar-contact-phone {
	margin: 0 0 14px;
	font-size: 23px;
	font-weight: 700;
	text-align: center;
}

.ar-contact-phone a {
	text-decoration: none;
	color: var(--ar-primary, #1596a8);
}

.ar-contact-result {
	margin: 8px 0 0;
	font-size: 14px;
}

.ar-contact-result.is-ok {
	color: #1e6b41;
}

.ar-contact-result.is-error {
	color: #c0392b;
}

/* Calendar */

/* ---------- The calendar carousel ----------
   Three months side by side left each cell around 38px across — under the size
   a fingertip reliably hits, which is why marking dates was a fight on a
   telephone. One month at a time on a phone, two on a desk, and the cells come
   out roughly twice the size. */

.ar-cal-wrap {
	margin: 14px 0;
}

.ar-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

/* Filled, not outlined. As a pale box with a thin border it read as a disabled
   control, and the whole point of the carousel is that these get used.
   Stated at two classes: the theme paints buttons too, and a single class ties
   with it — the tie the gallery thumbnails already lost once. */
.ar-cal-nav .ar-cal-arrow {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--ar-primary, #1596a8);
	color: #fff;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}

.ar-cal-nav .ar-cal-arrow:hover {
	background: var(--ar-primary-dark, #11798a);
	color: #fff;
}

/* At the ends: still clearly a button, plainly not available. Kept visible
   rather than removed, so the pair does not shift as the months change. */
.ar-cal-nav .ar-cal-arrow[disabled] {
	background: #e7eaee;
	color: #9aa4b0;
	cursor: default;
}

.ar-cal-arrow svg {
	display: block;
	pointer-events: none;
}

/* The month name between them carries the weight of a heading now, so the row
   reads as one control rather than two buttons with a caption. */
.ar-cal-pos {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ar-dark, #0e2846);
}

/* The window. Only what fits is shown; the track slides behind it. */
.ar-cal-view {
	overflow: hidden;
}

.ar-calendar {
	display: flex;
	gap: 22px;
	margin: 0;
	transition: transform .25s ease;
}

/* One month fills the window on a phone, two share it on a desk. Set on the
   month itself so the track can be wider than the window. */
.ar-calendar .ar-month {
	flex: 0 0 100%;
	min-width: 0;
}

@media (min-width: 700px) {
	.ar-calendar .ar-month {
		flex: 0 0 calc((100% - 22px) / 2);
	}
}

/* Without a carousel — printing, or no JavaScript — the months simply wrap and
   everything stays readable. */
.ar-cal-wrap:not(.is-ready) .ar-calendar {
	flex-wrap: wrap;
	transform: none !important;
}

.ar-cal-wrap:not(.is-ready) .ar-cal-nav {
	display: none;
}

/* On paper there is no window to slide, so every month is laid out at once and
   the arrows come off. The script drops .is-ready as well, but a browser that
   prints without firing the print event still gets this. */
@media print {
	.ar-cal-nav {
		display: none;
	}

	.ar-cal-view {
		overflow: visible;
	}

	.ar-calendar {
		flex-wrap: wrap;
		transform: none !important;
	}
}

.ar-month h3 {
	margin: 0 0 8px;
	font-size: 15px;
}

.ar-week-head,
.ar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}

.ar-week-head span {
	text-align: center;
	font-size: 11px;
	opacity: .6;
}

/* Day cells are buttons, and themes style buttons heavily — padding, minimum
   sizes, fixed heights. Any of those makes a cell outgrow its grid track and
   overlap its neighbour, which shows up as two dates printed on top of each
   other. Everything that could leak in is reset explicitly. */
.ar-month-heb {
	display: block;
	font-size: 12px;
	font-weight: normal;
	opacity: .7;
}

/* Stacked, and stated at this specificity on purpose: themes style buttons,
   and a theme that forces a row lays the two dates side by side — "1יח" — which
   reads as one garbled number. */
.ar-calendar .ar-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	line-height: 1.05;
}

.ar-calendar .ar-day-num {
	display: block;
	font-size: 12px;
	line-height: 1.1;
}

/* The Hebrew date in its own colour rather than a paler version of the
   Gregorian one — two greys at two sizes read as one smudged number. */
.ar-calendar .ar-day-heb {
	display: block;
	font-size: 10px;
	line-height: 1.1;
	color: #1f6f8b;
	font-weight: 400;
}

.ar-calendar .ar-day.is-busy .ar-day-heb {
	color: #fff;
	opacity: .9;
}

.ar-calendar .ar-day.is-past .ar-day-heb {
	color: #7d7d7d;
}

.ar-day {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	box-sizing: border-box;
	border-radius: 4px;
	border: 1px solid #dcdcde;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 12px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	padding: 0;
	margin: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	overflow: hidden;
	box-shadow: none;
}

button.ar-day {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Hover marks the outline only. Tinting the background here would cover the
   day's actual state while the cursor sits on it — which reads as the click
   having done nothing until the mouse moves away. */
button.ar-day:hover {
	border-color: var(--ar-primary, #1596a8);
	box-shadow: inset 0 0 0 1px var(--ar-primary, #1596a8);
}

button.ar-day:focus-visible {
	outline: 2px solid var(--ar-primary, #1596a8);
	outline-offset: 1px;
}

.ar-day.is-blank {
	border: 0;
	background: none;
}

/* A date that has passed: still in place so the month keeps its shape, but
   visibly out of play. */
.ar-day.is-past {
	opacity: .35;
	background: #f3f3f3;
	border-style: dashed;
	cursor: default;
}

/* Each state sets a variable rather than a background directly. Hover, focus
   and active then repaint that same variable — so no interaction state can
   ever look like a marking. Without this the last clicked day keeps the
   browser's focus colour and reads as a third status nobody asked for. */
/* The legend is listed beside the calendar, not inside it — it is a sibling of
   .ar-calendar, not a descendant. Scoped to .ar-calendar alone, none of these
   reached it: its swatches took their size and border from .ar-day but never a
   background, so both squares came out white and the key announced "red means
   taken" while showing no red. Every state below names both places, so the
   swatch and the day it stands for can never drift apart. */
.ar-calendar .ar-day,
.ar-legend .ar-day {
	--ar-day-bg: #fff;
	background: var(--ar-day-bg);
}

.ar-calendar .ar-day.is-free,
.ar-legend .ar-day.is-free {
	--ar-day-bg: #d5f5e3;
	border-color: #a8e0c0;
}

.ar-calendar .ar-day.is-busy,
.ar-legend .ar-day.is-busy {
	--ar-day-bg: #e8848d;
	border-color: #c95d68;
	color: #fff;
	font-weight: 700;
}

.ar-calendar .ar-day.is-holiday,
.ar-legend .ar-day.is-holiday {
	--ar-day-bg: #fcf3d5;
	border-color: #e8d59a;
}

.ar-calendar .ar-day.is-past {
	--ar-day-bg: #f3f3f3;
}

.ar-calendar .ar-day.is-blank {
	--ar-day-bg: transparent;
}

.ar-calendar button.ar-day:hover,
.ar-calendar button.ar-day:focus,
.ar-calendar button.ar-day:focus-visible,
.ar-calendar button.ar-day:active {
	background: var(--ar-day-bg);
	color: inherit;
}

.ar-calendar button.ar-day.is-busy:hover,
.ar-calendar button.ar-day.is-busy:focus,
.ar-calendar button.ar-day.is-busy:active {
	color: #fff;
}

.ar-day.is-special {
	font-weight: 700;
}

/* A festival is worth spotting from across the month — these are the dates
   holiday flats are actually let for. */
.ar-day.is-yomtov {
	box-shadow: inset 0 -2px 0 #b7791f;
}

/* Wider tracks than before: each cell now carries two lines. */
/* Roughly double the old cell, and never under the 44px that a fingertip
   needs. This is the whole reason the carousel exists. */
.ar-calendar .ar-days .ar-day {
	min-height: 46px;
}

.ar-calendar .ar-day-num {
	font-size: 15px;
}

.ar-calendar .ar-day-heb {
	font-size: 11.5px;
}

.ar-month h3 {
	font-size: 16px;
}

.ar-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	padding: 0;
	font-size: 14px;
}

.ar-legend li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ar-legend .ar-day {
	width: 18px;
	aspect-ratio: 1;
}

.ar-calendar-updated {
	font-size: 13px;
	opacity: .7;
}

/* Said plainly and in green: a visitor scanning a wall of white cells has no
   way to tell "all free" from "nothing filled in" without being told. */
.ar-calendar-allfree {
	margin: 6px 0 0;
	font-weight: 700;
	color: #1f7a4d;
}

.ar-calendar-toggle {
	margin: 0 0 6px;
}

.ar-calendar-toggle label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

/* Shared bits */

.ar-btn {
	display: inline-block;
	padding: 9px 20px;
	border: 0;
	border-radius: 6px;
	background: var(--ar-primary, #1596a8);
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.ar-btn-small {
	padding: 6px 14px;
	font-size: 14px;
}

.ar-btn:hover {
	background: var(--ar-primary-dark, #11798a);
	color: #fff;
}

/* Built for WordPress's own pager markup: links, a current page, and "…" for
   the collapsed middle. Wraps rather than running off the side — ninety-four
   pages used to do exactly that. */
.ar-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: center;
	margin: 26px 0;
}

.ar-pagination .page-numbers {
	padding: 7px 13px;
	border: 1px solid #ddd;
	border-radius: 6px;
	text-decoration: none;
	line-height: 1.2;
}

.ar-pagination .page-numbers.current {
	background: var(--ar-primary, #1596a8);
	color: #fff;
	border-color: var(--ar-primary, #1596a8);
	font-weight: 600;
}

/* The gap marker is not a control and must not look like one. */
.ar-pagination .page-numbers.dots {
	border: 0;
	padding: 7px 4px;
	color: var(--ar-muted, #6b7684);
}

.ar-pagination .prev,
.ar-pagination .next {
	font-weight: 600;
}

/* Said in words as well as numbers: on a board this size "עמוד 7 מתוך 94" is
   more use than working it out from the buttons. */
.ar-pagination-count {
	flex-basis: 100%;
	text-align: center;
	margin-top: 4px;
	font-size: 13px;
	color: var(--ar-muted, #6b7684);
}

.ar-no-results {
	padding: 40px 0;
	text-align: center;
}

/* Honeypot.
   Not left:-9999px — in an RTL page that counts as content ten thousand pixels
   wide and gives the whole document a horizontal scrollbar. Clipped in place
   instead: invisible, unreachable, and no effect on the page's width. */
.ar-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Images: every wrapper is a block with no line box, and every image inside is
   a block too.

   An image is an inline element by default, and a theme that says so again
   wins over a weaker rule of ours. The browser then reserves room under it for
   the descender of a letter that is not there — the grey band that appeared
   under the card and list pictures. */
.ar-card-img,
.ar-list-img,
.ar-thumb-btn,
.ar-gallery-main,
.ar-table .ar-col-img a {
	display: block;
	font-size: 0;
	line-height: 0;
}

.ar-card-img img,
.ar-list-img img,
.ar-thumb-btn img,
.ar-gallery-main img,
.ar-table .ar-col-img img,
.ar-listing-img img {
	display: block;
	max-width: 100%;
}

/* "פרטים ‹" — the chevron is drawn, so it never mirrors or shrinks. */
/* "פרטים" became a button when it started opening the short view instead of
   leaving the page — and a bare <button> is exactly what the theme paints. It
   is stated back to a plain link here, in full, or it arrives with a pink
   border round it. */
.ar-results .ar-more,
.ar-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	color: var(--ar-primary, #1596a8);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ar-results .ar-more:hover,
.ar-more:hover {
	background: none;
	color: var(--ar-primary-dark, #107886);
}

.ar-more svg {
	flex-shrink: 0;
}

/* ============================================================
   Theme armour

   The theme styles every button, link, input and select on the site, and its
   rules reach into the plugin's markup. That produced pink WhatsApp buttons,
   a border drawn inside the search field, pink table headings, a map overlay
   with a stray frame, and overlapping calendar cells — five separate reports,
   all the same cause.

   Everything below states, explicitly, the properties a theme commonly
   injects. It sits at the end of the stylesheet so that where specificity
   ties, this wins.
   ============================================================ */

/* Anything the plugin renders as a control starts from a known state. */
.ar-results button,
.ar-single button,
.ar-similar button,
.ar-favorites button,
.ar-archive button,
.ar-search button,
.ar-lightbox button,
.ar-map-section button,
.ar-report button,
.ar-table button,
.ar-pop button,
.ar-note-box button {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Buttons and links */

.ar-results .ar-btn,
.ar-single .ar-btn,
.ar-similar .ar-btn,
.ar-favorites .ar-btn,
.ar-archive .ar-btn,
.ar-search .ar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 0;
	padding: 11px 22px;
	border: 0;
	border-radius: 8px;
	background: var(--ar-primary, #1596a8);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.ar-results .ar-btn:hover,
.ar-single .ar-btn:hover,
.ar-similar .ar-btn:hover,
.ar-favorites .ar-btn:hover,
.ar-archive .ar-btn:hover,
.ar-search .ar-btn:hover,
.ar-search .ar-btn:focus {
	background: var(--ar-primary-dark, #11798a);
	color: #fff;
}

/* A pressed or focused pill: the theme paints these states too, which is how
   the filter toggle came out filled pink after being clicked. */
.ar-search .ar-sb-btn:focus,
.ar-search .ar-sb-btn:active,
.ar-search .ar-sb-btn:focus-visible {
	background: #fff;
	color: var(--ar-dark, #0e2846);
	outline: none;
}

.ar-search .ar-sb-submit:focus,
.ar-search .ar-sb-submit:active {
	background: var(--ar-primary, #1596a8);
	color: #fff;
}

.ar-search .ar-filter-toggle.is-open,
.ar-search .ar-filter-toggle.is-open:hover,
.ar-search .ar-filter-toggle.is-open:focus {
	background: var(--ar-primary-soft, #e8f4f6);
	border-color: var(--ar-primary, #1596a8);
	color: var(--ar-primary, #1596a8);
	box-shadow: none;
}

.ar-results .ar-link,
.ar-single .ar-link,
.ar-similar .ar-link,
.ar-favorites .ar-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--ar-primary, #1596a8);
	font: inherit;
	text-decoration: none;
}

.ar-results .ar-link:hover,
.ar-single .ar-link:hover,
.ar-similar .ar-link:hover {
	text-decoration: underline;
	color: var(--ar-primary-dark, #11798a);
}

/* Card titles and facts */

.ar-card-body h3 a,
.ar-list-body h3 a {
	color: var(--ar-dark, #0e2846);
	text-decoration: none;
}

.ar-card-body h3 a:hover,
.ar-list-body h3 a:hover {
	color: var(--ar-primary, #1596a8);
}

/* The favourite heart */

/* ⚠️ A bare mark, no box — for the heart AND the cross beside it.
   Themes paint every <button> with a border, a background and a shadow of their
   own; left to that, the cross came out as a pink outlined box sitting next to a
   bare heart, and the pair read as two unrelated controls. Every property that
   could arrive from outside is stated here, for both, so they are one set. */
/* ⚠️ :not(.ar-action-pill) — the listing page's favourite IS a pill, with a
   border and a label, and stripping it left "♥ הוספה למועדפים" as loose words
   beside a printed button. The bare mark is for cards, rows and the table. */
.ar-results .ar-fav:not(.ar-action-pill),
.ar-single .ar-fav:not(.ar-action-pill),
.ar-similar .ar-fav:not(.ar-action-pill),
.ar-favorites .ar-fav:not(.ar-action-pill),
.ar-table .ar-fav:not(.ar-action-pill),
.ar-results .ar-dismiss,
.ar-single .ar-dismiss,
.ar-similar .ar-dismiss,
.ar-favorites .ar-dismiss,
.ar-table .ar-dismiss {
	/* One shape for both: a drawn ring of the same size, so the heart and the
	   cross read as a pair of controls rather than two unrelated marks. */
	/* ⚠️ No border of its own — the SVG draws the ring now. With both, there were
	   two circles: the button's in pixels and the sign's scaling with the glyph.
	   They never quite agreed, and it read as a mark sitting inside a box. */
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0 !important;
	border-radius: 50%;
	background: none !important;
	box-shadow: none !important;
	color: #b9c0ca;
	font-size: 16px;
	line-height: 1;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * The cross sits in a drawn circle. Bare, it had no edges of its own and read as
 * a stray mark floating in the white beside the heart — the heart is a solid
 * shape and holds its ground, a thin ✕ does not. The ring gives it a body of the
 * same size, so the two sit together as a pair of controls.
 */
/* The slash inside the ring — together, the "no entry" sign. */
.ar-dismiss svg {
	width: 17px;
	height: 17px;
	display: block;
}

.ar-results .ar-dismiss:hover,
.ar-single .ar-dismiss:hover,
.ar-similar .ar-dismiss:hover,
.ar-favorites .ar-dismiss:hover,
.ar-table .ar-dismiss:hover {
	color: #5a6472;
	background: none !important;
}

.ar-results .ar-dismiss.is-active,
.ar-single .ar-dismiss.is-active,
.ar-similar .ar-dismiss.is-active,
.ar-favorites .ar-dismiss.is-active,
.ar-table .ar-dismiss.is-active {
	background: none !important;
	color: #5a6472;
}

.ar-results .ar-fav:not(.ar-action-pill):hover,
.ar-single .ar-fav:not(.ar-action-pill):hover,
.ar-similar .ar-fav:not(.ar-action-pill):hover,
.ar-table .ar-fav:not(.ar-action-pill):hover {
	color: #d4ae1a;
	border-color: #e6d49a !important;
	background: #fff !important;
}

/* Saved: the ring warms with the heart, so the state is legible from across the
   grid and not only in the glyph. */
.ar-results .ar-fav:not(.ar-action-pill).is-active,
.ar-single .ar-fav:not(.ar-action-pill).is-active,
.ar-similar .ar-fav:not(.ar-action-pill).is-active,
.ar-favorites .ar-fav:not(.ar-action-pill).is-active,
.ar-table .ar-fav.is-active {
	border-color: #e2c469 !important;
	background: #fffdf3 !important;
}


.ar-results .ar-fav.is-active,
.ar-single .ar-fav.is-active,
.ar-similar .ar-fav.is-active,
.ar-favorites .ar-fav.is-active,
.ar-table .ar-fav.is-active {
	color: #d4ae1a;
	background: none;
	border: 0;
	transform: none;
}

/* A chosen row wears a faint cream, as on the old board — visible down a long
   table without shouting. */
.ar-table tr.is-fav > td { background: #fffdf6; }

/* ---- Retired: the favourites filter that briefly lived in the results bar.
   There is already a favourites button in the search bar, and it opens the full
   list — a second one could only ever filter the page in front of it, and showed
   a different number for the same word. The rules below are kept only because
   .ar-fav-strip styling is shared with the "לא מתאים" strip. ---- */

.ar-results .ar-fav-filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 46px;
	padding: 0 16px;
	border: 1px solid var(--ar-pill-border, #e3e6ec);
	border-radius: 8px;
	background: #fff;
	color: var(--ar-dark, #0e2846);
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}

.ar-results .ar-fav-filter .ar-fav-filter-heart { color: #d4ae1a; font-size: 17px; line-height: 1; }

.ar-results .ar-fav-filter .ar-fav-filter-n {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--ar-primary-soft, #e8f4f6);
	color: var(--ar-primary-dark, #107886);
	font-size: 12.5px;
	font-weight: 700;
}

.ar-results .ar-fav-filter {
	background: #fff !important;
	color: var(--ar-dark, #0e2846) !important;
	font-weight: 400;
}

.ar-results .ar-fav-filter:hover {
	border-color: var(--ar-primary, #1596a8) !important;
	color: var(--ar-primary, #1596a8) !important;
	background: #fff !important;
}

.ar-results .ar-fav-filter.is-on,
.ar-results .ar-fav-filter.is-on:hover {
	background: var(--ar-primary, #1596a8) !important;
	border-color: var(--ar-primary, #1596a8) !important;
	color: #fff !important;
}

.ar-results .ar-fav-filter.is-on {
	background: var(--ar-primary, #1596a8);
	border-color: var(--ar-primary, #1596a8);
	color: #fff;
}

.ar-results .ar-fav-filter.is-on .ar-fav-filter-heart { color: #fff; }

.ar-results .ar-fav-filter.is-on .ar-fav-filter-n {
	background: rgba(255, 255, 255, .3);
	color: #fff;
}

/* The strip that appears while the filter is on. */
.ar-fav-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
	padding: 11px 15px;
	background: #fbfcfd;
	border: 1px solid #eaedf0;
	border-inline-start: 3px solid var(--ar-primary, #1596a8);
	border-radius: 12px;
	color: #5a6472;
	font-size: 14px;
}

.ar-fav-strip[hidden] { display: none; }

.ar-fav-strip-acts { display: flex; flex-wrap: wrap; gap: 8px; }

.ar-fav-strip-b {
	padding: 7px 13px;
	border: 1px solid var(--ar-pill-border, #e3e6ec);
	border-radius: 8px;
	background: #fff;
	color: #5a6472;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.ar-fav-strip-b.is-primary {
	border-color: var(--ar-primary, #1596a8);
	color: var(--ar-primary-dark, #107886);
	font-weight: 600;
}

.ar-fav-strip-b:hover { border-color: #cfd6df; }

/* ---- "לא מתאים" ---- */

/* Shape and size come from the shared block with the heart, further down —
   the two must stay one set. Only what is its own lives here. */
.ar-dismiss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color .15s;
}

/* While the put-aside are on show, they are dimmed — so it is plain that this is
   the discard pile and not the board. */
.is-dismissed {
	opacity: .62;
}

/*
 * "לא מתאים", in the search bar beside the favourites.
 *
 * ⚠️ It borrows .ar-sb-btn for its shape, so it is the same pill as the buttons
 * around it — only the count and the pressed state are its own. Stated with
 * !important because the theme paints every <button> with its own accent (a pink
 * border and pink text here), which a plain declaration loses to. That accent is
 * the theme's to choose and is right everywhere else on the site; it is wrong
 * only on a control that has to sit quietly in this row.
 */
/* ⚠️ BOTH selectors. The button moved from the search bar back to the results
   bar and changed class with it; the immunity was left behind on the old name,
   and the theme's pink came straight back through the gap. */
.ar-sb-dis,
.ar-results .ar-dis-filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 46px;
	padding: 0 16px;
	border: 1px solid var(--ar-pill-border, #e3e6ec) !important;
	border-radius: 8px;
	background: #fff !important;
	color: var(--ar-muted, #6b7684) !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400 !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ar-sb-dis[hidden],
.ar-results .ar-dis-filter[hidden] { display: none; }

.ar-results .ar-dis-filter:hover {
	border-color: #cfd6df !important;
	color: var(--ar-dark, #0e2846) !important;
	background: #fff !important;
}

.ar-results .ar-dis-filter.is-on,
.ar-results .ar-dis-filter.is-on:hover {
	background: #6b7684 !important;
	border-color: #6b7684 !important;
	color: #fff !important;
}

.ar-results .ar-dis-filter .ar-dis-filter-n {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #f0f2f5;
	color: #6b7684;
	font-size: 12.5px;
	font-weight: 700;
}

.ar-results .ar-dis-filter.is-on .ar-dis-filter-n {
	background: rgba(255, 255, 255, .3);
	color: #fff;
}

/*
 * The marks in the search bar are the same marks that sit on a card: a glyph in
 * a drawn ring, same shape, same colours. They were a bare heart and a bare
 * cross here, so the bar and the listings under it spoke two vocabularies for
 * one idea. Smaller than the card version — this is a label, not a control.
 */
.ar-sb-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1.5px solid #dfe3e8;
	border-radius: 50%;
	background: #fff;
	line-height: 1;
	flex: 0 0 auto;
}

.ar-sb-mark.is-fav {
	border-color: #e2c469;
	background: #fffdf3;
	color: #d4ae1a;
	font-size: 12px;
}

/* The same slash-in-a-ring as the control it stands for. */
.ar-sb-mark.is-dis { color: #aeb5bf; }

.ar-sb-mark svg {
	width: 12px;
	height: 12px;
	display: block;
}

/* On the pressed button the ring turns to match the white text. */
.ar-sb-dis.is-on .ar-sb-mark {
	border-color: rgba(255, 255, 255, .55);
	background: transparent;
	color: #fff;
}

.ar-dis-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #f0f2f5;
	color: #6b7684;
	font-size: 12.5px;
	font-weight: 700;
}

.ar-sb-dis:hover {
	border-color: #cfd6df !important;
	color: var(--ar-dark, #0e2846) !important;
	background: #fff !important;
}

.ar-sb-dis.is-on,
.ar-sb-dis.is-on:hover {
	background: #6b7684 !important;
	border-color: #6b7684 !important;
	color: #fff !important;
}

.ar-sb-dis.is-on .ar-dis-count {
	background: rgba(255, 255, 255, .3);
	color: #fff;
}


.ar-dis-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
	padding: 11px 15px;
	background: #fbfcfd;
	border: 1px solid #eaedf0;
	border-inline-start: 3px solid #8a94a2;
	border-radius: 12px;
	color: #5a6472;
	font-size: 14px;
}

.ar-dis-strip[hidden] { display: none; }

/* Gallery controls */

.ar-gallery-view .ar-gal-nav,
.ar-gallery-view .ar-thumb-btn,
.ar-single .ar-video-play {
	padding: 0;
	background: none;
	box-shadow: none;
	color: inherit;
}

.ar-gallery-view .ar-gal-nav {
	background: rgba(255, 255, 255, .92);
	color: var(--ar-dark, #0e2846);
	border: 0;
}

/* The picture inside a thumbnail fills its button and no more.
   `.ar-thumb-btn img` is one class and one element — the same weight as the
   theme's own `.entry-content img`, and the theme loads after us, so it won the
   tie and stretched the thumbnails. Stated at two classes here so the tie
   cannot happen, and on a button whose overflow is hidden: whatever the theme
   does to the picture, it has nowhere to grow. The button's own size now comes
   from the column layout above, so only the image is pinned here. */
.ar-gallery-view .ar-thumb-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ar-gallery-view .ar-thumb-btn.is-active {
	border-color: var(--ar-primary, #1596a8);
}

.ar-single .ar-video-play {
	border: 0;
	width: 100%;
	height: 100%;
}

/* Full-screen viewer */

.ar-lightbox .ar-lb-nav,
.ar-lightbox .ar-lb-close {
	border: 0;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	padding: 0;
	box-shadow: none;
}

.ar-lightbox .ar-lb-nav:hover,
.ar-lightbox .ar-lb-close:hover {
	background: rgba(255, 255, 255, .3);
	color: #fff;
}

/* Filter panel controls */

.ar-search .ar-pill {
	box-sizing: border-box;
	width: 100%;
	height: 42px;
	min-height: 42px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--ar-pill-border, #e3e6ec);
	border-radius: 6px;
	background: var(--ar-pill-bg, #fbfcfd);
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	color: var(--ar-dark, #0e2846);
	line-height: 1.2;
}

.ar-search .ar-pill:focus {
	outline: 2px solid var(--ar-primary, #1596a8);
	outline-offset: 1px;
	border-color: transparent;
}

.ar-search .ar-filter-close,
.ar-search .ar-saved-add,
.ar-search .ar-saved-remove {
	font-family: inherit;
	box-shadow: none;
	text-transform: none;
}

/* Plain text, quiet — closing the panel does not deserve a button beside the
   one that actually runs the search. */
.ar-search .ar-filter-close {
	border: 0;
	background: none;
	color: #6b7280;
	padding: 6px 4px;
	height: auto;
	min-height: 0;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
}

.ar-search .ar-filter-close:hover {
	color: var(--ar-primary, #1596a8);
	background: none;
}

.ar-search .ar-saved-add {
	background: none;
	color: var(--ar-dark, #0e2846);
	border: 1px dashed var(--ar-pill-border, #e3e6ec);
	height: auto;
	min-height: 0;
}

.ar-search .ar-saved-remove {
	border: 0;
	background: none;
	color: #c0392b;
	height: auto;
	min-height: 0;
	padding: 0 4px;
}

.ar-search .ar-saved-list a {
	color: var(--ar-primary, #1596a8);
	text-decoration: none;
}

/* Checkboxes keep the browser's own control — a themed tick is worse than a
   plain one, and these are read at a glance. */
.ar-search .ar-filter-check input[type="checkbox"],
.ar-single .ar-filter-check input[type="checkbox"] {
	-webkit-appearance: checkbox;
	appearance: checkbox;
	width: auto;
	height: auto;
	margin: 0;
}

/* Chips, pagination, notes */

.ar-search .ar-chip,
.ar-single .ar-chip-static {
	text-decoration: none;
	box-shadow: none;
}

.ar-search .ar-chip {
	color: var(--ar-dark, #0e2846);
	border: 1px solid var(--ar-pill-border, #e3e6ec);
	background: #fff;
}

.ar-results .ar-pagination .page-numbers {
	color: var(--ar-dark, #0e2846);
	text-decoration: none;
	background: #fff;
}

.ar-results .ar-pagination .page-numbers.current {
	background: var(--ar-primary, #1596a8);
	color: #fff;
	border-color: var(--ar-primary, #1596a8);
}

.ar-results .ar-pagination .page-numbers.dots {
	background: none;
}

.ar-note-box .ar-note-input,
.ar-note-row .ar-note-input {
	font-family: inherit;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Sort dropdown in the results bar */

.ar-results-tools select {
	box-sizing: border-box;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--ar-pill-border, #e3e6ec);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--ar-dark, #0e2846);
}

/* Phones */

@media (max-width: 782px) {
	.ar-single-cols {
		grid-template-columns: 1fr;
	}

	/* On a phone the card belongs above the details, not below them: the price
	   and the phone number are what the visitor came for. */
	.ar-single-side {
		order: -1;
	}

	.ar-side-card {
		position: static;
	}

	.ar-single-head h1 {
		font-size: 24px;
	}

	/* The column that used to be laid down here is gone — the thumbnails are on
	   the picture now, and below 600px they are hidden altogether. */
	.ar-gallery-main img {
		height: 240px;
	}

	.ar-list-item {
		flex-direction: column;
	}

	.ar-list-img {
		flex-basis: auto;
		width: 100%;
	}

	/* Each row becomes a card. A wide table on a narrow screen is unreadable,
	   and sideways scrolling goes unnoticed. */
	.ar-table thead {
		display: none;
	}

	.ar-table,
	.ar-table tbody,
	.ar-table tr,
	.ar-table td {
		display: block;
		width: 100%;
	}

	.ar-table tr {
		border: 1px solid #e2e2e2;
		border-radius: 8px;
		margin-bottom: 12px;
		padding: 6px 10px;
	}

	.ar-table td {
		border: 0;
		padding: 5px 0;
		display: flex;
		justify-content: space-between;
		gap: 12px;
	}

	.ar-table td::before {
		content: attr(data-label);
		opacity: .65;
		font-size: 13px;
	}

	.ar-table td:empty {
		display: none;
	}

	/* The personal controls stay together at the top of each card. */
	.ar-table .ar-col-fav,
	.ar-table .ar-col-dis,
	.ar-table .ar-col-note {
		display: inline-flex;
		width: auto;
		border: 0;
	}

	.ar-table .ar-col-fav::before,
	.ar-table .ar-col-dis::before,
	.ar-table .ar-col-note::before,
	.ar-table .ar-col-img::before,
	.ar-table .ar-col-more::before {
		content: none;
	}

	.ar-table td {
		text-align: start;
		border: 0;
		border-bottom: 1px solid #f4f5f7;
	}

	.ar-table .ar-col-more {
		border-bottom: 0;
	}
}

/* ============================================================================
   פאנל הסינון — פריסת הכרטיס
   ============================================================================
   Built to the mock the manager supplied (סינון.html): one card, a grid of
   labelled fields, then rules separating "תוספות ומאפיינים" and "תקופות
   זמינות", then the action bar.

   ⚠️ Geometry only. The mock's slate-and-teal palette is NOT taken — the brand
   colours stay, by explicit instruction. Anything colour-bearing here reads
   from the existing custom properties.

   ⚠️ The range pairs stay <select>, not the mock's free-text boxes. The ladders
   are fixed on purpose ("חייב להיות קבוע 2.3.4.5.6.7.8.10") — a typed number
   filters to nothing the moment it is not on the ladder, and says nothing about
   why.
   ========================================================================== */

.ar-filter-panel {
	background: #fff;
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 12px;
	padding: 24px 22px;
	box-shadow: 0 4px 6px -1px rgba( 0, 0, 0, .05 ), 0 2px 4px -1px rgba( 0, 0, 0, .03 );
}

/* auto-fit, so the row fills itself: five fields on a wide screen, two on a
   tablet, one on a phone, with no breakpoint list to keep in step with the
   field manager. align-items:end keeps the boxes on one baseline when one
   label wraps to a second line. */
.ar-filter-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 170px, 1fr ) );
	gap: 16px;
	align-items: end;
}

.ar-filter-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ar-filter-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ar-muted, #6b7684);
	margin-bottom: 6px;
}

.ar-filter-grid .ar-pill,
.ar-filter-grid select { width: 100%; }

.ar-range-pair {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ar-range-pair .ar-pill { width: 100%; min-width: 0; }
.ar-range-dash { color: var(--ar-muted, #6b7684); }

/* The two blocks below the grid: a rule above each, and a heading that reads as
   a heading rather than as another field label. */
.ar-filter-amenities,
.ar-shortcuts {
	border-top: 1px solid var(--ar-line, #e6e9ef);
	margin-top: 22px;
	padding-top: 18px;
}

.ar-filter-amenities > .ar-filter-label,
.ar-shortcuts-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--ar-dark, #0e2846);
	margin-bottom: 12px;
}

/* auto-FILL here, not auto-fit: with a handful of amenities left, auto-fit
   stretches them to the full width and a checkbox becomes a banner. */
.ar-filter-amenities .ar-filter-flags {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	gap: 10px;
}

.ar-filter-check {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--ar-line, #e6e9ef);
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	cursor: pointer;
}

.ar-filter-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	border-top: 1px solid var(--ar-line, #e6e9ef);
	margin-top: 22px;
	padding-top: 16px;
}

/* ⚠️ order, not an auto margin on the first child: "נקה סינון" is written
   before the buttons in the markup, and an auto margin there would have pushed
   the buttons along with it. Ordered last it lands at the far left in RTL,
   opposite "הצגת תוצאות", which is where the mock puts it. */
.ar-filter-clear {
	order: 9;
	margin-inline-start: auto;
}

/* ============================================================================
   הפופאפ — לפי ההדגמה
   ============================================================================
   Built to the mock the manager supplied. Geometry and rhythm only; the brand
   colours stay.
   ========================================================================== */

.ar-pop-card { border-radius: 20px; }

/* ⚠️ No hairlines between the parts. Every block carried a border-top as a
   divider, which put five rules inside a 500px panel and made it read as a
   form. The mock separates with space alone. */
.ar-pop-top,
.ar-pop-facts,
.ar-pop-contact,
.ar-pop-sec {
	border-top: 0;
	padding-top: 0;
	margin-top: 18px;
}

/* The heart at the top right on a line of its own, opposite the X at the top
   left, and the title centred beneath both — so neither control crowds the
   first or last word of it. */
.ar-pop-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-inline-end: 0;
}

.ar-pop-fav {
	order: -1;
	align-self: flex-start;
}

.ar-pop-title {
	text-align: center;
	font-size: 20px;
}

.ar-pop-fav .ar-fav {
	width: 36px !important;
	height: 36px !important;
	background: #fffbeb !important;
	border-color: #fef3c7 !important;
	color: #d97706 !important;
}

.ar-pop-top { margin-top: 14px; }
.ar-pop-price { font-size: 22px; }

.ar-pop-facts { border-radius: 12px; }
.ar-pop-fact { padding: 14px 8px; }

/* ⚠️ Phone and mail hold one line each; "שליחה לחבר" is TWO lines on purpose —
   that is how the mock draws it, and it is what lets three buttons share a
   500px row without any of them being cut. The earlier nowrap was about the
   phone NUMBER breaking, which it still must not. */
.ar-pop .ar-contact-row {
	gap: 10px;
	flex-wrap: nowrap;
}

.ar-pop .ar-contact-row .ar-contact-phone { flex: 1.2 1 0; }
.ar-pop .ar-contact-row .ar-mail-btn { flex: 1 1 0; }

.ar-pop .ar-contact-row .ar-share-btn {
	flex: 1.2 1 0;
	white-space: normal;
	line-height: 1.2;
	padding: 6px 10px;
}

/* Straight under the description, as its own quiet line — not a section with a
   heading and a rule of its own. */
.ar-pop-rentfor { margin-top: 6px; }

.ar-pop-foot { margin-top: 18px; }

@media (max-width: 460px) {
	.ar-pop .ar-contact-row { flex-wrap: wrap; }
	.ar-pop .ar-contact-row .ar-contact-phone,
	.ar-pop .ar-contact-row .ar-mail-btn,
	.ar-pop .ar-contact-row .ar-share-btn { flex: 1 1 150px; }
}

/* ============================================================================
   אחידות בין "תוספות ומאפיינים" ל"תקופות זמינות"
   ============================================================================
   Asked for directly: "תעשה הכל לפי התאריכים". The amenities were framed boxes
   in a rigid grid while the periods were pills that wrap — two different
   languages for the same act, one under the other.
   ========================================================================== */

/* The heading on a line of its own. .ar-shortcuts is a flex row, so the label
   was riding along at the right-hand end of the chips instead of sitting above
   them like "תוספות ומאפיינים" does. */
.ar-shortcuts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.ar-shortcuts-label { flex: 0 0 100%; }

/* The amenities become the same pill, and wrap the same way. The native box is
   taken out of the flow rather than hidden outright — a display:none checkbox
   is unreachable by keyboard and invisible to a screen reader, and this control
   still has to be operable without a mouse. */
.ar-filter-amenities .ar-filter-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ar-filter-check {
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: var(--ar-soft, #f1f5f9);
	border: 1px solid transparent;
	border-radius: 16px;
	padding: 6px 14px;
	font-size: 13px;
	color: var(--ar-dark, #0e2846);
	cursor: pointer;
	transition: background .15s, color .15s;
}

.ar-filter-check input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.ar-filter-check:hover { background: #e6eaf0; }

/* Lit exactly like a chosen period chip, ✓ and all. */
.ar-filter-check:has( input:checked ) {
	background: var(--ar-primary, #1596a8);
	border-color: var(--ar-primary, #1596a8);
	color: #fff;
	font-weight: 600;
}

.ar-filter-check:has( input:checked ) > span::before {
	content: "\2713\00a0";
}

/* ⚠️ :has() is not everywhere yet. Where it is missing the pill still works —
   it simply does not light — so the keyboard focus ring is what has to carry
   the state, and it must be visible. */
.ar-filter-check:focus-within {
	outline: 2px solid var(--ar-primary, #1596a8);
	outline-offset: 2px;
}

/* ============================================================================
   סרגל המחיר — יישור לשאר השורה
   ============================================================================
   The other fields in the row are a label over a 40px box. The slider is a
   label over a 30px track over a readout, so on a row aligned to the bottom it
   floated up and its circles sat off the line the eye expects.
   ========================================================================== */

.ar-filter-item .ar-slider {
	margin-top: 10px;
	margin-bottom: 2px;
}

.ar-filter-grid .ar-slider-readout {
	text-align: center;
	font-size: 12px;
	margin-top: 2px;
}

/* ============================================================================
   סרגל המחיר — העיגולים מעל הפס, ותופסים את העכבר
   ============================================================================
   ⚠️ אחת הסיבה לשני התסמינים: העיגולים נראו שקופים, וקשה היה להזיז אותם.

   הפס ומילויו מצוירים כ-::before ו-::after של .ar-slider. פסאודו-אלמנט ::after
   הוא ה"ילד האחרון" של האלמנט, ולכן — כששניהם ממוקמים ואין z-index — הוא נצבע
   מעל שדות ה-range שהם ילדים ממשיים. הפס הכחול עבר מעל העיגולים, וזה בדיוק
   נראה כאילו הם שקופים.

   ואותו פס גם קיבל את לחיצות העכבר. פסאודו-אלמנט ממוקם מקבל אירועים כמו כל
   אלמנט, וה-thumb שמתחתיו לא נגע בהם — לכן הגרירה "נתפסה" ולא זזה.

   שלוש שורות: הפסים יורדים מתחת ומפסיקים לקבל אירועים, והעיגולים עולים מעליהם.
   ========================================================================== */

.ar-slider::before,
.ar-slider::after {
	pointer-events: none;
	z-index: 0;
}

.ar-slider input[type="range"] { z-index: 2; }

/* ============================================================================
   פופאפ — שורת יצירת הקשר, סופית
   ============================================================================
   ⚠️ בשורה יושבים חמישה ילדים, לא שלושה: הטלפון, וואטסאפ (מוסתר כאן), מייל,
   שליחה לחבר — ו-.ar-contact-result, פסקת התשובה. היא מוגדרת width:100%, ובשורה
   שאינה נשברת היא בלעה את כל הרוחב הפנוי והצמידה את שלושת הכפתורים לימין עם
   חלל ריק לצידם. ריקה — היא יורדת.

   ובנוסף: שלושתם בשורה אחת, בגובה אחד, בלי ירידת שורה בתוך כפתור. יש כאן די
   מקום — "שליחה לחבר" בשתי שורות הפך אותו לקופסה כפולת גובה ליד שני שכניו.
   ========================================================================== */

.ar-pop .ar-contact-row .ar-contact-result:empty { display: none; }

.ar-pop .ar-contact-row {
	align-items: stretch;
	gap: 8px;
}

.ar-pop .ar-contact-row .ar-contact-phone,
.ar-pop .ar-contact-row .ar-mail-btn,
.ar-pop .ar-contact-row .ar-share-btn {
	flex: 1 1 0;
	min-width: 0;
	white-space: nowrap;
	height: auto;
	min-height: 42px;
	padding-inline: 8px;
	line-height: 1.2;
}

.ar-pop .ar-contact-row .ar-contact-phone a { height: 100%; }

/* ============================================================================
   סרגל התוצאות — גובה אחד לכל הפקדים
   ============================================================================
   נמדד על האתר החי: "מועדפים" 46 פיקסלים, "מיון" 40, ומתג התצוגה 37 עם כפתורים
   של 35. ארבעה פקדים באותה שורה בשלושה גבהים — הם מרוכזים אנכית, ולכן זה לא
   נקרא כשגיאה אלא פשוט כשורה לא מיושרת.

   כל אחד מהם נשא את הגובה שנגזר מהריפוד והגופן שלו. הגובה נקבע כאן במפורש,
   במקום אחד, ופנימיות הפקדים נמתחות אליו.
   ========================================================================== */

.ar-results-tools > .ar-fav-filter,
.ar-results-tools > .ar-dis-filter,
.ar-results-tools > .ar-sort,
.ar-results-tools > .ar-sort select,
.ar-results-tools > .ar-layouts {
	height: 40px;
	min-height: 40px;
	box-sizing: border-box;
}

.ar-results-tools > .ar-fav-filter,
.ar-results-tools > .ar-dis-filter {
	display: inline-flex;
	align-items: center;
	padding-block: 0;
}

/* ⚠️ הכפתורים נמתחים לגובה המעטפת, ולכן אין להם ריפוד אנכי משלהם — ריפוד
   אנכי בתוך מעטפת בגובה קבוע רק דוחף אותם החוצה. */
.ar-results-tools > .ar-layouts {
	display: inline-flex;
	align-items: stretch;
	padding-block: 0;
}

.ar-results-tools .ar-layout-btn {
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding-block: 0;
}

/* ============================================================================
   רוחבי העמודות של לוח ההחלפה והביקוש
   ============================================================================
   הטבלה היא table-layout: fixed, ולכן עמודה בלי רוחב מוגדר מתחלקת בשארית —
   ובלוח ההחלפה יש חמש עמודות כאלה, כך שעמודת ההערות נדחסת. הרוחבים כאן נגזרים
   ממה שהעמודות באמת מכילות: מספר קטן, טווח תאריכים בטקסט חופשי, ורשימת אזורים.
   ========================================================================== */

.ar-table .ar-col-floor           { width: 60px; }
.ar-table .ar-col-beds_needed     { width: 78px; }
.ar-table .ar-col-preferred_dates { width: 132px; overflow-wrap: break-word; word-break: break-word; }
.ar-table .ar-col-preferred_area  { width: 124px; overflow-wrap: break-word; word-break: break-word; }
.ar-table .ar-col-wanted_dates    { width: 132px; overflow-wrap: break-word; word-break: break-word; }

/* ============================================================================
   כותרת הטבלה — אייקונים, חצי מיון, ושורה קפואה
   ========================================================================== */

/* האייקון בכותרת נושא את צבע הכותרת ולא צבע משלו — הוא שם התוכן של העמודה,
   לא פקד. */
.ar-table thead .ar-th-icon {
	display: inline-block;
	vertical-align: -3px;
	color: var(--ar-muted, #6b7684);
}

/* ⚠️ החץ הכבוי חלש אבל קיים: הוא אומר "אפשר ללחוץ כאן", וזה מה שהיה חסר.
   החי נשאר בצבע מלא ולכן ממשיך לבלוט מולם. */
.ar-sort-arrow.is-idle {
	opacity: .32;
	font-size: .85em;
}

.ar-table thead th a:hover .ar-sort-arrow.is-idle { opacity: .7; }

/*
 * ⚠️ שורת הכותרת נדבקת — מתחת לכותרת הדביקה של האתר.
 *
 * ההיסט אינו מספר קבוע: הכותרת של הערכה דביקה בעצמה, וגובהה משתנה בין מסך רחב
 * לנייד ובין גלילה למעלה לגלילה למטה. הוא נמדד בסקריפט ונכתב אל --ar-sticky-top;
 * מספר קשיח כאן היה נכון במסך אחד בלבד, ומסתיר את השורה הראשונה בכל השאר.
 */
.ar-table thead th {
	position: sticky;
	top: var( --ar-sticky-top, 0px );
	z-index: 3;
	background: #fff;
}

/* בלי זה נראה קו הגבול של הכותרת נגלל יחד עם התוכן: גבולות של תא אינם נצבעים
   עם האלמנט הדביק. */
.ar-table thead th {
	box-shadow: inset 0 -1px 0 var(--ar-line, #e6e9ef);
}

/* ============================================================================
   כותרת הטבלה — מרכוז וצבע
   ============================================================================
   ⚠️ הבורר הוא th[class] ולא th בלבד. יישור העמודות נקבע בכללים כמו
   `.ar-table .ar-col-address { text-align: right }` שחלים גם על תא הכותרת
   ומשקלם גבוה יותר — כלל על thead לבדו היה מפסיד להם, וחלק מהכותרות היו
   נשארות צמודות לצד בזמן שהשאר במרכז.
   ========================================================================== */

.ar-table thead th[class] {
	text-align: center;
	vertical-align: middle;
}

/* התוכן עצמו במרכז התא, והחץ צמוד למילה ולא נשמט לקצה. */
.ar-table thead th a,
.ar-table thead th > span:not(.screen-reader-text) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

/* האייקון בצבע הכותרת. אפור הוא צבע של דבר מושבת — כאן הוא שם העמודה. */
.ar-table thead .ar-th-icon { color: var(--ar-primary, #1596a8); }

/* ============================================================================
   העטיפה של הטבלה — הסיבה שההקפאה לא עבדה, והפס האפור בצד
   ============================================================================
   ⚠️ `position: sticky` נמדד מול **אב הגלילה הקרוב ביותר**. ל-.ar-table-wrap היה
   `overflow-x: auto`, ולפי המפרט ברגע שציר אחד אינו visible גם השני הופך ל-auto —
   כלומר העטיפה עצמה הפכה לאזור גלילה, ושורת הכותרת נדבקה לראש **שלה**. היא לא
   נגללת לעולם, ולכן שום דבר לא קרה. זה גם מה שצייר את הפס האפור בצד: תעלת פס
   הגלילה של אותה עטיפה.

   הטבלה היא table-layout: fixed ונחתכת לרוחב המכל, ובנייד היא מתקפלת לכרטיסים —
   כלומר גלילה אופקית אינה נדרשת כאן ממילא. נמדד על האתר החי: רוחב הטבלה שווה
   בדיוק לרוחב העטיפה.
   ========================================================================== */

.ar-table-wrap { overflow: visible; }

/* ============================================================================
   "החזרת כולן" — בלי ורוד
   ============================================================================
   הערכה צובעת כל <button> בוורוד, וזה כפתור. אותה מלכודת שחוזרת, ולכן מנוסח
   במפורש — כולל ה-outline, שהחזיר את הטבעת הכהה בפעם הקודמת.
   ========================================================================== */

.ar-dis-strip .ar-fav-strip-b,
.ar-fav-strip .ar-fav-strip-b {
	background: #fff !important;
	border: 1px solid var(--ar-line, #e6e9ef) !important;
	color: var(--ar-dark, #0e2846) !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.ar-dis-strip .ar-fav-strip-b:hover,
.ar-fav-strip .ar-fav-strip-b:hover {
	border-color: var(--ar-primary, #1596a8) !important;
	color: var(--ar-primary, #1596a8) !important;
}

/* ============================================================================
   חצי הרשימות בסרגל החיפוש — גדולים מספיק כדי להיראות
   ============================================================================
   11 פיקסלים בשקיפות 0.6 — החץ הוא מה שאומר "כאן נפתחת רשימה", וזו האמירה
   היחידה שהפקד עושה לפני שנוגעים בו. מוגדל ומוכהה, בשלושת המקומות שבהם הוא
   מופיע: בורר הערים, "סינון", והחיפושים השמורים.
   ========================================================================== */

.ar-sb-caret {
	font-size: 15px;
	opacity: .85;
}

.ar-multi-caret {
	font-size: 15px;
	color: var(--ar-muted, #6b7684);
}

/* ============================================================================
   בורר הערים — התיבות חזרו להיות תיבות
   ============================================================================
   ⚠️ נמדד על האתר החי: תיבת הסימון בתוך .ar-multi-opt חושבה כ-`width: 100%`
   ועם `appearance: none`. כלומר היא נמתחה על כל רוחב השורה **ואיבדה את הציור
   שלה** — מה שנשאר הוא שטח ריק שדוחף את שם העיר הצידה, וזה בדיוק מה שנראה כמו
   רשימה שהשתבשה: שמות ערים בלי שום תיבה לידם.

   `input { width: 100% }` הוא כלל נפוץ בערכות עיצוב, ותיבת סימון היא הפקד
   היחיד שאסור לו להימתח. מנוסח כאן במפורש, כולל appearance — בלעדיו התיבה
   נשארת בלתי נראית גם ברוחב הנכון.
   ========================================================================== */

.ar-multi-opt input[type="checkbox"] {
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ============================================================================
   חץ המיון — אותו סימן בכל עמודה
   ============================================================================
   חץ אחד למעלה וחץ אחד למטה, תמיד שניהם. הצד הפעיל נדלק. עמודה שהוצג בה ▲ בודד
   בזמן ששכנותיה הראו ⇅ נראתה כפקד מסוג אחר, ולא כאותו פקד במצב אחר.
   ========================================================================== */

.ar-sort-arrow {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	line-height: .62;
	font-size: 9px;
	margin-inline-start: 3px;
}

.ar-sort-arrow > span {
	opacity: .28;
	color: var(--ar-muted, #6b7684);
}

.ar-sort-arrow.is-asc .ar-sort-up,
.ar-sort-arrow.is-desc .ar-sort-down {
	opacity: 1;
	color: var(--ar-primary, #1596a8);
}

.ar-table thead th a:hover .ar-sort-arrow > span { opacity: .55; }

.ar-table thead th a:hover .ar-sort-arrow.is-asc .ar-sort-up,
.ar-table thead th a:hover .ar-sort-arrow.is-desc .ar-sort-down { opacity: 1; }

/* התו של ההערה בכותרת — באותו גודל שבו הוא יושב בתאים. */
.ar-table thead .ar-th-glyph {
	font-size: 17px;
	line-height: 1;
	color: var(--ar-primary, #1596a8);
}