/* ==================================
   THEME SYSTEM - CELEBRATION THEMES
   ================================== */

/* ---- THEME OVERLAY BASE ---- */
.theme-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9990;
    overflow: hidden;
}
.theme-overlay #themeCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ---- THEME BANNER ---- */
.theme-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9995;
    padding: 0;
    animation: themeBannerSlide 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition: all 0.5s ease;
}
.theme-banner.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}
@keyframes themeBannerSlide {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.theme-banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    position: relative;
}
.theme-banner-icon {
    font-size: 24px;
    flex-shrink: 0;
    animation: themeBannerIconPulse 2s ease-in-out infinite;
}
@keyframes themeBannerIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.theme-banner-text {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
}
.theme-banner-close {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    color: inherit;
    font-size: 12px;
    transition: all 0.3s ease;
}
.theme-banner-close:hover {
    background: rgba(255,255,255,0.35);
}

/* ===============================
   RAMADAN THEME - رمضان كريم
   =============================== */
.theme-ramadan {
    /* Ramadan overlay - particles handled by JS */
    pointer-events: none;
}

.theme-banner-ramadan .theme-banner-content {
    background: linear-gradient(135deg, #1a0a2e, #2d1b4e, #1a0a2e);
    color: #FFD700;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

/* Lanterns */
.ramadan-lantern {
    position: absolute;
    z-index: 2;
    animation: lanternSwing 4s ease-in-out infinite;
    transform-origin: top center;
}
.lantern-1 {
    top: 0;
    right: 5%;
    animation-delay: 0s;
}
.lantern-2 {
    top: 0;
    right: 15%;
    animation-delay: 1s;
}
.lantern-3 {
    top: 0;
    left: 8%;
    animation-delay: 0.5s;
}
@keyframes lanternSwing {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

.ramadan-crescent {
    position: absolute;
    top: 15%;
    left: 3%;
    animation: crescentFloat 6s ease-in-out infinite;
    opacity: 0.3;
}
@keyframes crescentFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

/* Body class adds atmosphere */
body.theme-active-ramadan {
    /* Ramadan atmosphere applied to body */
    --theme-accent: #FFD700;
}
body.theme-active-ramadan .header-top-bar {
    background: linear-gradient(135deg, #1a0a2e, #2d1b4e) !important;
}
body.theme-active-ramadan .navbar.fixed-top {
    box-shadow: 0 2px 20px rgba(255, 215, 0, 0.1);
}

/* ===============================
   EID AL-FITR THEME - عيد الفطر
   =============================== */
.theme-banner-eid_fitr .theme-banner-content {
    background: linear-gradient(135deg, #2d6a4f, #40916c, #2d6a4f);
    color: #fff;
    border-bottom: 2px solid rgba(78, 205, 196, 0.3);
}

.eid-mosque-silhouette {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath d='M0 80 L0 60 Q50 55 100 60 L100 40 Q120 20 140 40 L140 60 Q200 55 260 60 L260 50 Q280 30 300 50 L300 60 Q400 55 500 60 L500 35 Q520 10 540 35 L540 60 Q600 50 660 60 L660 45 L670 30 Q680 15 690 30 L700 45 L700 60 Q800 55 900 60 L900 40 Q920 25 940 40 L940 60 Q1000 55 1060 60 L1060 50 Q1080 35 1100 50 L1100 60 Q1150 55 1200 60 L1200 80 Z' fill='rgba(45,106,79,0.08)'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: 100% 100%;
    pointer-events: none;
}

body.theme-active-eid_fitr .header-top-bar {
    background: linear-gradient(135deg, #2d6a4f, #40916c) !important;
}

/* ===============================
   EID AL-ADHA THEME - عيد الأضحى
   =============================== */
.theme-banner-eid_adha .theme-banner-content {
    background: linear-gradient(135deg, #3d2b1f, #5c3d2e, #3d2b1f);
    color: #D4AF37;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

body.theme-active-eid_adha .header-top-bar {
    background: linear-gradient(135deg, #3d2b1f, #5c3d2e) !important;
}

/* ===============================
   NATIONAL DAY THEME - العيد الوطني
   =============================== */
.theme-banner-national_day .theme-banner-content {
    background: linear-gradient(90deg, #CE1126 0%, #CE1126 25%, #fff 25%, #fff 50%, #000 50%, #000 75%, #007A3D 75%, #007A3D 100%);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    border-bottom: none;
}

.national-flag-stripe {
    position: absolute;
    height: 3px;
    width: 100%;
    left: 0;
}
.stripe-1 {
    top: 0;
    background: #CE1126;
    animation: stripeSlide 8s linear infinite;
}
.stripe-2 {
    bottom: 0;
    background: #007A3D;
    animation: stripeSlide 8s linear infinite reverse;
}
.stripe-3 {
    top: 50%;
    background: rgba(255,255,255,0.05);
    height: 1px;
}
@keyframes stripeSlide {
    0% { transform: translateX(0); opacity: 1; }
    50% { opacity: 0.5; }
    100% { transform: translateX(0); opacity: 1; }
}

body.theme-active-national_day .header-top-bar {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, #CE1126, #fff, #007A3D) 1;
}

/* ===============================
   NEW YEAR THEME - رأس السنة
   =============================== */
.theme-banner-new_year .theme-banner-content {
    background: linear-gradient(135deg, #0a0a2e, #1a1a4e, #0a0a2e);
    color: #FFD700;
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
}

body.theme-active-new_year .header-top-bar {
    background: linear-gradient(135deg, #0a0a2e, #1a1a4e) !important;
}

/* ===============================
   CUSTOM THEME - ثيم مخصص
   =============================== */
.theme-banner-custom .theme-banner-content {
    background: linear-gradient(135deg, #0d1117, #1a1a2e, #0d1117);
    color: #F4A407;
    border-bottom: 2px solid rgba(244, 164, 7, 0.3);
}

body.theme-active-custom .header-top-bar {
    background: linear-gradient(135deg, #0d1117, #1a1a2e) !important;
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 768px) {
    .ramadan-lantern svg {
        width: 25px !important;
        height: 42px !important;
    }
    .lantern-2 {
        display: none;
    }
    .theme-banner-text {
        font-size: 13px;
    }
    .theme-banner-icon {
        font-size: 20px;
    }
    .theme-banner-content {
        padding: 10px 15px;
    }
}
@media (max-width: 480px) {
    .ramadan-lantern {
        display: none;
    }
    .theme-banner-text {
        font-size: 12px;
    }
}