/* =========================================================
   MB ACADEMY
   ANNOUNCEMENT SYSTEM
   SMALL + LARGE
   PREMIUM THEME-AWARE
   ========================================================= */


/* =========================================================
   =========================================================
   SMALL ANNOUNCEMENT BAR
   =========================================================
   ========================================================= */


/* =========================================================
   MAIN BAR
   ========================================================= */

.announcement-bar {

    position: relative;

    width: 100%;

    height: 46px;
    min-height: 46px;
    max-height: 46px;

    margin: 0;
    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,

            color-mix(
                in srgb,
                var(--primary, #0EA5A8) 78%,
                #061417 22%
            ),

            color-mix(
                in srgb,
                var(--primary-dark, #087F82) 88%,
                #02090a 12%
            )
        ) !important;

    backdrop-filter:
        blur(24px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(160%);

    border-top:
        1px solid rgba(255,255,255,0.16) !important;

    border-bottom:
        1px solid rgba(255,255,255,0.10) !important;

    border-left: none !important;
    border-right: none !important;

    box-shadow:
        0 8px 30px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.12);

    z-index: 50;
}


/* =========================================================
   MOVING GLASS REFLECTION
   ========================================================= */

.announcement-bar::before {

    content: "";

    position: absolute;

    top: -180%;
    left: -35%;

    width: 22%;
    height: 460%;

    z-index: 20;

    pointer-events: none;

    transform: rotate(18deg);

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(255,255,255,0.015) 20%,

            rgba(255,255,255,0.10) 40%,

            rgba(255,255,255,0.24) 50%,

            rgba(255,255,255,0.08) 60%,

            rgba(255,255,255,0.015) 80%,

            transparent 100%
        );

    filter: blur(10px);

    opacity: 0;

    animation:
        announcementSmallGlassShine
        11s
        ease-in-out
        infinite;
}


/* =========================================================
   SMALL GLASS SHINE
   ========================================================= */

@keyframes announcementSmallGlassShine {

    0% {

        left: -35%;
        opacity: 0;

    }

    12% {

        opacity: 0.20;

    }

    30% {

        opacity: 0.38;

    }

    50% {

        opacity: 0.30;

    }

    70% {

        opacity: 0.18;

    }

    88% {

        opacity: 0.05;

    }

    100% {

        left: 115%;
        opacity: 0;

    }

}


/* =========================================================
   WRAPPER
   ========================================================= */

.announcement-wrapper {

    position: relative;

    width: 100%;

    height: 46px;
    min-height: 46px;

    overflow: hidden !important;

    display: flex;

    align-items: center;

    box-sizing: border-box;
}


/* =========================================================
   START / END FADE
   ========================================================= */

.announcement-wrapper::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 15;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            rgba(2,8,10,0.92) 0%,

            rgba(2,8,10,0.48) 5%,

            transparent 15%,

            transparent 85%,

            rgba(2,8,10,0.48) 95%,

            rgba(2,8,10,0.92) 100%
        );
}


/* =========================================================
   MOVING TRACK
   ========================================================= */

.announcement-track {

    position: absolute;

    top: 0;

    height: 46px;

    display: inline-flex;

    align-items: center;

    width: max-content;

    white-space: nowrap;

    gap: 100px;

    z-index: 10;

    will-change: transform;

    animation-duration: 42s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;
}


/* =========================================================
   RTL
   ========================================================= */

.announcement-bar[dir="rtl"]
.announcement-track {

    left: 0;
    right: auto;

    animation-name:
        announcementArabicMove;
}


/* =========================================================
   LTR
   ========================================================= */

.announcement-bar[dir="ltr"]
.announcement-track {

    right: 0;
    left: auto;

    animation-name:
        announcementEnglishMove;
}


/* =========================================================
   TEXT
   ========================================================= */

.announcement-item {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    height: 46px;

    flex-shrink: 0;

    padding: 0 20px;

    white-space: nowrap;

    font-size: 16px;

    font-weight: 600;

    line-height: 1;

    color: #ffffff !important;

    text-shadow:
        0 2px 8px rgba(0,0,0,0.70);

    direction: ltr;
}


/* =========================================================
   ARABIC TEXT
   ========================================================= */

