/* ==========================================================================
   ВСПЛЫВАЮЩЕЕ ОКНО С УВЕДОМЛЕНИЕМ
   Показывается один раз при заходе. Закрывается крестиком, кнопкой,
   кликом по фону или Escape. Всё в палитре сайта.
   ========================================================================== */

/* Окно видно по умолчанию: если JS не загрузился, уведомление всё равно
   покажется. Скрывает его только синхронный скрипт в <head> — для тех,
   кто уже закрывал окно в этой версии. */
html[data-notice="off"] .notice-modal,
.notice-modal.is-hidden{display:none}

.notice-modal{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.notice-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(10,32,66,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  animation:notice-fade .18s ease-out;
}
.notice-modal__box{
  position:relative;z-index:1;
  width:100%;max-width:760px;max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(10,32,66,.32);
  padding:38px 40px 32px;
  animation:notice-pop .2s ease-out;
}
@keyframes notice-fade{from{opacity:0}to{opacity:1}}
@keyframes notice-pop{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}

.notice-modal__close{
  position:absolute;top:18px;right:18px;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:var(--pale2);border:1px solid var(--line);
  border-radius:50%;color:var(--muted);
  cursor:pointer;transition:background-color .15s,color .15s;
}
.notice-modal__close:hover{background:var(--pale);color:var(--blue)}

.notice-modal__head{display:flex;gap:14px;align-items:flex-start}
.notice-modal__dot{
  width:11px;height:11px;border-radius:50%;flex:0 0 auto;margin-top:11px;
  background:#e08a1e;box-shadow:0 0 0 5px rgba(224,138,30,.16);
  animation:notice-pulse 2.4s ease-in-out infinite;
}
@keyframes notice-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.notice-modal__kicker{
  font-size:12px;font-weight:850;letter-spacing:.11em;
  text-transform:uppercase;color:#c0781a;margin-bottom:8px;
}
.notice-modal__title{
  font-size:clamp(26px,3.4vw,34px);line-height:1.12;
  letter-spacing:-.025em;
}
.notice-modal__lead{
  margin-top:16px;font-size:16px;line-height:1.6;color:var(--muted);
}

.notice-modal__cols{
  margin-top:26px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.notice-modal__col{border-radius:16px;padding:16px 17px;border:1px solid var(--line)}
.notice-modal__col.is-ok{background:#eef7fc;border-color:#cfe6f3}
.notice-modal__col.is-warn{background:#fff8ed;border-color:#f0dcb8}
.notice-modal__col.is-off{background:#fff3ef;border-color:#f2d5cb}
.notice-modal__badge{
  display:inline-block;margin-bottom:10px;
  font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;
}
.notice-modal__col.is-ok   .notice-modal__badge{background:#d7e9f5;color:#1e54a3}
.notice-modal__col.is-warn .notice-modal__badge{background:#f7e6c8;color:#8a5a1c}
.notice-modal__col.is-off  .notice-modal__badge{background:#f7ddd4;color:#a63f22}
.notice-modal__col ul{display:grid;gap:6px;list-style:none;padding:0;margin:0}
.notice-modal__col li{
  position:relative;padding-left:16px;
  font-size:13px;line-height:1.45;color:var(--muted);
}
.notice-modal__col li::before{
  content:"";position:absolute;left:0;top:7px;
  width:6px;height:6px;border-radius:50%;
}
.notice-modal__col.is-ok   li::before{background:#2b7f74}
.notice-modal__col.is-warn li::before{background:#e08a1e}
.notice-modal__col.is-off  li::before{background:#c2553f}

.notice-modal__foot{
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line);
  font-size:14px;line-height:1.55;color:var(--muted);
}
.notice-modal__actions{
  margin-top:24px;
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
}

body.notice-open{overflow:hidden}

@media(max-width:760px){
  .notice-modal{padding:14px}
  .notice-modal__box{max-height:calc(100vh - 28px);padding:30px 20px 24px}
  .notice-modal__close{top:12px;right:12px}
  .notice-modal__cols{grid-template-columns:1fr}
  .notice-modal__actions{flex-direction:column-reverse}
  .notice-modal__actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .notice-modal__backdrop,.notice-modal__box,.notice-modal__dot{animation:none}
}