/* Saved properties, the header counter, the third-save offer and the "send it to me" sheet.
   Loaded beside js/dn-saved-v1.js on every page that has a header, and on /saved.

   New file, new name: nothing here has a cache history, so returning visitors see it at once
   even though nginx gives .css 30 days (the HTML that references it is no-cache).

   Everything is written with LOGICAL properties (inset-inline, margin-inline, padding-inline)
   so the Persian and Arabic pages need no mirrored rules of their own. The two places that
   genuinely must not mirror — a phone number and a country code — are pinned with dir="ltr"
   in the markup, not here. */

:root{
  --dns-ink:#111827;
  --dns-ink-soft:#4b5260;
  --dns-ivory:#fffaf1;
  --dns-line:#eadfc8;
  --dns-gold:#75591f;
  --dns-grey-line:#e4e7ec;
  --dns-radius:14px;
}

/* ── 1. The header counter ────────────────────────────────────────────────────
   Hidden at zero (a permanent "0" on 3,773 pages teaches people to ignore the header),
   shown from one. It is a link, so it works with JavaScript's job already done. */
.dn-saved-pill{
  display:none;
  align-items:center;
  /* IT HAS TO BE ON TOP OR IT IS NOT A LINK.
     The pill is inserted into .zpcontainer beside the language switcher, and the theme's main menu
     sits in the same corner with z-index 280 and a <ul> that measures the full width of the header
     — invisible, and over the pill. At 1440x900 document.elementsFromPoint() at the pill's own
     centre returned the UL first, a real click landed on "HomePropertiesCommunities…", and the URL
     never changed. Since this pill is the ONLY link to /saved anywhere on the site, the saved page
     could not be reached from a laptop at all: exactly the "Save does nothing" complaint that
     started this work, one layer further on. It works at 390px because the menu collapses there.
     (The language buttons underneath have the same fault on production today; that is a separate
     fix in the navigation stylesheet, noted for the owner rather than smuggled in here.) */
  position:relative;
  z-index:300;
  gap:6px;
  /* and js/dn-saved-v1.js liftPill() marks the ancestor that would otherwise trap that 300 —
     see the note there; a z-index alone does nothing inside a stacking context. */
  min-height:38px;
  padding:0 12px;
  border:1px solid var(--dns-line);
  border-radius:999px;
  background:#fff;
  color:var(--dns-gold);
  font:700 13px/1 "Open Sans 700","Open Sans",Arial,Helvetica,sans-serif;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease;
}
.dn-saved-pill.is-on{display:inline-flex}
/* The pill's stacking ancestor, raised past the main menu so the pill is reachable at all.
   Applied by JS only to the nearest positioned ancestor that has a z-index of its own, so the
   sticky header (250) is never lifted over the photo lightbox.

   !important, and not from laziness: the theme serves .theme-header-topbar's z-index:40 from a
   stylesheet this page cannot read back (the Zoho CDN), so there is no selector to out-specify —
   the rule is invisible to the cascade from here and simply wins. Measured: the class alone left
   the computed z-index at 40 and the pill still un-clickable; with !important it is 300 and
   document.elementFromPoint() at the pill's centre returns the pill. */
