/* ============================================================
   LIVE DATA (backend-driven) SECTIONS
   Cards, filters, banners, and loading/error/empty states for
   content rendered from GET /api/home/landing.
   Uses logical properties so RTL works without overrides.
   ============================================================ */

/* The hidden attribute must always win, even over display:flex/grid below. */
[hidden]{ display:none !important; }

/* visually-hidden labels for the filter selects */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- states ---------- */
.live-state{ padding:26px 0 8px; }

.live-skel-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.skel-card{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:rgba(0,31,36,.34);
}
.skel-media,.skel-line{
  background:linear-gradient(100deg, rgba(245,255,254,.05) 40%, rgba(245,255,254,.12) 50%, rgba(245,255,254,.05) 60%);
  background-size:200% 100%;
  animation:skel-shimmer 1.4s ease-in-out infinite;
}
.skel-media{ aspect-ratio:5/3; }
.skel-body{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.skel-line{ height:12px; border-radius:6px; }
.skel-line.short{ width:55%; }
@keyframes skel-shimmer{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }
@media (prefers-reduced-motion:reduce){ .skel-media,.skel-line{ animation:none } }

.live-note{
  border:1px solid var(--line); border-radius:var(--r);
  background:rgba(0,31,36,.34);
  padding:26px 22px; text-align:center;
  color:rgba(245,255,254,.75); font-size:15px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.live-note .btn{ font-size:14px; padding:10px 18px; }

/* ---------- banners ---------- */
.live-banners{
  display:flex; gap:14px; overflow-x:auto; padding-block-end:6px; margin-block-end:26px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.banner-item{
  position:relative; flex:0 0 auto; width:min(420px,84vw);
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  scroll-snap-align:start; display:block;
}
.banner-img{ display:block; width:100%; aspect-ratio:21/9; object-fit:cover; }

/* Images are revealed only once they really load (see failSafeImage in
   landing.js); until then the container/placeholder shows through. */
.lc-img,.banner-img{ opacity:0; transition:opacity .25s ease; }
.lc-img.loaded,.banner-img.loaded{ opacity:1; }
.banner-title{
  position:absolute; inset-block-end:0; inset-inline:0;
  padding:22px 16px 12px; font-weight:700; font-size:15px; color:#f5fffe;
  background:linear-gradient(transparent, rgba(0,31,36,.88));
}
a.banner-item{ transition:transform .2s, border-color .2s; }
a.banner-item:hover{ transform:translateY(-2px); border-color:var(--lime); }

/* ---------- filters ---------- */
.live-filters{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-block-end:26px;
}
.live-filters .select{ width:auto; min-width:180px; padding:11px 14px; }
.live-filters .btn{ font-size:13.5px; padding:10px 16px; }

/* ---------- sub-sections ---------- */
.live-sub{ margin-block-end:34px; }
.live-sub:last-of-type{ margin-block-end:0; }
.live-h{
  display:flex; align-items:baseline; gap:10px;
  font-size:19px; font-weight:700; margin-block-end:16px;
}
.live-h .live-h-note{ font-size:13px; font-weight:500; color:rgba(245,255,254,.55); }

/* ---------- card grids ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }

.live-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:rgba(0,31,36,.34);
  transition:transform .2s, border-color .2s;
}
.live-card:hover{ transform:translateY(-3px); border-color:var(--line-strong); }
/* Media container carries a pitch-lines placeholder as CSS background, so a
   missing or broken image degrades gracefully with zero layout shift. */
.lc-media{
  position:relative; aspect-ratio:5/3; background-color:#01312D;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240'%3E%3Crect width='400' height='240' fill='%2301312D'/%3E%3Crect x='40' y='30' width='320' height='180' fill='none' stroke='%230b5a4f' stroke-width='3'/%3E%3Cline x1='200' y1='30' x2='200' y2='210' stroke='%230b5a4f' stroke-width='3'/%3E%3Ccircle cx='200' cy='120' r='34' fill='none' stroke='%230b5a4f' stroke-width='3'/%3E%3Ccircle cx='200' cy='120' r='5' fill='%230b5a4f'/%3E%3C/svg%3E");
  background-size:cover; background-position:center;
}
.lc-img{ display:block; width:100%; height:100%; object-fit:cover; position:relative; }
.lc-badge{
  position:absolute; inset-block-start:10px; inset-inline-start:10px;
  background:var(--lime); color:#011a18;
  font-size:11px; font-weight:800; letter-spacing:.04em;
  padding:4px 9px; border-radius:999px;
}
html[lang="ar"] .lc-badge{ letter-spacing:0; font-size:12px; }
.lc-body{ display:flex; flex-direction:column; gap:8px; padding:14px 15px 16px; flex:1; }
.lc-title{
  font-size:16px; font-weight:700; line-height:1.25; margin:0;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.lc-sub{
  display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:rgba(245,255,254,.62);
  overflow:hidden; max-height:2.6em;
}
.lc-dot{ opacity:.5 }
.lc-foot{ margin-block-start:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-block-start:6px; }
.lc-tag{
  border:1px solid var(--line-strong); border-radius:999px;
  font-size:12px; padding:4px 10px; color:var(--mint); white-space:nowrap;
}
.lc-price{ font-weight:800; font-size:15.5px; color:var(--lime); white-space:nowrap; }
.lc-price small{ font-size:11.5px; font-weight:600; color:rgba(245,255,254,.7); }

/* ---------- city cards ---------- */
#liveCitiesGrid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.city-card{
  border:1px solid var(--line); border-radius:var(--r);
  background:rgba(0,31,36,.34);
  padding:18px; display:flex; flex-direction:column; gap:8px;
  transition:border-color .2s;
}
.city-card:hover{ border-color:var(--line-strong); }
.city-name{ font-weight:700; font-size:16.5px; }
.city-meta{ display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:rgba(245,255,254,.62); }

/* ---------- category chips ---------- */
#liveCategoriesGrid{ display:flex; flex-wrap:wrap; gap:10px; }
.cat-chip{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line-strong); border-radius:999px;
  padding:9px 16px; background:rgba(0,31,36,.4);
}
.cat-name{ font-weight:700; font-size:14px; }
.cat-count{
  background:var(--lime); color:#011a18; border-radius:999px;
  font-size:12px; font-weight:800; padding:2px 9px;
  font-family:var(--font-mono);
}

/* ---------- download nudge under live content ---------- */
.live-cta-note{
  margin-block-start:30px; text-align:center; font-size:14.5px;
  color:rgba(245,255,254,.62);
}
.live-cta-note a{ color:var(--lime); font-weight:700; }

/* ---------- content page (pages/content.html) ---------- */
.content-body{ color:rgba(245,255,254,.8); line-height:1.75; font-size:16px; }
.content-body h1,.content-body h2,.content-body h3{ color:var(--paper); margin:1.2em 0 .5em; }
.content-body p{ margin:.7em 0; }
.content-body ul,.content-body ol{ padding-inline-start:1.4em; margin:.7em 0; }
.content-body a{ color:var(--lime); text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .cards-grid,.live-skel-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  #liveCitiesGrid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px){
  .cards-grid,.live-skel-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #liveCitiesGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .live-filters .select{ flex:1 1 45%; min-width:0; }
}
@media (max-width:440px){
  .cards-grid{ grid-template-columns:1fr; }
  .live-skel-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ============================================================
   LANDING V2 — hero search, roadmap, pager, owner list,
   coming-soon store badges, live hero-phone image
   ============================================================ */

/* ---------- hero search box ---------- */
.hero-search{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(190px,1.5fr) auto;
  gap:12px;
  align-items:end;
  width:100%;
  max-width:860px;
  margin-block-start:22px;
  padding:16px;
  border-radius:var(--r-lg);
  border:1px solid var(--line-strong);
  background:rgba(0,31,36,.55);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-card);
}
.hs-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.hs-field label{
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  color:rgba(245,255,254,.65);
}
.hs-field .select{
  width:100%;
  padding:12px 14px;
  border-radius:var(--r-sm);
  border:1px solid var(--line-strong);
  background:rgba(245,255,254,.05);
  color:var(--paper);
  font:inherit;
  font-size:15px;
}
.hs-field .select:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:1px;
  border-color:var(--lime);
}
.hs-field select.select option{ color:var(--ink); background:var(--paper); }
.hs-submit{ padding-block:13px; white-space:nowrap; }
.hero-ctas .btn{ min-width:0 }

/* search page variant */
.search-page-form{ max-width:none; margin-block-start:26px; }
.results-info{
  margin:6px 0 18px;
  font-size:15px;
  color:rgba(245,255,254,.75);
}
.results-info [data-en], .results-info [data-ar]{ font-weight:600; color:var(--paper); }

/* ---------- pager ---------- */
.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-block-start:30px;
}
.pager .btn[disabled]{ opacity:.4; pointer-events:none; }
.pager-label{
  font-family:var(--font-mono);
  font-size:14px;
  color:rgba(245,255,254,.75);
  min-width:64px;
  text-align:center;
}