.announcement-bar[dir="rtl"]
.announcement-item {

    direction: rtl;

    text-align: right;
}


/* =========================================================
   ENGLISH TEXT
   ========================================================= */

.announcement-bar[dir="ltr"]
.announcement-item {

    direction: ltr;

    text-align: left;
}


/* =========================================================
   ARABIC MOVEMENT
   ========================================================= */

@keyframes announcementArabicMove {

    from {

        transform:
            translateX(-100%);

    }

    to {

        transform:
            translateX(100%);

    }

}


/* =========================================================
   ENGLISH MOVEMENT
   ========================================================= */

@keyframes announcementEnglishMove {

    from {

        transform:
            translateX(100%);

    }

    to {

        transform:
            translateX(-100%);

    }

}


/* =========================================================
   SMALL HOVER
   ========================================================= */

.announcement-bar:hover
.announcement-track {

    animation-play-state: paused;
}


.announcement-bar:hover::before {

    animation-play-state: paused;
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark-mode
.announcement-bar {

    background:
        linear-gradient(
            180deg,

            color-mix(
                in srgb,
                var(--primary, #0EA5A8) 58%,
                #020809 42%
            ),

            color-mix(
                in srgb,
                var(--primary-dark, #087F82) 72%,
                #010405 28%
            )
        ) !important;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

body.light-mode
.announcement-bar {

    background:
        linear-gradient(
            180deg,

            color-mix(
                in srgb,
                var(--primary, #0EA5A8) 78%,
                #061417 22%
            ),

            color-mix(
                in srgb,
                var(--primary-dark, #087F82) 88%,
                #02090a 12%
            )
        ) !important;
}


/* =========================================================
   THEME LUXE
   ========================================================= */

body.theme-luxe
.announcement-bar {

    background:
        linear-gradient(
            180deg,

            color-mix(
                in srgb,
                var(--primary, #0EA5A8) 78%,
                #061417 22%
            ),

            color-mix(
                in srgb,
                var(--primary-dark, #087F82) 88%,
                #02090a 12%
            )
        ) !important;
}


/* =========================================================
   THEME LUXE + DARK
   ========================================================= */

body.dark-mode.theme-luxe
.announcement-bar {

    background:
        linear-gradient(
            180deg,

            color-mix(
                in srgb,
                var(--primary, #0EA5A8) 58%,
                #020809 42%
            ),

            color-mix(
                in srgb,
                var(--primary-dark, #087F82) 72%,
                #010405 28%
            )
        ) !important;
}


/* =========================================================
   MOBILE - SMALL
   ========================================================= */

@media (max-width: 768px) {

    .announcement-bar {

        height: 44px;

        min-height: 44px;

        max-height: 44px;

    }


    .announcement-wrapper {

        height: 44px;

        min-height: 44px;

    }


    .announcement-track {

        height: 44px;

        gap: 70px;

        animation-duration: 46s;

    }


    .announcement-item {

        height: 44px;

        font-size: 14px;

        padding: 0 12px;

    }

}


/* =========================================================
   REDUCED MOTION - SMALL
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .announcement-track {

        animation: none !important;

    }

    .announcement-bar::before {

        animation: none !important;

    }

}


/* =========================================================
   =========================================================
   LARGE ANNOUNCEMENT
   =========================================================
   ========================================================= */


/* =========================================================
   DISPLAY
   ========================================================= */

.announcement-display {

    width: 100%;

    padding: 45px 20px;

    box-sizing: border-box;
}


/* =========================================================
   LARGE GLASS SCREEN
   ========================================================= */

.announcement-screen {

    position: relative;

    width: 100%;

    max-width: 1200px;

    height: 360px;
    min-height: 360px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary, #0EA5A8) 28%,
                #0f172a 72%
            ),

            color-mix(
                in srgb,
                var(--primary-dark, #087F82) 34%,
                #1e293b 66%
            )
        );

    border:
        1px solid rgba(255,255,255,0.12);

    backdrop-filter:
        blur(20px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(140%);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(255,255,255,0.04);

    box-sizing: border-box;
}


/* =========================================================
   LARGE GLASS SHINE
   ========================================================= */

.announcement-screen::before {

    content: "";

    position: absolute;

    top: 0;

    left: -60%;

    width: 45%;

    height: 100%;

    pointer-events: none;

    z-index: 25;

    background:
        linear-gradient(
            105deg,

            transparent 0%,

            rgba(255,255,255,0.02) 30%,

            rgba(255,255,255,0.12) 50%,

            rgba(255,255,255,0.02) 70%,

            transparent 100%
        );

    transform:
        skewX(-18deg);

    animation:
        announcementLargeGlassShine
        8s
        ease-in-out
        infinite;
}


/* =========================================================
   LARGE SHINE ANIMATION
   ========================================================= */

@keyframes announcementLargeGlassShine {

    0% {

        left: -60%;

        opacity: 0;

    }

    15% {

        opacity: 0.25;

    }

    50% {

        opacity: 0.55;

    }

    75% {

        opacity: 0.25;

    }

    100% {

        left: 120%;

        opacity: 0;

    }

}


/* =========================================================
   SLIDER
   ========================================================= */

.announcement-slider {

    position: relative;

    width: 100%;

    height: 360px;

    overflow: hidden;
}


/* =========================================================
   SLIDE
   ========================================================= */

.announcement-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: stretch;

    opacity: 0;

    visibility: hidden;

    transform:
        translateX(70px)
        scale(0.97);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        visibility 0.8s ease;

    box-sizing: border-box;
}


/* =========================================================
   ACTIVE SLIDE
   ========================================================= */

.announcement-slide.active {

    opacity: 1;

    visibility: visible;

    transform:
        translateX(0)
        scale(1);
}


/* =========================================================
   IMAGE AREA
   ========================================================= */

.announcement-image {

    position: relative;

    width: 42%;

    height: 100%;

    flex: 0 0 42%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        rgba(255,255,255,0.05);

    z-index: 2;

    /* لا يوجد zoom-in */
    cursor: default;
}


/* =========================================================
   IMAGE
   الصورة كاملة بدون قص
   ========================================================= */

.announcement-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

    object-position: center center;

    transform: scale(1);

    transition:
        transform 0.9s
        cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* =========================================================
   IMAGE MOTION
   حركة بسيطة عند ظهور الإعلان
   ========================================================= */

.announcement-slide.active
.announcement-image img {

    animation:
        announcementImageMotion
        6s
        ease-out
        forwards;
}


/* =========================================================
   IMAGE MOTION
   تكبير بسيط جدًا أثناء ظهور الإعلان
   بدون Hover
   ========================================================= */

@keyframes announcementImageMotion {

    0% {

        transform:
            scale(1);

    }

    100% {

        transform:
            scale(1.025);

    }

}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.announcement-image::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 5;

    background:
        linear-gradient(
            90deg,

            rgba(0,0,0,0.02),

            rgba(0,0,0,0.10)
        );
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.announcement-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 65px;

    color:
        rgba(255,255,255,0.70);

    background:
        linear-gradient(
            135deg,

            rgba(255,255,255,0.07),

            rgba(255,255,255,0.02)
        );
}


/* =========================================================
   CONTENT
   ========================================================= */

.announcement-content {

    width: 58%;

    height: 100%;

    flex: 0 0 58%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 40px 55px;

    color: #ffffff;

    box-sizing: border-box;

    position: relative;

    z-index: 3;
}


/* =========================================================
   BRAND
   ========================================================= */

.announcement-brand {

    display: inline-block;

    width: fit-content;

    margin-bottom: 12px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    color:
        #d6a93a;
}


/* =========================================================
   TITLE
   ========================================================= */

.announcement-content h2 {

    margin: 0 0 15px;

    font-size: 34px;

    line-height: 1.25;

    font-weight: 800;

    color: #ffffff;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.announcement-content p {

    margin: 0;

    max-width: 650px;

    font-size: 18px;

    line-height: 1.7;

    color:
        rgba(255,255,255,0.82);
}


/* =========================================================
   RTL
   ========================================================= */

.announcement-display[dir="rtl"] {

    direction: rtl;
}


.announcement-display[dir="rtl"]
.announcement-content {

    text-align: right;
}


.announcement-display[dir="rtl"]
.announcement-slide {

    direction: rtl;
}


/* =========================================================
   LTR
   ========================================================= */

.announcement-display[dir="ltr"] {

    direction: ltr;
}


.announcement-display[dir="ltr"]
.announcement-content {

    text-align: left;
}


.announcement-display[dir="ltr"]
.announcement-slide {

    direction: ltr;
}


/* =========================================================
   ARROWS
   ========================================================= */

.announcement-arrow {

    position: absolute;

    top: 50%;

    z-index: 40;

    width: 46px;

    height: 46px;

    padding: 0;

    border:
        1px solid rgba(255,255,255,0.16);

    border-radius: 50%;

    transform:
        translateY(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(255,255,255,0.10);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    color: #ffffff;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   ARROW HOVER
   ========================================================= */

.announcement-arrow:hover {

    background:
        rgba(255,255,255,0.20);

    transform:
        translateY(-50%)
        scale(1.08);

    box-shadow:
        0 8px 25px rgba(0,0,0,0.20);
}


/* =========================================================
   PREVIOUS
   ========================================================= */

.announcement-prev {

    left: 18px;
}


/* =========================================================
   NEXT
   ========================================================= */

.announcement-next {

    right: 18px;
}


/* =========================================================
   DOTS
   ========================================================= */

.announcement-dots {

    position: absolute;

    bottom: 15px;

    left: 50%;

    z-index: 45;

    display: flex;

    align-items: center;

    gap: 8px;

    transform:
        translateX(-50%);
}


/* =========================================================
   DOT
   ========================================================= */

.announcement-dot {

    width: 8px;

    height: 8px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.35);

    cursor: pointer;

    transition:
        width 0.3s ease,
        background 0.3s ease;
}


/* =========================================================
   ACTIVE DOT
   ========================================================= */

.announcement-dot.active {

    width: 25px;

    border-radius: 10px;

    background:
        var(--primary, #0EA5A8);
}


/* =========================================================
   LARGE DARK MODE
   ========================================================= */

body.dark-mode
.announcement-screen {

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary, #0EA5A8) 24%,
                #0b111b 76%
            ),

            color-mix(
                in srgb,
                var(--primary-dark, #087F82) 30%,
                #111827 70%
            )
        );
}


/* =========================================================
   LARGE LIGHT MODE
   ========================================================= */

body.light-mode
.announcement-screen {

    background:
        linear-gradient(
            135deg,

            color-mix(
                in srgb,
                var(--primary, #0EA5A8) 30%,
                #0f172a 70%
            ),

            color-mix(
                in srgb,
                var(--primary-dark, #087F82) 36%,
                #1e293b 64%
            )
        );

    border-color:
        rgba(255,255,255,0.12);
}


body.light-mode
.announcement-content {

    color: #ffffff;
}


body.light-mode
.announcement-content h2 {

    color: #ffffff;
}


body.light-mode
.announcement-content p {

    color:
        rgba(255,255,255,0.82);
}


/* =========================================================
   LARGE MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .announcement-display {

        padding:
            30px 12px;
    }


    .announcement-screen {

        height: 520px;

        min-height: 520px;

        border-radius: 22px;
    }


    .announcement-slider {

        height: 520px;
    }


    .announcement-slide {

        flex-direction: column;

        transform:
            translateY(40px)
            scale(0.97);
    }


    .announcement-slide.active {

        transform:
            translateY(0)
            scale(1);
    }


    .announcement-image {

        width: 100%;

        height: 230px;

        flex: 0 0 230px;

        cursor: default;
    }


    .announcement-content {

        width: 100%;

        height: auto;

        flex: 1;

        padding: 25px;

        justify-content: center;
    }


    .announcement-content h2 {

        font-size: 24px;
    }


    .announcement-content p {

        font-size: 15px;

        line-height: 1.6;
    }


    .announcement-arrow {

        width: 38px;

        height: 38px;

        font-size: 27px;
    }


    .announcement-prev {

        left: 10px;
    }


    .announcement-next {

        right: 10px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .announcement-track {

        animation: none !important;
    }


    .announcement-bar::before {

        animation: none !important;
    }


    .announcement-screen::before {

        animation: none !important;
    }


    .announcement-slide {

        transition: none !important;
    }


    .announcement-image img {

        animation: none !important;

        transition: none !important;
    }

}