/* ===== إشعارات يُسر الفاخرة — وسط الصفحة ===== */
:root{
  --yn-ink:#0b1f2a;
  --yn-gold:#b08d57;
  --yn-gold-soft:#e8d7b0;
  --yn-teal:#0d9488;
  --yn-teal-deep:#065f5b;
  --yn-mint:#ccfbf1;
  --yn-shadow:0 30px 80px rgba(11,31,42,.28);
}

.yusr-notice-overlay{
  position:fixed;
  inset:0;
  z-index:20050;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:
    radial-gradient(800px 400px at 50% 30%, rgba(176,141,87,.18), transparent 55%),
    rgba(8,20,28,.58);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.yusr-notice-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.yusr-notice-card{
  position:relative;
  width:min(520px, 100%);
  border-radius:24px;
  overflow:hidden;
  background:
    linear-gradient(160deg, rgba(255,255,255,.98), rgba(248,255,253,.96)),
    radial-gradient(420px 180px at 100% 0%, rgba(176,141,87,.16), transparent 60%);
  border:1px solid rgba(176,141,87,.28);
  box-shadow:var(--yn-shadow);
  transform:translateY(18px) scale(.96);
  opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
  direction:rtl;
  text-align:right;
}
.yusr-notice-overlay.is-open .yusr-notice-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.yusr-notice-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, transparent, var(--yn-gold), var(--yn-gold-soft), var(--yn-teal), transparent);
}

.yusr-notice-card__close{
  position:absolute;
  top:14px;
  left:14px;
  width:40px;
  height:40px;
  border:1px solid rgba(176,141,87,.25);
  border-radius:14px;
  background:rgba(255,255,255,.85);
  color:var(--yn-ink);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  z-index:2;
}
.yusr-notice-card__close:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(11,31,42,.12);
}

.yusr-notice-card__inner{padding:28px 26px 22px}
.yusr-notice-card__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--yn-gold);
  margin-bottom:12px;
}
.yusr-notice-card__icon{
  width:56px;
  height:56px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:26px;
  margin-bottom:14px;
  background:linear-gradient(160deg, #fff, var(--yn-mint));
  color:var(--yn-teal-deep);
  border:1px solid rgba(13,148,136,.16);
  box-shadow:inset 0 -6px 14px rgba(13,148,136,.08);
}
.yusr-notice-card__title{
  margin:0 0 10px;
  font-size:clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight:800;
  color:var(--yn-ink);
  line-height:1.35;
}
.yusr-notice-card__body{
  margin:0;
  color:#475569;
  font-weight:600;
  font-size:.98rem;
  line-height:1.75;
  white-space:pre-wrap;
}
.yusr-notice-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
  justify-content:flex-start;
}
.yusr-notice-card__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:14px;
  padding:.7rem 1.15rem;
  font-weight:800;
  text-decoration:none !important;
  border:0;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.yusr-notice-card__btn:hover{transform:translateY(-1px)}
.yusr-notice-card__btn--primary{
  background:linear-gradient(135deg, var(--yn-teal), var(--yn-teal-deep));
  color:#fff !important;
  box-shadow:0 12px 24px rgba(13,148,136,.28);
}
.yusr-notice-card__btn--ghost{
  background:rgba(11,31,42,.04);
  color:var(--yn-ink) !important;
  border:1px solid rgba(176,141,87,.22);
}

