/* Off-plan details block on the single myhome_listing page.
   Visual language mirrors the chat rich modal for consistency. */
.dca-offplan{
  /* Inherit the site's palette (Elementor global colors) with safe fallbacks,
     so the block matches the theme everywhere and follows colour changes. */
  --dca-accent:var(--e-global-color-lprimary1,#3F5B65);
  --dca-accent-2:var(--e-global-color-lprimary2,#2E454E);
  --dca-ink:var(--e-global-color-lcolor1,#1a1a1a);
  --dca-muted:var(--e-global-color-lcolor2,#6b6b6b);
  --dca-line:var(--e-global-color-lcolor3,#e5e5e5);
  --dca-bg:var(--e-global-color-lsectionbg,#f7f8fa);
  margin:32px 0;font-family:inherit;color:var(--dca-ink);}
.dca-offplan__h{font-size:26px;font-weight:600;margin:0 0 18px;letter-spacing:-.01em;}
.dca-offplan__sec{margin-top:26px;}
.dca-offplan__sec>h3{font-size:18px;font-weight:600;margin:0 0 12px;}

/* facts */
.dca-offplan__facts{display:flex;flex-wrap:wrap;gap:14px;}
.dca-fact{flex:1 1 160px;background:var(--dca-bg);border:1px solid var(--dca-line);border-radius:12px;padding:12px 14px;}
.dca-fact__l{display:block;font-size:12px;color:var(--dca-muted);text-transform:uppercase;letter-spacing:.04em;}
.dca-fact__v{display:block;font-size:20px;font-weight:600;margin-top:2px;}
.dca-bar{display:block;height:6px;border-radius:4px;background:var(--dca-line);margin-top:8px;overflow:hidden;}
.dca-bar>i{display:block;height:100%;background:var(--dca-accent);}

/* layout tabs */
.dca-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.dca-tab{appearance:none;border:1px solid var(--dca-line);background:#fff;border-radius:999px;
  padding:7px 16px;font-size:14px;font-weight:500;cursor:pointer;color:var(--dca-ink);transition:.15s;}
.dca-tab:hover{border-color:var(--dca-accent);}
.dca-tab.is-active{background:var(--dca-accent);border-color:var(--dca-accent);color:#fff;}
.dca-pane{display:none;}
/* Single-row horizontal carousel: cards scroll/swipe instead of wrapping into a
   grid. Native overflow + scroll-snap — no JS (the 1BR/2BR/3BR tab toggle keeps
   working via the is-active class). */
.dca-pane.is-active{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding-bottom:8px;}
.dca-pane.is-active::-webkit-scrollbar{height:8px;}
.dca-pane.is-active::-webkit-scrollbar-thumb{background:var(--dca-line);border-radius:8px;}
.dca-pane.is-active::-webkit-scrollbar-track{background:transparent;}
.dca-layout{flex:0 0 260px;max-width:80%;scroll-snap-align:start;
  border:1px solid var(--dca-line);border-radius:12px;overflow:hidden;background:#fff;}
/* Carousel nav arrows — overlay the row; JS hides the one with nothing to scroll. */
.dca-panes{position:relative;}
.dca-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--dca-line);background:#fff;
  color:var(--dca-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.14);transition:.15s;padding:0;}
.dca-nav:hover{border-color:var(--dca-accent);color:var(--dca-accent);}
.dca-nav[hidden]{display:none;}
.dca-nav--prev{left:4px;}
.dca-nav--next{right:4px;}
.dca-nav svg{width:20px;height:20px;}
/* height!important + specificity: cap the plan image so cards stay uniform.
   Without it MyHome's `.elementor img{height:auto}` (0,1,1) wins and tall/portrait
   plans blow the card (and the carousel row) height out. */
.dca-layout .dca-layout__fp{width:100%;height:170px!important;object-fit:contain;
  background:var(--dca-bg);display:block;}
.dca-layout__meta{padding:12px 14px;}
.dca-layout__t{font-weight:600;font-size:14px;margin-bottom:4px;}
.dca-layout__a,.dca-layout__u{font-size:13px;color:var(--dca-muted);}
.dca-layout__p{font-size:15px;font-weight:600;color:var(--dca-accent);margin:4px 0;}

/* payment plan */
.dca-plan{display:flex;flex-wrap:wrap;gap:10px;}
.dca-step{flex:1 1 120px;text-align:center;background:var(--dca-bg);border:1px solid var(--dca-line);
  border-radius:12px;padding:14px 10px;position:relative;}
.dca-step__pct{font-size:22px;font-weight:700;color:var(--dca-accent);}
.dca-step__l{font-size:13px;color:var(--dca-muted);margin-top:2px;}

/* top strip: status badges (developer logo now lives in the contact box) */
.dca-offplan__top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.dca-badges{display:flex;flex-wrap:wrap;gap:8px;}
.dca-badge{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;color:#fff;background:var(--dca-accent);}
.dca-badge--off{background:var(--dca-accent);}
.dca-badge--ready{background:#2e7d4f;}
.dca-badge--scheduled{background:#7a6230;}
.dca-badge--eoi{background:#8a5a2b;}
.dca-badge--launch{background:#9c3b6b;}
.dca-badge--announce{background:#566;}
.dca-badge--sold{background:#9a2b2b;}

/* Developer brand swapped into the MyHome contact-box header (see catalog-page.js).
   Lives outside .dca-offplan, so it reads the Elementor globals directly with
   safe fallbacks rather than the scoped --dca-* vars. */
.dca-dev{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 14px 2px;text-align:center;}
/* Force a consistent, legible size: small/odd-ratio logos scale UP, big ones
   down — never distorted. The old width/height:auto left padded or narrow logos
   tiny. height!important + extra specificity beat MyHome's `.elementor img
   {height:auto;max-width:100%}` (0,1,1) which otherwise wins; object-fit keeps
   rare ultra-wide logos letterboxed instead of stretched. */
.dca-dev .dca-dev__logo{width:auto;height:120px!important;max-width:100%!important;
  object-fit:contain;object-position:center;}
.dca-dev__name{font-size:19px;font-weight:600;line-height:1.3;
  color:var(--e-global-color-lcolor1,#1a1a1a);}

/* layout extra meta lines */
.dca-layout__b{font-size:13px;color:var(--dca-muted);margin-bottom:2px;}

/* amenities grid */
.dca-amenities{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;}
.dca-amenity{display:flex;align-items:center;gap:10px;background:var(--dca-bg);border:1px solid var(--dca-line);
  border-radius:10px;padding:10px 12px;}
.dca-amenity__i{flex:0 0 22px;width:22px;height:22px;color:var(--dca-accent);}
.dca-amenity__i svg{width:22px;height:22px;display:block;}
.dca-amenity__n{font-size:14px;line-height:1.25;}

/* direct contact row */
.dca-contact{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.dca-contact__btn{display:inline-flex;align-items:center;gap:8px;flex:1 1 160px;justify-content:center;
  padding:12px 18px;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none;transition:.15s;border:1px solid transparent;}
.dca-contact__btn svg{width:18px;height:18px;}
.dca-contact__btn--call{background:var(--dca-accent);color:#fff;}
.dca-contact__btn--call:hover{background:var(--dca-accent-2);}
.dca-contact__btn--wa{background:#25d366;color:#fff;}
.dca-contact__btn--wa:hover{filter:brightness(.95);}
.dca-contact__btn--mail{background:#fff;color:var(--dca-ink);border-color:var(--dca-line);}
.dca-contact__btn--mail:hover{border-color:var(--dca-accent);}

@media (max-width:600px){
  .dca-offplan__h{font-size:22px;}
  .dca-amenities{grid-template-columns:1fr 1fr;}
  .dca-contact__btn{flex:1 1 100%;}
}

/* ---- What's nearby (OSM) ---- */
.dca-near__cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:8px 0 18px;}
.dca-near__card{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:16px 10px;background:var(--dca-bg);border-radius:12px;}
.dca-near__ci{width:28px;height:28px;color:var(--dca-ink);}
.dca-near__ci svg{width:28px;height:28px;}
.dca-near__cl{font-weight:600;font-size:14px;color:var(--dca-ink);}
.dca-near__cn{font-size:12px;color:var(--dca-muted);}
.dca-near__h4{margin:18px 0 10px;font-size:16px;font-weight:600;color:var(--dca-ink);}
.dca-near__list{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;}
.dca-near__row{display:flex;align-items:center;gap:10px;padding:6px 0;}
.dca-near__ri{width:20px;height:20px;flex:0 0 20px;color:var(--dca-muted);}
.dca-near__ri svg{width:20px;height:20px;}
.dca-near__rn{flex:1 1 auto;font-size:14px;color:var(--dca-ink);}
.dca-near__rt{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-size:13px;color:var(--dca-muted);white-space:nowrap;}
.dca-near__car{width:16px;height:16px;}
@media (max-width:720px){
  .dca-near__cards{grid-template-columns:repeat(2,1fr);}
  .dca-near__list{grid-template-columns:1fr;}
}