/* =========================
   1) Root vars & global reset
   ========================== */

:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;

  --primary:#e11d2f;
  --primary-strong:#b91c1c;

  --danger:#b91c1c;
  --danger-soft:#fef2f2;

  --success:#15803d;
  --success-soft:#ecfdf5;
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family:"Rubik",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.5;
  background:var(--bg);
  color:var(--ink);
}

/* util SEO */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* =========================
   2) Layout de bază
   ========================== */

.container{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}

.login-page .container {
    max-width: 750px;
    margin: 0 auto;
    padding: 50px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(51 51 51 / 25%);
    margin-top: 50px;
	border-radius: 16px;
}

/* ===== Header + nav ===== */

.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:2000;
}

.site-header .container,
.site-header .header-inner{
  position:relative;
  display:flex;
  flex-direction: row;
  align-items:baseline;
  justify-content:space-between;
  min-height: 50px;
  gap:12px;
  padding:10px 16px;
  border: none;
  margin-top: 0;
}

.site-header nav{
  display: flex;
}

html[lang="he"] .site-header nav a{
  direction: ltr;
}

.page-listings .site-header .container,
.page-listings .site-header .header-inner {
  justify-content: space-between;
}

html[lang="he"] .page-listings .site-header .container, html[lang="he"] .page-listings .site-header .header-inner {
  direction: rtl;
}

.page-help .site-header .container,
.page-help .site-header .header-inner {
  justify-content: space-between;
}

.site-header .container h1{
  font-size: 20px;
}

.dashboard-header nav {
  display: flex;
  align-items: center;	
  gap: 5px;
}

.lang-home-link{
  display:inline-flex;
  align-items:center;
  height:38px;
  padding:0 12px;
  border:1px solid #d9d9d9;
  border-radius:999px;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}

.lang-home-link:hover{
  background:#f7f7f7;
}

@media (max-width: 900px){
  .lang-home-link--desktop{
    display:none;
  }
}

.brand{
  display:none;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

.brand img{
  display:block;
  height:25px;
}

/* meniu STÂNGA (desktop) */
.primary-nav{
  position:absolute;
  left:16px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.95rem;
}

/* login / user în DREAPTA (desktop) */
.user-nav{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.95rem;
}

.nav-link,
.site-header nav a{
  font-size:16px;
  text-decoration:none;
  color:#000000;
  padding:4px 8px;
  border-radius:999px;
  display: flex;
  align-items: center;
  gap: 10px;
}

html[lang="he"] .nav-link, .site-header nav a {
  flex-direction: row-reverse;
}

.nav-link:hover,
.site-header nav a:hover{
  text-decoration:none;
  background:rgba(225,29,47,.06);
}

/* compat: vechiul .main-nav */
.main-nav{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
}

.user-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.04);
}

.user-avatar{
  width:26px;height:26px;
  border-radius:50%;
  object-fit:cover;
}

.user-name{ font-weight:500; }

/* Buton hamburger */
.nav-toggle{
  display:none;
  border:none;
  background:transparent;
  font-size:22px;
  cursor:pointer;
  padding:4px 6px;
}

/* icon dreapta pe mobil */
.mobile-user-icon{
  display:none;              /* ascuns pe desktop */
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  align-items:center;
  justify-content:center;
}

.mobile-user-icon .icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:999px;
  text-decoration:none;
  flex-direction: row-reverse;
  gap: 10px;
}

.mobile-user-icon .icon-link img{
  width:22px;
  height:22px;
  display:block;
}

/* MOBILE */
@media (max-width: 900px){
  .mobile-user-icon{ display:flex; }
  .user-nav{ display:none; } /* ascunde linkurile desktop */
  .log-link{width:auto !important; height:auto !important;}
  .log-link img{width:26px !important; height:26px !important;}
}

/* ===== Footer ===== */

.site-footer{
  border-top:1px solid var(--border);
  background:#fff;
  font-size:.85rem;
  color:#64748b;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.footer-link{
  text-decoration:none;
  color:#64748b;
}

.footer-link:hover{ text-decoration:underline; }

/* =========================
   Tipografie
   ========================== */

h1,h2,h3{
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Rubik",sans-serif;
}

.btn,
button,
.site-header nav a{
  font-family:"Rubik",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:500;
}

/* =========================
   Main & split layout
   ========================== */

.main-shell{
  min-height:calc(100vh - 64px);
  display:flex;
  flex-direction:column;
  position:relative;
  padding:0;
  overflow:visible;
}

.split-layout{
  flex:1;
  display:flex;
  align-items:stretch;
  gap:0;
  position:relative;
}

.pane{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.pane-map,
.pane-results{
  flex:1 0 50%;
  min-height:0;
  position:relative;
}

.pane-results{
  overflow-y:auto;
  padding:0 20px 16px 20px;
}

.splitter{
  width:8px;
  cursor:col-resize;
  background:#e5e7eb;
  border-left:1px solid #d4d4d8;
  border-right:1px solid #d4d4d8;
}

.splitter:hover{ background:#d1d5db; }

body.is-resizing{
  cursor:col-resize;
  user-select:none;
}

.map-shell{
  flex:1;
  display:flex;
  flex-direction:column;
}

.map-shell #map{
  flex:1;
  min-height:0;
}

.pane-map #map{ height:auto; }

/* =========================
   Overlay Welcome (Owner/Agent)
   ========================== */

.overlay-welcome{
  position:absolute;
  z-index:1000;
  box-sizing:border-box;
  padding:50px;
}

/* containerul de sus */
.overlay-block.overlay-top{
  display:flex;
  align-items: self-end;
  justify-content:center;
  gap:20px;
  width:100%;
}

html[lang="he"] .overlay-block.overlay-top {
  flex-direction: row-reverse;
}

/* stanga / dreapta */
.overlay-top-left,
.overlay-top-right{
  flex:1;
  line-height:1;
  color:#333;
}

.overlay-top-left{
  display: flex;
  justify-content: flex-end;
}

html[lang="he"] .overlay-top-left {
  justify-content: flex-start;
}

.top-left-content {
  display:flex;
  flex-direction:column;
  align-items: flex-start;
  width: max-content;
}

.site-name{
  font-weight:700;
  font-size:40px;
}

html[lang="en"] .site-name{
  font-size:38px;
}

.name-explanation{
  font-weight:400;
  font-size:19px;
}

.overlay-top-right{
  display: flex;
  gap: 5px;
  text-align:left;
  font-weight:500;
}

html[lang="he"] .overlay-top-right {
  justify-content: right;
}

.top-right-content {
  width: 200px;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

html[lang="he"] .top-right-content {
  text-align: right;
  width: 180px;
  font-size: 20px;
  line-height: 24px;
}

html[lang="en"] .top-right-content {
  width: 180px;
}

html[lang="ru"] .top-right-content {
  line-height: 20px;
}

/* centru fix */
.overlay-top-center{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* cerc + logo */
.logo-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;	
  /* width:84px;
  height:84px;
  border-radius:999px;
  background: rgb(255 255 255 / 53%);
  box-shadow:0 2px 10px rgba(0,0,0,.12); */
}

.logo-img{
  width:60px;
  height:60px;
  display:block;
}

.overlay-block.overlay-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.overlay-block.overlay-bottom{
  font-size:13px;
  opacity:.85;
}

.overlay-title{ font-size:18px; font-weight:600; }
.overlay-subtitle{ font-size:14px; opacity:.9; }

.overlay-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.overlay-btn{
  font-size:18px;
  padding:8px 14px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background:#fff;
  color:var(--primary-strong);
  font-weight:500;
}

.overlay-btn.overlay-btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.7);
  color:#fff;
}

