/* --- GLOBAL STYLES & VARIABLES --- */
:root {
    --bg-color: #F8F9FA;
    --bg-accent-color: #FFFFFF;
    --text-color: #343a40;
    --text-muted-color: #6c757d;
    --primary-color: #4A90E2;
    --secondary-color: #50E3C2;
    --border-color: #dee2e6;
    --shadow-color: rgba(0, 0, 0, 0.05);
    
    --sunday-color: #d9534f;
    --saturday-color: #999;
    --holiday-bg-color: #FFF3CD;
    --holiday-text-color: #856404;
    --today-border-color: #4A90E2;

    --font-family: 'Noto Sans', sans-serif;
}

body.dark-mode {
    --bg-color: #121212;
    --bg-accent-color: #1e1e1e;
    --text-color: #EAEAEA;
    --text-muted-color: #9e9e9e;
    --primary-color: #58a6ff;
    --secondary-color: #39d3bb;
    --border-color: #333;
    --shadow-color: rgba(0, 0, 0, 0.2);

    --sunday-color: #ff7b72;
    --saturday-color: #aaa;
    --holiday-bg-color: #4d442a;
    --holiday-text-color: #ffe69c;
    --today-border-color: #58a6ff;
}

/* --- BASE & LAYOUT --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E9ECEF' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
body.dark-mode { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23343a40' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
body.sidebar-open { overflow: hidden; } /* Prevent background scroll when sidebar is open */
.container { display: flex; min-height: 100vh; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.hidden { display: none !important; }
.icon-btn { background: none; border: 1px solid var(--border-color); color: var(--text-color); font-size: 1.2rem; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.icon-btn:hover { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }

/* --- SIDE PANEL & OVERLAY --- */
.side-panel { width: 280px; background-color: var(--bg-accent-color); padding: 24px; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; transition: transform 0.3s ease; box-shadow: 2px 0 15px var(--shadow-color); z-index: 1001; }
.side-panel .logo { margin-bottom: 30px; text-align: center; }
.side-panel .logo h2 { font-size: 2rem; color: var(--text-color); font-weight: 700; }
.side-panel .logo h2 span { color: var(--primary-color); }
.side-panel .logo p { font-size: 1rem; color: var(--text-muted-color); }
.widget-section { flex-grow: 1; overflow-y: auto; margin-right: -10px; padding-right: 10px; } /* Makes this section scrollable */
.widget { background-color: var(--bg-color); border-radius: 12px; padding: 16px; margin-bottom: 20px; border: 1px solid var(--border-color); }
.widget h3 { font-size: 1rem; font-weight: 500; color: var(--text-muted-color); margin-bottom: 15px; display: flex; align-items: center; }
.widget h3 i { margin-right: 10px; color: var(--primary-color); }
.weather-info { display: flex; align-items: center; justify-content: space-evenly; text-align: center; }
.weather-info i { color: var(--primary-color); }
.weather-info .temp { font-size: 1.8rem; font-weight: 700; }
.weather-info .desc { font-size: 0.9rem; color: var(--text-muted-color); }
.prayer-times ul { list-style: none; }
.prayer-times li { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 6px 0; border-bottom: 1px dashed var(--border-color); }
.prayer-times li:last-child { border-bottom: none; }
.prayer-times li span:last-child { font-weight: 500; color: var(--primary-color); }
#countdown-display #next-holiday-name { font-weight: 500; margin-bottom: 10px; color: var(--secondary-color); }
#countdown-timer { display: flex; justify-content: space-around; text-align: center; font-size: 1.2rem; font-weight: 700; }
#countdown-timer span { font-size: 0.7rem; color: var(--text-muted-color); display: block; }
.app-options { margin-top: 20px; }
.app-options button { width: 100%; padding: 12px; background-color: var(--primary-color); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s, opacity 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.app-options button:hover { background-color: #357ABD; }
body.dark-mode .app-options button:hover { background-color: #6baaff; }
.app-options button:disabled { background-color: var(--text-muted-color); cursor: not-allowed; opacity: 0.7; }

#page-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
body.sidebar-open #page-overlay { opacity: 1; visibility: visible; }
.close-btn { position: absolute; top: 15px; right: 15px; display: none; }


/* --- MAIN CONTENT LAYOUT --- */
.main-content { flex-grow: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
#toggle-sidebar-btn { display: none; margin-right: 15px;}
.page-header .header-text h1 { font-size: 1.8rem; margin-bottom: 4px; }
.page-header .header-text p { color: var(--text-muted-color); }
.header-right { display: flex; align-items: center; gap: 16px; text-align: right; }
#live-time { font-size: 1.2rem; font-weight: 700; color: var(--primary-color); }
#live-date { font-size: 0.8rem; color: var(--text-muted-color); }
.toggle-switch { display: flex; align-items: center; background-color: var(--bg-color); border-radius: 20px; padding: 4px; border: 1px solid var(--border-color); }
.toggle-switch label { cursor: pointer; padding: 4px 8px; color: var(--text-muted-color); }
#dark-mode-toggle:checked + .fa-sun { color: #f39c12; }
#dark-mode-toggle:not(:checked) + .fa-moon { color: var(--primary-color); }
.section-divider { border: none; height: 1px; background-color: var(--border-color); margin: 40px 0; }

/* --- YEARLY & INTERACTIVE CALENDARS --- */
#yearly-view-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.mini-calendar { background: var(--bg-accent-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; box-shadow: 0 4px 10px var(--shadow-color); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.mini-calendar:hover { transform: translateY(-5px); box-shadow: 0 8px 20px var(--shadow-color); border-color: var(--primary-color); }
.mini-cal-header { font-size: 1.1rem; font-weight: 700; text-align: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.mini-cal-days-header, .mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 5px; }
.mini-cal-days-header div { font-size: 0.8rem; font-weight: 500; color: var(--text-muted-color); }
.mini-cal-days-header div:first-child { color: var(--sunday-color); }
.mini-day { font-size: 0.85rem; padding: 2px; border-radius: 4px; }
.mini-day.sunday { color: var(--sunday-color); }
.mini-day.holiday { background-color: var(--holiday-bg-color); color: var(--holiday-text-color); font-weight: 700; }
.mini-day.other-month { visibility: hidden; }

#interactive-calendar-section { background-color: var(--bg-accent-color); padding: 24px; border-radius: 12px; box-shadow: 0 4px 15px var(--shadow-color); border: 1px solid var(--border-color);}
.sticky-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; gap: 15px; }
.month-navigator { display: flex; align-items: center; flex-grow: 1; }
#month-year-header { font-size: 1.5rem; margin: 0 20px; width: 200px; text-align: center; }
.nav-btn { background: none; border: none; font-size: 1.2rem; color: var(--text-muted-color); cursor: pointer; padding: 8px; transition: color 0.2s; }
.nav-btn:hover { color: var(--primary-color); }
/* NEW: Wrapper for action buttons */
.header-actions-group { display: flex; align-items: center; gap: 10px; }
.month-actions { display: flex; gap: 10px; }
.action-btn { padding: 8px 16px; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text-color); }
.action-btn:hover { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.action-btn i { color: var(--secondary-color); transition: color 0.2s; }
.action-btn:hover i { color: white; }
#today-btn { padding: 8px 16px; background-color: var(--secondary-color); border: 1px solid var(--secondary-color); color: #fff; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: 500; }
body.dark-mode #today-btn { background-color: #39d3bb; border-color: #39d3bb; }
#today-btn:hover { opacity: 0.8; }

.calendar-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 10px; background-color: var(--bg-color); border-radius: 12px; flex-wrap: wrap; gap: 15px; }
.filter-group, .toggle-group { display: flex; align-items: center; gap: 10px; }
.filter-label { font-weight: 500; }
.filter-btn { padding: 6px 12px; border: 1px solid var(--border-color); background: none; color: var(--text-muted-color); border-radius: 20px; cursor: pointer; transition: all 0.2s; font-size: 0.9rem; }
.filter-btn.active, .filter-btn:hover { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--secondary-color); }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 24px; }
.slider.round:before { border-radius: 50%; }
.calendar-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 500; color: var(--text-muted-color); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.calendar-header div:first-child { color: var(--sunday-color); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.calendar-day { aspect-ratio: 1 / 0.9; padding: 8px; border: 1px solid var(--border-color); border-radius: 8px; transition: all 0.2s; font-size: 0.9rem; position: relative; display: flex; flex-direction: column; }
.calendar-day.other-month { background-color: var(--bg-color); opacity: 0.6; }
.day-number { font-size: 1.1rem; font-weight: 500; margin-bottom: 4px; }
.calendar-day.sunday .day-number { color: var(--sunday-color); }
.calendar-day.saturday { color: var(--saturday-color); }
.calendar-day.today { border: 2px solid var(--today-border-color); }
.calendar-day.today .day-number { background: var(--primary-color); color: #fff; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.holiday { background-color: var(--holiday-bg-color); border: 1px solid var(--holiday-text-color); }
.holiday .holiday-name { font-size: 0.7rem; margin-top: auto; color: var(--holiday-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.holiday-icon { position: absolute; top: 5px; right: 5px; font-size: 1rem; }
.hijri-date { font-size: 0.7rem; color: var(--secondary-color); margin-top: 4px; display: none; }
body.show-hijri .hijri-date { display: block; }
#monthly-holidays-list { margin-top: 24px; padding: 16px; border: 1px solid var(--border-color); border-radius: 12px; background-color: var(--bg-color); }
#monthly-holidays-list h3 { font-size: 1.1rem; margin-bottom: 10px; }
#monthly-holidays-list ul { list-style: none; }
#monthly-holidays-list li { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border-color); }
#monthly-holidays-list li:last-child { border-bottom: none; }
#monthly-holidays-list .date { font-weight: 700; color: var(--primary-color); margin-right: 15px; min-width: 30px; text-align: right; }
#monthly-holidays-list .name { color: var(--text-color); }


/* --- SEO CONTENT & FOOTER --- */
.seo-content { background-color: var(--bg-accent-color); padding: 24px; border-radius: 12px; margin-top: 40px; border: 1px solid var(--border-color); }
.seo-content h2 { font-size: 1.5rem; margin-bottom: 16px; color: var(--primary-color); }
.seo-content h3 { font-size: 1.2rem; margin-top: 20px; margin-bottom: 10px; }
.seo-content p, .seo-content li { line-height: 1.7; color: var(--text-muted-color); }
.seo-content ul { list-style-position: inside; padding-left: 10px; }
.seo-content li { margin-bottom: 8px; }
.site-footer { margin-top: auto; padding: 24px 0; text-align: center; border-top: 1px solid var(--border-color); color: var(--text-muted-color); }
.footer-links { margin-bottom: 10px; }
.footer-links a { color: var(--text-muted-color); text-decoration: none; margin: 0 10px; transition: color 0.2s; }
.footer-links a:hover { color: var(--primary-color); }
.footer-copyright { font-size: 0.9rem; }

/* --- MODAL POPUP --- */
.modal { position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.modal.visible { opacity: 1; visibility: visible; }
.modal-content { background-color: var(--bg-accent-color); color: var(--text-color); margin: auto; padding: 30px; border: 1px solid var(--border-color); width: 90%; max-width: 450px; border-radius: 12px; text-align: center; position: relative; box-shadow: 0 5px 20px rgba(0,0,0,0.2); transform: scale(0.9); transition: transform 0.3s ease; }
.modal.visible .modal-content { transform: scale(1); }
.close-modal-btn { position: absolute; top: 10px; right: 15px; color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; background: none; border: none; }
#modal-body h2 { font-size: 1.5rem; margin-bottom: 15px; color: var(--primary-color); }
#modal-body p { font-size: 1rem; color: var(--text-muted-color); line-height: 1.6; }
#modal-body .modal-icon { font-size: 3rem; color: var(--secondary-color); margin-bottom: 15px; }
/* NEW: Style for premium promo modal */
.modal-premium-promo .modal-icon i { color: #FFD700; /* Gold color for star */ }


/* --- NEW: TOAST NOTIFICATION --- */
.toast {
    position: fixed;
    bottom: -100px; /* Start off-screen */
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 8px;
    background-color: var(--text-color);
    color: var(--bg-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-size: 0.9rem;
    z-index: 3000;
    transition: bottom 0.5s ease-in-out;
}
.toast.show {
    bottom: 20px; /* Slide in */
}


/* --- RESPONSIVE DESIGN & FIXES --- */
@media (max-width: 1200px) {
    .container { flex-direction: column; }
    .side-panel { position: fixed; left: 0; top: 0; height: 100%; transform: translateX(-100%); }
    .side-panel.open { transform: translateX(0); }
    #toggle-sidebar-btn, .close-btn { display: flex; }
    .main-content { padding: 16px; }
    .page-header .header-text h1 { font-size: 1.5rem; }
    .page-header .header-right { margin-left: auto; }
}

@media (max-width: 768px) {
    body { font-size: 14px; }
    #yearly-view-container { grid-template-columns: 1fr; }
    /* UPDATED: Better responsive header for interactive calendar */
    .sticky-header { flex-direction: row; justify-content: space-between; align-items: center; }
    .month-navigator { width: 100%; justify-content: space-between; order: 1; }
    .header-actions-group { width: 100%; justify-content: center; order: 2; margin-top: 15px;}
    #month-year-header { width: auto; font-size: 1.3rem; margin: 0 10px; flex-grow: 1; text-align: center; }
    
    .calendar-controls { flex-direction: column; align-items: stretch; }
    .filter-group { flex-wrap: wrap; justify-content: center; }
    #interactive-calendar-section { padding: 16px; }
    .calendar-grid { gap: 4px; }
    .calendar-day { padding: 5px; min-height: 80px; font-size: 0.8rem; }
    .day-number { font-size: 1rem; }
    .holiday .holiday-name { font-size: 0.65rem; line-height: 1.1; white-space: normal; word-break: break-word; }
    .hijri-date { font-size: 0.65rem; margin-top: 2px;}
    .calendar-day.today .day-number { width: 24px; height: 24px; font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .page-header .header-text h1 { font-size: 1.3rem; }
    .header-right { gap: 10px; }
    
    /* REMOVED: display:none for #live-time. It will now be visible on mobile. */
    
    .filter-btn { padding: 5px 10px; font-size: 0.8rem;}
    .action-btn span { display: none; } /* Hide text, show only icon */
    .action-btn { padding: 8px 12px; }
    .action-btn i { margin: 0; font-size: 1.2rem; }
    #today-btn { padding: 8px 12px; font-size: 0.9rem; }
    .calendar-day { padding: 4px; min-height: 70px; }
    .day-number { font-size: 0.9rem; }
    .holiday .holiday-name, .hijri-date { font-size: 0.6rem; }
}




/* Force calendar grid to fit inside screen and not overflow */
#calendar-container {
    width: 100%;
    overflow-x: hidden;
}

/* Fix calendar grid layout on small screens */
@media (max-width: 768px) {
    .calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
    }

    .calendar-day {
        aspect-ratio: auto; /* Remove fixed aspect ratio */
        min-height: 70px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 0.75rem;
    }

    .calendar-day .holiday-name {
        font-size: 0.65rem;
        white-space: normal;
        word-break: break-word;
    }
}




  /* Base responsive styles */
  .responsive-media {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
 





        /* Blog Linking Section */
        .blog-section {
            margin: 40px 0;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 8px;
        }
        
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .blog-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .blog-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        .blog-content {
            padding: 15px;
        }
        
        .blog-content h3 {
            margin-top: 0;
        }
        
        .read-more {
            display: inline-block;
            margin-top: 10px;
            color: #2a6496;
            font-weight: bold;
            text-decoration: none;
        }
        
        .section-title {
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }