/* ==========================================================================
   شريط إعلان فترات العرض فوق عنوان «الخدمات الإلكترونية» في index.html.

   موضعه أعلى الصفحة عمدًا: فتح النتائج أو التنسيب خبرٌ يُعلَن، ومن يفتح
   الصفحة يجب أن يراه قبل أن يمرّر إلى البطاقات. وهو يختفي كليًّا حين تكون
   البوابتان مقفلتين، فلا يشغل مكانًا في الحالة الاعتيادية.

   ملف مستقلّ لأن تنسيقات الرئيسية مضمّنة داخلها، والإعلان إضافة عليها لا
   تعديل لها. الألوان من رموز الرئيسية نفسها (الكحلي والذهبي).
   ========================================================================== */

/* بلا خلفية خاصة: الشريط داخل قسم الخدمات الفاتح، والبطاقات الكحلية وحدها
   هي ما يُرى. لو حمل خلفية داكنة بعرض الصفحة لقطع القسم إلى نصفين. */
.pw-ad-band {
    padding: 0 0 30px;
}

/* ترويسة «إعلان»: تسمّي الصندوق كي لا يُقرأ العدّاد زخرفةً */
.pw-ad-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 16px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0a1a2e;
    line-height: 1.4;
    text-align: center;
}
.pw-ad-banner-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c9a959;
    color: #0a1a2e;
    font-size: 1.15rem;
    box-shadow: 0 0 0 5px rgba(201, 169, 89, 0.22);
    /* اهتزازة خفيفة كل بضع ثوانٍ: تلفت العين مرة ثم تسكن */
    animation: pw-ad-ring 4.5s ease-in-out infinite;
    transform-origin: 50% 65%;
}
@keyframes pw-ad-ring {
    0%, 82%, 100% { transform: rotate(0deg); }
    85% { transform: rotate(-11deg); }
    88% { transform: rotate(9deg); }
    91% { transform: rotate(-7deg); }
    94% { transform: rotate(5deg); }
    97% { transform: rotate(-2deg); }
}
.pw-ad-band[hidden] {
    display: none;
}

/* إعلانان جنبًا إلى جنب على الشاشة العريضة، وواحد تحت الآخر دونها */
.pw-ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 16px;
}

/* خلفية مصمتة لا شفافة: البطاقة صارت فوق خلفية فاتحة، والشفافية كانت
   تجعلها بيضاء بلا تباين. */
.pw-ad {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, #0a1a2e 0%, #143055 100%);
    border: 1px solid rgba(201, 169, 89, 0.55);
    box-shadow: 0 10px 26px rgba(10, 26, 46, 0.22);
}
.pw-ad[hidden] {
    display: none;
}

.pw-ad-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pw-ad-icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 89, 0.18);
    border: 1px solid rgba(201, 169, 89, 0.5);
    color: #e8d5a3;
    font-size: 1.05rem;
}
.pw-ad-heading {
    flex: 1;
    min-width: 0;
}
.pw-ad-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.pw-ad-kicker {
    margin: 3px 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: #e8d5a3;
    line-height: 1.4;
}

/* شارة الحالة: النبضة تميّز «مفتوحة الآن» عن «تبدأ قريبًا» بلا قراءة نصّ */
.pw-ad-state {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(46, 160, 87, 0.18);
    border: 1px solid rgba(126, 217, 160, 0.55);
    color: #b8f0cd;
}
.pw-ad-state::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pw-ad-pulse 2s ease-in-out infinite;
}
.pw-ad.is-upcoming .pw-ad-state {
    background: rgba(201, 169, 89, 0.18);
    border-color: rgba(201, 169, 89, 0.55);
    color: #e8d5a3;
}
.pw-ad.is-ended .pw-ad-state {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.75);
}
.pw-ad.is-ended .pw-ad-state::before {
    animation: none;
}
@keyframes pw-ad-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.82); }
}

.pw-timer {
    min-width: 0;
}
.pw-timer[hidden] {
    display: none;
}
/* التسمية داخل الإعلان مكرّرة في pw-ad-kicker، فتُخفى بصريًّا وتبقى للقارئ */
.pw-ad .pw-timer-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* في سياق عربي تُرتَّب الخانات من اليمين: يوم ثم ساعة ثم دقيقة ثم ثانية.
   بسقف عرض ومحاذاة وسطى: إعلان واحد يملأ الصفحة كلها، وبلا السقف تصير
   الخانات الأربع صناديق ضخمة متباعدة. */
.pw-timer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 620px;
    margin-inline: auto;
}
.pw-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 6px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.09);
}
/* أرقام بعرض ثابت واتجاه يسار-يمين: بدونهما يرتجّ الصندوق كل ثانية */
.pw-num {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: 'Segoe UI', Tahoma, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}
.pw-cap {
    margin-top: 4px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.78);
}
.pw-timer-when {
    margin: 12px 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.5;
    text-align: center;
}

/* الساعة الأخيرة: الذهبي يلفت دون لون إنذار أحمر يربك الطالب */
.pw-timer.is-urgent .pw-num {
    color: #e8d5a3;
}
.pw-ad.is-urgent {
    border-color: #c9a959;
    box-shadow: 0 0 0 3px rgba(201, 169, 89, 0.22), 0 10px 26px rgba(4, 12, 22, 0.35);
}

.pw-timer.is-ended .pw-timer-grid {
    display: none;
}

/* زرّ فترة لم تبدأ بعد: معطَّل بصريًّا، والنقر عليه مُمنَع في السكربت.
   الزرّ الوحيد للخدمة هو زرّ البطاقة — لا زرّ في الإعلان كي لا يتكرّر. */
[data-portal-link].is-waiting {
    opacity: 0.55;
    cursor: not-allowed;
}
.btn-outline-primary-custom.is-waiting:hover {
    background: transparent;
    color: #0a1a2e;
}

@media (max-width: 575.98px) {
    .pw-ad {
        padding: 14px;
    }
    .pw-ad-head {
        flex-wrap: wrap;
    }
    .pw-ad-banner {
        font-size: 1rem;
        gap: 9px;
    }
    .pw-ad-banner-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    .pw-timer-grid {
        gap: 7px;
    }
    .pw-unit {
        padding: 9px 3px 7px;
    }
    .pw-num {
        font-size: 1.75rem;
    }
    .pw-cap {
        font-size: 0.82rem;
    }
    .pw-ad-title {
        font-size: 1.15rem;
    }
    .pw-ad-kicker {
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pw-ad-state::before { animation: none; }
    .pw-ad-banner-icon { animation: none; }
}

/* ==========================================================================
   صندوق «انتهى حاليًّا تقديم الخدمات الإلكترونية»

   نبرته محايدة لا تحذيريّة: لا أحمر ولا أيقونة خطأ. لا شيء تعطّل — الفترة
   انتهت وموعد القادمة سيُعلَن، وتلوينه كعطل يجعل الطالب يتصل بالمعهد
   ليسأل عن خلل غير موجود.

   ويقف على خلفية فاتحة بحافّة ذهبية: القسم الذي فوقه فاتح، وصندوق داكن
   بعرضه كان سيصير هو بطل الصفحة بدل البطاقتين.
   ========================================================================== */
.pw-notice {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    max-width: 880px;
    margin: 38px auto 0;
    padding: 22px 26px;
    background: #fffdf7;
    border: 1px solid rgba(201, 169, 89, 0.55);
    border-inline-start: 5px solid #c9a959;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(10, 26, 46, 0.07);
}
.pw-notice[hidden] {
    display: none;
}

.pw-notice-icon {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 89, 0.18);
    color: #8a6d2f;
    font-size: 1.2rem;
}

.pw-notice-body {
    flex: 1;
    min-width: 0;
}

.pw-notice-title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0a1a2e;
    line-height: 1.5;
}

.pw-notice-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.9;
    color: #42566b;
}
.pw-notice-text strong {
    color: #0a1a2e;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .pw-notice {
        gap: 12px;
        margin-top: 28px;
        padding: 18px;
        /* الأيقونة فوق النصّ: جنبه على عرض الهاتف تترك للنصّ عمودًا ضيّقًا */
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .pw-notice-title {
        font-size: 1.08rem;
    }
    .pw-notice-text {
        font-size: 0.95rem;
    }
}