.overlay-minimize{
  border:none;
  cursor:pointer;
  background: rgb(225 29 47 / 50%);
  color:#fff;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}



/* Desktop (≥768px) */
@media (min-width:768px){
  .pane-map{ position:relative; }

    .overlay-welcome {
        top: 0;
        bottom: 0;
        left: 0px;
        right: 0px;
        color: #000;
        border-radius: 0 120px 0 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 50px;
        transform: translateX(0);
        transition: transform .25s ease, padding .25s ease;
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
		backdrop-filter: blur(8px);
    }

  .overlay-minimize{
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
    width:32px;
    height:100px;
    border-radius:999px 0 0 999px;
	z-index: 999;
  }

  .is-collapsed .overlay-minimize{
    right:-32px;
    border-radius:0 999px 999px 0;
  }

  .overlay-welcome.is-collapsed{
    transform:translateX(calc(-100% - 4px));
	/* transform:translateX(calc(-100% + 200px)); */
    padding-inline:0;
  }

  .overlay-welcome.is-collapsed .overlay-block.overlay-center,
  .overlay-welcome.is-collapsed .overlay-block.overlay-bottom{
    display:none;
  }

  .overlay-welcome.is-collapsed .overlay-block.overlay-top{
    height:100%;
    opacity:1;
  }
}

/* Mobil (<768px) */
@media (max-width:767.98px){
  .pane-results{
    position:relative;
    padding:0 10px 16px 10px;
  }

  .overlay-welcome{
    left:8px;
    right:8px;
    top:0;
    height: 80vh;
    color:#000;
    background: rgb(255 255 255 / 60%);
	backdrop-filter: blur(8px);
    border-radius:16px;
	border-top:none;
	border-left: 5px solid rgb(225 29 47 / 50%);
    border-right: 5px solid rgb(225 29 47 / 50%);
    border-bottom: 5px solid rgb(225 29 47 / 50%);
    box-shadow:0 18px 45px rgba(15,23,42,.35);
    padding:16px 18px 40px;
    display:flex;
    flex-direction:column;
    gap:12px;
    transform:translateY(0);
    transition:transform .25s ease, top .25s ease, padding .25s ease;
  }

  .overlay-welcome:not(.is-collapsed) .overlay-minimize{
    position:absolute;
    left:85%;
    transform:translateX(-50%);
    bottom:0;
    width:50px;
    height:32px;
    border-radius:999px 999px 0 0;
	z-index: 999;
  }

  .overlay-welcome.is-collapsed{
    top:5px;
    padding:0;
	height:1px;
    transform:translateY(calc(-100% - 1px));
  }

  .overlay-welcome.is-collapsed .overlay-block.overlay-top,
  .overlay-welcome.is-collapsed .overlay-block.overlay-center,
  .overlay-welcome.is-collapsed .overlay-block.overlay-bottom{
    display:none;
  }

  .overlay-welcome.is-collapsed .overlay-buttons{
    flex-direction:row;
    justify-content:center;
  }

  .overlay-welcome.is-collapsed .overlay-minimize{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:90px;
    height:22px;
    border-radius:0 0 999px 999px;
    box-shadow:0 8px 18px rgba(15,23,42,.35);
  }
}

/* =========================
   Overlay carousel (logged-out)
   ========================= */

.overlay-carousel { display: none; } /* by default hidden (logged-in uses legacy) */

/* când e logged-out, ascundem legacy și arătăm caruselul */
#welcomeOverlay.is-logged-out .overlay-legacy { display: none; }
#welcomeOverlay.is-logged-out .overlay-carousel { display: block; }

.overlay-carousel{
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.overlay-carousel-track{
  display: flex;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform 600ms ease;
}

/* fiecare slide ocupă 100% din lățimea zonei */
.overlay-slide{
  flex: 0 0 100%;
  min-width: 100%;
  padding: 14px 24px 10px;
  display: flex;
  gap: 0;
  position: relative;
  transform: scale(0.95);
}

html[lang="he"] .overlay-slide{
  flex-direction: row-reverse;
}

.overlay-slide h2{
  font-size: 38px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 0;
  color: #b01820;
}

html[lang="he"] .overlay-slide h2{
  direction:rtl;
  font-size: 45px;
}

html[lang="fr"] .overlay-slide h2, html[lang="ru"] .overlay-slide h2{
  line-height: 1.25;
}

.overlay-slide h3{
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: #000000;
}

.overlay-slide h4{
  font-size: 24px;
  font-weight: 300;
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Rubik", sans-serif !important;
  color: #000000;
}

.overlay-slide button{
  margin-top: 75px;
  width: 70%;
}

.overlay-slide-title{
  margin: 0 0 20px;
  font-size: 1.05rem;
  font-weight: 700;
}

.overlay-slide-desc{
  margin: 0 0 15px;
  opacity: 0.9;
  line-height: 1.35;
  text-align: left;
}

.overlay-slide ul li {
  text-align: left;	
}

.overlay-slide-points{
  margin: 0 0 30px;
  padding-left: 18px;
  opacity: 0.95;
}

.wrap-slide-title {
  position: relative;
  width: 80%;  
}

.overlay-slide-progress{	
  height: 3px;
  border-radius: 999px;
  background-color: rgb(225 29 47 / 25%);
  overflow: hidden;
}

/* bara care se umple (doar pe slide-ul activ) */
.overlay-slide-progress::before{
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background-color: var(--primary);
}

/* animația pornește doar pe slide-ul activ */
.overlay-slide.is-active .overlay-slide-progress::before{
  animation: overlayProgress var(--overlaySlideDuration, 6500ms) linear forwards;
}

@keyframes overlayProgress{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.tool-card__subtitle {
    display: none;
} 

.slide-content {
  flex: .57;	
  position: relative;
  z-index: 2;
}

html[lang="he"] .slide-content{
  direction: rtl;
}

.slide-image {
  flex: .43;		
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 100%;
  position: relative;
  z-index: 1;
}

html[lang="he"] .slide-image{
  transform: scaleX(-1);
}

.first-slide .slide-image {	
  background-image: url("/images/exceptional-ads-he.svg");	
  opacity: 0.7;
}

.second-slide .slide-image {	
  background-image: url("/images/seller-friendly-he.svg");	
  opacity: 0.9;
}

.third-slide .slide-image {	
  background-image: url("/images/adapted-ai-he.svg");	
  opacity: 0.9;
}

html[lang="he"] .third-slide .slide-image{
  transform: scaleX(1);
}

/* =========================
   Tools grid + cards (single visible card + vertical slide)
   ========================= */

.tools-grid{
  margin-top: 16px;
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 130px !important;
  overflow: hidden;
}

.tools-grid.tools-grid--3{
  display: block;
}

.tools-grid__track{
  position: relative;
  width: 100%;
  min-height: inherit;
}

/* toate cardurile stau suprapuse */
.tools-grid .tool-card{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  gap: 50px;
  border-radius: 16px;
  padding: 14px;
  /* background: rgba(255,255,255,.86); */
  /* border: 1px solid rgba(255,255,255,.10); */
  /* box-shadow: 0 2px 10px rgba(0,0,0,.28); */
  /* backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); */
  width: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition:
    transform 420ms ease,
    opacity 420ms ease,
    border-color .18s ease,
    background .18s ease;
}

/* cardul vizibil */
.tools-grid .tool-card.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 2;
}

/* cardul care intră de jos */
.tools-grid .tool-card.is-entering-from-bottom{
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  z-index: 3;
}

/* cardul care iese în sus */
.tools-grid .tool-card.is-leaving-up{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-24px);
  z-index: 1;
}

html[lang="he"] .tool-card{
  flex-direction: row-reverse;
}

.tool-card:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

/* Icon */
.tool-card__icon{
  width: 80px;
  height: 80px;
  border-radius: 100px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.92);
  /* box-shadow: 0 1px 20px rgba(0, 0, 0, .05); */
  border: 1px solid #00989c;
}

.tool-card__icon svg{
  width: 60px;
  height: 60px;
}

/* Text */
.tool-card__text{
  color: #000;
  text-align: center;
  flex: 1;
}

html[lang="he"] .tool-card__text{
  text-align: center;
}

.tool-card__title{
  font-weight: 800;
  font-size: 36px;
  line-height: 1.15;
  transform: scaleY(1.2);
  text-align: left;
}

html[lang="he"] .tool-card__title{
  direction: rtl;
  font-size: 45px;
  text-align: right;
}

html[lang="fr"] .tool-card__title, html[lang="ru"] .tool-card__title{
  line-height: 1.0;
}

.tool-card__subtitle{
  margin-top: 2px;
  font-size: 20px;
  line-height: 1.25;
  opacity: .78;
  font-weight: 300;
}

html[lang="he"] .tool-card__subtitle{
  direction: rtl;
  font-size: 24px;
}

.tool-card__icon{
  background: rgb(255 255 255 / 50%);
}

.tool-card__icon img{
  width:50px;
  height:50px;
  filter: brightness(0) saturate(100%) invert(29%) sepia(92%) saturate(1653%) hue-rotate(161deg) brightness(95%) contrast(95%);
}

/* =========================
   Accent icon backgrounds
   =========================
.tool-card--vt .tool-card__icon{
  background: linear-gradient(135deg, rgba(88,101,242,.75), rgba(88,101,242,.20));
  border: 1px solid rgba(88,101,242,.35);
}
.tool-card--fp .tool-card__icon{
  background: linear-gradient(135deg, rgba(34,197,94,.75), rgba(34,197,94,.20));
  border: 1px solid rgba(34,197,94,.35);
}
.tool-card--ai .tool-card__icon{
  background: linear-gradient(135deg, rgba(245,158,11,.75), rgba(245,158,11,.20));
  border: 1px solid rgba(245,158,11,.35);
}
.tool-card--ts .tool-card__icon{
  background: linear-gradient(135deg, rgba(236,72,153,.75), rgba(236,72,153,.20));
  border: 1px solid rgba(236,72,153,.35);
}

.tool-card--gs .tool-card__icon{
  background: linear-gradient(135deg, rgba(56,189,248,.75), rgba(56,189,248,.20));
  border: 1px solid rgba(56,189,248,.35);
}
.tool-card--mk .tool-card__icon{
  background: linear-gradient(135deg, rgba(168,85,247,.75), rgba(168,85,247,.20));
  border: 1px solid rgba(168,85,247,.35);
}
.tool-card--mc .tool-card__icon{
  background: linear-gradient(135deg, rgba(34,197,94,.75), rgba(34,197,94,.20));
  border: 1px solid rgba(34,197,94,.35);
}
.tool-card--bt .tool-card__icon{
  background: linear-gradient(135deg, rgba(99,102,241,.75), rgba(99,102,241,.20));
  border: 1px solid rgba(99,102,241,.35);
}
.tool-card--sl .tool-card__icon{
  background: linear-gradient(135deg, rgba(14,165,233,.75), rgba(14,165,233,.20));
  border: 1px solid rgba(14,165,233,.35);
}
.tool-card--rt .tool-card__icon{
  background: linear-gradient(135deg, rgba(245,158,11,.75), rgba(245,158,11,.20));
  border: 1px solid rgba(245,158,11,.35);
}
.tool-card--af .tool-card__icon{
  background: linear-gradient(135deg, rgba(34,197,94,.75), rgba(34,197,94,.20));
  border: 1px solid rgba(34,197,94,.35);
}
 */

/* =========================
   CTA row (buttons)
   ========================= */
