/* =====================================================================
   SMART CATALOG (Profitbase-style) вЂ” style.css
   РџРѕР»РЅС‹Р№ СЃС‚РёР»СЊ РїРѕРґ UI Profitbase smallGrid: Sidebar + Filters + Grid + Modal
   ===================================================================== */

/* ---------------- RESET & BASE TYPOGRAPHY ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Inter", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.45;color:#262626;background:#F4F5F9;
  /* УБРАНО:
  max-width:1440px;
  margin-inline:auto;
  padding:32px 24px;
  */
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
button,select,input{font:inherit;}

/* ---------------- LAYOUT ---------------- */
.catalog-header {
  max-width: 1440px;
  margin: 0 auto 32px auto;
  padding: 32px 24px 0 24px;
}
.catalog-header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.breadcrumbs {
  font-size: .875rem;
  color: #6C757D;
}

.catalog-wrapper{
  display:flex;
  gap:32px;
  align-items:flex-start;
  max-width:1440px;          /* теперь ограничение тут */
  margin:0 auto;
  padding:32px 24px;         /* и паддинги тут */
}
/* ---------------- DESIGN TOKENS ---------------- */
:root{
  /* Brand palette */
  --clr-brand-primary:#009944;
  --clr-brand-primary-hover:#007937;
  --clr-brand-primary-light:#E6F6EE;
  --clr-brand-secondary:#FFC20E;

  --clr-bg-light:#F8F9FA;
  --clr-bg-card:#FFFFFF;
  --clr-bg-dark:#F1F3F5;

  --clr-border:#E5E7EB;
  --clr-text-base:#262626;
  --clr-text-muted:#6C757D;

  --clr-success-bg:#E7F6E7;
  --clr-success-text:#1E7E34;
  --clr-warning-bg:#FFF8E5;
  --clr-warning-text:#B28C06;
  --clr-danger-bg:#F3F3F3;
  --clr-danger-text:#777;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --transition:all .2s cubic-bezier(.4,0,.2,1);
}


/* ---------------- LAYOUT ----------------
.catalog-header{margin-bottom:32px;}
.catalog-header h1{font-size:2rem;font-weight:700;margin-bottom:6px;}
.breadcrumbs{font-size:.875rem;color:var(--clr-text-muted);}

.catalog-wrapper{display:flex;gap:32px;align-items:flex-start;} */

/* Sidebar */
.catalog-sidebar{
  flex:0 0 260px;
  background:var(--clr-bg-card);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:24px 20px;
  position:sticky;
  top:24px;
}
.sidebar-title{font-size:1.125rem;font-weight:600;margin-bottom:16px;}

/* Fields & selects */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.field label{font-weight:500;font-size:.9rem;}
.select,select{
  padding:8px 36px 8px 12px;
  border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M4 5l3 3 3-3' fill='none' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center/10px 10px;
  appearance:none;cursor:pointer;transition:var(--transition);
}
.select:hover{border-color:var(--clr-brand-primary);}

hr{border:none;border-top:1px solid var(--clr-border);margin:24px 0;}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:24px;user-select:none;margin-bottom:24px;}
.filters__group{border:none;display:flex;flex-direction:column;gap:8px;min-width:160px;}
.filters__group legend{font-weight:600;font-size:.9rem;margin-bottom:4px;}
.filters__item{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;cursor:pointer;transition:var(--transition);} 
.filters__item:hover{color:var(--clr-brand-primary);}
.filters__item input{accent-color:var(--clr-brand-primary);width:18px;height:18px;cursor:pointer;}

/* Range sliders */
input[type="range"]{width:100%;height:4px;border-radius:2px;background:var(--clr-bg-dark);outline:none;cursor:pointer;}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--clr-brand-primary);box-shadow:0 0 0 3px var(--clr-brand-primary-light);border:none;transition:var(--transition);} 
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.15);} 
.range-values{font-size:.8rem;margin-top:4px;color:var(--clr-text-muted);} 