/* ---------- explore advanced-search link ---------- */
.live-filters .lf-search{ font-size:13.5px; padding:10px 16px; margin-inline-start:auto; }

/* ---------- roadmap (coming soon) ---------- */
.roadmap-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.roadmap-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:24px 22px;
  border-radius:var(--r-lg);
  border:1px dashed var(--line-strong);
  background:var(--surface);
}
.roadmap-card .f-ic{ opacity:.85 }
.roadmap-card h3{ margin:0; font-size:18px; }
.roadmap-card p{ margin:0; font-size:14.5px; color:rgba(245,255,254,.7); line-height:1.65; }
.soon-badge{
  position:absolute;
  top:16px;
  inset-inline-end:16px;
  padding:5px 12px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
  background:var(--mint);
}
html[lang="ar"] .soon-badge{ letter-spacing:0; font-size:12.5px; }

/* ---------- owner card (real capabilities, no fake numbers) ---------- */
.oc-list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.oc-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14.5px;
}
.oc-list .tick{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px; height:20px;
  border-radius:50%;
  background:rgba(189,253,8,.16);
  color:var(--lime);
}
.oc-list .tick svg{ width:11px; height:11px; }
.oc-note{
  margin-block-start:16px;
  padding-block-start:14px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:rgba(245,255,254,.6);
}