.overlay-cta-row{
  margin-top: 16px;
  display: flex;
  gap: 12px;

  /* ✅ align width with the grid */
  width: 150%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 10%;
  padding-left: 20%;
  position: relative;
  z-index: 100;
}

html[lang="he"] .overlay-cta-row{
  padding-right: 20%;
  padding-left: 10%;
}

.overlay-cta-row .btn-grow{
  flex: 1;
  min-height: 46px;
  font-size: 20px;
}

.overlay-cta-row .btn-grow:hover{
  border-color: var(--primary);
}



/* =========================
   Responsive
   ========================= */
@media (max-width: 768px){
  .tools-grid{
    grid-template-columns: 1fr !important;
  }
  .overlay-cta-row{
	padding:0;
	margin-top: -15px;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: auto;
  }
  .overlay-cta-row .btn-grow {
    font-size: 13px;
	min-height: 36px;
  }
  html[lang="he"] .overlay-cta-row .btn-grow {
    font-size: 14px;
  }
  html[lang="he"] .overlay-cta-row {
    padding-right: 0;
    padding-left: 0;
  }
}

/* =========================
   Desktop: 3rd card full width
   ========================= */
@media (min-width: 738px){
  .tools-grid.tools-grid--3 .tool-card--mc{
    grid-column: 1 / -1;
  }
}

/* ===== Mobil: carusel vertical ===== */
@media (max-width: 767px){
  .overlay-carousel-track{
    
  }
  .overlay-slide{
    flex:0 0 100%;
    min-width: 100%;
    height: 70vh;
  }
  
  .overlay-slide-progress{
    top: 65px;
    bottom: auto;
	height: 2px;
  }

}

/* Reduce motion: fără auto-slide + fără progress */
@media (prefers-reduced-motion: reduce){
  .overlay-carousel-track{ transition: none; }
  .overlay-slide.is-active .overlay-slide-progress::before{ animation: none; transform: scaleX(1); }
}

/* =========================
   ACTION MODAL (no conflict)
   - reuse: .me-modal-backdrop + .me-modal
   - override ONLY inside #action-modal
   ========================= */

#action-modal.me-modal-backdrop{
  /* păstrează display/centrare din .me-modal-backdrop */
  z-index: 9999999;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(6px);
  padding: 16px; /* dacă vrei “spațiu” pe margini */
}

#action-modal .me-modal{
  /* suprascrie modalul mic (max-width:400) DOAR aici */
  max-width: 980px;
  width: min(580px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 32px));
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}

#action-modal .me-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

#action-modal .me-modal-body{
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#action-modal .me-modal-loading{
  padding: 14px;
  font-weight: 600;
}

#action-modal .auth-fragment {
    height: 100%;
    padding: 0 100px;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.auth-fragment form{
    max-width: 100%;
	width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#action-modal .small {
    font-size: 16px;
	display: flex;
    flex-direction: column;
}

#action-modal .noaccount {
    display: none;
}

#action-modal nav {
	position: absolute;
    right: 20px;
}

html[lang="he"] #action-modal nav {
  right: auto;
  left: 20px;
}


/* =========================
   Mobil: toggle grid / map
   ========================== */

.mobile-toggle{
  position:fixed;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:9999;
  padding:8px 16px;
  border-radius:999px;
  border:none;
  background:#111827;
  color:#fff;
  font-size:14px;
  font-weight:500;
  box-shadow:0 10px 30px rgba(15,23,42,.5);
  cursor:pointer;
  display:none;
}

/* =========================
   3) Formulare & filtre
   ========================== */

.filters{ margin:5px 0 16px 0; }

.filters-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
}

.filters-scroll{
  flex:1 1 auto;
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  scroll-behavior:smooth;
}

.filters-scroll::-webkit-scrollbar{ height:6px; }
.filters-scroll::-webkit-scrollbar-track{ background:transparent; }
.filters-scroll::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.7);
  border-radius:999px;
}

.filters-arrow{
  flex:0 0 auto;
  align-self:center;
  width:32px;height:32px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  padding:0;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}

.filters-arrow:hover:not(.is-disabled){
  background:#f3f4f6;
  border-color:#cbd5e1;
}

.filters-arrow.is-disabled{
  opacity:.35;
  cursor:default;
}

.filters-submit{
  flex:0 0 auto;
  white-space:nowrap;
}

.filters input,
.filters select{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font:inherit;
  min-width:130px;
}

.remember-row {
  display:flex; 
  gap:10px; 
  align-items:center; 
  margin: 6px 0 2px;	
}

.remember-row input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  min-width: auto;	
  flex: 0.3;
}

.remember-row span {	
  flex: 1;
}

/* =========================
   4) Auth helpers
   ========================== */

.password-wrap{
  position:relative;
  display:flex;
  align-items:center;
}

.password-wrap input{
  width:100%;
  padding-right:40px;
}

.password-wrap .toggle-password{
  position:absolute;
  right:10px;
  background:transparent;
  border:none;
  cursor:pointer;
  font-size:16px;
  opacity:.7;
  padding:0;
  color:#333;
}

.password-wrap .toggle-password:hover{ opacity:1; }

/* =========================
   5) Carduri & grile generice
   ========================== */

.grid{
  display:grid;
  gap:16px;
}

.pane-results.cards-1 .grid{ grid-template-columns:1fr; }
.pane-results.cards-2 .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.pane-results.cards-3 .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* Card listings – imagine cu gradient + titlu overlay */
.listing-card .thumb-wrap {
  position: relative;
  overflow: hidden;
}

.grid-admin .listing-card .thumb-wrap {
  flex: 1.5;
  border-radius: 12px;
}

.listing-card .thumb {
  display: block;
  width: 100%;
  height: 200px;        /* ajustează dacă vrei mai înalt */
  object-fit: cover;
}

.listing-card .thumb-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0.0) 55%
  );
  pointer-events: none;
}

.listing-card .thumb-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
}

.property-title-overlay {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.listing-badge-boost{
  position:absolute;
  top:10px;
  left:10px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  z-index:5;
  pointer-events:none;
}

.listing-badge-boost img{
  width:18px !important;
  height:18px !important;
}

/* Bloc info din cardul de listing */
.listing-card .property-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 14px;
  font-size: 0.9rem;
  text-align: center;
}

.grid-admin .listing-card .property-info {
  margin: 0;
  padding-top: 10px;
}

/* Fiecare linie: label îngust + value flexibil */
.listing-card .property-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Label: îngust, discret, aliniat la dreapta */
.listing-card .property-row .label {
  flex: 0 0 80px;          /* lățimea label-ului */
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;          /* gri fin */
  text-align: right;
  white-space: nowrap;
}

/* Value: ia tot spațiul rămas */
.listing-card .property-row .value {
  flex: 1 1 auto;
  color: #111827;
}

/* Opțional: accent mic la preț */
.listing-card .property-row .value strong {
  font-size: 0.95rem;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.04);
}

.grid-admin .card-main-row{
  display: flex;
  gap: 50px;
  max-height: 300px;
}

.card img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

.p{ padding: 20px 30px 30px 30px; }