/* Reset button */
.btn-reset{margin-top:12px;width:100%;padding:10px 14px;border:2px solid var(--clr-brand-primary);border-radius:var(--radius-md);background:#fff;font-weight:600;cursor:pointer;transition:var(--transition);} 
.btn-reset:hover{background:var(--clr-brand-primary);color:#fff;}

/* Main */
.catalog-main{flex:1;}
.grid-wrapper{position:relative;background:var(--clr-bg-light);padding:24px;border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(0,0,0,.05);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;}

/* Unit card */
/* Р¤СѓС‚РµСЂ СЃ РёРїРѕС‚РµРєРѕР№: РІСЃРµРіРґР° РІРЅРёР·Сѓ РєР°СЂС‚РѕС‡РєРё */
/* РљР°СЂС‚РѕС‡РєР°: С‚СЂРё СЂСЏРґР° вЂ” head / body / footer */
.unit{
  display:grid;
  grid-template-rows: auto 1fr 44px; /* 44px вЂ” РІС‹СЃРѕС‚Р° С„СѓС‚РµСЂР° */
  align-items:start;
  position:relative;
  padding:12px;                /* РѕР±С‰РёР№ РїР°РґРґРёРЅРі */
  border-radius: var(--radius-md);
  text-align:center;
  font-size:.813rem;
  line-height:1.25;
  cursor:pointer;
  border:2px solid transparent;
  transition:var(--transition);
  min-height:160px;            /* РµРґРёРЅР°СЏ РґРѕСЃС‚Р°С‚РѕС‡РЅР°СЏ РІС‹СЃРѕС‚Р° */
}

.unit__head{ display:flex; justify-content:center; }
.unit__number{ font-weight:700; font-size:1rem; }

.unit__body{
  display:flex;
  flex-direction:column;
  gap:6px;              /* СЂР°СЃСЃС‚РѕСЏРЅРёРµ РјРµР¶РґСѓ В«2РєВ» Рё В«РјВІВ» */
  justify-content:center;
  align-items:center;
  /* margin-bottom:8px; */
}

.badge{ 
  display:inline-block;
  background:rgba(0,0,0,.05);
  border-radius:var(--radius-sm);
  font-size:.75rem;
  padding:2px 6px;
  margin-inline:2px;
}

/* Р¤СѓС‚РµСЂ СЃ РёРїРѕС‚РµРєРѕР№ РІСЃРµРіРґР° РІРЅРёР·Сѓ */
.unit__footer{
  grid-row:3;
  align-self:stretch;
  height:44px;                    /* Р·Р°С„РёРєСЃРёСЂРѕРІР°Р»Рё, С‡С‚РѕР±С‹ СЃРµС‚РєР° РЅРµ РїСЂС‹РіР°Р»Р° */
  display:flex; align-items:center; justify-content:center;
  gap:6px;
  padding:6px 8px;
  background:#f3f8f0;
  border:1px solid #7acb2a20;
  border-radius:10px;
  font-size:12px;
  line-height:1.2;
  text-align:center;
  margin-top:20px;
}

.unit__footer .label{ opacity:.7; font-weight:600; }
.unit__footer .value{ font-weight:700; }

/* РњРѕР±РёР»РєРё вЂ” РјРѕР¶РЅРѕ РєРѕРјРїР°РєС‚РЅРµРµ С€СЂРёС„С‚/РІС‹СЃРѕС‚Сѓ */
@media (max-width:600px){
  .unit{ min-height:150px; grid-template-rows:auto 1fr 48px; }
  .unit__footer{ height:48px; flex-wrap:wrap; font-size:11px; }
  .unit__footer .label, .unit__footer .value{ flex:0 0 100%; }
}


.unit:hover{transform:translateY(-2px) scale(1.03);} 
.unit__number{font-weight:700;font-size:1rem;display:block;margin-bottom:6px;}

.badge{display:inline-block;background:rgba(0,0,0,.05);border-radius:var(--radius-sm);font-size:.75rem;padding:2px 6px;margin-inline:2px;}

/* Status colours */
.unit--available{background:var(--clr-success-bg);color:var(--clr-success-text);border-color:var(--clr-success-text);} 
.unit--available:hover{box-shadow:0 0 0 3px rgba(30,126,52,.2);} 

.unit--reserved{background:var(--clr-warning-bg);color:var(--clr-warning-text);border-color:var(--clr-warning-text);} 
.unit--reserved:hover{box-shadow:0 0 0 3px rgba(178,140,6,.2);} 

.unit--sold{background:var(--clr-danger-bg);color:var(--clr-danger-text);cursor:default;}
.unit--sold:hover{transform:none;box-shadow:none;}
.unit--sold::after{content:\"\";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,#e0e0e0 0 8px,#f8f8f8 8px 16px);opacity:.25;border-radius:inherit;pointer-events:none;}

/* Tooltip */
.tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#262626;color:#fff;font-size:.75rem;padding:6px 8px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:var(--transition);z-index:5;}
.unit:hover .tooltip{opacity:1;}

/* Modal */
/* ===================== MODAL ===================== */
.modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); z-index:100;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.modal.is-open{ opacity:1; visibility:visible; }

.modal__dialog{
  background:#fff;
  width:100%; max-width:960px;      /* С€РёСЂРµ РЅР° РџРљ */
  max-height:90vh;                  /* РЅРµ РІС‹С€Рµ РѕРєРЅР° */
  display:flex; flex-direction:column;
  border-radius:var(--radius-lg);
  padding:24px; position:relative;
  animation:dialogEnter .3s cubic-bezier(.4,0,.2,1);
}

/* РўРµР»Рѕ РјРѕРґР°Р»РєРё СЃРєСЂРѕР»Р»РёС‚СЃСЏ РІРЅСѓС‚СЂРё РґРёР°Р»РѕРіР° */
.modal__body{ overflow:auto; }

/* ---------- Desktop layout (>=900px): 2 РєРѕР»РѕРЅРєРё Г— 3 СЃС‚СЂРѕРєРё ---------- */
@media (min-width:900px){
  .modal__body{
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "plan    finance"
      "details finance"
      "cta     finance";
    gap:16px;
    align-items:start;              /* РЅРёС‡РµРіРѕ РЅРµ С‚СЏРЅРµРј РїРѕ РІС‹СЃРѕС‚Рµ */
  }
  .modal-plan{ grid-area:plan; margin:0; }
  .finance   { grid-area:finance; } /* <section id="financeSelector" class="finance"> */
  .details   { grid-area:details; margin:0; }
  .cta-buttons{
    grid-area:cta;
    align-self:start;
    display:flex; gap:12px; flex-wrap:nowrap;
  }
  .cta-buttons .btn{
    height:auto; align-self:center;
    padding:12px 18px;
    flex:1 1 0;                     /* РґРІРµ СЂРѕРІРЅС‹Рµ РїРѕ С€РёСЂРёРЅРµ */
    min-width:180px;
  }
}

/* ---------- Mobile (<900px) ---------- */
@media (max-width:899px){
  .modal__dialog{ max-width:92vw; max-height:92vh; }
  .modal__body{ display:block; }
  .cta-buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
  .cta-buttons .btn{ width:100%; }
}

/* РџСЂРѕС‡РµРµ UI РјРѕРґР°Р»РєРё */
@keyframes dialogEnter{from{transform:translateY(16px) scale(.95);opacity:0;}to{transform:none;opacity:1;}}
.modal__close{position:absolute;right:16px;top:12px;border:none;background:none;font-size:1.75rem;line-height:1;color:var(--clr-text-muted);cursor:pointer;transition:var(--transition);}
.modal__close:hover{color:var(--clr-text-base);}
.modal__header h2{font-size:1.25rem;font-weight:600;margin-bottom:2px;}
.lot-status{font-size:.875rem;color:var(--clr-text-muted);}
.modal-plan{margin:12px 0 18px;}
.modal-plan img{width:100%;border-radius:var(--radius-sm);border:1px solid var(--clr-border);}
.details{list-style:none;margin:18px 0 24px;padding:0;border-top:1px solid var(--clr-border);}
.details li{padding:10px 0;border-bottom:1px solid var(--clr-border);font-size:.9rem;display:flex;justify-content:space-between;}
.details li strong{font-weight:600;}

/* РљРЅРѕРїРєРё */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;padding:12px 20px;border-radius:var(--radius-md);border:none;font-weight:600;font-size:1rem;cursor:pointer;transition:var(--transition);}
.btn--primary{background:var(--clr-brand-primary);color:#fff;}
.btn--primary:hover{background:var(--clr-brand-primary-hover);}
.btn--outline{background:#fff;border:2px solid var(--clr-brand-primary);color:var(--clr-brand-primary);transition:var(--transition);}
.btn--outline:hover{background:var(--clr-brand-primary);color:#fff;}
.btn--outline:focus{outline:none;box-shadow:0 0 0 3px var(--clr-brand-primary-light);}


/* Loader */
.loader{width:48px;height:48px;border:4px solid var(--clr-bg-dark);border-top-color:var(--clr-brand-primary);border-radius:50%;animation:spin .9s linear infinite;margin-inline:auto;margin-block:48px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ----------- Responsive adjustments ----------- */
@media (max-width:900px){
  .catalog-wrapper{flex-direction:column;}
  .catalog-sidebar{position:relative;top:auto;width:100%;display:block;}
}

/* <600 px вЂ” РІС‹РІРѕРґРёРј СЃРµС‚РєСѓ РІ РґРІР° СЃС‚РѕР»Р±С†Р° */
@media (max-width:600px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .unit{padding:12px 6px;}
  .unit__number{font-size:.9rem;}
}

/* <420 px вЂ” fallback РЅР° auto-fill, С‡С‚РѕР±С‹ РєР°СЂС‚РѕС‡РєРё РЅРµ РѕР±СЂРµР·Р°Р»РёСЃСЊ */
@media (max-width:420px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
}

/* ===== РњРµСЃСЏС‡РЅС‹Р№ РїР»Р°С‚С‘Р¶ РІ РєР°СЂС‚РѕС‡РєРµ ===== */
.unit { padding-bottom: 36px; }            /* С‡С‚РѕР±С‹ Р±РµР№РґР¶ РІР»РµР·Р°Р» */

/* РќР° СѓР·РєРёС… СЌРєСЂР°РЅР°С… вЂ” РєРѕРјРїР°РєС‚РЅРµР№ */
@media (max-width:600px){
  .mortgage-tag{ font-size:11px; padding:5px 8px; }
}

/* Сетка по умолчанию (десктоп) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}

/* Мобильные устройства: 2 карточки в ряд */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}


/* ===== Finance selector (tabs + cards) ===== */
.finance{margin:8px 0 16px;}
.finance__tabs{
  display:flex; gap:8px; background:var(--clr-bg-dark);
  padding:6px; border-radius:12px; margin-bottom:10px; flex-wrap:wrap;
}
.finance__tab{
  padding:8px 12px; border:none; border-radius:10px; cursor:pointer; font-weight:600;
  background:transparent; color:#1d6b33; transition:var(--transition);
}
.finance__tab.is-active{ background:var(--clr-brand-primary); color:#fff; }

/* в¬‡пёЏ Р±С‹Р»Рѕ: grid РёР· 2 РєРѕР»РѕРЅРѕРє вЂ” РјРµРЅСЏРµРј РЅР° РѕРґРёРЅРѕС‡РЅС‹Р№ РєРѕРЅС‚РµР№РЅРµСЂ */
.finance__cards{ display:block; }              /* РР—РњР•РќР•РќРћ */
/* @media (max-width:560px){ .finance__cards{grid-template-columns:1fr;} }  <-- РјРѕР¶РЅРѕ СѓРґР°Р»РёС‚СЊ */

.finance__card{
  display:none;                                /* Р”РћР‘РђР’Р›Р•РќРћ: РІСЃРµ РєР°СЂС‚РѕС‡РєРё СЃРєСЂС‹С‚С‹ РїРѕ СѓРјРѕР»С‡Р°РЅРёСЋ */
  border:1px solid var(--clr-border);
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  /* position:relative;  <-- РќР• РќРЈР–РќРћ */
}

/* РўРѕР»СЊРєРѕ Р°РєС‚РёРІРЅР°СЏ РєР°СЂС‚РѕС‡РєР° РІРёРґРёРјР° Рё РїРѕРґСЃРІРµС‡РµРЅР° */
.finance__card.is-active{
  display:block;                                /* Р”РћР‘РђР’Р›Р•РќРћ */
  border-color:var(--clr-brand-primary);
  box-shadow:0 0 0 3px var(--clr-brand-primary-light);
}

.finance__card h3{ font-size:1rem; margin-bottom:6px; color:#114d25; }
.finance__row{ display:flex; align-items:baseline; gap:6px; }

.finance__split{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:2px;
}
@media (max-width:560px){ .finance__split{ grid-template-columns:1fr; } }

.muted{ opacity:.65; font-weight:600; }
.finance__price{ font-size:1.05rem; }

/* в¬‡пёЏ Р±С‹Р»Рѕ: absolute РІ РїСЂР°РІРѕРј РІРµСЂС…РЅРµРј вЂ” РґРµР»Р°РµРј РЅРѕСЂРјР°Р»СЊРЅСѓСЋ РєРЅРѕРїРєСѓ РЅР° РІСЃСЋ С€РёСЂРёРЅСѓ */
.finance__choose{
  position:static;                              /* РР—РњР•РќР•РќРћ */
  width:100%;                                   /* Р”РћР‘РђР’Р›Р•РќРћ */
  margin-top:10px;                              /* Р”РћР‘РђР’Р›Р•РќРћ */
  padding:10px 14px;                            /* РР—РњР•РќР•РќРћ */
  border-radius:12px;                           /* РР—РњР•РќР•РќРћ */
  border:2px solid var(--clr-brand-primary);
  background:var(--clr-brand-primary);          /* РР—РњР•РќР•РќРћ */
  color:#fff;                                   /* РР—РњР•РќР•РќРћ */
  font-weight:700; cursor:pointer;
}

/* РјРѕР¶РЅРѕ РѕСЃС‚Р°РІРёС‚СЊ, РЅРѕ СѓР¶Рµ РЅРµ РєСЂРёС‚РёС‡РЅРѕ */
.finance__card.is-active .finance__choose{
  background:var(--clr-brand-primary); color:#fff;
}


/* ==== Mortgage footer: РІС‹РґРµР»СЏРµРј РїР»Р°С€РєСѓ ==== */
.unit__footer{
  background:#F4F7FF;                /* РЅРѕРІС‹Р№ С„РѕРЅ */
  color:#333333;                      /* РѕР±С‰РёР№ С†РІРµС‚ С‚РµРєСЃС‚Р° */
  border:1px solid #DDE6FF;           /* РґРµР»РёРєР°С‚РЅС‹Р№ РєРѕРЅС‚СѓСЂ */
  box-shadow:0 2px 6px rgba(17,24,39,.06);  /* Р»С‘РіРєР°СЏ С‚РµРЅСЊ */
  border-radius:12px;
  padding:8px 10px;
  height:44px;                        /* РєР°Рє Рё Р±С‹Р»Рѕ, РЅРµ Р»РѕРјР°РµРј СЃРµС‚РєСѓ */
  display:flex; align-items:center; justify-content:center;
  gap:6px;
  text-align:center;
}

.unit__footer .label{
  color:#6B7280;                      /* РїРѕРґРїРёСЃСЊ В«РІ РёРїРѕС‚РµРєСѓВ» СЃРїРѕРєРѕР№РЅРµР№ */
  font-weight:600;
}

.unit__footer .value{
  color:#333333;                      /* В«РѕС‚ N в‚Ѕ/РјРµСЃВ» С‚РµРјРЅРµРµ */
  font-weight:800;
}

/* С‡СѓС‚СЊ Р°РєС‚РёРІРЅРµРµ РЅР° С…РѕРІРµСЂ РєР°СЂС‚РѕС‡РєРё (РґРµСЃРєС‚РѕРї) */
@media (hover:hover){
  .unit:hover .unit__footer{
    box-shadow:0 3px 10px rgba(17,24,39,.10);
    border-color:#C8D6FF;
  }
}

/* РјРѕР±РёР»СЊРЅС‹Рµ вЂ” С€СЂРёС„С‚ РєРѕРјРїР°РєС‚РЅРµРµ, РµСЃР»Рё РїРѕРЅР°РґРѕР±РёС‚СЃСЏ */
@media (max-width:600px){
  .unit__footer{ font-size:12px; padding:7px 9px; }
}