/* =============================================================
   نافذة «ما الجديد» — بهوية الموقع (أخضر + ذهبي)، شفق متحرك
   وبطاقة زجاجية وشرائح متبدّلة. تعمل RTL/LTR بخصائص منطقية.
   ============================================================= */

.wn-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 32, 27, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.wn-overlay[hidden] { display: none; }
.wn-overlay.is-open { opacity: 1; }

/* ===== البطاقة ===== */
.wn-card {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(9, 92, 75, 0.28);
    transform: translateY(28px) scale(0.96);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.wn-overlay.is-open .wn-card {
    transform: none;
    opacity: 1;
}

/* ===== الترويسة ===== */
.wn-head {
    position: relative;
    padding: 26px 26px 22px;
    background: linear-gradient(135deg, #095C4B 0%, #0D7C66 55%, #17B89C 100%);
    color: #fff;
    text-align: center;
    overflow: hidden;
    flex-shrink: 0;
}

.wn-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(38px);
    pointer-events: none;
}

.wn-aurora-1 {
    width: 220px; height: 220px;
    background: rgba(255, 255, 255, 0.22);
    top: -110px; inset-inline-start: -50px;
    animation: wnDrift 13s ease-in-out infinite alternate;
}

.wn-aurora-2 {
    width: 180px; height: 180px;
    background: rgba(212, 169, 78, 0.30);
    bottom: -100px; inset-inline-end: -40px;
    animation: wnDrift 17s ease-in-out infinite alternate-reverse;
}

@keyframes wnDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(40px, 26px) scale(1.2); }
}

.wn-x {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    width: 34px; height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.wn-x:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); }

.wn-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    margin-bottom: 12px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.32);
    font-size: 0.76rem;
    font-weight: 800;
}

.wn-badge i { color: #f0c46a; }

.wn-title {
    position: relative;
    margin: 0 0 8px;
    font-size: 1.42rem;
    font-weight: 900;
    line-height: 1.45;
}

.wn-sub {
    position: relative;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.85;
    opacity: 0.92;
}

/* ===== جسم الشرائح ===== */
.wn-body {
    flex: 1;
    overflow-y: auto;
    padding: 26px 26px 8px;
}

.wn-slides { position: relative; }

.wn-slide {
    display: none;
    text-align: center;
}

.wn-slide.is-active {
    display: block;
    animation: wnSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wnSlideIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* بلاطة الأيقونة */
.wn-icon {
    width: 84px; height: 84px;
    margin: 0 auto 18px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #0D7C66, #17B89C);
    box-shadow: 0 16px 34px rgba(13, 124, 102, 0.32);
    animation: wnFloat 4.5s ease-in-out infinite;
}

.wn-icon svg {
    width: 42px; height: 42px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes wnFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.wn-slide-title {
    margin: 0 0 10px;
    font-size: 1.12rem;
    font-weight: 800;
    color: #14212b;
}

.wn-slide-desc {
    margin: 0 0 18px;
    font-size: 0.92rem;
    line-height: 1.95;
    color: #64748b;
}

/* صندوق «كيف تستخدمها» */
.wn-howto {
    text-align: start;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(13, 124, 102, 0.06);
    border: 1px solid rgba(13, 124, 102, 0.14);
    border-inline-start: 3px solid #0D7C66;
}

.wn-howto-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #0D7C66;
}

.wn-howto-text {
    display: block;
    font-size: 0.86rem;
    line-height: 1.9;
    color: #14212b;
}

/* ===== التذييل ===== */
.wn-foot {
    flex-shrink: 0;
    padding: 16px 26px 20px;
    border-top: 1px solid #eef2f1;
    text-align: center;
}

.wn-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-bottom: 14px;
}

.wn-dot {
    width: 8px; height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d5e3df;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wn-dot.is-active {
    width: 24px;
    border-radius: 50px;
    background: linear-gradient(90deg, #0D7C66, #17B89C);
}

.wn-nav {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}

.wn-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.wn-btn[hidden] { display: none; }

.wn-btn-primary {
    background: linear-gradient(135deg, #0D7C66, #17B89C);
    color: #fff;
    box-shadow: 0 9px 22px rgba(13, 124, 102, 0.30);
}

.wn-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(13, 124, 102, 0.38);
}

.wn-btn-ghost {
    background: rgba(13, 124, 102, 0.07);
    color: #095C4B;
    border: 1.5px solid rgba(13, 124, 102, 0.22);
}

.wn-btn-ghost:hover { background: rgba(13, 124, 102, 0.13); }

.wn-dismiss {
    padding: 6px 12px;
    border: none;
    background: none;
    color: #8a9a96;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.wn-dismiss:hover { color: #0D7C66; }

/* ملاحظة: اتجاه أسهم التنقّل تتكفّل به القاعدة العامة في ltr.css التي تبدّل
   حرف أيقونة Font Awesome نفسه في الوضع التركي. أي قلب إضافي هنا (scaleX)
   يُنتج انعكاساً مزدوجاً فيعود السهم لاتجاهه الخاطئ. */

/* ===== الجوال ===== */
@media (max-width: 520px) {
    .wn-overlay { padding: 12px; }
    .wn-card { border-radius: 22px; max-height: 94vh; }
    .wn-head { padding: 22px 20px 18px; }
    .wn-title { font-size: 1.18rem; }
    .wn-body { padding: 22px 20px 6px; }
    .wn-icon { width: 72px; height: 72px; border-radius: 20px; }
    .wn-icon svg { width: 36px; height: 36px; }
    .wn-foot { padding: 14px 20px 18px; }
    .wn-btn { padding: 11px 20px; font-size: 0.86rem; }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .wn-overlay, .wn-card, .wn-slide, .wn-icon, .wn-aurora, .wn-btn, .wn-x, .wn-dot {
        animation: none !important;
        transition: none !important;
    }
}