.grid-admin .p{ 
  flex: 1; 
  padding: 20px 100px 20px 50px; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

html[lang="he"] .grid-admin .p{ 
  padding: 20px 50px 20px 100px; 
}

.form-narrow{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-narrow label{
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  gap: 5px;
}

.form-narrow label input{
  margin-left: -10px;
}

.card h3{
  margin:0 0 6px;
  font-size:18px;
}

.muted{
  color:var(--muted);
  font-size:14px;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

/* =========================
   SOLD / RENTED (Closed) UI
   For: admin/views/partials/listings-grid.php
   ========================= */

/* Card closed look */
.listing-card.is-closed{
  opacity: 0.78;
}

/* (optional) make the photo look slightly "archived" */
.listing-card.is-closed .thumb{
  filter: grayscale(35%);
}

/* Ensure badge positions correctly */
.thumb-wrap{
  position: relative;
}

/* Badge base */
.listing-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.6px;
  font-size: 12px;
  color: #fff;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: none;
}

/* Closed badge */
.listing-badge-closed{
  background: rgba(185, 28, 28, 0.85);
  border-color: rgba(255,255,255,0.22);
}

/* SOLD / RENTED badge */
.card-badge-closed{
  background: rgba(185, 28, 28, .92);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* dim card when closed */
.property-card.is-closed{
  opacity: .72;
}

.property-card.is-closed .card-media-slider img{
  filter: grayscale(35%);
}


/* =========================
   5.1 Carduri publice (listing) + slider
   ========================== */

.property-card{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 6px 24px rgba(15,23,42,.08);
  transition:box-shadow .16s ease, transform .16s ease;
}

.property-card:hover{
  box-shadow:0 16px 40px rgba(15,23,42,.24);
  transform:translateY(-3px);
}

.property-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
  height:100%;
}

.card-media-slider{
  position:relative;
  overflow:hidden;
  border-radius:8px 8px 0 0;
  background:#000;
  height:180px;
}

.card-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transition:transform .25s ease-out;
}

.card-slide img,
.card-slide picture{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.card-media-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:none;
  padding:.4rem .7rem;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:1.4rem;
  cursor:pointer;
  opacity:0;
  transition:opacity .15s ease, background .15s ease;
  z-index:3;
}

.card-media-nav:hover{ background:rgba(0,0,0,.75); }
.card-media-nav-prev{ left:10px; }
.card-media-nav-next{ right:10px; }

.property-card:hover .card-media-nav{ opacity:1; }

.card-media-badges-left{
  position:absolute;
  top:10px;
  left:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  z-index:4;
}

.card-badge{
  display:inline-flex;
  align-self:flex-start;
  padding:2px 10px;
  border-radius:999px;
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.04em;
  color:#fff;
}

.card-badge-open-house{ background:#ff2a2b; }
.card-badge-featured{ background-color: rgb(195 14 158); }
.card-badge-virtual{ background-color:rgba(10,10,20,.6); }
.card-ai-badge{ background-color: rgb(188 45 0 / 80%); }

.card-media-badges-left .card-ai-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.card-media-badges-left .card-ai-badge-text{
  display:inline-block;
}

.card-media-badges-left .card-ai-badge svg{
  width:14px;
  height:14px;
  display:block;
  flex:0 0 auto;
}

/* favorite – dreapta sus */
.card-fav-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:4;
  border:none;
  background:rgba(0,0,0,.55);
  color:#fff;
  width:32px;height:32px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1rem;
  transition:background .15s ease, transform .15s ease;
}

.card-fav-btn:hover{
  background:rgba(0,0,0,.85);
  transform:scale(1.05);
}

.card-fav-btn.is-active{ background:#f97316; }

.fav-btn .fav-check{ display:none; }
.fav-btn.is-saved .fav-heart{ display:none; }
.fav-btn.is-saved .fav-check{ display:inline; }

.fav-btn .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;
}

.js-fav-text.is-saved::after{ content:" ✓"; }

/* corp card */
.card-body{ padding:10px 10px 8px 10px; }

html[lang="he"] .card-body{ direction:rtl; }

.card-price-line{
  font-size:20px;
  margin-bottom:2px;
}

html[lang="he"] .card-price-line{ direction:ltr; }

.card-type-city{
  font-size:14px;
  color:#4b5563;
  margin-bottom:2px;
  font-weight:500;
}

.card-specs{
  font-size:14px;
  color:#4b5563;
  margin-bottom:2px;
}

/* ===== desktop layout rows (varianta nouă) ===== */
.card-row{
  display:flex;
  align-items:baseline;
  gap:10px;
}

.card-row-top{
  justify-content:space-between;
  gap:12px;
}

.card-city{
  font-size:14px;
  color:#4b5563;
  margin-bottom:2px;
  font-weight:500;
  text-align:right;
  white-space:nowrap;
}

.card-row-mid{
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
}

.card-type{
  font-size:14px;
  color:#111827;
  font-weight:500;
}

.card-row-bottom{
  justify-content:space-between;
  gap:12px;
  margin-top:2px;
  align-items:center;
}

.card-address{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight: 200;
}

.card-agency{
  flex:0 0 auto;
  white-space:nowrap;
  text-align:right;
  font-size:small;
  color: rgb(0 0 0 / 75%);
  font-weight: 200;
}

/* ✅ Mobile/desktop switch pentru markup dublu */
.card-body-mobile{ display:block; }
.card-body-desktop{ display:none; }

@media (min-width:768px){
  .card-body-mobile{ display:none; }
  .card-body-desktop{ display:block; }
}

@media (max-width:420px){
  .card-row-bottom{ flex-wrap:wrap; }
  .card-address{ white-space:normal; }
}

/* =========================
   6) Paginație
   ========================== */

.pagination{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  margin:24px 0;
}

.pagination button{
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

/* =========================
   7) Butoane & link-buton
   ========================== */

a.btn,
a.btn-primary,
a.btn-action,
a.btn-edit,
a.btn-form-secondary{
  text-decoration:none;
}

.btn,
.btn-primary,
.btn-hollow,
.btn-hollow-primary,
.btn-danger,
.btn-success,
.btn-xs,
.btn-xs-danger,
.btn-action,
.btn-edit,
.btn-form-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    border-color .12s ease,
    color .12s ease;
}

.btn,
.btn-action{
  background:#111827;
  color:#f9fafb;
  border-color:#111827;
}

.btn:hover,
.btn-action:hover{
  background:#1f2937;
  border-color:#1f2937;
  color:#f9fafb;
}

.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.btn-primary:hover{
  background:var(--primary-strong);
  border-color:var(--primary-strong);
}

.btn-edit,
.btn-hollow{
  background:transparent;
  color:#111827;
  border-color:#111827;
}

.btn-edit:hover,
.btn-hollow:hover{
  background:#111827;
  border-color:#111827;
  color:#f9fafb;
}

.btn-hollow-primary{
  background:transparent;
  color:var(--primary);
  border-color:var(--primary);
}

.btn-hollow-primary:hover,
.btn-hollow-primary.is-loading{
  background:var(--primary);
  color:#fff;
}

.btn-form-secondary{
  background:#ff77a5;
  border-color:#ff3277;
  color:#ffffff;
}

.btn-form-secondary:hover{
  background:#fd387b;
  border-color:#fd387b;
}

.btn-primary.btn-success,
.btn-success{
  background:var(--success);
  border-color:var(--success);
  color:#fff;
}

.btn-primary.btn-success:hover,
.btn-success:hover{
  background:#15803d;
  border-color:#15803d;
}

.btn-primary.btn-danger,
.btn-danger,
.btn-xs-danger{
  background:#e11d48;
  border-color:#e11d48;
  color:#fff;
}

.btn-primary.btn-danger:hover,
.btn-danger:hover,
.btn-xs-danger:hover{
  background:#be123c;
  border-color:#be123c;
}

.btn-xs,
.btn-xs-danger{
  font-size:12px;
  padding:4px 8px;
}

.btn-grow:hover,
.btn-grow:focus-visible,
.btn-grow.is-loading{
  transform:scale(1.04);
  box-shadow:0 8px 18px rgba(15,23,42,.25);
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-hollow:focus-visible,
.btn-danger:focus-visible,
.btn-success:focus-visible,
.btn-xs:focus-visible,
.btn-xs-danger:focus-visible,
.btn-action:focus-visible,
.btn-edit:focus-visible,
.btn-form-secondary:focus-visible{
  outline:2px solid rgba(59,130,246,.7);
  outline-offset:2px;
}

/* =========================
   7.x) Chips / Filter buttons (nu afectează .btn*)
   ========================= */

.btn-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:0.9rem;
  cursor:pointer;
  color:#111827;
  white-space:nowrap;

  transition:
    background .12s ease,
    border-color .12s ease,
    color .12s ease,
    box-shadow .12s ease,
    transform .12s ease;
}

.btn-chip .chev{
  font-size:0.7rem;
  opacity:.7;
}

.btn-chip:hover{
  background:#f3f4f6;
  border-color:#cbd5e1;
  box-shadow:0 4px 10px rgba(15,23,42,.08);
  transform:translateY(-1px);
}

/* activ (panel deschis) */
.btn-chip.is-active{
  border-color:var(--primary);
  background:rgba(225,29,47,.06);
  color:var(--primary-strong);
}

/* =========================
   8) Hartă & toolbar hartă
   ========================== */

#map{
  border:1px solid var(--border);
  border-radius:16px;
  margin:10px 0 16px;
}

.map-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  margin:6px 0 12px;
}

.map-toolbar button{
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}

.map-toolbar .hint{
  color:var(--muted);
  font-size:14px;
}

/* =========================
   9) Dashboard / admin listings
   ========================== */

.grid-admin{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}

.card .thumb{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:12px 12px 0 0;
  background:#eef2f7;
}

.grid-admin .card .thumb{
  height:100%;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid #e2e8f0;
}

.toolbar-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content: space-around;
}

html[lang="he"] .toolbar-actions{
  flex-direction: row-reverse;
}

.p .toolbar-actions{
  padding-top: 12px;
  border-top: 1px solid #333333;
}

.grid-admin .p .toolbar-actions{
  padding: 20px 0 10px 0;
}

.toolbar-actions form{
  display:flex;
}

.listings-title{ margin-bottom:12px; }

.listings-deal-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:4px;
}

.listings-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.grid-admin .listings-actions{
  padding-top: 20px;
  margin-top: 0;
  margin-bottom: 0;
}

.listings-actions-row{
  display:flex;
  gap:15px;
  flex-direction: column-reverse;
}

.listings-actions-toprow{
  display:flex;
  justify-content: space-between;
}

.listings-actions .studio-title{
  font-size:large;
}

html[lang="he"] .listings-actions .studio-title{
  font-size:x-large;
}

.listings-actions .studio-subtitle{
  font-size:medium;
  font-weight:400
}

html[lang="he"] .listings-actions .studio-subtitle{
  font-size:large;
}

.studio-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
    width: 25%;
    border-right: 1px solid #cccccc;
    padding: 10px 0;
    border-radius: 10px;
}

html[lang="he"] .studio-action-icon {
    border-right: none;
	border-left: 1px solid #cccccc;
}

.listings-actions-toprow button {
    background:none;
	border:none;
	padding:0;
	width: 25%;
}

.studio-action-icon img {
    width: 26px;
    height: 26px;
    display: block;
}

.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:8px;
}

.toolbar .toolbar-actions{
  gap:20px;
  margin-top: 0;
}

.deal-closed-checkbox{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.8rem;
}

/* =========================
   10) Tabele admin
   ========================== */

.table,
.table-admin{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  margin-top:12px;
}

.table th,
.table td,
.table-admin th,
.table-admin td{
  padding:6px 8px;
  border-bottom:1px solid #e2e8f0;
  text-align:left;
}

.table th,
.table-admin th{
  background:#f8fafc;
  font-weight:600;
}

/* =========================
   11) Badge-uri & etichete
   ========================== */

.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid #cbd5e1;
}

/* =========================
   12) Agency settings & forms
   ========================== */

