/* Плавающая кнопка «Направления» — общий виджет для сайтов группы ART.
   На корневом элементе задайте data-dfab-theme: arthome | artgreen | artremont | artstroy | feedback | artstolyar */

.directions-fab{
  --df-text:#2a2b2f;
  --df-muted:#5d616b;
  --df-line:#bfc1c5;
  --df-close-bg:#ececeb;
  --df-close-hover:#e4e4e2;
  --df-current-bg:#f4f4f2;
  --df-link-hover-bg:#f7f7f6;
  --df-a:#2f63c5;
  --df-b:#244a9e;
  --df-c:#1c3d86;
  --df-sh1:rgba(47,99,197,.45);
  --df-sh2:rgba(47,99,197,.5);
  --df-sh3:rgba(47,99,197,.4);
  --df-cta-bd:rgba(47,99,197,.25);
  --df-cta-bg:rgba(47,99,197,.06);
  --df-cta-bg-h:rgba(47,99,197,.1);
  --df-cta-bd-h:rgba(47,99,197,.35);
  /* Цвет самой круглой кнопки — как в теме artgreen на всех сайтах */
  --df-toggle-a:#3a5c38;
  --df-toggle-b:#2f4b2e;
  --df-toggle-sh1:rgba(58,92,56,.38);
  --df-toggle-sh2:rgba(58,92,56,.44);
  position:fixed;
  inset:0;
  z-index:88;
  pointer-events:none;
}
.directions-fab__backdrop{
  position:fixed;
  inset:0;
  background:rgba(35,37,43,.28);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
  pointer-events:none;
}
.directions-fab.is-open .directions-fab__backdrop{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.directions-fab__dock{
  position:fixed;
  right:max(16px,env(safe-area-inset-right));
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  pointer-events:none;
}
.directions-fab__toggle,
.directions-fab__panel{
  pointer-events:auto;
}
.directions-fab__toggle{
  width:56px;
  height:56px;
  border-radius:50%;
  border:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(145deg,var(--df-toggle-a) 0%,var(--df-toggle-b) 100%);
  box-shadow:0 10px 28px var(--df-toggle-sh1),0 2px 8px rgba(0,0,0,.12);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.directions-fab__toggle:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px var(--df-toggle-sh2),0 4px 12px rgba(0,0,0,.14);
  animation:none;
}
.directions-fab__toggle:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
.directions-fab__toggle-icon{
  display:flex;
  opacity:.95;
}
.directions-fab__panel{
  width:min(300px,calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height:min(72vh,520px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:18px 18px 16px;
  border-radius:16px;
  background:#fff;
  color:var(--df-text);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
  border:1px solid var(--df-line);
  transform:translateY(8px) scale(.96);
  opacity:0;
  visibility:hidden;
  transition:transform .24s cubic-bezier(0.22,1,0.36,1),opacity .2s ease,visibility .2s ease;
}
.directions-fab.is-open .directions-fab__panel{
  transform:translateY(0) scale(1);
  opacity:1;
  visibility:visible;
}
.directions-fab__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.directions-fab__head-text{
  min-width:0;
}
.directions-fab__title{
  display:block;
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  margin:0 0 6px;
  color:var(--df-text);
}
.directions-fab__sub{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:var(--df-muted);
}
.directions-fab__close{
  flex-shrink:0;
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  background:var(--df-close-bg);
  color:var(--df-text);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.directions-fab__close:hover{
  background:var(--df-close-hover);
}
.directions-fab__nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.directions-fab__current{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  font-size:13px;
  font-weight:500;
  color:var(--df-muted);
  border-radius:10px;
  background:var(--df-current-bg);
}
.directions-fab__current-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--df-a);
  flex-shrink:0;
}
.directions-fab__link{
  display:block;
  padding:10px 10px;
  font-size:13px;
  line-height:1.35;
  color:var(--df-text);
  border-radius:10px;
  border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease;
}
.directions-fab__link:hover{
  background:var(--df-link-hover-bg);
  border-color:var(--df-line);
}
.directions-fab__link--cta{
  margin-top:6px;
  font-weight:600;
  color:var(--df-a);
  border:1px solid var(--df-cta-bd);
  background:var(--df-cta-bg);
}
.directions-fab__link--cta:hover{
  background:var(--df-cta-bg-h);
  border-color:var(--df-cta-bd-h);
}
@keyframes directions-fab-attn{
  0%,100%{
    box-shadow:0 10px 28px var(--df-sh1),0 2px 8px rgba(0,0,0,.12),0 0 0 0 transparent;
  }
  50%{
    box-shadow:0 14px 36px var(--df-sh2),0 4px 12px rgba(0,0,0,.14),0 0 0 12px var(--df-cta-bg);
  }
}
@media (max-width:768px){
  /* Колонка вместо ряда; док тянется между отступами — панель не уезжает за левый край. */
  .directions-fab__dock{
    flex-direction:column-reverse;
    align-items:flex-end;
    left:max(14px,env(safe-area-inset-left,0px));
    right:max(14px,env(safe-area-inset-right,0px));
    width:auto;
  }
  .directions-fab__panel{
    width:min(300px,100%);
    max-width:100%;
    box-sizing:border-box;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .directions-fab__nav,
  .directions-fab__head-text{
    min-width:0;
  }
  .directions-fab__link,
  .directions-fab__current,
  .directions-fab__title,
  .directions-fab__sub{
    overflow-wrap:anywhere;
    word-wrap:break-word;
  }
  .directions-fab:not(.is-open) .directions-fab__toggle{
    animation:directions-fab-attn 2.6s ease-in-out infinite;
  }
  /* Открыта панель — круглую кнопку уводим вправо за край, чтобы не перекрывала текст */
  .directions-fab.is-open .directions-fab__toggle{
    animation:none;
    transform:translateX(calc(100% + 28px));
    opacity:0;
    pointer-events:none;
    transition:transform .22s ease,opacity .2s ease,box-shadow .2s ease;
  }
}
@media (min-width:769px){
  .directions-fab__dock{
    left:auto;
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    flex-direction:row;
    align-items:center;
    gap:14px;
  }
  .directions-fab.is-open .directions-fab__toggle{
    background:linear-gradient(145deg,var(--df-b) 0%,var(--df-c) 100%);
    box-shadow:0 8px 24px var(--df-sh3);
  }
  .directions-fab__panel{
    order:-1;
    margin-right:0;
    transform:translateX(12px) scale(.96);
  }
  .directions-fab.is-open .directions-fab__panel{
    transform:translateX(0) scale(1);
  }
}
@media (prefers-reduced-motion:reduce){
  .directions-fab__backdrop,
  .directions-fab__panel,
  .directions-fab__toggle{
    transition:none !important;
  }
  .directions-fab:not(.is-open) .directions-fab__toggle{
    animation:none !important;
  }
}

.directions-fab__dismiss-wrap{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--df-line);
}
.directions-fab__dismiss{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--df-line);
  background:var(--df-close-bg);
  color:var(--df-muted);
  font-size:12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.directions-fab__dismiss:hover{
  background:var(--df-close-hover);
}
.directions-fab__peek{
  position:fixed;
  top:50%;
  right:0;
  z-index:89;
  width:15px;
  height:56px;
  margin-top:-28px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:6px 0 0 6px;
  background:linear-gradient(145deg,var(--df-a) 0%,var(--df-b) 100%);
  color:#fff;
  box-shadow:0 4px 18px var(--df-sh1);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.directions-fab__peek svg{
  width:9px;
  height:9px;
  stroke-width:2.3;
}
.directions-fab--dismissed .directions-fab__dock{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.directions-fab--dismissed .directions-fab__backdrop{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.directions-fab--dismissed .directions-fab__peek{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
/* ArtHome: светлая вкладка как кнопки/акценты на тёмном фоне */
.directions-fab[data-dfab-theme="arthome"] .directions-fab__peek{
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(240,242,244,.98) 100%);
  color:#1a1d24;
  box-shadow:
    0 6px 22px rgba(0,0,0,.38),
    0 0 0 1px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.95);
}
/* Темы кнопки и акцентов */
.directions-fab[data-dfab-theme="arthome"]{
  --df-text:#1a1d24;
  --df-muted:#5a6270;
  --df-line:#d4d8df;
  --df-close-bg:#eef1f4;
  --df-close-hover:#e2e6eb;
  --df-current-bg:#eef2f5;
  --df-link-hover-bg:#f4f6f8;
  --df-a:#0f6b5f;
  --df-b:#0c5a50;
  --df-c:#094840;
  --df-sh1:rgba(15,107,95,.42);
  --df-sh2:rgba(15,107,95,.48);
  --df-sh3:rgba(15,107,95,.38);
  --df-cta-bd:rgba(15,107,95,.28);
  --df-cta-bg:rgba(15,107,95,.08);
  --df-cta-bg-h:rgba(15,107,95,.12);
  --df-cta-bd-h:rgba(15,107,95,.38);
}
.directions-fab[data-dfab-theme="artgreen"]{
  --df-text:#2A2D24;
  --df-muted:#464940;
  --df-line:rgba(42,45,36,.2);
  --df-close-bg:#F0F2EF;
  --df-close-hover:#e4e8e0;
  --df-current-bg:#eef1ea;
  --df-link-hover-bg:#f4f6f0;
  --df-a:#3a5c38;
  --df-b:#2f4b2e;
  --df-c:#264026;
  --df-sh1:rgba(58,92,56,.38);
  --df-sh2:rgba(58,92,56,.44);
  --df-sh3:rgba(58,92,56,.34);
  --df-cta-bd:rgba(58,92,56,.28);
  --df-cta-bg:rgba(58,92,56,.08);
  --df-cta-bg-h:rgba(58,92,56,.12);
  --df-cta-bd-h:rgba(58,92,56,.36);
}
.directions-fab[data-dfab-theme="artremont"]{
  --df-text:#1d1d1d;
  --df-muted:#6f6a66;
  --df-line:#e0e0e0;
  --df-close-bg:#f7f7f7;
  --df-close-hover:#ececec;
  --df-current-bg:#f3f0ee;
  --df-link-hover-bg:#faf8f7;
  --df-a:#5b3f35;
  --df-b:#4a342c;
  --df-c:#3d2b24;
  --df-sh1:rgba(91,63,53,.35);
  --df-sh2:rgba(91,63,53,.4);
  --df-sh3:rgba(91,63,53,.32);
  --df-cta-bd:rgba(91,63,53,.28);
  --df-cta-bg:rgba(91,63,53,.08);
  --df-cta-bg-h:rgba(91,63,53,.12);
  --df-cta-bd-h:rgba(91,63,53,.34);
}
.directions-fab[data-dfab-theme="artstroy"]{
  --df-text:#28282C;
  --df-muted:#666666;
  --df-line:#DADADA;
  --df-close-bg:#EDEDED;
  --df-close-hover:#e3e3e3;
  --df-current-bg:#f0f0f0;
  --df-link-hover-bg:#f7f7f7;
  --df-a:#3d5a80;
  --df-b:#324a6a;
  --df-c:#283d58;
  --df-sh1:rgba(61,90,128,.38);
  --df-sh2:rgba(61,90,128,.44);
  --df-sh3:rgba(61,90,128,.34);
  --df-cta-bd:rgba(61,90,128,.28);
  --df-cta-bg:rgba(61,90,128,.08);
  --df-cta-bg-h:rgba(61,90,128,.12);
  --df-cta-bd-h:rgba(61,90,128,.36);
}
.directions-fab[data-dfab-theme="feedback"]{
  --df-text:#1a1d24;
  --df-muted:#5d616b;
  --df-line:#d8d9dc;
  --df-close-bg:#ececf0;
  --df-close-hover:#e0e1e6;
  --df-current-bg:#eef0f4;
  --df-link-hover-bg:#f5f6f8;
  --df-a:#6b5fd4;
  --df-b:#5548c4;
  --df-c:#453ab0;
  --df-sh1:rgba(107,95,212,.4);
  --df-sh2:rgba(107,95,212,.46);
  --df-sh3:rgba(107,95,212,.36);
  --df-cta-bd:rgba(107,95,212,.3);
  --df-cta-bg:rgba(107,95,212,.1);
  --df-cta-bg-h:rgba(107,95,212,.14);
  --df-cta-bd-h:rgba(107,95,212,.4);
}