/* ---------- coming-soon store badges ---------- */
.stores-soon{ margin-block-start:14px; }
.store-disabled{
  cursor:default;
  opacity:.62;
  filter:saturate(.5);
  position:relative;
}
.store-disabled:hover{ transform:none; }

/* ---------- live hero-phone image ---------- */
.scr-photo{ position:relative; overflow:hidden; }
.ph-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .3s ease;
}
.ph-img.loaded{ opacity:1; }
.scr-photo .ph-tag{ z-index:2; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-search{ grid-template-columns:1fr 1fr; }
  .hero-search .hs-grow{ grid-column:1 / -1; }
  .hero-search .hs-submit{ grid-column:1 / -1; }
  .roadmap-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .hero-search{ grid-template-columns:1fr; padding:13px; }
  .roadmap-grid{ grid-template-columns:1fr; }
  .live-filters .lf-search{ margin-inline-start:0; }
  .pager{ gap:10px; }
}


/* search page: 5 controls (2 selects, keyword, submit, clear) on one row */
.search-page-form{
  grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(190px,1.5fr) auto auto;
}
@media (max-width:900px){
  .search-page-form{ grid-template-columns:1fr 1fr; }
  .search-page-form .hs-submit,
  .search-page-form #searchClear{ grid-column:1 / -1; }
}

/* ============================================================
   PRODUCT-GRADE PHASE — field detail page, search sort/price,
   card links, coming-soon availability box
   ============================================================ */

/* ---------- clickable cards ---------- */
a.lc-link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
a.lc-link:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }

/* ---------- search: sort + price + soon ---------- */
.hs-price-pair{ display:flex; gap:8px; }
.hs-price-pair .select{ min-width:0; }
.hs-soon-box{
  display:flex; align-items:center;
  color:rgba(245,255,254,.5);
  cursor:not-allowed;
  border-style:dashed;
  font-size:13.5px;
  user-select:none;
}

/* ---------- field detail ---------- */
.fd-skel{ grid-template-columns:1.2fr .8fr; }
.fd-top{ padding-block-start:26px; }
.fd-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:34px;
  align-items:start;
}
.fd-gallery{ position:sticky; top:86px; }
.fd-main-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  border-radius:var(--r-lg);
  border:1px solid var(--line-strong);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(189,253,8,.08), transparent 60%),
    linear-gradient(160deg, #02584d, #01312d);
}
.fd-main-media .midline{
  position:absolute; inset-inline:0; top:50%; height:1px;
  background:rgba(245,255,254,.16);
}
.fd-main-media .center-circle{
  position:absolute; top:50%; left:50%;
  width:120px; height:120px;
  border:1px solid rgba(245,255,254,.16);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.fd-main-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .3s ease;
}
.fd-main-img.loaded{ opacity:1; }
.fd-thumbs{ display:flex; gap:10px; margin-block-start:12px; flex-wrap:wrap; }
.fd-thumb{
  width:72px; height:54px;
  padding:0; border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  overflow:hidden; cursor:pointer;
  background:var(--surface);
  opacity:.65; transition:opacity .15s ease, border-color .15s ease;
}
.fd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .2s; }
.fd-thumb img.loaded{ opacity:1; }
.fd-thumb.on, .fd-thumb:hover{ opacity:1; border-color:var(--lime); }
.fd-thumb:focus-visible{ outline:2px solid var(--lime); outline-offset:1px; }

.fd-crumbs{
  display:flex; gap:8px; align-items:center;
  font-size:13px; color:rgba(245,255,254,.55);
  margin-block-end:14px; flex-wrap:wrap;
}
.fd-crumbs a{ color:inherit; text-decoration:none; }
.fd-crumbs a:hover{ color:var(--lime); }
.fd-crumbs #fdCrumbName{ color:var(--paper); font-weight:600; }