.page-section{ margin-bottom:24px; }

.section-divider{
  border:none;
  border-top:1px solid var(--border);
  margin:30px 0;
}

.form-narrow{
  max-width:520px;
  margin-top:12px;
}

.logo-preview{
  max-width:180px;
  max-height:120px;
  border-radius:8px;
  object-fit:contain;
  background:#f1f5f9;
  padding:8px;
}

.card-alert{ margin-bottom:16px; }
.card-alert-error{ border-left:4px solid #e11d48; }
.card-alert-success{ border-left:4px solid #10b981; }

/* =========================
   13) Dashboard admin – user blocks
   ========================== */

.user-block{
  border-top:1px solid #e2e8f0;
  padding-top:12px;
  margin-top:12px;
}

.user-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}

.user-info{
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* =========================
   14) Utilities
   ========================== */

.mt-1{ margin-top:4px; }
.mt-2{ margin-top:8px; }
.mt-3{ margin-top:12px; }
.mt-4{ margin-top:16px; }

.form-inline{ display:inline; }
.hidden{ display:none; }

/* =========================
   15) Debug helpers
   ========================== */

.debug-box{
  padding:16px;
  background:#fff3f3;
  border:1px solid #fca5a5;
  border-radius:8px;
}

/* =========================
   16) Property editor
   ========================== */

.wrap{
  max-width:1000px;
  margin:0 auto;
}

.card-upload{
  padding:16px 30px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 24px rgba(15,23,42,.08);
  margin-bottom:16px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.form-grid input,
.form-grid select{
  padding:10px;
  border:1px solid #d4d7de;
  border-radius:8px;
  font:inherit;
}

.form-grid input:not([type="radio"]):not([type="checkbox"]),
.form-grid select{
  height:50px;
  box-sizing:border-box;
}

.thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}

.thumbs img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:8px;
  background:#eef2f7;
}

.thumb-wrap{ position:relative; }

.thumb-delete{
  position:absolute;
  top:6px;
  right:6px;
  background:rgba(15,23,42,.8);
  color:#fff;
  border:none;
  border-radius:999px;
  width:24px;height:24px;
  font-size:14px;
  line-height:24px;
  text-align:center;
  cursor:pointer;
}

/* =========================
   17) Property view (property.php)
   ========================== */

.grid-1col{ grid-template-columns:1fr; }
.grid-thumbs{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }

.card img.main-photo{
  height:380px;
  width:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   18) Auth pages
   ========================== */

.auth-form {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.form-card{
  padding: 50px 70px;
  background:#fff;
}

.form-card h1{
  margin-top:0;
  margin-bottom:10px;
  font-size:24px;
}

.form-card p.sub{
  margin-top:0;
  margin-bottom:20px;
  color:#64748b;
  font-size:14px;
}

.field{ margin-bottom:16px; }

.field label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
  font-size:14px;
}

.field input[type="text"],
.field input[type="number"],
.field input[type="email"],
.field input[type="password"],
.field input[type="time"],
.field input[type="url"],
.field input[type="tel"]{
  width:100%;
  padding:8px 10px;
  border:1px solid #d1d5db;
  border-radius:4px;
  font-size:14px;
}

.field select,
.field-inline select{
  width:100%;
  padding:8px 10px;
  border:1px solid #d1d5db;
  border-radius:4px;
  font-size:14px;
  background:#fff;
}

.field textarea{
  width:100%;
  display:block;
  padding:8px 10px;
  border:1px solid #d1d5db;
  border-radius:4px;
  font-size:14px;
  line-height: 20px;
  font-weight: 300;
  font-family:inherit;
  box-sizing:border-box;
  min-height:120px;
  resize:vertical;
}

.text-error,
.field .error{
  margin-top:8px;
  padding:8px 10px;
  background:var(--danger-soft);
  border-left:3px solid var(--danger);
  color:var(--danger);
  font-size:13px;
  border-radius:4px;
}

.text-success{
  margin-top:8px;
  padding:8px 10px;
  background:var(--success-soft);
  border-left:3px solid var(--success);
  color:var(--success);
  font-size:13px;
  border-radius:4px;
}

.field-inline{
  display:flex;
  gap:12px;
}

.field-inline > div{ flex:1; }

.field-inline.checkbox-inline-group{
  flex-wrap:wrap;
  align-items:center;
}

.checkbox-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:400;
  font-size:14px;
}

.radio-group{
  display:flex;
  gap:12px;
  margin-top:6px;
  font-size:14px;
  flex-wrap:wrap;
}

.radio-group label{
  display:flex;
  align-items:center;
  gap:6px;
}

.small{
  font-size:12px;
  color:#6b7280;
}

.password-eye{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:12px;
  color:#6b7280;
}

.strength{
  font-size:12px;
  margin-top:4px;
}

.strength span{ font-weight:600; }
.strength.weak span{ color:#b91c1c; }
.strength.medium span{ color:#d97706; }
.strength.strong span{ color:#15803d; }

.step-indicator{
  font-size:12px;
  color:#6b7280;
  margin-bottom:8px;
}

.checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
}

.checkbox-row input{ margin-top:3px; }

.checkbox-row a{
  color:var(--primary);
  text-decoration:underline;
}

/* =========================
   AI UI bits
   ========================== */

.photos-ai-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:.4rem;
}

.photos-ai-icon svg{
  width:1rem;
  height:1rem;
  display:block;
  fill:currentColor;
}

.btn.btn-secondary .photos-ai-icon{
  padding:2px;
  border-radius:999px;
  background:rgba(250,204,21,.14);
}

.ai-spinner{
  display:inline-block;
  width:14px;height:14px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.5);
  border-top-color:#fff;
  animation:ai-spin .6s linear infinite;
  margin-inline-end:6px;
  vertical-align:-2px;
}

.ai-btn-text{ display:inline-block; }
button#photos-ai-check-btn[disabled] .ai-btn-text{ opacity:.9; }

@keyframes ai-spin{ to{ transform:rotate(360deg); } }

.form-fullwidth{
  max-width:none;
  width:100%;
}

.section-block{
  grid-column:1 / -1;
  margin-top:16px;
  padding:16px 18px 18px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}

.section-block:hover{
  border-color:rgba(148,163,184,.9);
  box-shadow:0 14px 40px rgba(15,23,42,.12);
  transform:translateY(-1px);
}

.section-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:12px 16px;
  margin-top:12px;
}

.section-group-title{
  margin:0 0 6px;
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:8px;
}

.section-group-title::before{
  content:"";
  width:8px;height:8px;
  border-radius:999px;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(225,29,47,.35);
}

/* =========================
   Modal Quick edit
   ========================== */

.me-modal-backdrop{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.55);
  z-index: 9999;
  padding: 16px;
  box-sizing: border-box;
}

.me-modal-backdrop.is-open{
  display: flex;
}

.me-modal{
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 45px rgba(15,23,42,.25);
}

.me-modal h3{
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.me-modal .form-group{
  margin-bottom: 12px;
}

.me-modal .form-group label{
  display: block;
  margin-bottom: 4px;
  font-size: .85rem;
  color: #4b5563;
}

.me-modal .form-group .input{
  width: 100%;
}

.me-modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* 🔹 blocăm scroll-ul pe body când modalul e deschis */
body.me-modal-open{
  overflow: hidden;
}

/* ✅ layout pt select + icon + popover */
.qe-format-row{
  position:relative;
  display:flex;
  gap:10px;
  align-items:center;
}
.qe-preview-btn{
  border:none;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}
.qe-preview-btn img{ width:28px; height:auto; opacity:.9; }
.qe-preview-btn:hover{ box-shadow:0 10px 26px rgba(0,0,0,.12); }

.qe-preview-pop{
  position:absolute;
  right:min(-10px, -0.7vw);
  top: calc(100% + 8px);
  width:min(680px, 92vw);
  z-index: 99999;
  display:none;
}
.qe-preview-pop.is-open{ display:block; }

.qe-preview-pop .featured-item .feat-meta { font-size:12px; }

.qe-preview-pop .featured-item[data-format="S"] { flex:0.5; }
.qe-preview-pop .featured-item[data-format="S"] .feat-hero { align-items:center; display:flex; }

.qe-preview-pop .featured-item[data-format="R2"] { flex:1; }

.qe-preview-pop .featured-item[data-format="R3"] { flex:1; }

.qe-preview-pop-inner{
  border:1px solid rgba(0,0,0,.14);
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  overflow:hidden;
}
.qe-preview-title{
  padding:10px 12px;
  font-weight:700;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-size:13px;
}

/* ===== HERO SLIDER (R3/R4) ===== */
.feat-hero.feat-hero-slider{
  position: relative;
  overflow: hidden;
}

.feat-hero.feat-hero-slider .feat-slide{
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .5s ease;
}

.feat-hero.feat-hero-slider .feat-slide.is-active{
  opacity: 1;
}

/* ✅ mici ajustări ca preview-ul să arate ok în popover fără să strice CSS-ul tău public */
.qe-preview-grid{
  padding:12px;
  justify-content:flex-start; /* în popover e mai logic */
  gap:12px;
}
.qe-preview-grid .feat-meta{ /* în CSS-ul tău e alb, ok, dar în admin poate avea alte setări */
  color:#fff;
}
.qe-preview-grid .feat-hero{
  min-height:110px;
}


/* =========================
   Listings: full screen
   Scroll chaining to footer (page-scroll)
   ========================== */

body.page-listings{
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* containerul care scrollează “pagina” (include footer) */
body.page-listings .page-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
}

/* main ocupă fix înălțimea vizibilă a page-scroll */
body.page-listings .main-shell{
  height:100%;
  min-height:0;
  overflow:hidden;
  padding:0;
}

body.page-listings .split-layout{
  height:100%;
  min-height:0;
}

/* dreapta: filtre sus, scroll intern doar pe rezultate */
body.page-listings .pane-results{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

body.page-listings .results-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* stânga */
body.page-listings .pane-map{ overflow:hidden; }

body.page-listings #map{
  height:100%;
  margin:0;
  border:1px solid var(--border);
  border-radius:16px;
}

/* Hide scrollbar but keep scroll (cross-browser) */
body.page-listings .page-scroll,
body.page-listings .results-scroll{
  scrollbar-width:none;
  -ms-overflow-style:none;
}

body.page-listings .page-scroll::-webkit-scrollbar,
body.page-listings .results-scroll::-webkit-scrollbar{
  width:0;
  height:0;
}


/* Container query pe panoul de rezultate */
.pane-results { container-type: inline-size; }

/* sub prag -> 2 coloane (override pentru cards-3) */
@container (max-width: 1051.98px){
  .pane-results.cards-3 .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* peste prag -> 3 coloane */
@container (min-width: 1052px){
  .pane-results.cards-3 .grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mobile-drawer {
  display: none;
}

.mt-4 strong{
  font-size: 20px;
}

/* =========================
   Quick Edit (sections UI)
   Scope: only inside #quick-edit-modal
   Uses your vars: --card --border --ink --muted --primary
   ========================= */

#quick-edit-modal .me-modal{
  max-width: 720px; /* optional: un pic mai aerisit */
  width: 100%;
}

#quick-edit-form{
  display: grid;
  gap: 12px;
}

/* Section cards */
#quick-edit-modal .qe-section{
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 12px 14px;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}