.dn-saved-lift{z-index:300 !important}
.dn-saved-pill:hover{background:var(--dns-ivory);border-color:#ddcfb2}
.dn-saved-pill svg{width:15px;height:15px;flex:none}
/* The number is Latin digits on every page (a Persian page shows "3", not "۳", because the
   list is a count of our own cards and the rest of the pill is a glyph). */
.dn-saved-pill b{font-weight:800;direction:ltr;unicode-bidi:isolate}
.dn-saved-pill.is-bumped{transform:scale(1.18)}
/* On the theme header the pill sits in the top bar beside the language switcher; on a phone it
   sits next to the burger, where the switcher already goes. */
@media(max-width:991px){
  .dn-saved-pill{min-height:36px;padding:0 10px;font-size:12px}
}

/* ── 1b. The detail page's toolbar ────────────────────────────────────────────
   "The Save button does nothing" started here: it flipped one attribute nothing read, and the
   look barely changed. css/dn-property-detail-ready.css already turns a pressed toolbar button
   gold; this makes the pressed state read as a STATE rather than a hover, and makes room for the
   third button without three cramped 13px labels on a 390px screen. */
.dn-ready-toolbar .dn-ready-save[aria-pressed="true"]{
  border-color:#bfa76a;background:#fff3dd;color:#5e460f;font-weight:800;
}
@media(max-width:640px){
  .dn-ready-toolbar{flex-wrap:wrap}
  /* Persian "برایم بفرست" and Arabic "أرسله لي" are longer than "Send to me"; three buttons on
     one row at 390px only fit with the padding reduced, and they wrap rather than clip. */
  .dn-ready-toolbar button{flex:1 1 30%;min-width:94px;padding:0 8px;font-size:12.5px}
}

/* ── 2. The third-save offer ──────────────────────────────────────────────────
   In the document flow at the end of the listing, never fixed, never modal. It is a
   role="region", so nothing about it traps focus. */
.dn-saved-offer{
  margin:22px 0 4px;
  padding:16px 18px;
  border:1px solid var(--dns-line);
  border-radius:var(--dns-radius);
  background:var(--dns-ivory);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .28s ease,transform .28s ease;
  font-family:"Open Sans 400","Open Sans",Arial,Helvetica,sans-serif;
}
html[dir="rtl"] .dn-saved-offer{font-family:inherit}
.dn-saved-offer.is-in{opacity:1;transform:none}
.dn-saved-offer h2{
  margin:0 0 4px;
  font:800 17px/1.35 "Open Sans 700","Open Sans",Arial,Helvetica,sans-serif;
  color:var(--dns-ink);
}
html[dir="rtl"] .dn-saved-offer h2{font-family:inherit}
.dn-saved-offer p{margin:0 0 12px;color:#3d434d;font-size:14px;line-height:1.6}
.dn-saved-offer-actions{display:flex;gap:10px;flex-wrap:wrap}
.dn-saved-offer-actions button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;
  border-radius:11px;border:1px solid transparent;
  font:750 14px/1 inherit;cursor:pointer;
}
.dn-saved-offer-yes{background:var(--dns-ink);color:#fff}
.dn-saved-offer-yes:hover{background:#000}
.dn-saved-offer-no{background:#fff;border-color:var(--dns-line);color:var(--dns-gold)}
.dn-saved-offer-no:hover{background:#fff6e7}
@media(max-width:640px){
  .dn-saved-offer{padding:14px 15px;border-radius:12px}
  .dn-saved-offer-actions button{flex:1 1 auto}
}

/* ── 3. The "send it to me" sheet ─────────────────────────────────────────────
   A bottom sheet under 900px, a centred panel above it. The backdrop is the only fixed
   element; the page behind it is locked while it is open. */
.dn-share-back{
  position:fixed;inset:0;z-index:2147482000;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(17,24,39,.46);
  opacity:0;transition:opacity .2s ease;
}
.dn-share-back.is-in{opacity:1}
html.dn-share-locked,html.dn-share-locked body{overflow:hidden}

.dn-share-sheet{
  width:min(420px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  border:1px solid var(--dns-line);
  border-radius:18px;
  padding:20px 20px 18px;
  box-shadow:0 22px 60px rgba(17,24,39,.22);
  font:15px/1.6 "Open Sans 400","Open Sans",Arial,Helvetica,sans-serif;
  color:var(--dns-ink);
  transform:translateY(10px);
  transition:transform .22s ease;
}
html[dir="rtl"] .dn-share-sheet{font-family:inherit;line-height:1.85}
.dn-share-back.is-in .dn-share-sheet{transform:none}

.dn-share-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 4px}
.dn-share-head h2{margin:0;font:800 19px/1.3 "Open Sans 700","Open Sans",Arial,Helvetica,sans-serif}
html[dir="rtl"] .dn-share-head h2{font-family:inherit}
.dn-share-close{
  flex:none;width:44px;height:44px;margin:-10px -10px 0 0;
  margin-inline:0 -10px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:#6b7280;
  font-size:26px;line-height:1;cursor:pointer;border-radius:10px;
}
.dn-share-close:hover{background:#f4f5f7;color:var(--dns-ink)}
.dn-share-sub{margin:0 0 14px;color:var(--dns-ink-soft);font-size:13.5px}
/* The listing this is about, so the visitor is never guessing which one they pressed. */
.dn-share-what{
  display:flex;gap:10px;align-items:center;
  margin:0 0 14px;padding:10px;border-radius:12px;background:var(--dns-ivory);
  border:1px solid var(--dns-line);
}
.dn-share-what img{width:56px;height:44px;object-fit:cover;border-radius:8px;flex:none;background:#eee}
.dn-share-what span{font-size:13px;font-weight:700;line-height:1.4;overflow:hidden;display:block}

.dn-share-row{display:flex;gap:8px;align-items:stretch}
.dn-share-row select,.dn-share-row input{
  min-height:48px;
  border:1px solid var(--dns-grey-line);
  border-radius:11px;
  background:#fff;
  color:var(--dns-ink);
  font:600 16px/1 inherit;   /* 16px: anything smaller makes iOS Safari zoom the page on focus */
  padding:0 12px;
}
/* A dial code and a phone number are Latin and left-to-right in every language. */
.dn-share-row select{flex:none;width:112px;direction:ltr;text-align:start}
.dn-share-row input{flex:1 1 auto;min-width:0;direction:ltr;text-align:start}
.dn-share-row select:focus,.dn-share-row input:focus{outline:2px solid #bfa76a;outline-offset:1px;border-color:#bfa76a}
.dn-share-sheet .dn-share-err{display:block;margin:8px 0 0;color:#b42318;font-size:13px;font-style:normal}
.dn-share-sheet .dn-share-err[hidden]{display:none}

.dn-share-consent{margin:14px 0 0;color:var(--dns-ink-soft);font-size:12.5px;line-height:1.6}
.dn-share-consent a{color:var(--dns-gold)}
.dn-share-actions{display:flex;gap:10px;margin-top:14px}
.dn-share-actions button{
  flex:1 1 auto;min-height:48px;border-radius:12px;border:1px solid transparent;
  font:750 15px/1 inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.dn-share-send{background:var(--dns-ink);color:#fff}
.dn-share-send:hover{background:#000}
.dn-share-send[disabled]{opacity:.6;cursor:default}
.dn-share-back-btn{background:#fff;border-color:var(--dns-line);color:var(--dns-gold);flex:0 0 auto;padding:0 18px}

/* The confirm step: the number read back before anything is posted. */
.dn-share-confirm strong{
  display:inline-block;direction:ltr;unicode-bidi:isolate;
  font-weight:800;letter-spacing:.01em;
}
.dn-share-done p{margin:0 0 6px}
.dn-share-done .dn-share-wa{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;margin-top:12px;padding:0 16px;
  border:1px solid var(--dns-line);border-radius:11px;
  background:#fff;color:var(--dns-gold);font-weight:700;text-decoration:none;
}
.dn-share-tick{
  width:38px;height:38px;border-radius:999px;background:var(--dns-ivory);
  border:1px solid var(--dns-line);color:var(--dns-gold);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;
}
/* Two things that are off screen for opposite reasons, kept apart so the next reader can tell
   them apart:
   .dn-share-pot     the honeypots. Out of the tab order AND hidden from assistive technology
                     (aria-hidden on their wrapper) — no sighted or screen-reader visitor can
                     ever fill them, a script fills them every time.
   .dn-share-hidden  the <label>s for the country code and the number. Visually hidden, very
                     much NOT hidden from a screen reader: they are how the two fields are named. */
.dn-share-pot,.dn-share-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}

@media(max-width:899px){
  .dn-share-back{align-items:flex-end;padding:0}
  .dn-share-sheet{
    width:100%;max-height:88vh;
    border-radius:18px 18px 0 0;
    border-inline:0;border-bottom:0;
    padding-bottom:max(18px,env(safe-area-inset-bottom));
    transform:translateY(100%);
  }
  .dn-share-back.is-in .dn-share-sheet{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .dn-share-back,.dn-share-sheet,.dn-saved-offer,.dn-saved-pill{transition:none}
  .dn-share-sheet{transform:none}
}

/* ── 4. The /saved page ───────────────────────────────────────────────────────
   The page shell (bar, page, foot) is inline in saved.html, in the privacy-policy family.
   Only the parts shared with the rest of the site live here. */
.dn-saved-cards{display:grid;gap:12px;margin:18px 0 0}
.dn-saved-card{
  display:flex;align-items:stretch;gap:0;
  border:1px solid var(--dns-grey-line);
  border-radius:var(--dns-radius);
  background:#fff;
  overflow:hidden;
}
.dn-saved-card>a{
  display:flex;align-items:stretch;gap:14px;
  flex:1 1 auto;min-width:0;
  color:inherit;text-decoration:none;
}
.dn-saved-card-media{flex:0 0 132px;min-height:104px;background:#f1f2f4;position:relative}
.dn-saved-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.dn-saved-card-media span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#aeb3bb;font-size:11px;font-weight:700;text-align:center;padding:6px;
}
.dn-saved-card-body{flex:1 1 auto;min-width:0;padding:12px 14px;display:flex;flex-direction:column;gap:3px;justify-content:center}
.dn-saved-card-price{margin:0;font:800 17px/1.25 "Open Sans 700","Open Sans",Arial,Helvetica,sans-serif;color:var(--dns-ink)}
html[dir="rtl"] .dn-saved-card-price{font-family:inherit}
.dn-saved-card-title{
  margin:0;font-size:14px;font-weight:700;color:#2d3139;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dn-saved-card-place{margin:0;font-size:13px;color:var(--dns-ink-soft)}
.dn-saved-card-meta{margin:0;font-size:12.5px;color:#6b7280}
.dn-saved-card-when{margin:2px 0 0;font-size:12px;color:#8a9099}
.dn-saved-card-side{
  flex:none;display:flex;align-items:center;justify-content:center;
  padding-inline-end:10px;padding-inline-start:4px;
}
.dn-saved-remove{
  min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--dns-grey-line);border-radius:11px;background:#fff;
  color:#6b7280;font:700 13px/1 inherit;cursor:pointer;
}
.dn-saved-remove:hover{border-color:#e6b4ae;color:#b42318;background:#fff7f6}

/* A listing that has been taken down: said out loud, never silently dropped. */
.dn-saved-card.is-gone{background:#fafafa}
.dn-saved-card.is-gone .dn-saved-card-body{padding:14px}
.dn-saved-gone{margin:0;font-size:13.5px;color:#6b7280}

/* Undo, in the row the card occupied. */
.dn-saved-undo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px dashed var(--dns-line);border-radius:var(--dns-radius);
  background:var(--dns-ivory);padding:12px 14px;
  font-size:14px;color:#3d434d;
}
.dn-saved-undo button{
  min-height:44px;padding:0 16px;border:1px solid var(--dns-line);border-radius:11px;
  background:#fff;color:var(--dns-gold);font:750 13px/1 inherit;cursor:pointer;
}

/* The foot: the one thing worth offering, then the quiet way out. */
.dn-saved-foot-actions{margin:20px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dn-saved-send{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border:0;border-radius:11px;
  background:var(--dns-ink);color:#fff;font:750 14px/1 inherit;cursor:pointer;
}
.dn-saved-send:hover{background:#000}
.dn-saved-clear{
  min-height:44px;padding:0 14px;border:0;border-radius:11px;background:transparent;
  color:#8a9099;font:650 13px/1 inherit;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;
}
.dn-saved-clear:hover{color:#b42318}
.dn-saved-clear.is-armed{color:#b42318;background:#fff7f6;text-decoration:none;font-weight:800}

@media(max-width:640px){
  .dn-saved-card-media{flex-basis:110px}
  .dn-saved-card-price{font-size:16px}
  .dn-saved-card-body{padding:10px 12px}
  .dn-saved-card-side{padding-inline-end:8px}
  .dn-saved-remove{padding:0 10px;font-size:12px}
  .dn-saved-foot-actions{flex-direction:column;align-items:stretch;gap:8px}
  .dn-saved-send{width:100%}
}

/* ── 1c. "Saved on this device only", where the saving happens ────────────────
   It used to exist only as a title attribute on the Save button and as body text on /saved.
   A title tooltip has no touch equivalent, so on a phone — where almost everybody saves — the
   one honest sentence in this feature was unreachable. It appears under the toolbar the moment
   a property is saved and goes away again when it is unsaved. */
.dn-ready-savednote{
  margin:-4px 0 14px;
  color:var(--dns-ink-soft);
  font-size:12px;
  line-height:1.6;
  max-width:60ch;
}
.dn-ready-savednote[hidden]{display:none}