/* ── Стеклянные кнопки (2026-10-25, из одобренного макета mockups/door-hero) ──
   Подключается только на публичных страницах, после темы (кабинеты, платформа
   и админка - без него). Корпус кнопки - в ::after (стекло, глянцевый блик
   сверху, непрозрачная основа, чтобы маркер не просвечивал), под ним в ::before -
   наклонный маркер краски. При наведении кнопка чуть наклоняется (левый угол
   «падает»), из-под неё выезжает маркер - как у пунктов шапки.
   Три стекла: лаймовое (главные действия, маркер тёмно-оливковый), белое
   (второстепенные) и тёмное (чёрная кнопка в блоке div.cta на страницах цен).
   !important - тема и стили страниц красят эти кнопки при наведении сильными
   селекторами (:root :is(...)); здесь фон кнопки всегда прозрачный, цвет - у ::after. */

:is(.btn-lime,.btn-primary,.hm-btn,.btn-price,.btn-gen,.btn-next,.btn-submit,.btn-out,.btn-outline,.dh-btn,.btn-glass,
    .pack-btn:not([disabled]),main .btn-ghost,section .btn-ghost,.wrap .btn-ghost):not(header *):not(.topbar *):not(:disabled){
  position:relative; isolation:isolate; z-index:0;
  background:transparent !important; border-color:transparent !important; outline:none;
  box-shadow:none !important; filter:none !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transform-origin:88% 40%;
  transition:transform .34s cubic-bezier(.3,.7,.25,1.35), color .2s !important;
}
:is(.btn-lime,.btn-primary,.hm-btn,.btn-price,.btn-gen,.btn-next,.btn-submit,.btn-out,.btn-outline,.dh-btn,.btn-glass,
    .pack-btn:not([disabled]),main .btn-ghost,section .btn-ghost,.wrap .btn-ghost):not(header *):not(.topbar *):not(:disabled)::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  -webkit-backdrop-filter:blur(12px) saturate(1.8); backdrop-filter:blur(12px) saturate(1.8);
  transition:box-shadow .3s;
}
:is(.btn-lime,.btn-primary,.hm-btn,.btn-price,.btn-gen,.btn-next,.btn-submit,.btn-out,.btn-outline,.dh-btn,.btn-glass,
    .pack-btn:not([disabled]),main .btn-ghost,section .btn-ghost,.wrap .btn-ghost):not(header *):not(.topbar *):not(:disabled)::before{
  content:""; position:absolute; left:12px; right:-9px; top:10px; bottom:-9px; border-radius:5px; z-index:-2; pointer-events:none;
  background:#dcf06a; transform:skewX(-9deg) scaleX(0); transform-origin:left center;
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}

/* ── лаймовое стекло: главные действия; маркер под ним тёмно-оливковый ── */
:is(.btn-lime,.btn-primary,.hm-btn.solid,.btn-price-lime,.btn-gen,.btn-next,.btn-submit,.dh-btn,.btn-glass.lime,.pack-btn:not([disabled])):not(div.cta .btn-lime):not(header *):not(.topbar *):not(:disabled){ color:#14140f !important; }
:is(.btn-lime,.btn-primary,.hm-btn.solid,.btn-price-lime,.btn-gen,.btn-next,.btn-submit,.dh-btn,.btn-glass.lime,.pack-btn:not([disabled])):not(div.cta .btn-lime):not(header *):not(.topbar *):not(:disabled)::after{
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 52%),
             linear-gradient(180deg,rgba(232,248,120,.82),rgba(206,236,70,.5) 60%,rgba(220,244,100,.66)),#d9ee6c;
  box-shadow:0 0 0 1px rgba(110,140,10,.30),0 8px 22px rgba(170,200,40,.24),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 6px rgba(90,120,0,.10);
}
:is(.btn-lime,.btn-primary,.hm-btn.solid,.btn-price-lime,.btn-gen,.btn-next,.btn-submit,.dh-btn,.btn-glass.lime,.pack-btn:not([disabled])):not(div.cta .btn-lime):not(header *):not(.topbar *):not(:disabled)::before{ background:#5b7504; }

/* ── белое стекло: второстепенные действия; маркер лаймовый ── */
:is(.hm-btn.out,.btn-price-ghost,.btn-out,.btn-outline,.btn-glass:not(.lime),main .btn-ghost,section .btn-ghost,.wrap .btn-ghost):not(header *):not(.topbar *):not(:disabled){ color:#14140f !important; }
:is(.hm-btn.out,.btn-price-ghost,.btn-out,.btn-outline,.btn-glass:not(.lime),main .btn-ghost,section .btn-ghost,.wrap .btn-ghost):not(header *):not(.topbar *):not(:disabled)::after{
  border:1px solid rgba(255,255,255,.95);
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0) 52%),
             linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 60%,rgba(255,255,255,.18)),#f6f4ee;
  box-shadow:0 0 0 1px rgba(20,20,15,.09),0 6px 18px rgba(20,20,15,.07),inset 0 1px 0 #fff,inset 0 -2px 6px rgba(20,20,15,.05);
}