#quick-edit-modal .qe-section::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 17px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(225,29,47,.18);
}

#quick-edit-modal .qe-section:hover{
  border-color: rgba(148,163,184,.9);
  box-shadow: 0 14px 40px rgba(15,23,42,.12);
  transform: translateY(-1px);
}

/* Section header */
#quick-edit-modal .qe-section-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-left: 24px; /* ca să nu calce peste bullet-ul roșu */
  margin-bottom: 10px;
}

#quick-edit-modal .qe-section-title{
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

#quick-edit-modal .qe-section-sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

/* Chip (ex: max 45) */
#quick-edit-modal .qe-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--primary-strong);
  background: rgba(225,29,47,.08);
  border: 1px solid rgba(225,29,47,.18);
  white-space: nowrap;
  margin-top: 2px;
}

/* Tighten form groups inside sections */
#quick-edit-modal .qe-section .form-group{
  margin-bottom: 0; /* override your .me-modal .form-group margin-bottom */
  display: grid;
  gap: 6px;
}

#quick-edit-modal .qe-section .form-group + .form-group{
  margin-top: 10px;
}

/* Labels (aligned to your style) */
#quick-edit-modal .qe-section label{
  display:block;
  margin-bottom: 0;
  font-size: .85rem;
  color: #4b5563;
  font-weight: 600;
}

/* Inputs – modern light */
#quick-edit-modal .qe-section .input{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgb(54 55 78 / 5%);
  color: var(--ink);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

#quick-edit-modal .qe-section .input::placeholder{
  color: rgba(107,114,128,.75);
}

/* Focus ring in brand color */
#quick-edit-modal .qe-section .input:focus{
  outline: none;
  border-color: rgba(225,29,47,.55);
  box-shadow: 0 0 0 4px rgba(225,29,47,.14);
}

/* Inline time grid */
#quick-edit-modal .qe-section .form-group-inline{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

#quick-edit-modal .qe-section .form-group-inline > div{
  display:grid;
  gap: 6px;
}

/* Helper text */
#quick-edit-modal .qe-section .muted{
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

/* Mobile: time inputs stacked */
@media (max-width: 520px){
  #quick-edit-modal .qe-section .form-group-inline{
    grid-template-columns: 1fr;
  }
}

.back-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.return-arrow{
  width: 20px;
  height: 20px;
  display: inline-block;
  flex: 0 0 auto;
  fill: currentColor; /* ia culoarea din text */
  transform: scaleX(-1);
  transform-origin: center;
}

/* ✅ RTL friendly: inversează săgeata când documentul e RTL */
html[dir="rtl"] .return-arrow,
body[dir="rtl"] .return-arrow,
:dir(rtl) .return-arrow{
  transform: scaleX(1);
  transform-origin: center;
}

/* ================================
   MartEstate – Pulse helper (global)
   Usage:
     class="me-pulse"
     class="me-pulse me-pulse--soft"
     class="me-pulse me-pulse--glow"
   ================================ */
:root{
  --me-pulse-glow: rgba(37, 99, 235, 0.45); /* albastru */
}

.me-pulse{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform-origin: 50% 50%;
  font-weight: 300;
  animation: mePulse 1.05s ease-in-out infinite;
}

.me-pulse--soft{
  font-weight: 600;
  animation-duration: 1.25s;
}

/* default: fără glow */
@keyframes mePulse{
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* Glow variant (optional) */
.me-pulse--glow{
  animation-name: mePulseGlow;
}

@keyframes mePulseGlow{
  0%, 100% { opacity: .55; transform: scale(1);    text-shadow: none; }
  50%      { opacity: 1;   transform: scale(1.04); text-shadow: 0 0 10px var(--me-pulse-glow); }
}

/* Respectă accesibilitatea */
@media (prefers-reduced-motion: reduce){
  .me-pulse{ animation: none; text-shadow: none; }
}


/* =========================================================
   3) CSS — adaugă la stylesheet-ul tău (global sau admin)
   Scope: doar .listing-card
   ========================================================= */

/* Cardul: stack vertical ca să poți avea panel sub */
.grid-admin .listing-card{
  display:flex;
  flex-direction:column;
  position:relative;
}

/* Row: thumb + content */
.grid-admin .listing-card .card-main-row{
  display:flex;
  gap:50px;

  height:300px;      /* ✅ fix, nu max-height */
  overflow:hidden;   /* ✅ ascunde orice depășește */
  flex: 0 0 auto;    /* ✅ nu se strânge / nu se întinde */
}

/* (opțional) dacă max-height te taie la conținut, pune overflow */
.grid-admin .listing-card .card-main-row{
  overflow: hidden;
  position: relative;
}

/* Butonul rămâne în colț dreapta-jos al article */
.ins-btn{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:6;
  height:34px;
  padding: 0 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color: var(--primary-strong);
  font: inherit;
  font-weight: 700;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ins-btn:hover{
  transform: scale(1.04);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
  background: rgba(225,29,47,.06);
}

html[lang="he"] .ins-btn{
  right: auto;	
  left:12px;
}

.ins-panel{
  position: relative;
  display:block;
  padding: 0 20px;
  background:#fff;
  overflow:hidden;
  /* ✅ colapsat */
  max-height:0;
  opacity:0;
  transform: translateY(6px); /* ✅ pornește mai jos, nu mai sus */
  transition: max-height .25s ease, opacity .18s ease, transform .18s ease;
}

.ins-panel.is-open{
  display: flex !important; 	
  opacity:1;
  transform: translateY(0);
  /* max-height o setăm din JS ca să fie exact cât conținutul */
  max-height: 1200px; /* fallback dacă nu folosești JS */
}


.ins-panel-inner{ width: 100%; padding: 12px; border-top: 1px solid #cccccc;}


/* simple states */
.ins-loading{ font-size:13px; color: var(--muted); font-weight:600; }
.ins-error{ font-size:13px; color: #b91c1c; font-weight:700; background: #fef2f2; border-radius:10px; padding:10px; }
.ins-empty{ font-size:13px; color: var(--muted); padding:10px; }

/* OUTER INS drawer under listing card */
.listing-card .ins-panel{
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease, opacity .28s ease, transform .28s ease;
  opacity: 0;
  transform: translateY(-6px);
  display: none;
}

.listing-card .ins-panel.is-open{
  opacity: 1;
  transform: translateY(0);
  overflow-y: auto;
}

/* Mobile */
@media (max-width: 767.98px){
  .ins-panel{
    margin: 12px 10px 12px;
	padding: 0;
  }
}


/* =========================================
   STAGING MODAL – Base + Layout + Crossfade
   ========================================= */

/* Modal container */
.staging-modal{
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: none; /* controlat din JS */
}
.staging-modal.is-open{ display:block; }

.staging-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* Dialog wrapper */
.staging-modal-dialog{
  position: relative;
  max-width: 1100px;
  margin: 4vh auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);

  /* ✅ nu iese din ecran + layout pe coloană */
  max-height: calc(100vh - 8vh);
  display: flex;
  flex-direction: column;
}

/* Close button */
.staging-modal-close{
  position: absolute;
  right: 12px;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: #f3f3f3;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

/* Header */
.staging-modal-header{
  padding: 16px 18px;
  border-bottom: 1px solid #eee;
  flex: 0 0 auto;
}
.staging-modal-title{ font-weight: 700; font-size: 18px; }
.staging-modal-sub{ margin-top: 4px; font-size: 13px; opacity: .75; }

/* Body: 2 columns */
.staging-modal-body{
  padding: 16px 18px;
  flex: 1 1 auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 14px;

  overflow: hidden; /* ca să nu împingă dialogul în jos */
  min-height: 0;    /* important pentru overflow în grid */
}

/* =========================================
   LEFT: Original + Variant (stacked)
   ========================================= */
.staging-compare{
  display: flex;
  flex-direction: column;
  gap: 14px;

  overflow: auto;   /* scroll doar în stânga dacă e nevoie */
  min-height: 0;
  padding-right: 2px;
}

.staging-compare-col{
  min-width: 0;
}

.staging-compare-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.staging-compare-label{
  flex:0 0 auto;
  font-weight:600;
  line-height:1.2;
}

.staging-compare-disclaimer{
  flex:1 1 auto;
  text-align:right;
  font-size:12px;
  line-height:1.35;
  opacity:.75;
  max-width:520px;
}

/* Default image styling (fallback) */
.staging-compare-col img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: #f6f6f6;
}

/* =========================================
   Crossfade overlay (recommended)
   Requires HTML wrapper:
   <div class="staging-canvas" id="stagingCanvas">
   </div>
   and both imgs inside it (see note below)
   ========================================= */
.staging-canvas{
  position: relative;
  border-radius: 14px;
  background: #f6f6f6;
  overflow: hidden;
}

/* Both images cover the same canvas */
.staging-canvas #stagingOriginalImg,
.staging-canvas #stagingVariantImg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* change to cover if you prefer crop */
  background: #f6f6f6;
}

/* Start: show original, hide variant */
.staging-canvas #stagingOriginalImg{ opacity: 1; }
.staging-canvas #stagingVariantImg{ opacity: 0; }

/* Smooth fade when variant is ready */
.staging-canvas.has-variant #stagingOriginalImg{ opacity: 0; }
.staging-canvas.has-variant #stagingVariantImg{ opacity: 1; }

.staging-canvas #stagingOriginalImg,
.staging-canvas #stagingVariantImg{
  transition: opacity .28s ease;
}

/* If you want the canvas to keep aspect ratio (optional):
   Set a fixed ratio, so layout doesn't jump while loading. */
.staging-canvas{
  aspect-ratio: 4 / 2.7; /* adjust to your common listing photos */
}

/* =========================================
   RIGHT: Variants list (vertical)
   ========================================= */
.staging-variants-wrap{
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-top: 0;
  overflow: auto;  /* scroll doar în dreapta */
  min-height: 0;
  padding: 0 30px;
}   
.staging-variants{
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-top: 0;
  overflow: auto;  /* scroll doar în dreapta */
  min-height: 0;
}

/* Variant button used by JS: .staging-variant */
.staging-variant{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  padding: 10px;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.staging-variant:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.18);
}
.staging-variant.is-active{
  outline: 1px solid #2ed30a;
  outline-offset: 0;
  background: rgb(46 211 10 / 5%);
}

