/* ============================================================================
   plaza-luxury.css — Plaza Estates theme
   ----------------------------------------------------------------------------
   Load LAST, after plaza-replit-style.css, site.css and app.css.
   Overrides tokens and components only — no Razor markup changes required
   beyond the theme wrapper in MainLayout. Remove the <link> to revert.

   THREE MARKETS, ONE STYLESHEET
     .theme-cyprus  limestone + terracotta   (Mediterranean, light)
     .theme-greece  whitewash + Aegean blue  (Mediterranean, light)
     .theme-dubai   black + gold             (dark)
   Everything below reads from the tokens, so a market is re-skinned by editing
   its token block alone. :root carries the Cyprus values as the default, which
   is also what paints before the theme wrapper resolves.

   SHARED BONES (all markets)
     hairlines instead of shadows · no lift-on-hover · square corners
     Cormorant Garamond display over Commissioner for data · photography given room
   ========================================================================== */

/* ================================================================ 1. TOKENS */

:root,
.theme-cyprus {
  --bg:     #FAF7F0;   /* limewash */
  --fg:     #1A2220;
  --muted:  #6B6A5F;   /* 5.1:1 on bg */
  --card:   #FFFFFF;
  --card2:  #F1EADC;   /* limestone band */
  --border: #E3DBCB;
  --gold:   #A65A2E;   /* terracotta — the accent; 4.8:1 on bg */
  --gold2:  #8A4824;
  --btn-fg: #FFFFFF;

  --ink:     #14262A;  /* deep sea-charcoal chrome */
  --ink-2:   #1B3238;
  --ink-fg:  #F7F3EA;
  --ink-mut: #A8AFA6;  /* 7.1:1 on ink */
  --ink-dim: #8A938B;  /* 5.0:1 on ink */
  --brass:   #C9803F;  /* accent on dark — 5.0:1 on ink */
  --scrim:   20, 38, 42;
}

.theme-greece {
  --bg:     #FAFAF7;   /* whitewash */
  --fg:     #14242C;
  --muted:  #64707A;
  --card:   #FFFFFF;
  --card2:  #EEF1F1;
  --border: #DCE2E3;
  --gold:   #1B5E7A;   /* Aegean — 6.9:1 on bg */
  --gold2:  #124256;
  --btn-fg: #FFFFFF;

  --ink:     #0F2C3A;
  --ink-2:   #163B4C;
  --ink-fg:  #F5F8F8;
  --ink-mut: #A3B4BC;
  --ink-dim: #85979F;
  --brass:   #7FC3D6;
  --scrim:   15, 44, 58;
}

.theme-dubai {
  --bg:     #0B0A09;   /* black ground — this market runs dark throughout */
  --fg:     #F2EDE3;
  --muted:  #9A9287;   /* 6.4:1 on bg */
  --card:   #131211;
  --card2:  #1A1816;
  --border: #2A2724;
  --gold:   #C9A227;   /* 7.8:1 on card */
  --gold2:  #E0BC4E;
  --btn-fg: #0B0A09;   /* dark text on gold, not white */

  --ink:     #0B0A09;
  --ink-2:   #131211;
  --ink-fg:  #F2EDE3;
  --ink-mut: #9A9287;
  --ink-dim: #8A8377;
  --brass:   #C9A227;
  --scrim:   11, 10, 9;
}

:root {
  --hairline-dark: rgba(255, 255, 255, .12);
  --font-sans:  'Commissioner', system-ui, -apple-system, sans-serif;
  --font-serif: 'Cormorant Garamond', Cormorant, Georgia, serif;
}

/* the wrapper paints the market's ground across the viewport */
.site-theme {
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-theme > main { flex: 1 0 auto; }

/* ============================================================ 2. FOUNDATION */

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 400;              /* was 300 — too thin to read at body sizes */
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { width: min(1280px, calc(100% - 48px)); }
.font-serif { font-family: var(--font-serif); }
::selection { background: rgba(var(--scrim), .16); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ====================================================== 3. TOPBAR + NAVBAR */

.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, .82);   /* was --ink-dim: too quiet on a solid bar */
  border-bottom: 1px solid var(--hairline-dark);
  font-size: 13.5px;
  letter-spacing: .02em;
}
.topbar a { color: rgba(255, 255, 255, .82); }
.topbar-inner { min-height: 42px; }
.topbar a:hover { color: var(--brass); }