/* ── тёмное стекло: чёрная кнопка в блоке div.cta на страницах цен; маркер лаймовый ── */
div.cta .btn-lime:not(:disabled){ color:#dcf06a !important; }
/* блок div.cta сам лаймовый - маркер под чёрной кнопкой оливковый, иначе лайм на лайме не виден */
div.cta .btn-lime:not(:disabled)::before{ background:#5b7504; }
div.cta .btn-lime:not(:disabled)::after{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 50%),#17170f;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 8px 22px rgba(20,20,15,.25),inset 0 1px 0 rgba(255,255,255,.18);
}

/* ── наведение (только мышь: на телефоне :hover залипает после касания) ── */
@media (hover:hover){
  :is(.btn-lime,.btn-primary,.hm-btn,.btn-price,.btn-gen,.btn-next,.btn-submit,.btn-out,.btn-outline,.dh-btn,.btn-glass,
      .pack-btn:not([disabled]),main .btn-ghost,section .btn-ghost,.wrap .btn-ghost):not(header *):not(.topbar *):not(:disabled):hover{
    transform:rotate(-2.2deg) translateY(-1px) !important; background:transparent !important; box-shadow:none !important; filter:none !important;
  }
  :is(.btn-lime,.btn-primary,.hm-btn,.btn-price,.btn-gen,.btn-next,.btn-submit,.btn-out,.btn-outline,.dh-btn,.btn-glass,
      .pack-btn:not([disabled]),main .btn-ghost,section .btn-ghost,.wrap .btn-ghost):not(header *):not(.topbar *):not(:disabled):hover::before{
    transform:skewX(-9deg) scaleX(1);
  }
  :is(.hm-btn.out,.btn-price-ghost,.btn-out,.btn-outline,.btn-glass:not(.lime),main .btn-ghost,section .btn-ghost,.wrap .btn-ghost):not(header *):not(.topbar *):not(:disabled):hover::after{
    box-shadow:0 0 0 1px rgba(20,20,15,.14),0 10px 24px rgba(20,20,15,.12),inset 0 1px 0 #fff;
  }
  :is(.btn-lime,.btn-primary,.hm-btn.solid,.btn-price-lime,.btn-gen,.btn-next,.btn-submit,.dh-btn,.btn-glass.lime,.pack-btn:not([disabled])):not(div.cta .btn-lime):not(header *):not(.topbar *):not(:disabled):hover::after{
    box-shadow:0 0 0 1px rgba(110,140,10,.34),0 12px 26px rgba(170,200,40,.3),inset 0 1px 0 #fff;
  }
}
:is(.btn-lime,.btn-primary,.hm-btn,.btn-price,.btn-gen,.btn-next,.btn-submit,.btn-out,.btn-outline,.dh-btn,.btn-glass,
    .pack-btn:not([disabled]),main .btn-ghost,section .btn-ghost,.wrap .btn-ghost):not(header *):not(.topbar *):not(:disabled):active{
  transform:rotate(-1deg) scale(.985) !important;
}
:is(.btn-lime,.btn-primary,.hm-btn,.btn-price,.btn-gen,.btn-next,.btn-submit,.btn-out,.btn-outline,.dh-btn,.btn-glass,
    .pack-btn:not([disabled]),main .btn-ghost,section .btn-ghost,.wrap .btn-ghost):not(header *):not(.topbar *):not(:disabled):focus-visible{
  outline:2px solid var(--lime-text,#5b7504); outline-offset:3px;
}

/* ── переключатель «Месяц / Год» на тарифах: одна стеклянная капсула переезжает
      под выбранный вариант (капсулу вставляет скрипт страницы) ── */
.period-toggle.has-thumb{position:relative;border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(12px) saturate(1.8);backdrop-filter:blur(12px) saturate(1.8);
  box-shadow:0 0 0 1px rgba(20,20,15,.08),0 8px 24px rgba(20,20,15,.08),inset 0 1px 0 #fff}
.period-toggle.has-thumb .period-thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;z-index:0;pointer-events:none;overflow:hidden;
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 52%),
             linear-gradient(180deg,rgba(232,248,120,.82),rgba(206,236,70,.5) 60%,rgba(220,244,100,.66)),#d9ee6c;
  box-shadow:0 0 0 1px rgba(110,140,10,.30),0 8px 22px rgba(170,200,40,.24),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .42s cubic-bezier(.3,.75,.2,1),width .42s cubic-bezier(.3,.75,.2,1)}
.period-toggle.has-thumb .period-btn,
.period-toggle.has-thumb .period-btn.active,
.period-toggle.has-thumb .period-btn:not(.active):hover{position:relative;z-index:1;background:transparent !important;box-shadow:none !important;transition:color .25s}
.period-toggle.has-thumb .period-btn.active,
.period-toggle.has-thumb .period-btn:not(.active):hover{color:#14140f}

@media (prefers-reduced-motion:reduce){
  :is(.btn-lime,.btn-primary,.hm-btn,.btn-price,.btn-gen,.btn-next,.btn-submit,.btn-out,.btn-outline,.dh-btn,.btn-glass,
      .pack-btn,main .btn-ghost,section .btn-ghost,.wrap .btn-ghost),
  :is(.btn-lime,.btn-primary,.hm-btn,.btn-price,.btn-gen,.btn-next,.btn-submit,.btn-out,.btn-outline,.dh-btn,.btn-glass,
      .pack-btn,main .btn-ghost,section .btn-ghost,.wrap .btn-ghost)::before{transition:none !important}
  :is(.btn-lime,.btn-primary,.hm-btn,.btn-price,.btn-gen,.btn-next,.btn-submit,.btn-out,.btn-outline,.dh-btn,.btn-glass,
      .pack-btn,main .btn-ghost,section .btn-ghost,.wrap .btn-ghost):hover{transform:none !important}
}