@font-face{
  font-family:'Manrope';
  src:
    url('/assets/fonts/work-sans/Manrope-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Manrope';
  src:
    url('/assets/fonts/work-sans/Manrope-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Manrope';
  src:
    url('/assets/fonts/work-sans/Manrope-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* Version: 1.0.0 — 2025-10-04 */
    :root{
      --brand-bg:#041F26;
      --brand-accent:#05B4B7;
      --brand-accent-2:#FA7041;
      --ink:#1b1f23;
      --muted:#6c757d;
      --surface:#ffffff;
      --btn-solid-hover:#05B4B7;      /* однотонные кнопки */
      --btn-solid:#049395; /* hover без движения */
      --nav-h-desktop: 72px;
      --nav-h-mobile: 64px;      
    }
    html,body{height:100%;}
    body{background:#f6f7f9;color:var(--ink);font-family:'Manrope',Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}

    /* ===== NAVBAR ===== */
    .nav-wrap.fixed-top{background:var(--brand-bg);box-shadow:0 6px 24px rgba(0,0,0,.18);
    border-bottom: 2px solid var(--brand-accent-2); }
    .nav-grid{
      display:grid;
      grid-template-columns:1fr auto 1fr; /* left | center | right */
      align-items:center;
      gap:1rem;
    }
    .nav-wrap .container{ min-height: var(--nav-h-desktop); }
    /* выравниваем ряды шапки по вертикали внутри контейнера */
    .nav-wrap .container > .nav-grid,
    .nav-wrap .container > .d-lg-none{
      min-height: inherit;       /* взять высоту контейнера */
      display: grid;             /* используем grid для вертикального центрирования */
      align-items: center;       /* центр по вертикали */
    }
    /* left cluster */
    .nav-left{display:flex;align-items:center;gap:.25rem;}
    .nav-left .menu-inline a{
      color:#dfe5e8;text-decoration:none;padding:.35rem .4rem;border-radius:999px;font-weight:600;
    }
.nav-left .menu-inline a:hover{
  color:#fff;
}

/* === Right menu (Agents / Blog / Contact) === */
.nav-right .nav-link {
  color: #dfe5e8;
  text-decoration: none;
  transition: color .2s ease;
}

.nav-right .nav-link:hover {
  color: #ffffff;
}

    .lang-btn,.light-btn{
      --bd:rgba(255,255,255,.25);
      color:#fff;border:1px solid var(--bd);background:transparent;border-radius:999px;
      padding:.35rem .75rem;font-weight:600;line-height:1;display:inline-flex;align-items:center;gap:.4rem;
    }
    .light-btn:hover,.lang-btn:hover{border-color:#ffffff80;color:#fff;opacity:.95}
/* UNIVERSAL label utility */
.u-label{
  display:inline-block;
  white-space:nowrap;     /* не переносить */
  overflow:hidden;        /* прячем лишнее по ширине */
  text-overflow:clip;     /* можно заменить на ellipsis */
  line-height:1.2;        /* ↑ даёт место для хвостиков */
  padding-bottom:1px;     /* микрозазор от клипа */
  max-width:var(--label-max,80px);
  vertical-align:middle;
}
.menu-inline a {
  position: relative;
  color: #dfe5e8;
  text-decoration: none;
  padding: .35rem .7rem;
  border-radius: 6px;
  font-weight: 600;
}

.menu-inline a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px; /* чуть ниже текста */
  width: 0%;
  height: 2px;
  background-color: var(--brand-accent); /* ваш цвет #05B4B7 */
  transition: width .3s ease;
}

/* активный пункт — всегда подчёркнут белым */
.menu-inline a.active::after {
  width: 100%;
  background-color: #ffffff; /* белая полоса как цвет меню */
}

.menu-inline a:hover::after {
  width: 100%;
}

.nav-left .btn-solid { margin-left: 12px; }
.nav-right .light-btn,
.nav-right .lang-btn { margin-left: 12px; }

.navbar-toggler {
  border: none;
  background: transparent;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler i {
  color: #fff; /* белый бургер */
}
#mobileNav a {
  padding: .5rem .75rem;
  border-radius: 8px;
  transition: background .2s;
}
#mobileNav a:hover {
  background: rgba(255,255,255,.1);
}


    /* center brand EXACTLY centered by grid */
    .brand{
      font-weight:900;letter-spacing:.5px;text-transform:none;
      color:#fff;text-decoration:none;font-size:1.25rem;
      display:inline-flex;align-items:center;gap:.35rem;
    }
    .brand img{ height: 48px; }
    .brand .simf{color:var(--brand-accent);}
    /* NEW: выравнивание иконок по центру линии */
    .btn-solid i,
    .light-btn i,
    .lang-btn i,
    .icon-btn i,
    .navbar-toggler i{ line-height: 1.2; vertical-align: middle; }
    /* right cluster */
    .nav-right{display:flex;justify-content:flex-end;align-items:center;gap:.6rem;}
    .btn-solid{
      background:var(--btn-solid);color:#fff;border:none;border-radius:12px;
      padding:.55rem 1rem;font-weight:700;
    }
    .btn-solid:hover{background:var(--btn-solid-hover);color:#fff;}
    .icon-btn{
      width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.25);
      color:#fff;background:transparent;display:inline-flex;align-items:center;justify-content:center;
    }
    .icon-btn:hover{border-color:#ffffff80;color:#fff;}

    /* navbar dropdown (languages) */
    .dropdown-menu{
      border-radius:14px;border:1px solid #e9ecef;box-shadow:0 12px 30px rgba(0,0,0,.12);
      overflow:hidden;
    }
    .dropdown-item{display:flex;align-items:center;gap:.6rem;}
    .flag{width:18px;height:12px;border-radius:2px;display:inline-block;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;}
    .flag.us{background:linear-gradient(#b22234 50%,#3c3b6e 50%),linear-gradient(#fff 50%,#b22234 50%);}
    .flag.ru{background:linear-gradient(#fff 33.33%,#0039A6 33.33 66.66%,#D52B1E 66.66%);}
    .flag.ua{background:linear-gradient(#0057B7 50%,#FFD700 50%);}

    /* ===== HERO ===== */
.hero{
  background:
    linear-gradient(180deg, rgba(4,31,38,.85), rgba(4,31,38,.85)),
    url("/assets/img/header.png") center/cover no-repeat;

  /* суммарная высота не меняется: используем переменные для распределения */
  padding: var(--hero-pt, 120px) 0 var(--hero-pb, 72px);
  color:#fff;
  margin-top: calc(var(--nav-h-desktop) - 38px); /* как было */
}

/* Чуть выше центра (72+120 = 192 как раньше) */
.hero--upper{  --hero-pt: 60px; --hero-pb: 56px; }

    .hero h1{font-weight:900;color:var(--brand-accent);font-size:clamp(32px,4.5vw,48px);}
    .hero p.lead{color:#dbe7ea;max-width:760px;margin:0 auto 18px;}

    /* Search bar (one-tone CTA, no move on hover) */
    .search-shell{
      background:#fff;border-radius:18px;padding:10px;box-shadow:0 20px 60px rgba(0,0,0,.25);
      max-width:980px;margin:26px auto 0;backdrop-filter:saturate(1.2) blur(4px);
    }
    .search-input{border:none!important;background:#f2f4f6;border-radius:12px!important;padding:.9rem 1rem;}
    .search-input:focus{outline:2px solid #e6f6f7;box-shadow:none!important;background:#fff;}
    .search-btn{background:var(--btn-solid);color:#fff;border:none;border-radius:12px;padding:.9rem 1.2rem;font-weight:800;}
    .search-btn:hover{background:var(--btn-solid-hover);color:#fff;}

    /* ===== HORIZONTAL SCROLLER (Latest Listings) ===== */
    .sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
    .sec-title{font-weight:800;color:#0e1721;margin:0;}
    .scroll-row{
      display:grid;grid-auto-flow:column;grid-auto-columns: clamp(250px, 26vw, 360px);
      gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-bottom:0;
    } 
    /* .scroll-row::-webkit-scrollbar{height:10px}
    .scroll-row::-webkit-scrollbar-thumb{background:#d8dde3;border-radius:8px} */
    .prop-card{
      scroll-snap-align:start;
      border-radius:18px;
      overflow:hidden;
      border:1px solid #3C9094;
      box-shadow:none;
      transition:border-color .2s;
    }
    .prop-card:hover{
      box-shadow:none;
      border-color:#0e1721;
    }
    .prop-img{position:relative;aspect-ratio:16/9;overflow:hidden;}
    .prop-img > img{width:100%;height:100%;object-fit:cover;display:block;}
.price-tag {
  position:absolute;
  left:12px;
  top:12px;
  background:rgba(4,31,38,.92);
  color:#fff;
  border-radius:10px;
  padding:.35rem .6rem;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.18);
}

.price-tag.right {
  left:auto;
  right:12px; /* ← добавляем симметричный отступ справа */
  top:12px;   /* ← добавляем, чтобы по высоте совпало с левым */
  border-radius: 10px;
}

    .prop-body{padding:12px 14px 14px}
    .prop-title{font-weight:800;margin:0 0 6px;font-size:1rem}
    .prop-meta{color:var(--muted);font-size:.9rem}

    /* ===== BUY / RENT / SELL ===== */
    .trs-cards .card{
      border:none;border-radius:22px;overflow:hidden;box-shadow:0 10px 34px rgba(14,23,33,.10);
      transition:transform .2s, box-shadow .2s;
    }
    .trs-cards .card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(14,23,33,.16);}
    .trs-cards .card-body{padding:1.25rem 1.25rem 1.5rem}
    .trs-cards .icon{
      width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
      color:#fff;background:var(--brand-accent);
    }
    .trs-btn{background:var(--btn-solid);color:#fff;border:none;border-radius:12px;font-weight:800;padding:.7rem 1rem}
    .trs-btn:hover{background:var(--btn-solid-hover);color:#fff;}

    /* ===== INFO COLUMNS ===== */
    .info3 .card{
      border:1px solid #eef1f4;border-radius:20px;box-shadow:0 10px 30px rgba(14,23,33,.06);
    }
    .info3 h5{font-weight:800}
    .muted{color:var(--muted)}

    /* helpers */
    .pad-section{padding:24px 0}

/* NEW: мобильные значения высоты и выравнивание элементов */
@media (max-width: 991.98px){
  .nav-wrap .container{ min-height: var(--nav-h-mobile); }
  .nav-wrap .container > .d-lg-none{
    min-height: inherit;
    display: grid;
    align-items: center;
  }
  .hero{ margin-top: calc(var(--nav-h-mobile) - 38px); }

  /* одинаковая высота контролов, но уже по ширине */
  .btn-solid,
  .light-btn,
  .lang-btn,
  .icon-btn,
  .navbar-toggler{
    height: 46px;
    padding: 0 .6rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* лого чуть меньше в мобильной шапке */
  .brand img{ height: 36px; }

  /* левый кластер: бургер + Add Listing + штат */
  .nav-wrap .d-lg-none .navbar-toggler.me-2{
    margin-right: .25rem !important;
  }

  .nav-wrap .d-lg-none .dropdown.ms-2{
    margin-left: .25rem !important;
  }

  /* правый кластер: юзер + язык */
  .nav-wrap .d-lg-none .d-flex.align-items-center.gap-2{
    column-gap: .25rem;
  }

  /* чуть меньше место для логотипа по бокам */
  .nav-wrap .d-lg-none .brand{
    padding-left: 4px;
    padding-right: 4px;
  }

}


/* ===== Burger menu (mobile collapse) tuning ===== */
#mobileNav{
  /* фон раскрытого меню */
  background-color: rgba(4,31,38,.98); /* можно заменить на var(--brand-bg) или любой цвет */
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,255,255,.08);
}

#mobileNav .container{
  /* меньше вертикальные отступы контейнера */
  padding-top: 8px;
  padding-bottom: 8px;
}

#mobileNav nav{
  /* меньше расстояние между пунктами (gap-2 -> ~gap-1) */
  gap: .25rem !important;
}

#mobileNav a{
  /* компактнее сами пункты */
  padding: .4rem .65rem;      /* было .5rem .75rem */
  font-size: .95rem;          /* чуть меньше шрифт */
  border-radius: 8px;
}

#mobileNav a:hover{
  background: rgba(255,255,255,.06); /* мягкий hover на новом фоне */
}
/* === Desktop: enlarge Buy / Rent / Sell === */
/* Place after the base .nav-left .menu-inline a{...} */
@media (min-width: 992px){
  .nav-left .menu-inline a{
    font-size: 1.02rem;   /* ~18px */
    padding: .45rem .9rem; /* немного больше кликабельная зона */
  }
  .menu-inline a::after{ height: 3px; bottom: -5px; }   /* потолще подчёркивание */
  .menu-inline a.active::after{ height: 3px; }
}

/* контейнер, по ширине которого масштабируется текст */
.cq { container-type: inline-size; }

/* всегда в одну строку, без внешних отступов, авто-масштаб от контейнера */
.fit1l{
  white-space: normal;          /* разрешаем перенос строк */
  line-height: 1.1;
  margin: 0;
  font-size: 6cqw;              /* авто-масштаб от контейнера */
  max-width: 100%;
  overflow-wrap: anywhere;      /* если очень узко — ломаем слово где угодно */
}

/* фолбэк для движков без cqw */
@supports not (font-size: 1cqw){
  .fit1l{ font-size: 6vw; }
}

/* опционально: если хочешь, чтобы лишнее не вылезало */
.fit1l.ellipsis{ overflow: hidden; text-overflow: ellipsis; }

/* Mobile: минимальные горизонтальные отступы */
@media (max-width: 575.98px){
  .container,
  .container-sm{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* бургер-меню тоже ужимаем по бокам */
  #mobileNav .container{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .fit1l{
    white-space: normal;    /* разрешаем перенос строк */
    font-size: 4.5vw;       /* немного меньше шрифт, чтобы комфортно влезало */
    text-align: center;     /* по центру красиво смотрится */
  }

  @supports (font-size: 1cqw){
    .fit1l{
      font-size: 4.5cqw;    /* если cqw поддерживается – тоже чуть поменьше */
    }
  }
}
/* === Tag Cloud (простейшее облако городов) === */
.tag-cloud{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1rem;           /* вертикальный/горизонтальный зазор */
  max-width: 980px;
  margin: 12px auto 0;
}
.tag-cloud a{
  color: #fff;               /* светлый текст на тёмном hero */
  text-decoration: none;
  opacity: .9;
  line-height: 1.2;
}
.tag-cloud a:hover{ color: var(--brand-accent); opacity: 1; }
.tag-cloud a small{ opacity: .65; margin-left: .25rem; }

/* размеры по «весу» (присваиваем классом size-1..5) */
.tag-cloud .size-1{ font-size: clamp(12px, 1.9vw, 14px); }
.tag-cloud .size-2{ font-size: clamp(14px, 2.2vw, 16px); }
.tag-cloud .size-3{ font-size: clamp(16px, 2.5vw, 18px); }
.tag-cloud .size-4{ font-size: clamp(18px, 2.8vw, 20px); }
.tag-cloud .size-5{ font-size: clamp(20px, 3.2vw, 24px); font-weight: 800; }

@media (max-width:575.98px){
  .tag-cloud{ margin-left: 8px; margin-right: 8px; } /* минимальные боковые поля на телефоне */
}
/* Выровнять элементы строки по низу (нижний край боксов) */
.tag-cloud{
  align-items: flex-end;     /* было не задано → по умолчанию stretch */
}

/* Чтобы кнопка MORE… тоже садилась по низу */
.tag-cloud .btn{
  align-self: flex-end;
  margin-bottom: 0;
}

/* На всякий случай уберём возможные нижние внешние отступы у ссылок */
.tag-cloud a{ margin-bottom: 0; }

/* ===== (5) MARKET SNAPSHOT ===== */
.snap-card{
  background:#fff;border:1px solid #eef1f4;border-radius:16px;
  padding:14px;box-shadow:0 8px 28px rgba(14,23,33,.06);
}
.snap-icon{
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  color:#fff;background:var(--brand-accent);
}
.snap-title{margin:8px 0 2px;font-weight:800;font-size:.95rem;color:#0e1721}
.snap-value{margin:0;font-weight:900;font-size:1.25rem;color:#0e1721}
.snap-delta{
  display:inline-flex;align-items:center;gap:.3rem;
  border-radius:999px;padding:.15rem .5rem;font-weight:700;font-size:.75rem;
}
.snap-delta.up{ background:#e8f7f0; color:#12a150; }
.snap-delta.down{ background:#fff1ea; color:#c2410c; }

/* ===== (6) OPEN HOUSES (horizontal) ===== */
.oh-row{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,26vw,360px);
  gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
}
.oh-card{
  scroll-snap-align:start;background:#fff;border:1px solid #eef1f4;border-radius:18px;
  overflow:hidden;box-shadow:0 8px 28px rgba(14,23,33,.06);
}
.oh-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.oh-img img{width:100%;height:100%;object-fit:cover;display:block}
.oh-day{
  position:absolute;left:12px;top:12px;background:rgba(4,31,38,.92);color:#fff;
  border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:.3rem .5rem;font-weight:800;
}
.oh-body{padding:12px 14px 14px}
.oh-title{margin:0 0 6px;font-weight:800;font-size:1rem}
.oh-meta{color:var(--muted);font-size:.9rem}
.oh-btn{
  background:var(--btn-solid);color:#fff;border:none;border-radius:12px;
  padding:.5rem .8rem;font-weight:800;
}
.oh-btn:hover{background:var(--btn-solid-hover);color:#fff}

/* ===== (8) FEATURED AGENTS ===== */
.agent-card{
  background:#fff;border:1px solid #eef1f4;border-radius:18px;
  box-shadow:0 8px 28px rgba(14,23,33,.06);padding:16px;height:100%;
  transition:transform .15s ease, box-shadow .15s ease;
}
.agent-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(14,23,33,.12); }
.agent-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.agent-ava{
  width:56px;height:56px;border-radius:50%;overflow:hidden;border:2px solid #fff;
  box-shadow:0 0 0 2px #e9eef3
}
.agent-ava img{width:100%;height:100%;object-fit:cover;display:block}
.agent-name{margin:0;font-weight:800}
.agent-role{margin:0;color:var(--muted);font-size:.9rem}
.agent-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.agent-tag{
  font-size:.75rem;padding:.15rem .5rem;border-radius:999px;background:#f3f6f9;color:#51606d;border:1px solid #e6ebf0
}
.agent-stars{color:#f59e0b}
.agent-actions{display:flex;gap:8px}
.agent-actions .btn-outline{
  background:transparent;border:1px solid #e2e8f0;border-radius:12px;padding:.5rem .8rem;font-weight:700;color:#0e1721
}
.agent-actions .btn-outline:hover{border-color:#cbd5e1}
.agent-actions .btn-solid{padding:.5rem .9rem}
/* === Burger toggler: safe fallback hide === */
.navbar-toggler .no-css-fallback { display: none; } /* hide FA icon when CSS is active */

/* === Burger toggler (burger -> X) === */
.navbar-toggler .burger-icon{
  width:26px;
  height:20px;
  position:relative;
  display:inline-block;
  vertical-align:middle;
  transition:all .3s ease;
}

.navbar-toggler .burger-icon span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:#fff;           /* white lines on dark header */
  border-radius:2px;
  transition:all .3s ease;
}

.navbar-toggler .burger-icon span:nth-child(1){ top:0; }
.navbar-toggler .burger-icon span:nth-child(2){ top:9px; }
.navbar-toggler .burger-icon span:nth-child(3){ top:18px; }

/* Morph to X when menu is open */
.navbar-toggler[aria-expanded="true"] .burger-icon span:nth-child(1){
  transform:rotate(45deg);
  top:9px;
}
.navbar-toggler[aria-expanded="true"] .burger-icon span:nth-child(2){
  opacity:0;
}
.navbar-toggler[aria-expanded="true"] .burger-icon span:nth-child(3){
  transform:rotate(-45deg);
  top:9px;
}

/* Optional: hover hint (subtle) */
@media (hover:hover){
  .navbar-toggler:hover .burger-icon { transform: scale(1.06); }
}
/* === Dropdown submenu visual fix (final version) === */
.dropdown-menu .dropdown-item {
  border-radius: 0 !important;                /* убираем скругления */
  background-color: transparent;
  transition: background-color .2s ease, color .2s ease;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #e9ecef;                  /* мягкий серый фон при hover */
}

.dropdown-menu .fw-semibold {
  color: #041F28 !important;                  /* основной пункт всегда #041F28 */
}

.dropdown-menu .text-muted {
  color: #6c757d !important;                  /* описание остаётся серым */
}

.dropdown-menu .dropdown-item:hover .fw-semibold {
  color: #041F28 !important;                  /* не меняем цвет при наведении */
}
/* Tight top spacing in dropdown */
.dropdown-menu{
  padding-top: 0 !important;   /* убираем верхний отступ контейнера */
}

/* (опционально) слегка поджать общий вертикальный ритм пунктов */
.dropdown-menu .dropdown-item{
  padding: .55rem 1rem;         /* было ~.5–.75rem в разных темах */
}

/* (опционально) первый пункт ещё чуть ближе к верху */
.dropdown-menu .dropdown-item:first-child{
  padding-top: .45rem;
}
/* Mobile submenu: same style as top-level items */
#mobileNav .collapse > a{
  padding: .4rem .65rem;          /* как у #mobileNav a */
  border-radius: 8px;             /* как у #mobileNav a */
}
#mobileNav .collapse > a:hover{
  background: rgba(255,255,255,.06); /* ровно тот же hover */
}
/* ===== PAGE OFFSET under fixed navbar ===== */
.main-offset { padding-top: calc(var(--nav-h-desktop) + 20px); }

@media (max-width: 991.98px){
  .main-offset { padding-top: calc(var(--nav-h-mobile) + 20px); }
}

/* ===== FORMS (always green border) ===== */
.field {
  background: transparent;
  border: 2px solid var(--btn-solid) !important; /* зелёная рамка как у кнопок */
  border-radius: 12px !important;
  padding: .9rem 1rem;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .2s ease;
}

/* Hover/Focus — слегка ярче */
.field:hover,
.field:focus {
  border-color: var(--btn-solid-hover);
  outline: none;
  box-shadow: none !important;
}

/* Disabled */
.field:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Textarea */
textarea.field { 
  min-height: 120px; 
  resize: vertical; 
}

/* Размеры */
.field--sm { 
  padding: .55rem .8rem; 
  font-size: .95rem; 
  border-radius: 10px !important; 
}
.field--lg { 
  padding: 1.1rem 1.1rem; 
  font-size: 1.05rem; 
  border-radius: 14px !important; 
}
/* Normalize height between input.field--sm and select.field--sm */
input.field.field--sm,
select.field.field--sm {
  height: 40px;            /* одинаковая общая высота */
  padding-top: 0;          /* обнуляем вертикальные паддинги */
  padding-bottom: 0;       /* чтобы высота была ровно 40px */
  line-height: 38px;       /* (40px - 2px сверху - 2px снизу) → текст по центру */
}

/* Make dropdown button same height as input.field--sm */
.dropdown .field.field--sm,
.dropdown .btn.field--sm {
  height: calc(var(--field-sm-height, 38px)); /* or use same fixed height as input */
  line-height: normal;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

/* Подписи/подсказки */
.form-label-min {
  display: block;
  margin-bottom: .35rem;
  font-weight: 600;
  color: #041F28;
}
.form-hint { 
  font-size: .875rem; 
  color: #6c757d; 
}

/* ===== VALIDATION STATES ===== */
/* Ошибка */
.field.is-invalid,
.field[aria-invalid="true"] {
  border-color: #dc3545 !important; /* красная рамка */
}

/* Успех */
.field.is-valid,
.field[aria-invalid="false"] {
  border-color: var(--btn-solid-hover) !important; /* ярко-зелёная */
}

/* Кнопка для форм (совместима с белым фоном) */
.form-btn{
  background:var(--btn-solid);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:.9rem 1.2rem;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  transition:background .2s ease, transform .15s ease;
}
.form-btn:hover{
  background:var(--btn-solid-hover);
  color:#fff;
  transform:translateY(-1px);
}
.form-btn:active{
  transform:translateY(0);
}
.form-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.form-btn--sm{ padding:.55rem .9rem; font-size:.95rem; border-radius:10px; }
.form-btn--lg{ padding:1.1rem 1.4rem; font-size:1.1rem; border-radius:14px; }

/* NEW BUTTON */
/* === Square-style form button (taller version, minimal radius, no hover animation) === */
.form-btn-sq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: #3C9094;        /* основной фон */
  color: #fff;
  border: none;
  border-radius: 4px;         /* минимальное скругление */
  padding: 1rem 1.4rem;       /* ↑ немного увеличена высота */
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.1;
  cursor: pointer;
  transition: none;           /* без анимации */
}

.form-btn-sq:hover {
  background: #4BB1B6;        /* при наведении */
  color: #fff;
}

.form-btn-sq:active {
  background: #3C9094;        /* при нажатии возвращается */
}

.form-btn-sq:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* === Square-style white button (with light hover background) === */
.form-btn-sq--white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: #ffffff;          /* белый фон */
  color: #3C9094;               /* основной текст */
  border: 2px solid #3C9094;    /* контур */
  border-radius: 4px;           /* почти прямые углы */
  padding: 1rem 1.4rem;         /* как у .form-btn-sq */
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.1;
  cursor: pointer;
  transition: none;             /* без анимации */
}

.form-btn-sq--white:hover {
  border-color: #4BB1B6;        /* контур подсветки */
  color: #3C9094;               /* текст остаётся фирменным */
  background: #E9F5F6;          /* очень светлый оттенок из #3C9094 */
}

.form-btn-sq--white:active {
  background: #ffffff;
  border-color: #3C9094;
  color: #3C9094;
}

.form-btn-sq--white:disabled {
  opacity: .6;
  cursor: not-allowed;
}



/* ===== SIMPLE CHECKBOX (green when checked) ===== */
.form-check-input{
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s ease;
}

/* Когда отмечен — фон и обводка зелёные */
.form-check-input:checked{
  background-color: var(--btn-solid) !important;
  border-color: var(--btn-solid) !important;
}

/* Hover — лёгкий оттенок */
.form-check-input:hover{
  border-color: #b8c2ca;
}

/* Focus — тонкий голубоватый контур */
.form-check-input:focus{
  box-shadow: 0 0 0 2px #e6f6f7;
}

/* Label */
.form-check-label{
  color: var(--ink);
  font-size: 1rem;
  user-select: none;
}

/* Меняем цвет кружка у switch при включении */
/* 1) Трек и внутр. переменная Bootstrap */
.form-switch .form-check-input:checked{
  background-color: var(--btn-solid) !important;
  border-color: var(--btn-solid) !important;
  --bs-form-switch-bg: var(--btn-solid) !important;
  --mdb-switch-handle-bg: var(--btn-solid) !important; /* для MDB темизации */
}

/* 2) Кружок у Bootstrap (обычно ::before) */
.form-switch .form-check-input:checked::before{
  background-color: var(--btn-solid) !important;
  border-color: var(--btn-solid) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 3) На некоторых сборках MDB «шарик» сидит на ::after — перекрасим и его */
.form-switch .form-check-input:checked::after{
  background-color: var(--btn-solid) !important;
  border-color: var(--btn-solid) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* === City field always gray, even if readonly === */
.field--readonly {
  background-color: #e9ecef !important;
  color: #333333 !important;
  cursor: not-allowed;
  opacity: 1;
}

/* ===== Center Toast (standalone) ===== */
.custom-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 260px;
  max-width: 90vw;
  padding: 14px 20px;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  opacity: 0.98;
  z-index: 2147483647; /* поверх всего, включая липкую шапку */
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none; /* не блокируем клики по странице */
}

.custom-toast--info {
  background: #17a2b8; /* бирюзовый */
}

.custom-toast--warning {
  background: #f0ad4e; /* оранжевый */
}

.custom-toast--error {
  background: #dc3545; /* красный */
}

.custom-toast.fade-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.98);
}

/* Listing Add Edit Photo Delete Button */
  .photo-cell { display:inline-block; position:relative; }
  .photo-cell .photo-del-btn{
    position:absolute; top:-8px; right:-8px;
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    border:2px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    background:#dc3545; color:#fff;
    padding:0;
  }
  .photo-cell .photo-del-btn i { font-size:12px; line-height:1; }

/* Home Scroll */
/* === Latest Listings: hide native scrollbar (keep scroll active) === */
/* Firefox */
.scroll-row{
  scrollbar-width: none;       /* hide bar in Firefox */
}
/* WebKit (Chrome/Safari/Edge) */
.scroll-row::-webkit-scrollbar{
  height: 0 !important;        /* visually hide horizontal bar */
  width: 0 !important;
}
/* IE/old-Edge fallback */
.scroll-row{
  -ms-overflow-style: none;    /* hide scrollbar in old MS engines */
}

/* Controls cluster on the right of the section header */
.sec-ctrl{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* Dark-on-light variant of icon button for content sections */
.icon-btn--dark{
  border-color: #3C9094 !important;
  color: #3C9094 !important;
  background: #ffffff !important;
}
.icon-btn--dark:hover{
  border-color: #0A1F25 !important;
  color: #0e1721 !important;
  background: #f8f9fa !important;
}

/* Modal Window */
/* модалка «под фото»: центр экрана, ширина/высота по контенту */
#galleryModal .modal-dialog.photo-modal {
  display: inline-block;
  width: auto;
  max-width: none;
  margin: 1vh auto;
  position: fixed;      /* фиксируем относительно окна */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#galleryModal .modal-content {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  max-height: 98vh;
  display: flex;
  flex-direction: column;
}

#galleryModal .modal-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* главное фото — реальный размер, но вписывается в окно */
#galleryModal .main-photo {
  max-width: 96vw;
  max-height: 82vh;   /* оставляем место под превью/отступы */
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

/* лента превью */
#galleryModal .thumbs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  width: 100%;
  justify-content: center;
  padding: 4px;
}

/* кнопка превью */
#galleryModal .thumb-btn {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  border-radius: 6px;
  outline: none;
}

/* изображение превью — маленькое */
#galleryModal .thumb-btn img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  opacity: 0.9;
}

/* активное превью */
#galleryModal .thumb-btn.active img {
  outline: 2px solid #0d6efd;
  opacity: 1;
}

/* крестик */
#galleryModal .modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
}

.photo-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(3rem, 6vw + 1rem, 6rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  user-select: none;
}

/* Лента в правый верхний угол карточек */
.ribbon-left {
  position: absolute;
  top: 12px;
  left: -45px;
  width: 160px;
  background: #d32f2f;
  color: #fff;
  font-size: 11px;
  padding: 4px 0;
  text-align: center;
  font-weight: 600;
  transform: rotate(-45deg) translateX(-6px); /* ← двигаем текст левее */
  z-index: 5;
  opacity: 0.95;
}

/* Mobile compact cards */
@media (max-width: 575.98px) {

  /* Убираем большие внешние отступы */
  .col-lg-8 .card {
    margin-left: -8px !important;
    margin-right: -8px !important;
    border-radius: 10px;
  }

  /* Минимизируем внутренние отступы */
  .col-lg-8 .card-body {
    padding: 10px 12px !important;
  }

  /* Убираем внешние отступы контейнера */
  .card .container.p-0.mb-3 {
    margin-left: -8px !important;
    margin-right: -8px !important;
    margin-bottom: 12px !important;
  }

  /* Две колонки — в одну колонку */
  .card .container .d-flex {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Минимальные внутренние отступы */
  .card .container .w-50 {
    width: 100% !important;
    padding: 8px 10px !important;
  }

  .card .container .w-50 .d-flex {
    padding: 0 !important;
  }

  .spec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    white-space: nowrap;
  }

  .spec-row span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .spec-row span:last-child {
    flex-shrink: 0;
  }

  /* уменьшаем внутренний отступ карточек */
  .spec-box {
    padding: 10px 12px !important;
  }
}

/* Desktop: align spec values to the right */
@media (min-width: 576px) {
  .spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .photo-modal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .photo-modal .modal-content {
    border-radius: 0 !important;
    width: 100% !important;
  }

  .photo-modal .main-photo {
    width: 100% !important;
    height: auto !important;
  }
}