/* ===== Notifications: slide R→L in, L→R out, icon-left ===== */

/* Контейнер із позиціями (як і раніше) */
.notice-root{
  position: fixed; display:flex; flex-direction:column; gap:.5rem;
  z-index: 10000; pointer-events: none;
}
.notice-root.is-top-right    { top:20px; right:20px;  align-items:flex-end; }
.notice-root.is-top-left     { top:20px; left:20px;   align-items:flex-start; }
.notice-root.is-bottom-right { bottom:20px; right:20px; align-items:flex-end; }
.notice-root.is-bottom-left  { bottom:20px; left:20px;  align-items:flex-start; }

/* Базова картка */
.notice{
  pointer-events:auto;
  display:flex; align-items:center; gap:.65rem;
  min-width:220px; max-width:420px;
  padding:.85rem 1rem;
  border-radius:.9rem;
  background:#06b6d4; color:#000; /* info by default */
  font-weight:600;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
  will-change: transform, opacity;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
  opacity: 0;
}

/* Іконка зліва + текст праворуч */
.notice__icon{
  flex:0 0 1.1rem; line-height:0;
}
.notice__icon i{ font-size:1.1rem; }
.notice__body{
  flex:1 1 auto; line-height:1.45;
}

/* Кнопка закриття праворуч */
.notice .nt-close{
  margin-left:.5rem; background:none; border:none; cursor:pointer;
  font-size:1.1rem; line-height:1; color:rgba(0,0,0,.85);
  padding:0 .25rem;
}
.notice .nt-close:hover{ opacity:.8; }

/* Типи (фон/градієнти) */
.notice.-success{ background:#10b981; color:#051b11; }
.notice.-error  { background:#ef4444; color:#2a0909; }
.notice.-warning{ background:#f59e0b; color:#221607; }
.notice.-info   { background:#06b6d4; color:#06252b; }

/* Скін, як на сторінці входу */
.notice.-signin{
  color:#fff;
  background: linear-gradient(135deg, rgba(6,182,212,.95) 0%, rgba(8,145,178,.95) 100%);
  border: 1px solid rgba(6,182,212,.35);
  box-shadow: 0 10px 30px rgba(6,182,212,.28);
}
.notice.-signin .nt-close{ color:#fff; }

/* СТАНИ АНІМАЦІЙ:
   — якщо root справа → в’їзд з +120% (праворуч), виїзд теж вправо
   — якщо root зліва → дзеркально */
.notice.is-shown{ opacity:1; transform: translateX(0); }

.notice.-rtl-enter{ transform: translateX(120%); opacity:0; } /* з права на ліво */
.notice.-rtl-leave{ transform: translateX(120%); opacity:0; } /* зліва на право (вправо) */

.notice.-ltr-enter{ transform: translateX(-120%); opacity:0; } /* в’їзд зліва (для лівих контейнерів) */
.notice.-ltr-leave{ transform: translateX(-120%); opacity:0; } /* вихід вліво */

/* Плаваючі підказки теж можна зсунути, якщо користуєшся variant:'floating' */
.notice-floating{
  position:fixed; display:flex; align-items:center; gap:.6rem;
  max-width:340px; padding:1rem 1.2rem; border-radius:.9rem;
  background: linear-gradient(45deg,#06b6d4,#0891b2);
  color:#fff; box-shadow:0 12px 28px rgba(0,0,0,.14);
  will-change: transform, opacity;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
  z-index:1000; opacity:0; transform: translateX(100%);
}
.notice-floating.is-open{ transform: translateX(0); opacity:1; }
.notice-floating .nf-text{ line-height:1.45; }
.notice-floating .nf-close{
  margin-left:auto; background:none; border:none; color:#fff;
  font-size:1.1rem; cursor:pointer;
}