.social {
  background: rgba(255, 255, 255, .08);
  color: var(--brass);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s, color .25s;
}
.social:hover { background: rgba(255, 255, 255, .18); }

/* ---------------------------------------------------- WhatsApp controls ---
   WhatsApp's green is theirs, not the market's, so it is hard-coded here and
   deliberately kept out of the theme tokens — it must stay identical across
   Cyprus, Greece and Dubai. */

.wa-icon { display: block; flex: none; }

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
}
.btn-whatsapp:hover {
  background: #1EB456;
  border-color: #1EB456;
  color: #FFFFFF;
}

.navbar {
  background: var(--ink);        /* solid — the translucent blur muddied it */
  backdrop-filter: none;
  border-bottom: 1px solid var(--hairline-dark);
}
.nav-inner { height: 112px; }
.logo { height: 76px; }

.nav-links { gap: 32px; font-size: 13px; font-weight: 500; }
.nav-links a {
  color: #FFFFFF;                    /* was --ink-mut, which read as disabled */
  text-transform: uppercase;
  letter-spacing: .13em;             /* eased off, since the type is larger */
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--brass); border-bottom-color: var(--brass); }

.nav-actions { gap: 20px; }

/* the country picker sits on the dark bar, so it can't take the light input rule */
.top-select {
  width: auto;
  min-height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .34);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 12px;
}
.top-select:hover { border-color: rgba(255, 255, 255, .6); }
.top-select:focus { border-color: var(--brass); }
.top-select option { background: var(--ink); color: var(--ink-fg); }

.lang { font-size: 12.5px; letter-spacing: .12em; color: rgba(255,255,255,.85); }
.lang span:first-child { color: var(--brass); }
.lang span:hover { color: var(--ink-fg); }

/* ================================================================ 4. BUTTONS */

.btn {
  min-height: 48px;
  padding: 0 28px;
  border-radius: 0;
  background: var(--gold);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background-color .25s, color .25s, border-color .25s;
}
.btn:hover {
  background: var(--gold2);
  color: var(--btn-fg);
  transform: none;               /* the 1px lift read as cheap */
}

.btn-outline {
  background: transparent;
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}
.btn-outline:hover {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  color: var(--gold2);
  border-color: var(--gold);
}

/* on dark chrome the light-ground accent fails contrast — use the dark-ground one */
.navbar .btn-outline,
.hero .btn-outline,
footer .btn-outline {
  color: var(--brass);
  border-color: color-mix(in srgb, var(--brass) 65%, transparent);
  font-size: 12px;
  letter-spacing: .14em;
}
.navbar .btn-outline:hover,
.hero .btn-outline:hover,
footer .btn-outline:hover {
  background: color-mix(in srgb, var(--brass) 12%, transparent);
  color: var(--brass);
}

.btn-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
  color: #FFFFFF;
  backdrop-filter: none;
}
.btn-light:hover { background: rgba(255, 255, 255, .12); }

.mobile-only.btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--ink-fg);
}

/* =================================================================== 5. HERO */

.hero {
  min-height: 88vh;
  place-items: end start;        /* was centred — left-aligned reads editorial */
  text-align: left;
  position: relative;

  /* Home.razor sets background-image inline but nothing ever set these, so the hero
     image tiled at its natural size instead of covering the section. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero.small { min-height: 58vh; }

/* Readability layer. Home.razor sets background-image inline, so this has to
   live on ::before: dark from the left where the copy sits, fading to the page
   ground at the bottom so the photo melts into the section below. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(var(--scrim), .80) 0%, rgba(var(--scrim), .44) 38%, rgba(var(--scrim), .04) 68%),
    linear-gradient(to top, var(--bg) 0%, rgba(var(--scrim), 0) 20%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(96px, 14vh, 168px);
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(50px, 7vw, 104px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: #FFFFFF;
  text-shadow: none;             /* the scrim does this job properly */
  margin: 0 0 22px;
  max-width: 16ch;
}
.hero.small h1 { font-size: clamp(40px, 5vw, 72px); }