.staging-variant img{
  width: 100%;
  display: block;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.staging-variant-cap{
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
}

/* If you still have legacy markup using .staging-variant-btn */
.staging-variant-btn{
  display: block;
  width: 100%;
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  text-align: left;
}
.staging-variant-btn img{
  width: 100%;
  display: block;
  border-radius: 10px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.staging-variant-name{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
}
.staging-variant-btn.is-active{
  outline: 2px solid #111;
  outline-offset: 0;
}

/* === Room staging: Compare button under big image === */
.staging-compare-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}

.staging-compare-btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  color:#111;
  padding:8px 12px;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  line-height:1;
}

.staging-compare-btn[aria-pressed="true"]{
  background:#111;
  color:#fff;
  border-color:#111;
}

.staging-compare-state{
  font-size:12px;
  opacity:.7;
}

/* === Compare mode visual behavior ===
   Când e Compare ON, vrem să “fade” varianta curentă
   (imaginea de sus) și să arătăm imaginea de compare
   (Remove Furniture dacă există, altfel original).
   În JS vom comuta clasa .is-compare pe #stagingCanvas.
*/
#stagingCanvas.is-compare .staging-img.is-variant{
  opacity:.18; /* fade varianta curentă */
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 768px){
  .staging-modal-dialog{
    margin: 2vh 10px;
    max-height: calc(100vh - 4vh);
  }
  
  .staging-compare{
    position: relative;
    gap: 6px;
  }
  
  .staging-compare-actions {
    position: absolute;
	left:5px;
    bottom: 5px;
  }

  .staging-modal-body{
	  display:block;
	  padding: 8px 10px;
    /* grid-template-columns: 1fr; o coloană */
  }
  
  .staging-compare-head {
    flex-direction: column;
	gap: 6px;
  }
  
  .staging-compare-disclaimer {
    text-align: left;
    font-size: 10px;
    line-height: 1.25;
    max-width: 768px;
  }

  .staging-variants{
    max-height: 34vh; /* thumbnails sub poze, fără să împingă tot */
  }
  
  .staging-variants-title {
    display: none;
  }
  
  .staging-variants-wrap {
    padding: 0 30px;
    margin-top: 5px;
  }
}

.lang-switcher--dropdown,
.mobile-lang-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}

.lang-current,
.mobile-lang-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  background: #fff;
  color: #111;
  cursor: pointer;
  font: inherit;
}

.lang-current:hover,
.mobile-lang-current:hover {
  background: #f7f7f7;
}

.lang-flag {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 50%;
  flex: 0 0 18px;
}

.lang-code {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.lang-caret {
  font-size: 12px;
  line-height: 1;
}

.lang-menu,
.mobile-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  min-width: 140px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 8px;
  display: none;
  z-index: 1000;
}

.lang-switcher--dropdown .lang-menu {
  right: 0;
}

.mobile-lang-dropdown .mobile-lang-menu {
  left: 0;
}

.lang-switcher--dropdown.is-open .lang-menu,
.mobile-lang-dropdown.is-open .mobile-lang-menu {
  display: block;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #111;
}

.lang-option:hover {
  background: #f5f5f5;
}

.lang-option.is-active {
  background: #f1f5f9;
  font-weight: 700;
}

.mobile-lang-switcher--dropdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-lang-title {
  font-size: 14px;
  font-weight: 700;
}

.boosts-wrap--results { display:none;}

/* ================================
   LAPTOP (WIDE + SHORT HEIGHT) OVERRIDES
   ================================ */

@media (max-height: 900px) and (min-width: 1200px){
    .overlay-welcome {
        padding: 50px 0;
    }  
	
	.overlay-carousel {
		width: 80%;
    }
	
	.overlay-slide-desc {
        font-size: 14px;
	}
	
	.overlay-slide ul li {
        font-size: 14px;
	}
	
	.overlay-slide h2{
	  margin-top: 15px;
	}
	
	.login-page .container {
      margin-top: 100px;
    }
	
	.site-header .container,
    .site-header .header-inner{
      margin-top: 0;
    }
	
	.overlay-slide h2 {
      font-size: 28px;
	}
	
	.tool-card__title {
      font-size: 30px;
	  line-height: 1.0;
    }
	
	html[lang="he"] .overlay-slide h2 {
      font-size: 30px;
	}
	
	html[lang="he"] .tool-card__title {
      font-size: 34px;
	  line-height: 1.0;
    }
	
	.overlay-cta-row {
      padding-left: 10%;
    }
	
	.overlay-slide button {
      margin-top: 40px;
      width: 100%;
    }
	
	.overlay-cta-row .btn-grow {
      font-size: 16px;
    }
}

@media (max-height: 700px) and (min-width: 1200px){
    .overlay-welcome {
        
    }  
	
	.overlay-carousel {
		width: 80%;
    }
	
	.overlay-slide-desc {
        font-size: 14px;
	}
	
	.overlay-slide ul li {
        font-size: 14px;
	}  
	
	.overlay-slide h2{
	  margin-top: 15px;
	}
	
	.form-card {
      padding: 0 70px;
    }
	
	.login-page .container {
      margin-top: 20px;
    }
	
    .overlay-slide h2 {
      font-size: 28px;
	}
	
	.tool-card__title {
      font-size: 30px;
	  line-height: 1.0;
    }
	
	html[lang="he"] .overlay-slide h2 {
      font-size: 30px;
	}
	
	html[lang="he"] .tool-card__title {
      font-size: 34px;
	  line-height: 1.0;
    }
	
	.overlay-cta-row {
      padding-left: 10%;
    }
	
	.overlay-slide button {
      margin-top: 40px;
      width: 100%;
    }
	
	.overlay-cta-row .btn-grow {
      font-size: 16px;
    }
	
}



