/* Residential complexes (docs/complexes.md): a complex's page, the proposal form and /komplekslerim - the catalogue
   has a file of its own (complexes-index.css). Inline on those pages only, so the page cut of style.css is not
   touched. ASCII only, like every served CSS. Radii of chips and pills 9px, as everywhere on the site. */

/* -- shared --------------------------------------------------------------------------------------------------- */
.cx-form-hint{margin:10px 0 0;color:var(--ink-3);font-size:12.5px;line-height:1.5}
.btn.btn-sm{height:34px;padding:0 14px;border-radius:9px;font-size:12.5px}

.cx-cta{margin-top:40px}

/* -- a complex ------------------------------------------------------------------------------------------------ */
/* A project's own page (2026-10-17: "kak budto bootstrap - sdelay unikalno i krasivo", then "chut chut luchshe ... chtoby
   ne bylo ponyatno chto eto sdelal II"): the name on the cover - the photographs, or the brand's tile -, the figures in a
   line, the price card over the cover's edge, the flats as a price list. Plain headings and labels; no glass, no ghosts,
   no icon tiles. */
.cxh{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;height:500px;margin:18px 0 0}
.cxh--mosaic{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}
.cxh--tile{height:360px}
.cxh-main{position:relative;isolation:isolate;overflow:hidden;min-height:0;border-radius:26px;background:var(--paper)}
.cxh-cover,.cxh-cover img{display:block;width:100%;height:100%}
.cxh-cover img{object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
/* The shade the name reads on. */
.cxh-main::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,10,8,0) 34%,rgba(12,10,8,.18) 58%,rgba(12,10,8,.7) 100%)}
.cxh--tile .cxh-main{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 88%,#ffffff) 0%,color-mix(in srgb,var(--accent) 64%,#12161b) 100%)}
.cxh--tile .cxh-main::after{background:radial-gradient(circle at 88% -10%,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 52%),linear-gradient(180deg,rgba(12,10,8,0) 50%,rgba(12,10,8,.22) 100%)}
.cxh-mark{position:absolute;right:-30px;bottom:-90px;z-index:0;color:rgba(255,255,255,.13);font-size:380px;line-height:1;transform:rotate(-8deg);pointer-events:none}
.cxh-caption{position:absolute;right:0;bottom:0;left:0;z-index:2;padding:34px 38px 36px;color:#fff;pointer-events:none}
.cxh-caption h1{margin:10px 0 0;color:#fff;font-size:54px;line-height:1.04;letter-spacing:-.02em;overflow-wrap:anywhere}
.cxh-stage{display:inline-block;padding:4px 10px;border-radius:9px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:700}
.cxh-stage--building{color:#9a6416}
.cxh-stage--completed{color:#1f7a4f}
.cxh-meta{margin:12px 0 0;color:rgba(255,255,255,.94);font-size:15px}
.cxh-dev{margin:4px 0 0;color:rgba(255,255,255,.78);font-size:13.5px}
.cxh-count{position:absolute;top:16px;right:16px;z-index:2;padding:5px 10px;border-radius:9px;background:rgba(12,10,8,.55);color:#fff;font-size:12.5px;font-weight:600;pointer-events:none}
.cxh-tiles{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-height:0}
.cxh-tiles:has(> :only-child){grid-template-rows:minmax(0,1fr)}
.cxh-tile{position:relative;display:block;overflow:hidden;min-height:0;border-radius:22px;background:var(--paper)}
.cxh-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cxh-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,10,8,.48);color:#fff;font-size:19px;font-weight:700;letter-spacing:.01em}
@media (hover:hover) and (pointer:fine){
  .cxh-cover:hover img,.cxh-tile:hover img{transform:scale(1.035)}
}

/* Under the cover: the page on the left, the price card on the right standing over the cover's edge. */
.cxb{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:40px;align-items:start}
.cxb-main{grid-row:1;grid-column:1;min-width:0}
.cxp{position:sticky;top:84px;z-index:3;grid-row:1;grid-column:2;margin-top:-104px}
/* Beside a mosaic the right column is photographs: the card only touches their edge, "+N" stays in sight. */
.cxh--mosaic~.cxb .cxp{margin-top:-30px}
.cxp-card{display:flex;flex-direction:column;gap:10px;padding:24px 24px 20px;border:1px solid var(--line-soft);border-radius:22px;background:var(--white);box-shadow:0 24px 50px -30px rgba(var(--ink-rgb),.38),0 2px 8px rgba(var(--ink-rgb),.05)}
.cxp-label{color:var(--ink-3);font-size:13px;font-weight:600}
.cxp-price{color:var(--ink-2);font-size:15px}
.cxp-price b{color:var(--accent);font-size:40px;font-weight:700;line-height:1.05;letter-spacing:-.02em;white-space:nowrap}
.cxp-price--none{color:var(--ink-3);font-size:16px;font-weight:600}
.cxp-sub{margin-top:-4px;color:var(--ink-2);font-size:14px}
.cxp-terms{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px;padding:0;list-style:none}
.cxp-terms li{padding:4px 9px;border:1px solid var(--line);border-radius:9px;color:var(--ink-2);font-size:12.5px;font-weight:600}
.cxp-ads{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin-top:6px}
.cxp .agp-contacts{align-items:stretch;align-self:stretch;max-width:none}
.cxp .agp-contacts-row{flex-wrap:nowrap}
.cxp .agp-contacts .btn{flex:1 1 auto;height:46px}

/* The figures: a number first, its word under it, a hairline between - not a row of boxes. */
.cxs{display:flex;flex-wrap:wrap;row-gap:18px;margin:30px 0 0;padding:0;list-style:none}
.cxs-item{display:flex;flex-direction:column;gap:6px;padding:0 30px;border-left:1px solid var(--line)}
.cxs-item:first-child{padding-left:0;border-left:0}
.cxs-value{color:var(--ink);font-size:32px;font-weight:700;line-height:1.05;letter-spacing:-.015em;white-space:nowrap}
.cxs-label{color:var(--ink-3);font-size:13px}

.cxsec{margin:48px 0 0}
/* The site's own section heading (.section-head h2): weight and size, no serif, no accent word. */
.cxsec-title{margin:0 0 16px;color:var(--ink);font-size:24px;font-weight:700;letter-spacing:-.01em}
.cxsec-note{margin:10px 0 0;color:var(--ink-3);font-size:12.5px}
.cxsec-text{max-width:760px}

/* The flats by rooms, as a price list: one row each, the price to the right, the whole row a way to the ads. */
.cxr{overflow:hidden;border:1px solid var(--line-soft);border-radius:18px;background:var(--white)}
.cxr-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.4fr) 18px;align-items:center;gap:16px;padding:15px 20px;border-top:1px solid var(--line-soft);color:var(--ink);transition:background .15s}
.cxr-row:first-child{border-top:0}
.cxr-what,.cxr-price{display:flex;flex-direction:column;gap:2px}
.cxr-what b{font-size:15.5px;font-weight:700}
.cxr-what small,.cxr-price small{color:var(--ink-3);font-size:12.5px}
.cxr-area{color:var(--ink-2);font-size:14px}
.cxr-price{align-items:flex-end;color:var(--ink-2);font-size:13.5px;text-align:right}
.cxr-price b{color:var(--price);font-size:17px;font-weight:800}
.cxr-go{color:var(--ink-3);font-size:16px;transition:transform .15s,color .15s}
@media (hover:hover) and (pointer:fine){
  .cxr-row:hover{background:rgba(var(--ink-rgb),.025)}
  .cxr-row:hover .cxr-go{color:var(--accent);transform:translateX(2px)}
}

/* What the ground has: a plain list in columns, a small mark before each. */
.cxf{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 24px;margin:0;padding:0;list-style:none}
.cxf-item{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:14.5px;line-height:1.35}
.cxf-item i{flex:none;color:var(--ink-3);font-size:19px}

.section-head.cx-ads-head{margin-top:56px;margin-bottom:18px;padding-top:0;background:none}
/* The text and its "Etrafli" button - the agency showcase's (components/agency/AgencyAbout). */
.agp-about{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.75;white-space:pre-line}
.agp-about.is-clamped{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6}
.agp-more{display:inline-flex;align-items:center;gap:5px;margin-top:12px;padding:0;border:0;background:none;color:var(--accent);cursor:pointer;font:inherit;font-size:14px;font-weight:600}
.agp-more i{font-size:13px;transition:transform .15s}
@media (hover:hover) and (pointer:fine){.agp-more:hover i{transform:translateY(2px)}.agp-more[aria-expanded="true"]:hover i{transform:translateY(-2px)}}
.agp-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* The sales office's number on a press - the agency showcase's buttons (components/agency/AgencyContacts). */
.agp-contacts{display:flex;flex-direction:column;gap:10px}
.agp-contacts-row{display:flex;gap:8px}
.agp-contacts .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;white-space:nowrap}
.agp-phones-more{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13.5px;font-weight:600}
.agp-phones-more a{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}

@media (max-width:1024px){
  .cxh{height:420px}
  .cxh-caption h1{font-size:44px}
  .cxb{grid-template-columns:1fr;gap:0}
  .cxb-main,.cxp{grid-row:auto;grid-column:auto}
  .cxp,.cxh--mosaic~.cxb .cxp{position:static;margin-top:20px}
}
@media (max-width:760px){
  /* The cover alone on a phone; the count says there are more, a tap opens them all. No blur on a phone (scroll). */
  .cxh,.cxh--mosaic{grid-template-columns:minmax(0,1fr);height:380px;margin-top:12px}
  .cxh--tile{height:300px}
  .cxh-tiles{display:none}
  .cxh-main{border-radius:20px}
  .cxh-caption{padding:22px 20px 22px}
  .cxh-caption h1{font-size:32px}
  .cxh-meta{font-size:14px}
  .cxh-mark{font-size:280px;bottom:-70px}
  .cxs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0;margin-top:24px}
  .cxs-item{padding:0 0 0 16px}
  .cxs-item:nth-child(odd){padding-left:0;border-left:0}
  .cxs-value{font-size:26px}
  .cxsec{margin-top:40px}
  .cxsec-title{font-size:22px}
  .cxr-row{grid-template-columns:minmax(0,1fr) auto auto 14px;gap:12px;padding:14px 14px 14px 16px}
  .cxr-area{font-size:13px}
  .cxr-price b{font-size:15.5px}
  .cxf{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
  .cxf-item{gap:8px;font-size:13.5px}
}

/* -- the proposal form ---------------------------------------------------------------------------------------- */
.cx-form-head{max-width:900px;margin:26px auto 18px}
.cx-form-head h1{margin:8px 0 0}
.cx-form-head .lead{margin-top:12px;max-width:none}
.cx-form .auth-alert,.cx-form-limit{max-width:900px;margin:0 auto 16px}
.cx-twin-confirm{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:600}
.cx-form .field-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cx-form-features .rm-chip-group{margin-top:10px}
.cx-form-actions{display:flex;justify-content:flex-end;gap:10px;max-width:900px;margin:18px auto 0}
.cx-form-actions .btn{height:46px;padding:0 22px}
.cx-form-foot{max-width:900px;margin:10px auto 0;text-align:right}
@media (max-width:760px){
  .cx-form .field-grid-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cx-form-actions .btn{flex:1}
  .cx-form-foot{text-align:left}
}

/* -- /komplekslerim ------------------------------------------------------------------------------------------- */
.cx-mine{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.cx-mine-row{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid var(--line-soft);border-radius:16px;background:var(--white)}
.cx-mine-cover{display:grid;place-items:center;flex:none;width:96px;height:72px;overflow:hidden;border-radius:12px;background:var(--paper)}
.cx-mine-cover img{display:block;width:100%;height:100%;object-fit:cover}
.cx-mine-cover--empty{background:var(--accent-deep-tint);color:var(--accent);font-size:30px}
.cx-mine-body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.cx-mine-name{color:var(--ink);font-size:16px;font-weight:700}
.cx-mine-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--ink-3);font-size:13px}
.cx-mine-status{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9px;font-weight:700}
.cx-mine-status--pending{background:rgba(183,121,31,.12);color:#9a6416}
.cx-mine-status--approved{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.cx-mine-status--rejected{background:var(--danger-soft);color:var(--danger)}
.cx-mine-reason{color:var(--ink-2);font-size:13px}
.cx-mine-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;flex:none}
.cx-mine-actions .btn{display:inline-flex;align-items:center;gap:6px}
:root[data-theme="dark"] .cx-mine-status--pending{color:#e2a24a}
@media (max-width:640px){
  .cx-mine-row{flex-wrap:wrap}
  .cx-mine-cover{width:72px;height:56px}
  .cx-mine-actions{width:100%;justify-content:flex-start}
}