.hero p {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
  max-width: 58ch;
  margin: 0 0 38px;
}

.hero-buttons { justify-content: flex-start; gap: 14px; }

/* =============================================================== 6. SECTIONS */

.section { padding: 112px 0; }
.section-card { background: var(--card2); border-block: 1px solid var(--border); }

.section-head {
  align-items: end;
  margin-bottom: 52px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

.section h2,
.page-title h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--fg);
  margin: 0 0 14px;
}
.section p, .page-title p { color: var(--muted); line-height: 1.7; }

/* applies once the inline eyebrow styles come out of the .razor files */
.eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.page-title {
  background: var(--card2);
  border-bottom: 1px solid var(--border);
  padding: 76px 0 56px;
}

.grid-3, .grid-2 { gap: 40px 36px; }

/* ========================================================= 7. PROPERTY CARDS */

.property-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: border-color .3s;
}
.property-card:hover {
  transform: none;               /* was a 5px lift */
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}

.property-img { height: 300px; transition: opacity .3s; }
.property-card:hover .property-img { opacity: .93; }

.property-body { padding: 26px 26px 30px; }

/* plain micro-caps instead of a filled pill */
.badge {
  background: transparent;
  color: var(--gold);
  padding: 0;
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
}

/* The card's top line: For Sale on the left, the reference at the far right, on one
   baseline. The reference is a badge too, so it looks exactly like For Sale; the line
   takes over the badges' bottom margin. */
.card-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card-topline .badge { margin-bottom: 0; }
.card-topline .card-ref {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

.property-card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  color: var(--fg);
  margin: 0 0 8px;
}
.property-card p { color: var(--muted); font-size: 13px; margin: 0; }

/* price in plain ink, not accent — accent everywhere stops being an accent */
.price {
  color: var(--fg);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .01em;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.image-frame:after { inset: 18px; border-color: color-mix(in srgb, var(--gold) 30%, transparent); }

/* ==================================================== 8. ICONS (see PropertyIcons.cs) */

.pico {
  flex: none;
  color: var(--gold);
  vertical-align: -.18em;
}
.pico-lg { color: var(--gold); }

/* spec strip under a price / on a card */
.meta { color: var(--muted); font-size: 13px; gap: 18px; margin-top: 12px; row-gap: 8px; }
.meta span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* the detail page's larger strip */
.meta-lg { font-size: 15px; gap: 26px; }
.meta-lg .pico { color: var(--gold); }

/* label/value table on the detail page */
.spec-row { align-items: center; }
.spec-row > span { display: inline-flex; align-items: center; gap: 12px; }

/* amenity chips — a feature list rendered with icons */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 32px;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--fg);
}
.feature-item .pico { color: var(--gold); }

/* ============================================= 8b. PRICE, CURRENCY, SWITCHERS */

.price-lg { font-size: 30px; border-top: none; padding-top: 0; margin-top: 0; }

/* "+ VAT" rides with the price rather than sitting in the spec strip, because it
   changes what the number means. Quieter than the figure, and never a % symbol. */
.price-vat {
  margin-left: 10px;
  font-size: .62em;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Shown only under a live-converted price — never under one the office entered. */
.price-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 300;
  color: var(--muted);
  cursor: help;
}
.price-note .pico { margin-top: 1px; opacity: .8; }
.price-lg + .price-note { font-size: 13px; margin-top: 10px; }

/* market / language / currency, styled as one group */
.switcher { display: flex; align-items: center; gap: 8px; }
.switcher .top-select { max-width: 140px; }
.switcher-stacked { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 4px 4px; }
.switcher-stacked .top-select { max-width: none; width: 100%; min-height: 44px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================ 8c. PROPERTY MAP */

.property-map-frame {
  position: relative;
  border: 1px solid var(--border);
  margin-bottom: 32px;
}
.property-map {
  height: 380px;
  width: 100%;
  background: var(--card2);
}

/* the inner hairline that frames the gallery images, repeated on the map */
.property-map-frame::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  pointer-events: none;
  z-index: 500;              /* over Leaflet's tile pane, under its controls */
}

/* the market's logo as the pin — a soft drop shadow lifts it off the tiles,
   since a flat logo on a busy map reads as part of the map */
.plaza-pin {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45));
}

/* Leaflet's own chrome, brought into the palette */
.property-map .leaflet-control-zoom a {
  background: var(--card);
  color: var(--fg);
  border-color: var(--border);
  border-radius: 0;
  font-weight: 400;
}
.property-map .leaflet-control-zoom a:hover { background: var(--card2); color: var(--gold); }
.property-map .leaflet-bar { border: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.property-map .leaflet-control-attribution {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 10px;
}
.property-map .leaflet-control-attribution a { color: var(--gold); }
.property-map .leaflet-popup-content-wrapper {
  background: var(--card);
  color: var(--fg);
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  font-family: var(--font-serif);
  font-size: 17px;
}
.property-map .leaflet-popup-tip { background: var(--card); }

/* Dubai runs dark. With LocationIQ the tiles are already its dark style, so this only
   corrects the bright OpenStreetMap fallback. */
.theme-dubai .property-map.is-osm .leaflet-tile-pane { filter: brightness(.8) saturate(.82) hue-rotate(-6deg); }

/* ========================================================= 9. FORMS, FILTERS */

.filters { background: var(--card); border: 1px solid var(--border); padding: 28px; }
.form-row { gap: 9px; margin-bottom: 20px; }

label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

input, select, textarea {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--fg);
  min-height: 48px;
  padding: 13px 15px;
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 15px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); }

/* ================================================================= 10. FOOTER */

footer {
  background: var(--ink);
  color: var(--ink-mut);
  border-top: 1px solid var(--hairline-dark);
  padding: 84px 0 32px;
}
.footer-logo { height: 92px; width: auto; margin-bottom: 20px; }

footer h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink-fg);
  margin: 0 0 18px;
}
footer ul { color: var(--ink-mut); font-size: 14px; gap: 11px; }
footer a:hover { color: var(--brass); }
.footer-bottom {
  border-top: 1px solid var(--hairline-dark);
  color: var(--ink-dim);
  margin-top: 48px;
  padding-top: 26px;
}

.whatsapp-fixed {
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(var(--scrim), .22);
  display: grid;
  place-items: center;
}
.whatsapp-fixed:hover { transform: none; filter: brightness(1.06); }

/* =================================== 11. RULES site.css WROTE FOR THE OLD DARK */

.mobile-menu { border-top: 1px solid var(--border); }
.mobile-menu a { color: var(--fg); }

.pagination button {
  border: 1px solid var(--border);
  color: var(--fg);
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.pagination button.active,
.pagination button:hover {
  background: var(--gold);
  color: var(--btn-fg);
  border-color: var(--gold);
}

/* The agent's photo above their name, number and email, over the contact card. Above and
   not beside: the box is narrow, and beside the photo an email address had to break in
   the middle. Round, and cut from the top of the picture down: a portrait keeps its face. */
.agent-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
}
.agent-contact p {
  margin: 0;
  max-width: 100%;
  /* only an address longer than the whole box is broken */
  overflow-wrap: break-word;
}
.agent-photo {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--bg);
  border: 1px solid var(--border);
}

/* The agent's contact card on a property's page: its QR code, and what to do with it.
   The code is shown large - 176px for some 65 squares across - because a camera has to
   read it off a screen; at the size of a thumbnail it does not. */