/* ================================
   MOBILE OVERRIDES (max-width: 768px)
   ================================ */
	@media (max-width:767.98px){

	.mobile-drawer {
	  display: initial;
	} 
	
	.form-card {
      padding: 20px 10px;
    }
	
	#action-modal .auth-fragment {
      padding: 0 40px;
    }
	
	.page-listings .site-header .container,
	.page-listings .site-header .header-inner{
	  flex-direction: row;
	  justify-content: center;
	}
	
	.page-help .site-header .container,
	.page-help .site-header .header-inner{
	  flex-direction: row;
	  justify-content: center;
	}
	
	.site-header .container,
	.site-header .header-inner{
	  justify-content:center;
	  position:relative; 
	  /* flex-direction:column-reverse; */
	}
	
	.login-page .container {
      padding: 50px;
      border: none;
      margin-top: 0;
      border-radius: 0;
    }	
	
	.login-page .site-header .container, .login-page .site-header .header-inner{
	  justify-content: space-between;
	  flex-direction: row;
      padding: 10px 30px;
	  align-items: center;
	}
	
    .login-page .site-header .container h1 {
      flex: 1 !important;
    }
	
	.login-page .site-header .container nav {
	  flex: 1;
      justify-content: flex-end;
	}
	
	.site-header .container h1 {
      font-size: 18px;
      margin: 0;
    }
	
	.site-header .container nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 0;	
	  width: 100%;
	}

	/* hamburger în STÂNGA */
	.nav-toggle{
	  display:inline-flex;
	  align-items:center;
	  justify-content:center;
	  position:absolute;
	  left:16px;
	  top:50%;
	  transform:translateY(-50%);
	}

	/* pe mobil ascundem meniurile desktop (sunt în drawer) */
	.primary-nav,
	.user-nav{
	  display:none !important;
	}

	/* backdrop + drawer (asigură-te că există în HTML) */
	.mobile-drawer-backdrop{
	  position:fixed;
	  inset:0;
	  background:rgba(0,0,0,.35);
	  opacity:0;
	  pointer-events:none;
	  transition:opacity .22s ease;
	  z-index:9998;
	}

	.mobile-drawer{
	  position:fixed;
	  top:0;
	  left:0;
	  height:100vh;
	  width:290px;
	  max-width:86vw;
	  padding: 10px;
	  background:#fff;
	  color:#111;
	  transform:translateX(-100%);
	  transition:transform .22s ease;
	  z-index:9999;
	  box-shadow:0 24px 80px rgba(0,0,0,.25);
	}
	
	.mobile-drawer-title {
      margin: 20px 0;
	  padding-left: 20px;
	  font-size: 24px;
    }

	/* OPEN state pe html (din JS) */
	html.nav-open .mobile-drawer{
	  transform:translateX(0);
	}
	html.nav-open .mobile-drawer-backdrop{
	  opacity:1;
	  pointer-events:auto;
	}

	/* împinge pagina spre dreapta */
	.site-header, main, footer{
		transition:transform .22s ease;
		will-change:transform;
	  }
	  html.nav-open .site-header,
	  html.nav-open main,
	  html.nav-open footer{
		transform:translateX(290px);
	  }

	  html.nav-open, html.nav-open body{ overflow:hidden; }
	  
  .nav-link, .site-header nav a {
    font-size: 16px;
    color: var(--primary);
    padding: 10px 8px;
    border-radius: none;
    border-bottom: 1px solid #e9e9e9;
  }	  
  
  html[lang="he"] .nav-link, html[lang="he"] .site-header nav a {
    flex-direction: row-reverse;
  }
	  
  .mobile-drawer-links {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
  }
  
  .mobile-drawer-close {
    background: none;
    border: none;
    font-size: xx-large;
    font-weight: 300;
  }
  
  .split-layout{
    flex-direction:column;
    flex:1;
    min-height:0;
  }

  .pane-map,
  .pane-results{
    flex:1 0 auto;
    width:100%;
    min-height:0;
  }

  .splitter{ display:none; }

  .mobile-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .main-shell.view-grid .pane-map{ display:none; }
  .main-shell.view-grid .pane-results{ display:flex; }

  .main-shell.view-map .pane-map{ display:flex; }
  .main-shell.view-map .pane-results{ display:none; }  
  
  .card-upload{
    padding:10px;
	margin-top: 0 !important;
    border-radius: 0;
    box-shadow: none;
  }
  
  .card-upload h2{
    font-size: 18px;
    margin-top: 0;
	padding-left: 10px;
  }  
  
  .filters-toolbar{ flex-wrap:wrap; }
  .filters-submit{
    width:100%;
    justify-content:center;
  }  
  
  .overlay-carousel {
    width: 100%;
	overflow: hidden;
  }
  
  .overlay-carousel-track{
    
  }

  .overlay-slide{
    flex:0 0 100%;
	padding:0;
    margin-top: 0;
    gap: 10px;
  }
  
  .overlay-slide h2 {
    font-size: 22.5px;
	margin-top: 130px;
	text-align: left;
  }
  
  html[lang="he"] .overlay-slide h2 {
    font-size: 26px;
	text-align: right;
  }
  
  .overlay-slide h3 {
    font-size: 16px;
    margin-top: 0;
  }
  
  .overlay-slide h3 span{
    display:none;
  }
  
  .overlay-slide h4 {
    font-size: 20px;
  }
  
  .overlay-slide button {
	width: 80%;
	margin-top: 0;
  }
  
  .overlay-btn {
    font-size: 12px;
  }
  
  .overlay-slide ul li {
    font-size: 14px;
    font-weight: 300;
  }
  
  .overlay-slide p {
    font-size: 14px;
    font-weight: 300;
  }
  
  .tool-card {
    gap: 10px;
    padding: 8px 14px;
    border-radius: 12px;
  }
  
  .tools-grid .tool-card {
	gap: 10px;  
    padding: 0;
  }
  
  .tool-card__title {
    font-size: 23px;
	width: 80%;
  }
  
  html[lang="he"] .tool-card__title{
    font-size: 26px;
  }
  
  .tool-card__subtitle {
    font-size: 14px;
  }
  
  html[lang="he"] .tool-card__subtitle {
    font-size: 15px;
  }
  
  .tool-card__icon {
    width: 50px;
    height: 50px;
  }
  
  .tool-card__icon svg {
    width: 30px;
    height: 30px;
  }
  
  .tool-card__icon img {
    width: 34px;
    height: 34px;
  }
  
  .overlay-bottom p {
    font-size: 10px;
    font-weight: 300;
  }
  
  .filters-arrow {
	display: none;  
  }
  
  .filters {
    margin: 15px 0 16px 0;
  }
  
  .filters-submit{
    margin-top: 5px !important;
  } 
  
  .pagination span {
	font-size: 12px;   
  }
  
  .p {
    padding: 20px;
  }
  
  .p h2{
    font-size: 20px;
  }
  
  .agency-agents {
    width: 100%;
    overflow-x: auto;
  }
  
  .listings-title{
    font-size: 22px;
  }
  
  .field-inline {
    gap: 0;
    flex-direction: column;
  }
  
  .field-inline.checkbox-inline-group {
    gap: 16px;
    flex-direction: row;
  }
  
  .desktop-note {
	display: none;  
  }
  
  .service-title label {
	font-size: 16px;  
  }
  
  .grid-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  .field.avatar-upload {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .field.avatar-upload .inline-note {
    font-size: 12px;
  }
  
  .security-actions {
     gap: 15px;
  }
  
  .listings-actions {
    padding: 0;
  }
 
  .toolbar .toolbar-actions {
    gap: 10px;
    flex-direction: column;
    align-items: center;
    width: 100%;
	margin-top: 15px;
	margin-bottom: 10px;
	padding: 0 20px;
  }
 
  .toolbar .toolbar-actions a {
    width: 100%;
  } 
  
  .studio-actions{ justify-content: space-between;}
  
  .btn-listing-update{ flex: 1;}
  
  .overlay-block.overlay-center{ height: 100%;}
  
  .overlay-legacy{ display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center;}
  
  .overlay-subtitle{ text-align: center;}
  
  .overlay-buttons{ text-align: center; flex-wrap: nowrap; flex-direction: column; width: 100%; margin-top: 20px; gap: 12px;}
  
  .photos-saved-section { margin-top:16px !important;}
  
  .grid-admin .listing-card .card-main-row {
    display: flex;
    gap: 20px;
    flex-direction: column;
    height: auto;
	max-height: max-content;
  }
  
  .grid-admin .p {
    padding: 0 20px 50px 20px;
    gap: 20px;
  }
  
  html[lang="he"] .grid-admin .p{ 
    padding: 0 20px 50px 20px; 
  }
  
  .boosts-wrap{
    overflow-x: scroll;
  }
  
  .boosts-wrap--results { overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 80px;}
  .boosts-wrap--results:has(#featuredGridResults > *) { display:block; }
  
  /* containerul de sus */
	.overlay-block.overlay-top{
	  padding-top:0;
      padding-bottom:0;	  
	  gap:12px;
	}

	.site-name{
	  font-size:29px;
	}

	html[lang="en"] .site-name, html[lang="fr"] .site-name, html[lang="ru"] .site-name{
	  font-size:24px;
	}

	.name-explanation{
	  font-size:14px;
	}
	
	html[lang="en"] .name-explanation, html[lang="fr"] .name-explanation, html[lang="ru"] .name-explanation{
	  font-size:11px;
	}

	.overlay-top-right{
	  font-size:10px;
	}
	
	.top-right-content{
	  width:max-content;
	}
	
	html[lang="he"] .top-right-content {
	  width: 110px;	
      font-size: 15px;
      line-height: 20px;
    }
	
	html[lang="en"] .top-right-content {
	  width: 100px;	
      font-size: 12px;
	  line-height: 14px;
    }
	
	html[lang="fr"] .top-right-content, html[lang="ru"] .top-right-content {
	  width: 100px;	
      font-size: 12px;
	  line-height: 14px;
    }
	
	html[lang="he"] .overlay-top-right{
	  font-size:13px;
	  line-height: 18px;
	}
	
	html[lang="en"] .overlay-top-right{
	  line-height: 14px;
	}

	.logo-img{
	  width:40px;
	  height:40px;
	}
	
	#action-modal-content .site-header .container {
      align-items: center;	
	  direction: rtl;
	}
	
	html[lang="he"] #action-modal-content .site-header .container {
	  direction: ltr;	
	}
	
	html[lang="he"] #action-modal-content .container {
	  direction: rtl;	
	}
  
    .slide-content {
      flex: 1;
    }
	
	.slide-image {
      flex: auto;
      position: absolute;
      top: 5px;
      height: 150px;
      width: 150px;
      right: 0;
    }
	
	html[lang="he"] .slide-image {
	  right: auto;
      left: 0;
    }
	
	.wrap-slide-title {
      width: 65%;
    }
}