/* =========================================================
   ДАРСИ — плавающий виджет (десктоп) + попап расчёта сметы.
   ========================================================= */

.fab{
  position:fixed; right:clamp(20px,2vw,36px); bottom:clamp(20px,2vw,36px);
  z-index:70;
  display:flex; align-items:center; gap:14px;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.fab.is-ready{opacity:1; transform:none}

.fab__label{
  padding:11px 16px;
  background:rgba(11,11,12,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; font-size:13.5px; letter-spacing:-.03em; white-space:nowrap;
  opacity:0; transform:translateX(10px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.fab:hover .fab__label{opacity:1; transform:none}

.fab__btn{
  position:relative; width:66px; height:66px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:50%;
  background:var(--accent-grad); color:var(--accent-ink);
  box-shadow:0 18px 40px -16px rgba(200,130,155,.75);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
  cursor:pointer;
}
.fab__btn:hover{transform:translateY(-3px) scale(1.04); box-shadow:0 24px 50px -16px rgba(200,130,155,.9)}
.fab__btn svg{width:26px; height:26px; fill:currentColor; position:relative; z-index:1}

/* мягкое «дыхание» и расходящееся кольцо */
.fab__btn::before,
.fab__btn::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(227,169,186,.85);
}
.fab__btn::before{animation:fabRing 2.8s cubic-bezier(0,0,.2,1) infinite}
.fab__btn::after{animation:fabRing 2.8s cubic-bezier(0,0,.2,1) infinite 1.4s}
@keyframes fabRing{
  0%{transform:scale(1); opacity:.7}
  70%{transform:scale(1.55); opacity:0}
  100%{transform:scale(1.55); opacity:0}
}

/* =========================================================
   ПОПАП
   ========================================================= */
.pop{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:clamp(16px,3vh,40px) clamp(16px,3vw,40px);
  background:rgba(12,8,10,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s ease;
}
.pop[hidden]{display:none}
.pop [hidden]{display:none !important}
.pop.is-open{opacity:1}

.pop__win{
  --ink:#1B1418; --ink-2:#4A4046; --ink-3:#8A7F86;
  --hair:#E7DDE1; --tint:#FBF5F6; --rose-dark:#C07E93;

  position:relative; width:100%; max-width:980px; max-height:100%;
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  background:#fff; color:var(--ink);
  box-shadow:0 50px 100px -50px rgba(50,20,32,.7);
  overflow:hidden;
  transform:translateY(18px) scale(.98);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.pop.is-open .pop__win{transform:none}

.pop__media{position:relative; overflow:hidden; background:var(--tint)}
.pop__media img{
  max-width:none;
  position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px);
  object-fit:cover;
}

.pop__body{
  padding:clamp(22px,2.4vw,38px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}

.pop__close{
  position:absolute; top:12px; right:12px; z-index:3;
  width:38px; height:38px; display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:#1B1418;
  transition:background .25s ease, transform .25s ease;
}
.pop__close:hover{background:#fff; transform:rotate(90deg)}
.pop__close svg{width:14px; height:14px; fill:currentColor}

.pop__title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(21px,1.9vw,29px); line-height:1.1; letter-spacing:-.015em;
  margin:0 0 10px;
}
.pop__sub{
  margin:0 0 18px; font-size:14.5px; line-height:1.45;
  letter-spacing:-.03em; color:var(--ink-2);
}
.pop__list{display:flex; flex-direction:column; gap:9px; margin:0 0 20px; padding:0; list-style:none}
.pop__list li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:13.5px; line-height:1.42; letter-spacing:-.03em; color:var(--ink-2);
}
.pop__list li::before{
  content:''; width:9px; height:9px; margin-top:5px; flex:0 0 auto;
  background:var(--rose-dark);
}

/* ---------- форма ---------- */
.pop__field{margin-bottom:12px}
.pop__area{
  width:100%; min-height:96px; resize:vertical;
  padding:13px 15px; font:inherit; font-size:14.5px; letter-spacing:-.03em;
  color:var(--ink); background:#fff; border:1px solid var(--hair); outline:none;
  transition:border-color .2s ease;
}
.pop__area::placeholder{color:#B9AEB4}
.pop__area:focus{border-color:var(--rose-dark)}

.pop__file{
  display:inline-flex; align-items:center; gap:10px;
  height:44px; padding:0 16px; margin-bottom:14px;
  background:var(--tint); border:1px dashed var(--hair); color:var(--ink-2);
  font-size:13.5px; letter-spacing:-.03em; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.pop__file:hover{border-color:var(--rose-dark); color:var(--ink); background:#fff}
.pop__file svg{width:16px; height:16px; fill:currentColor}
.pop__file input{position:absolute; width:0; height:0; opacity:0}
.pop__files{margin:-6px 0 14px; font-size:12.5px; color:var(--ink-3)}

.pop__label{
  display:block; margin:0 0 6px;
  font-size:12.5px; line-height:1.35; color:var(--ink-3); letter-spacing:-.02em;
}
.pop__input{
  width:100%; height:52px; padding:0 16px;
  font:inherit; font-size:16px; letter-spacing:-.02em; color:var(--ink);
  background:#fff; border:1px solid var(--hair); outline:none;
  transition:border-color .2s ease;
}
.pop__input::placeholder{color:#B9AEB4}
.pop__input:focus{border-color:var(--rose-dark)}
.pop__input.is-err{border-color:#D46A6A}
.pop__input--telegram{margin-top:10px}
.pop__err{margin:8px 0 0; font-size:12.5px; color:#C25757}

.pop__btn{
  width:100%; height:56px; margin-top:14px;
  background:var(--accent-grad); color:var(--accent-ink);
  font-family:var(--f-body); font-size:15px; font-weight:400; letter-spacing:-.03em;
  transition:background .25s ease, transform .2s ease;
}
.pop__btn:hover{background:var(--accent-grad-hi); transform:translateY(-1px)}

.pop__check{display:flex; gap:10px; align-items:flex-start; margin-top:12px; cursor:pointer}
.pop__check input{position:absolute; opacity:0; width:0; height:0}
.pop__check-box{
  width:18px; height:18px; flex:0 0 auto; margin-top:1px;
  border:1px solid var(--hair); background:#fff; transition:.2s ease;
}
.pop__check input:checked + .pop__check-box{
  background:var(--rose-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--rose-dark);
}
.pop__check span:last-child{font-size:12px; line-height:1.4; color:var(--ink-3); white-space:nowrap}
.pop__check a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}

.pop__done{
  display:flex; gap:12px; align-items:flex-start;
  padding:18px; background:var(--tint); border:1px solid var(--hair);
}
.pop__done p{margin:0; font-size:14.5px; line-height:1.45; color:var(--ink-2)}
.pop__done b{color:var(--ink)}
.pop__done-ico{
  width:26px; height:26px; flex:0 0 auto; color:#fff;
  background:var(--rose-dark); display:grid; place-items:center;
}
.pop__done-ico svg{width:16px; height:16px}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:900px){
  /* на мобильных работает липкая панель снизу — виджет не нужен */
  .fab{display:none}
  .pop__check span:last-child{white-space:normal}
  .pop__win{grid-template-columns:1fr; max-height:92vh}
  .pop__media{display:none}
  .pop{padding:12px}
}

@media (prefers-reduced-motion:reduce){
  .fab__btn::before,.fab__btn::after{animation:none; opacity:0}
  .fab,.pop,.pop__win{transition:none}
}