.agent-card {
  margin: 4px 0 8px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  text-align: center;
}
/* always black on white with its margin, whatever the theme: that is what a camera reads */
.agent-card-qr {
  display: block;
  width: 176px;
  height: 176px;
  margin: 0 auto 12px;
  background: #FFFFFF;
  image-rendering: pixelated;
}
.agent-card-title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.agent-card-hint {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.agent-card-link {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agent-card-link:hover { color: var(--gold2); }

/* The tick-box drop-down of the two searches (MultiSelect.razor): District, Town.
   Closed, it is the selects beside it; open, a list of boxes to tick under it. */
.multi { position: relative; }
.multi-toggle {
  width: 100%;
  min-height: 48px;
  /* 19px on the left: where a select starts its text, so the words line up down the form */
  padding: 13px 15px 13px 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  /* "normal", as a select has: it is what makes this exactly as tall as the selects
     beside it, whichever font has loaded */
  line-height: normal;
  text-align: left;
  cursor: pointer;
}
.multi-toggle:hover,
.multi.is-open .multi-toggle { border-color: var(--gold); }
.multi-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multi-caret {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
.multi.is-open .multi-caret { margin-top: 3px; transform: rotate(225deg); }

/* an invisible sheet over the page, so that a click anywhere else closes the list */
.multi-backdrop { position: fixed; inset: 0; z-index: 40; }

.multi-panel {
  position: absolute;
  z-index: 41;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(340px, 86vw);
  background: var(--card);
  border: 1px solid var(--gold);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}
.multi-filter {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
/* the site's focus ring stands 3px outside a field, which here is outside the panel */
.multi-filter:focus,
.multi-filter:focus-visible { outline: none; border-bottom-color: var(--gold); }
.multi-list {
  max-height: 290px;
  overflow-y: auto;
  padding: 6px 0;
}
/* the site's own "label" is small gold capitals; an option is ordinary text */
.multi-option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  padding: 6px 15px;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  cursor: pointer;
}
.multi-option:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }
/* and the site's own "input" is a full-width 48px box; a tick box is a tick box */
.multi-option input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.multi-name { flex: 1; }
.multi-note { color: var(--muted); font-size: 12px; white-space: nowrap; }
.multi-empty { margin: 0; padding: 12px 15px; color: var(--muted); font-size: 14px; }
.multi-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}
.multi-actions button {
  min-height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.multi-actions button:disabled { opacity: .35; cursor: default; }
.multi-actions .multi-done { color: var(--btn-fg); background: var(--gold); border-color: var(--gold); }
.multi-actions .multi-clear:hover:not(:disabled) { color: var(--gold); }

/* The search results' pager: a wide "Next", a short run of page numbers, and where
   the visitor is ("16-30 of 236 properties"). Centred under the results. */
.pager {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.pager-next {
  width: min(100%, 360px);
  min-height: 52px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
}
.pager-next:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.pager-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.pager-pages button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.pager-pages button:hover:not(:disabled) {
  color: var(--gold);
  border-color: var(--border);
}
.pager-pages button.active {
  color: var(--fg);
  border-color: var(--gold);
  font-weight: 600;
  cursor: default;
}
.pager-pages button:disabled {
  opacity: .3;
  cursor: default;
}
.pager-arrow {
  font-size: 22px !important;
  line-height: 1;
}
.pager-gap {
  min-width: 28px;
  text-align: center;
  color: var(--muted);
}
.pager-count {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.gallery-main { height: 560px; border-color: var(--border); }
.gallery-strip img { border-color: var(--border); opacity: .5; }
.gallery-strip img:hover,
.gallery-strip img.active { opacity: 1; border-color: var(--gold); }

/* The large photo and the arrows that step through the rest. The arrows sit over the
   photo at its two sides, full enough in height to be an easy target on a phone. */
.gallery-stage { position: relative; outline: none; }
.gallery-stage .gallery-main { display: block; }
.gallery-stage:focus-visible .gallery-main { border-color: var(--gold); }
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 84px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: rgba(var(--scrim), .46);
  color: #FFFFFF;
  cursor: pointer;
  transition: background .2s;
}
.gallery-nav:hover,
.gallery-nav:focus-visible { background: rgba(var(--scrim), .82); }
.gallery-nav:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; }
.gallery-prev { left: 1px; }
.gallery-next { right: 1px; }
.gallery-nav svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
}
.gallery-count {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 4px 10px;
  background: rgba(var(--scrim), .62);
  color: #FFFFFF;
  font-size: 12px;
  letter-spacing: .12em;
  pointer-events: none;
}

.spec-table { background: var(--border); border-color: var(--border); }
.spec-row { background: var(--card); }
.spec-row span { color: var(--muted); }
.spec-row strong { color: var(--fg); }

.admin-nav { background: var(--card); border-right: 1px solid var(--border); }
.admin-nav a { color: var(--muted); }
.admin-nav a:hover,
.admin-nav a.active { color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.admin-nav-brand span { color: var(--gold); }
.admin-table { background: var(--card); }
.admin-table th { color: var(--muted); letter-spacing: .16em; }
.admin-toast { background: color-mix(in srgb, var(--gold) 10%, transparent); border-color: var(--gold); }
.admin-btn { border-color: var(--gold); color: var(--gold); min-height: 40px; }
.admin-btn:hover { background: var(--gold); color: var(--btn-fg); }
.admin-logout-btn { border-color: var(--border); color: var(--muted); min-height: 44px; }
.admin-logout-btn:hover { color: var(--fg); border-color: var(--gold); }
.admin-login-box { background: var(--card); border-color: var(--border); }
.admin-login-box label { color: var(--gold); }
.admin-login-box input { background: var(--card); border-color: var(--border); color: var(--fg); }
.admin-login-error { color: #B3261E; }

.status-pill {
  border-radius: 0;
  padding: 4px 11px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.status-pill.live   { background: rgba(47, 106, 58, .14); color: #2F6A3A; }
.status-pill.hidden { background: rgba(128, 128, 128, .14); color: var(--muted); }
.status-pill.warn   { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold2); }

.theme-dubai .status-pill.live { color: #6FCF73; }
.theme-dubai .admin-login-error,
.theme-dubai .spec-row strong { color: var(--fg); }

/* ======================================================= 11b. BROCHURE BUTTONS */
/* BrochureButtons.razor - branded / unbranded PDF brochure links. Compact is the
   strip joined to the bottom of a property card; full size sits in the detail
   page's sidebar and reuses .btn / .btn-outline. */

.card-shell { display: flex; flex-direction: column; position: relative; }   /* relative: the favourite heart sits over the photo */
.card-shell > a { flex: 1 0 auto; display: flex !important; }
.card-shell > a > .property-card { flex: 1; }

.brochure-actions { display: flex; flex-direction: column; gap: 10px; }
.brochure-actions .btn { width: 100%; justify-content: center; }

.brochure-actions.compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: none;
}
.brochure-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s, color .25s;
}
.brochure-link + .brochure-link { border-left: 1px solid var(--border); }
.brochure-link:hover {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  color: var(--gold2);
}
.brochure-link svg { width: 13px; height: 13px; flex: none; }

/* a property's page: the text, and the agent box beside it; one column on a phone (below) */
.properties-layout.detail-layout { grid-template-columns: minmax(0, 1fr) 340px; }

/* ================================================================= 12. NARROW */

@media (max-width: 850px) {
  .properties-layout.detail-layout { grid-template-columns: minmax(0, 1fr); }
  .container { width: calc(100% - 32px); }
  .section { padding: 72px 0; }
  .nav-inner { height: 88px; }
  .logo { height: 58px; }
  .hero { min-height: 76vh; }
  .hero h1 { max-width: none; }
  .section-head { align-items: flex-start; text-align: left; }
  .property-img { height: 240px; }
  .gallery-main { height: 320px; }
  .gallery-nav { width: 44px; height: 64px; }
  .meta { gap: 14px; }
  .feature-grid { grid-template-columns: 1fr; }
  .switcher { display: none; }          /* moves into the mobile menu */
  .mobile-menu .switcher { display: flex; }
}

/* ===================================================== 12. MY FAVOURITES LINK */
/* The heart in the header (SiteHeader.razor), with the number saved on this market.
   The hearts on the cards and the email box style themselves (FavouriteButton.razor.css,
   SiteSession.razor.css). */

.fav-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink-fg);
}
.fav-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fav-link:hover { color: var(--brass); }
.fav-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--brass);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}