.yusr-notice-card.is-success .yusr-notice-card__icon{
  background:linear-gradient(160deg,#ecfdf5,#d1fae5); color:#047857;
}
.yusr-notice-card.is-warning .yusr-notice-card__icon{
  background:linear-gradient(160deg,#fffbeb,#fde68a); color:#b45309;
}
.yusr-notice-card.is-danger .yusr-notice-card__icon{
  background:linear-gradient(160deg,#fef2f2,#fecaca); color:#b91c1c;
}
.yusr-notice-card.is-info .yusr-notice-card__icon{
  background:linear-gradient(160deg,#eff6ff,#bfdbfe); color:#1d4ed8;
}
.yusr-notice-card.is-luxury .yusr-notice-card__icon{
  background:linear-gradient(160deg,#fff,#f5ecda); color:#8a6a2b;
}
.yusr-notice-overlay.is-sky-theme{
  background:
    radial-gradient(920px 460px at 50% 18%, rgba(125,211,252,.42), transparent 58%),
    radial-gradient(640px 420px at 12% 88%, rgba(56,189,248,.28), transparent 52%),
    radial-gradient(520px 360px at 92% 72%, rgba(14,165,233,.24), transparent 48%),
    linear-gradient(165deg, rgba(7,89,133,.62), rgba(12,74,110,.68) 55%, rgba(8,47,73,.72));
}
.yusr-notice-card.is-sky{
  background:
    linear-gradient(165deg, rgba(240,249,255,.99), rgba(224,242,254,.97) 42%, rgba(255,255,255,.985)),
    radial-gradient(520px 220px at 100% 0%, rgba(56,189,248,.26), transparent 60%),
    radial-gradient(380px 180px at 0% 100%, rgba(125,211,252,.18), transparent 55%);
  border-color:rgba(14,165,233,.32);
  box-shadow:
    0 30px 80px rgba(7,89,133,.28),
    0 0 0 1px rgba(186,230,253,.55) inset,
    0 1px 0 rgba(255,255,255,.9) inset;
}
.yusr-notice-card.is-sky::before{
  height:5px;
  background:linear-gradient(90deg, transparent, #7dd3fc, #38bdf8, #0ea5e9, #38bdf8, #7dd3fc, transparent);
}
.yusr-notice-card.is-sky::after{
  content:"";
  position:absolute;
  inset:auto -20% -40% auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(56,189,248,.16), transparent 70%);
  pointer-events:none;
}
.yusr-notice-card.is-sky .yusr-notice-card__badge{color:#0284c7}
.yusr-notice-card.is-sky .yusr-notice-card__icon{
  background:linear-gradient(160deg,#f0f9ff,#bae6fd);
  color:#0369a1;
  border-color:rgba(14,165,233,.22);
  box-shadow:inset 0 -6px 14px rgba(14,165,233,.10), 0 10px 22px rgba(14,165,233,.12);
}
.yusr-notice-card.is-sky .yusr-notice-card__title{color:#0c4a6e}
.yusr-notice-card.is-sky .yusr-notice-card__body{color:#334155}
.yusr-notice-card.is-sky .yusr-notice-card__btn--primary{
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
  box-shadow:0 12px 24px rgba(14,165,233,.28);
}
.yusr-notice-card.is-sky .yusr-notice-card__btn--ghost{
  background:rgba(240,249,255,.85);
  border-color:rgba(14,165,233,.28);
  color:#0c4a6e !important;
}
.yusr-notice-card.is-sky .yusr-notice-card__close{
  border-color:rgba(14,165,233,.25);
  color:#0369a1;
  background:rgba(240,249,255,.9);
}
.yusr-notice-card.is-sky .yusr-notice-progress span.is-active{
  background:linear-gradient(135deg,#38bdf8,#0284c7);
  box-shadow:0 0 0 3px rgba(14,165,233,.18);
}

.yusr-notice-progress{
  display:flex;
  gap:6px;
  justify-content:center;
  padding:0 20px 18px;
}
.yusr-notice-progress span{
  width:8px;height:8px;border-radius:50%;
  background:rgba(13,148,136,.2);
}
.yusr-notice-progress span.is-active{
  background:linear-gradient(135deg, var(--yn-gold), var(--yn-teal));
  box-shadow:0 0 0 3px rgba(176,141,87,.18);
}

@media (max-width:576px){
  .yusr-notice-card__inner{padding:24px 18px 18px}
  .yusr-notice-card__close{top:10px;left:10px}
}