.fd-title{ font-size:clamp(26px,4vw,38px); line-height:1.2; margin:0 0 14px; }
.fd-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-block-end:12px; }
.fd-chip{
  padding:6px 14px; border-radius:999px;
  border:1px solid var(--line-strong);
  background:var(--surface-2);
  font-size:13.5px; font-weight:600;
}
.fd-chip-dim{ color:rgba(245,255,254,.65); font-weight:500; }
.fd-facility{ font-size:15px; color:rgba(245,255,254,.75); margin-block-end:18px; }
.fd-facility strong{ color:var(--paper); }

.fd-price-box{
  display:flex; flex-direction:column; gap:6px;
  padding:16px 18px;
  border-radius:var(--r);
  border:1px solid var(--line-strong);
  background:rgba(189,253,8,.06);
  margin-block-end:16px;
}
.fd-price{ font-size:15px; }
.fd-price strong{ font-size:26px; color:var(--lime); font-weight:800; }
.fd-currency{ color:rgba(245,255,254,.8); font-weight:600; }
.fd-per{ color:rgba(245,255,254,.55); font-size:13px; }
.fd-deposit{ font-size:13.5px; color:rgba(245,255,254,.75); }

.fd-desc{ color:rgba(245,255,254,.75); line-height:1.8; margin:0 0 18px; white-space:pre-line; }

.fd-cta{ width:100%; justify-content:center; padding-block:14px; font-size:16px; }
.fd-cta-note{ font-size:12.5px; color:rgba(245,255,254,.55); margin:10px 0 20px; line-height:1.7; }

.fd-policy{
  padding:16px 18px;
  border-radius:var(--r);
  border:1px dashed var(--line-strong);
  background:var(--surface);
}
.fd-policy h2{ font-size:15px; margin:0 0 10px; }
.fd-policy ul{ margin:0; padding-inline-start:18px; display:flex; flex-direction:column; gap:8px; }
.fd-policy li{ font-size:13.5px; color:rgba(245,255,254,.75); line-height:1.7; }

/* availability preview */
.fd-avail-note{ font-size:13.5px; color:rgba(245,255,254,.6); margin:-8px 0 16px; }
.fd-days{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px;
}
.fd-day{
  padding:12px 13px;
  border-radius:var(--r-sm);
  border:1px solid var(--line-strong);
  background:var(--surface);
  display:flex; flex-direction:column; gap:4px;
}
.fd-day.full{ opacity:.55; }
.fd-day-name{ font-size:13px; font-weight:700; }
.fd-day-date{ font-family:var(--font-mono); font-size:12px; color:rgba(245,255,254,.55); }
.fd-day-count{ font-size:12.5px; color:rgba(245,255,254,.75); }
.fd-day-count strong{ color:var(--lime); }
.fd-day-times{ display:flex; gap:5px; flex-wrap:wrap; margin-block-start:4px; }
.fd-time{
  font-family:var(--font-mono); font-size:11px;
  padding:2px 7px; border-radius:6px;
  background:rgba(189,253,8,.12); color:var(--lime);
}
.fd-time-more{ background:var(--surface-2); color:rgba(245,255,254,.65); }

/* responsive */
@media (max-width:900px){
  .fd-grid{ grid-template-columns:1fr; gap:22px; }
  .fd-gallery{ position:static; }
  .fd-skel{ grid-template-columns:1fr; }
}

/* honest fallback when the API has no price for a field */
.lc-price-na{ font-size:12.5px; font-weight:600; color:rgba(245,255,254,.55); white-space:nowrap; }

/* ---------- verified reviews (feature-gated section) ---------- */
.fd-reviews-summary{
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:rgba(245,255,254,.75);
  margin-block-end:14px;
}
.fd-reviews-summary strong{ color:var(--lime); font-size:16px; }
.fd-review-stars{ color:var(--lime); letter-spacing:2px; font-size:13px; }
.fd-reviews-list{ display:grid; gap:10px; }
.fd-review-card{
  background:var(--surface-2); border:1px solid rgba(245,255,254,.08);
  border-radius:12px; padding:12px 14px;
}
.fd-review-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13.5px; color:rgba(245,255,254,.9);
}
.fd-review-comment{ margin:6px 0 0; font-size:13.5px; color:rgba(245,255,254,.7); }
.fd-review-reply{
  margin-block-start:8px; padding:8px 10px; border-radius:8px;
  background:rgba(189,253,8,.07); font-size:12.5px; color:rgba(245,255,254,.7);
}
.fd-review-reply-label{ display:block; color:var(--lime); font-size:11.5px; margin-block-end:2px; }
.fd-review-reply p{ margin:0; }
.fd-reviews-empty{ font-size:13.5px; color:rgba(245,255,254,.6); }

/* roadmap badge when a feature has gone live (flipped by landing.js) */
.soon-badge-live{ background:rgba(189,253,8,.15); color:var(--lime); }