/* ============================================================
   Part 15 / P12 — the notification toast
   ------------------------------------------------------------
   Every "با موفقیت به سبد خرید افزوده شد" / "موجودی این محصول کمتر است" /
   validation-error message on the storefront is a UIkit.notification(). Its look
   was still UIkit's 2019 default with a small colour patch bolted on
   (front-inline.css: 4px corners, flat #f2fae3 / #fff1f0 fills, a 15px !important
   font, a hard-coded 25px right margin for an icon that was never drawn) — and the
   account panel carried its own slightly different copy of the same patch inline.
   On a phone it rendered as a narrow card floating in the middle of the screen
   with the close × overlapping the text.

   This is the one place a toast is styled now. It uses the same surface language
   as the rest of Part 9–15: white glass panel, 16px radius, hairline border, wide
   soft shadow, a coloured status rail down the leading edge and a round status
   icon. assets/new/js/notify15.js injects that icon and pins the position/timeout,
   so nothing at the ~40 call sites had to change.

   MUST load after uikit-rtl.css (it overrides .uk-notification-*) and after
   front-inline.css.
   ============================================================ */

.uk-notification{
  --sd15-note-accent:var(--sd-teal-600);
  --sd15-note-tint:var(--sd-teal-050);
  box-sizing:border-box;
  width:auto;
  max-width:420px;
  /* clear of the fixed green contact bar + the sticky header */
  top:100px;
  z-index:99999;
}
.uk-notification-top-center,
.uk-notification-bottom-center{ z-index:99999; }

.uk-notification-message{
  position:relative;
  display:flex; align-items:flex-start; gap:11px;
  margin:0 0 12px;
  padding:14px 16px 14px 42px;   /* left inset = room for the close × */
  overflow:hidden;
  border:1px solid rgba(18,86,74,.12);
  border-radius:16px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 20px 44px -26px rgba(26,62,55,.55);
  color:var(--sd-ink);
  font-family:'iransans',sans-serif;
  font-size:13px; font-weight:700; line-height:1.9;
  cursor:pointer;
}
/* status rail on the leading (right, in RTL) edge */
.uk-notification-message::before{
  content:"";
  position:absolute; top:0; bottom:0; inset-inline-start:0;
  width:4px;
  background:var(--sd15-note-accent);
}

/* ---- status icon (injected by notify15.js) ---- */
.sd15-note-ic{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  width:30px; height:30px;
  border-radius:10px;
  background:var(--sd15-note-tint);
  color:var(--sd15-note-accent);
  font-size:14px;
}
.sd15-note-body{ flex:1 1 auto; min-width:0; }
/* the error toast passes a <ul> of messages */
.sd15-note-list{ margin:0; padding:0; list-style:none; }
.sd15-note-list > li{ font-size:13px; line-height:1.9; }
.sd15-note-list > li + li{ margin-top:2px; border-top:1px solid rgba(18,86,74,.08); padding-top:2px; }
.uk-notification-message a{ color:var(--sd15-note-accent); font-weight:800; }

/* ---- per status ---- */
.uk-notification-message-success{
  --sd15-note-accent:var(--sd-teal-600);
  --sd15-note-tint:var(--sd-teal-050);
  background:rgba(255,255,255,.94);
  color:var(--sd-ink);
  border-color:rgba(18,86,74,.14);
}
.uk-notification-message-danger{
  --sd15-note-accent:var(--sd-red-500);
  --sd15-note-tint:var(--sd-red-050);
  background:rgba(255,255,255,.94);
  color:var(--sd-ink);
  border-color:rgba(210,90,78,.24);
}
.uk-notification-message-warning{
  --sd15-note-accent:#c98a1e;
  --sd15-note-tint:#fdf4e3;
  background:rgba(255,255,255,.94);
  color:var(--sd-ink);
  border-color:rgba(201,138,30,.24);
}
.uk-notification-message-primary{
  --sd15-note-accent:var(--sd-teal-600);
  --sd15-note-tint:var(--sd-teal-050);
  background:rgba(255,255,255,.94);
  color:var(--sd-ink);
}

/* ---- close control ----
   UIkit puts .uk-notification-close at the far end with `display:none` until hover,
   which on a touch screen means "never". It is always visible here, and it sits in
   the padding reserved above instead of on top of the copy. */
.uk-notification-close{
  display:block!important;
  position:absolute; top:50%; inset-inline-end:14px;
  width:22px; height:22px; margin-top:-11px;
  color:var(--sd-muted);
  opacity:1;
}
.uk-notification-close:hover{ color:var(--sd-ink); }

/* ---- phones ----
   Full-bleed card pinned under the header, so a long Persian sentence gets the
   whole width instead of wrapping into six lines in a 200px box. */
@media(max-width:640px){
  .uk-notification{
    left:10px!important; right:10px!important;
    width:auto!important; max-width:none;
    top:88px;
    margin:0;
  }
  .uk-notification-message{
    padding:13px 14px 13px 40px;
    border-radius:14px;
    font-size:13px;
  }
  .sd15-note-ic{ width:28px; height:28px; font-size:13px; }
}

@media(prefers-reduced-motion:reduce){
  .uk-notification-message{ transition:none; }
}