/* assets/css/style.css - Final Optimized Version */

/* =========================================
   1. المتغيرات والألوان (Variables)
   ========================================= */
:root {
    /* === الوضع الليلي (الافتراضي) === */
    --primary-dark: #051a11;
    --glass-bg: rgba(5, 26, 17, 0.95);
    --accent-gold: #d4af37;
    --text-color: #e6f2ea;
    --text-muted: #aab;
    
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-border: 1px solid rgba(255, 255, 255, 0.1);
    
    --input-bg: rgba(0, 0, 0, 0.4);
    --footer-bg: #020d09;
    --footer-border: 1px solid rgba(212, 175, 55, 0.2);
    
    /* Radio Colors */
    --radio-icon-bg: rgba(212, 175, 55, 0.1);
    --radio-icon-border: rgba(212, 175, 55, 0.3);

    /* Tafsir & Audio Player Colors (Dark) */
    --tafsir-card-bg: rgba(255, 255, 255, 0.05);
    --tafsir-card-border: rgba(255, 255, 255, 0.1);
    --player-bg: rgba(0, 0, 0, 0.3);
    --player-border: rgba(255, 255, 255, 0.05);
    --tafsir-title-color: #fff;
    --tafsir-text-muted: #ccc;
    --seek-bg-empty: rgba(255, 255, 255, 0.1);
    --hover-bg: rgba(255, 255, 255, 0.08);
}

/* === الوضع النهاري (Light Mode) === */
[data-theme="light"] {
    --primary-dark: #f0f4f8; 
    --glass-bg: rgba(255, 255, 255, 0.98);
    --accent-gold: #bfa145; 
    --text-color: #2c3e50;
    --text-muted: #6c757d;
    
    --card-bg: #ffffff;
    --card-border: 1px solid #e1e8ed;
    
    --input-bg: #f8f9fa;
    --footer-bg: #ffffff;
    --footer-border: 1px solid #e1e8ed;

    --radio-icon-bg: rgba(191, 161, 69, 0.1);
    --radio-icon-border: rgba(191, 161, 69, 0.3);

    /* Tafsir & Audio Player Colors (Light) */
    --tafsir-card-bg: #ffffff;
    --tafsir-card-border: rgba(0, 0, 0, 0.1);
    --player-bg: #f8f9fa; 
    --player-border: rgba(0, 0, 0, 0.08);
    --tafsir-title-color: #2c3e50;
    --tafsir-text-muted: #6c757d;
    --seek-bg-empty: rgba(0, 0, 0, 0.1);
    --hover-bg: #f1f3f5;
}

/* =========================================
   2. إعدادات أساسية (Global Reset)
   ========================================= */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--primary-dark);
    font-family: 'Cairo', sans-serif;
    color: var(--text-color);
    transition: background-color 0.4s ease, color 0.4s ease;
    overflow-x: hidden;
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; /* يجعل الفوتر دائماً في الأسفل */
    margin: 0;
}

body:not([data-theme="light"]) {
    background-image: radial-gradient(circle at 50% 0%, #0f2b1d 0%, var(--primary-dark) 80%);
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }

/* Background Pattern */
.bg-pattern {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    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='%23d4af37' fill-opacity='0.05'%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");
    z-index: -1; pointer-events: none;
}

/* =========================================
   3. المكونات العامة (Components)
   ========================================= */

/* Loader */
.loader-wrapper {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--primary-dark); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    flex-direction: column; transition: opacity 0.5s;
}
[data-theme="light"] .loader-wrapper { background: #f0f4f8; }

.loader-logo {
    width: 100px; height: auto;
    animation: heartbeat 1.5s infinite ease-in-out;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
}
@keyframes heartbeat {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Navbar */
.navbar {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--accent-gold);
    padding: 10px 0;
    transition: 0.3s;
}
.nav-link { 
    color: var(--text-color) !important; 
    font-weight: 600; margin: 0 10px; transition: 0.3s; 
}
.nav-link:hover, .nav-link.active-page { 
    color: var(--accent-gold) !important; 
    transform: translateY(-2px); 
}
.navbar-toggler { 
    border: 2px solid var(--accent-gold) !important; 
    padding: 5px 10px; 
}
.menu-icon { color: var(--accent-gold); font-size: 1.4rem; }

/* Floating Theme Button */
.theme-toggle-fixed {
    position: fixed; bottom: 30px; left: 30px;
    width: 50px; height: 50px;
    background: var(--accent-gold); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    cursor: pointer; z-index: 9999; border: none; transition: 0.3s;
}
.theme-toggle-fixed:hover { transform: scale(1.1) rotate(15deg); }
[data-theme="light"] .theme-toggle-fixed { background: #2c3e50; }

/* Hero Section */
.hero-section {
    min-height: 50vh; /* Changed from height to min-height for responsiveness */
    background: url('https://images.unsplash.com/photo-1575645513913-c002ea3b2e01?q=80&w=1973&auto=format&fit=crop') center/cover fixed;
    position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
}
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(5, 26, 17, 0.8), var(--primary-dark));
}
[data-theme="light"] .hero-overlay {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), var(--primary-dark));
}
.hero-title { 
    position: relative; z-index: 2; font-family: 'Amiri Quran', serif; 
    font-size: 3rem; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); padding: 0 20px;
    line-height: 1.6;
    margin-bottom: 120px;
}
[data-theme="light"] .hero-title { color: #1a1a1a; text-shadow: 0 2px 10px rgba(255,255,255,0.5); }

/* Glass Cards (General) */
.glass-card {
    background: var(--card-bg); border: var(--card-border); border-radius: 20px;
    padding: 40px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); backdrop-filter: blur(10px);
    margin-top: -60px; position: relative; z-index: 5;
}

/* Forms & Select2 */
.form-label { color: var(--accent-gold); font-weight: bold; margin-bottom: 10px; display: block; }
.select2-container--default .select2-selection--single {
    background-color: var(--input-bg) !important;
    border: 1px solid rgba(128,128,128,0.2) !important;
    color: var(--text-color) !important;
    height: 55px !important; display: flex; align-items: center; border-radius: 15px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-color) !important; }
.select2-dropdown { background-color: var(--glass-bg) !important; backdrop-filter: blur(20px); border: 1px solid var(--accent-gold) !important; }
.select2-results__option { color: var(--text-color) !important; }
.select2-results__option--highlighted { background-color: var(--accent-gold) !important; color: #fff !important; }

/* Buttons General */
.btn-gold {
    background: linear-gradient(135deg, var(--accent-gold), #b8860b);
    color: #000; border: none; padding: 12px 30px; height: 55px;
    border-radius: 50px; font-weight: 700; font-size: 1rem; 
    transition: 0.3s; box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3); 
    white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-width: 160px;
}
.btn-gold:hover { 
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(212, 175, 55, 0.5); color: #000; 
}
.btn-outline-gold {
    background: transparent; border: 2px solid var(--accent-gold); color: var(--accent-gold);
    padding: 10px 25px; border-radius: 50px; font-weight: 600; transition: 0.3s;
}
.btn-outline-gold:hover:not(:disabled) { 
    background: var(--accent-gold); color: #000; border-color: var(--accent-gold);
}
.btn-outline-gold:disabled { opacity: 0.4; cursor: not-allowed; border-color: #666; color: #666; }


/* =========================================
   4. مشغل الصوت الحديث (Modern Player Card)
   ========================================= */
.modern-player-card {
    background: var(--tafsir-card-bg);
    border: 1px solid var(--tafsir-card-border);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 15px;
}

.modern-player-card:hover {
    background: var(--player-bg);
    border-color: var(--accent-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.modern-player-card.active-playing {
    border-color: var(--accent-gold);
    background: linear-gradient(145deg, var(--tafsir-card-bg), rgba(212, 175, 55, 0.05));
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.1);
}

.play-btn-integrated {
    width: 55px; height: 55px; border-radius: 50%;
    background: var(--accent-gold); border: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; cursor: pointer;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0; box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}

.play-btn-integrated:hover { transform: scale(1.1); background: #fff; color: var(--accent-gold); }
.play-btn-integrated.playing { animation: pulse-gold 2s infinite; }

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.player-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.track-title {
    font-family: 'Amiri Quran', serif; font-size: 1.1rem;
    color: var(--tafsir-title-color); margin-bottom: 8px; font-weight: bold;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.timeline-container { display: flex; align-items: center; gap: 10px; }
.modern-seek {
    --webkit-appearance: none; width: 100%; height: 4px;
    background: var(--seek-bg-empty); border-radius: 2px;
    cursor: pointer; transition: height 0.2s;
}
.modern-seek:hover { height: 6px; }
.modern-seek::-webkit-slider-thumb {
    -webkit-appearance: none; width: 10px; height: 10px;
    border-radius: 50%; background: var(--accent-gold);
    margin-top: -3px; box-shadow: 0 0 5px rgba(0,0,0,0.2);
    transition: 0.2s; opacity: 0;
}
.modern-player-card:hover .modern-seek::-webkit-slider-thumb { opacity: 1; }

.time-text { font-size: 0.75rem; color: var(--tafsir-text-muted); min-width: 35px; font-family: monospace; }
.action-btn {
    width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--tafsir-text-muted); transition: 0.2s;
    background: transparent; border: 1px solid transparent; flex-shrink: 0;
}
.action-btn:hover {
    background: rgba(212, 175, 55, 0.1); color: var(--accent-gold);
    border-color: rgba(212, 175, 55, 0.2);
}

/* =========================================
   5. الراديو والمصحف الإلكتروني (Radio & Mushaf)
   ========================================= */
/* Radio */
.radio-icon-wrapper {
    width: 120px; height: 120px; font-size: 3.5rem;
    background: var(--player-bg); border: 2px solid var(--accent-gold);
    color: var(--accent-gold); display: flex; align-items: center; justify-content: center;
    border-radius: 50%; margin: 0 auto 20px; position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.radio-icon-wrapper.playing { animation: glow-pulse 2s infinite; }
.radio-icon-wrapper.playing::after {
    content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px;
    border-radius: 50%; border: 2px solid var(--accent-gold);
    animation: pulse-ring 1.5s infinite; opacity: 0;
}
@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes glow-pulse {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); } 70% { box-shadow: 0 0 20px 10px rgba(212, 175, 55, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}
#radioStationName { font-family: 'Amiri Quran', serif; font-size: 1.5rem; color: var(--text-color); }
.live-badge {
    background: rgba(220, 53, 69, 0.1); color: #dc3545; padding: 2px 8px;
    border-radius: 4px; font-weight: bold; font-size: 0.8rem;
    border: 1px solid rgba(220, 53, 69, 0.2); transition: opacity 0.3s;
}

/* Mushaf Page */
.mushaf-section { margin-top: -80px; position: relative; z-index: 10; padding-bottom: 50px; }
.selection-container { text-align: center; width: 100%; margin: 0 auto 30px; }
.selection-wrapper {
    display: flex; justify-content: center; align-items: center; 
    gap: 15px; max-width: 800px; margin: 20px auto; flex-wrap: nowrap;
}
.mushaf-display { display: none; flex-direction: column; align-items: center; margin-top: 30px; min-height: 600px; }
.mushaf-page {
    max-width: 100%; width: auto; max-height: 80vh;
    border-radius: 5px; box-shadow: 0 15px 50px rgba(0,0,0,0.7);
    border: 8px solid #fff; margin: 20px auto; background: #fff;
    display: block; transition: transform 0.3s ease;
}
.mushaf-page:hover { transform: scale(1.02); }
.surah-title { 
    color: var(--accent-gold); font-family: 'Amiri Quran', serif; 
    font-size: 2.2rem; margin-bottom: 15px; text-shadow: 0 2px 10px rgba(212, 175, 55, 0.4); 
}
.controls-wrapper { display: flex; justify-content: center; gap: 15px; margin-top: 20px; flex-wrap: wrap; }

/* =========================================
   6. الأذكار والقبلة والمسبحة (Azkar, Qibla, Tasbih)
   ========================================= */
/* Azkar Card */
.zekr-card {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px; padding: 25px; margin-bottom: 20px;
    transition: 0.3s; position: relative;
}
.zekr-card:hover {
    transform: translateY(-5px); background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 175, 55, 0.3); box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.zekr-text {
    font-size: 1.5rem; line-height: 2; color: var(--text-color);
    margin-bottom: 20px; font-family: 'Amiri Quran', serif; text-align: justify;
}
.zekr-controls {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px; margin-top: 15px;
}
.control-btn {
    border: none; background: rgba(255,255,255,0.1); color: var(--text-color);
    padding: 8px 15px; border-radius: 50px; font-size: 0.9rem;
    display: inline-flex; align-items: center; gap: 8px; transition: 0.3s; cursor: pointer;
}
.control-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.btn-audio { color: #4cd137; background: rgba(76, 209, 55, 0.1); }
.btn-audio:hover { background: rgba(76, 209, 55, 0.2); }
.btn-audio.playing { background: #4cd137; color: #000; animation: pulse-audio 1.5s infinite; }
@keyframes pulse-audio {
    0% { box-shadow: 0 0 0 0 rgba(76, 209, 55, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(76, 209, 55, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 209, 55, 0); }
}

/* Azkar Light Mode */
body.light-mode .zekr-card {
    background: linear-gradient(135deg, #ffffff 0%, #fffbf2 100%);
    border: 1px solid rgba(212, 175, 55, 0.2); border-top: 4px solid var(--accent-gold);
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1);
}
body.light-mode .zekr-card::before {
    content: '\f699'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: -20px; left: -20px; font-size: 8rem;
    color: rgba(212, 175, 55, 0.03); transform: rotate(15deg); z-index: 0;
}
body.light-mode .zekr-text { color: #051a11; text-shadow: none; position: relative; z-index: 1; }
body.light-mode .zekr-controls { background: rgba(245, 240, 225, 0.5); border-top: 1px dashed rgba(212, 175, 55, 0.3); position: relative; z-index: 1; }
body.light-mode .control-btn { background: #fff; color: #555; border: 1px solid #eee; }

/* Counter */
.counter-wrapper { flex-grow: 1; display: flex; align-items: center; gap: 10px; }
.counter-display {
    background: var(--accent-gold); color: #000; padding: 5px 15px;
    border-radius: 10px; font-weight: bold; font-size: 1.1rem; min-width: 50px; text-align: center;
}
.counter-tap-area {
    background: rgba(212, 175, 55, 0.1); border: 2px solid var(--accent-gold);
    color: var(--accent-gold); border-radius: 10px; padding: 10px 20px; cursor: pointer;
    flex-grow: 1; text-align: center; font-weight: bold; user-select: none; transition: 0.2s;
}
.counter-tap-area:active { transform: scale(0.95); background: rgba(212, 175, 55, 0.3); }
.counter-tap-area.done { background: #28a745; border-color: #28a745; color: #fff; cursor: default; }

body.light-mode .counter-display { background: #fff; color: var(--accent-gold); border: 2px solid var(--accent-gold); }
body.light-mode .counter-tap-area { background: var(--accent-gold); color: #fff; border: none; }
body.light-mode .counter-tap-area:hover { background: #b8860b; }
body.light-mode .counter-tap-area.done { background: #27ae60; }

/* Qibla */
.compass-container {
    position: relative; width: 250px; height: 250px; margin: 0 auto 20px;
    background: radial-gradient(circle, #1a1a1a, #000); border-radius: 50%;
    border: 4px solid var(--accent-gold);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2), inset 0 0 50px rgba(0,0,0,0.8);
    display: flex; align-items: center; justify-content: center;
}
.compass-container::before { content: 'N'; position: absolute; top: 10px; color: rgba(255,255,255,0.5); font-weight: bold; }
.compass-arrow {
    font-size: 5rem; color: var(--accent-gold); transform-origin: center;
    transition: transform 1.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6); filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}
.degree-text { font-size: 2.5rem; font-weight: 800; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
.status-text { color: var(--text-muted); font-size: 1rem; background: rgba(0,0,0,0.2); padding: 5px 15px; border-radius: 50px; }
.leaflet-popup-content-wrapper { background: rgba(10, 30, 20, 0.95); color: #fff; border: 1px solid var(--accent-gold); border-radius: 10px; }
.leaflet-popup-tip { background: var(--accent-gold); }

/* Tasbih */
.select-wrapper { position: relative; width: 280px; margin: 0 auto; }
.tasbih-select {
    width: 100%; background: rgba(10, 30, 20, 0.6); border: 1px solid var(--accent-gold);
    color: #fff; padding: 12px 20px; border-radius: 50px; text-align: center;
    appearance: none; cursor: pointer; font-size: 1.1rem;
}
.select-arrow { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--accent-gold); pointer-events: none; }
.real-tasbih-body {
    position: relative; width: 300px; max-width: 90vw; /* Prevent overflow on small screens */
    height: 480px;
    background: linear-gradient(145deg, #0f3d2a, #051a11);
    border-radius: 100px 100px 80px 80px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 2px 5px rgba(255,255,255,0.1), inset 0 0 0 1px rgba(212, 175, 55, 0.1), 0 0 0 4px var(--primary-dark), 0 0 0 6px var(--accent-gold);
    display: flex; flex-direction: column; align-items: center; padding-top: 50px; margin: 20px auto; overflow: hidden;
}
.real-tasbih-body::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4af37' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none; opacity: 0.5;
}
.top-metal-plate {
    position: absolute; top: 0; width: 120px; height: 40px;
    background: linear-gradient(to bottom, #1a4d39, #051a11);
    border-radius: 0 0 20px 20px; border-bottom: 2px solid var(--accent-gold); z-index: 2;
}
.screen-bezel {
    width: 200px; height: 90px; background: #020d08; border-radius: 15px; padding: 5px;
    border: 1px solid rgba(212, 175, 55, 0.2); margin-bottom: 40px; position: relative; z-index: 2;
}
.screen-glass {
    width: 100%; height: 100%; background: radial-gradient(ellipse at center, #1a3c2f 0%, #000 100%);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
}
.digital-number { font-family: 'Share Tech Mono', monospace; font-size: 3.5rem; color: var(--accent-gold); text-shadow: 0 0 15px rgba(212, 175, 55, 0.6); }
.controls-area { position: relative; width: 100%; flex-grow: 1; display: flex; justify-content: center; z-index: 2; }
.main-btn-outer {
    width: 140px; height: 140px; border-radius: 50%;
    background: linear-gradient(145deg, #051a11, #0f3d2a);
    box-shadow: 10px 10px 20px rgba(0,0,0,0.5), -5px -5px 15px rgba(255,255,255,0.05), 0 0 0 1px var(--accent-gold);
    display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative;
}
.main-btn-outer:active { transform: scale(0.96); }
.main-btn-inner {
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--accent-gold), #8a7022);
    border: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: center; align-items: center;
}
.main-btn-outer:active .main-btn-inner { background: radial-gradient(circle at 30% 30%, #b08d2b, #5e4610); }
.small-btn {
    position: absolute; bottom: 50px; width: 45px; height: 45px;
    border-radius: 50%; background: linear-gradient(145deg, #0f3d2a, #051a11);
    border: 1px solid rgba(212, 175, 55, 0.3); color: var(--accent-gold); font-size: 0.9rem;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
}
.small-btn:active { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5); transform: scale(0.95); }
.small-btn:hover { background: var(--accent-gold); color: #000; }
.btn-reset { right: 45px; } .btn-total { left: 45px; }
.btn-label { position: absolute; bottom: 25px; font-size: 0.65rem; color: rgba(255,255,255,0.5); font-weight: bold; }
.lbl-reset { right: 50px; } .lbl-total { left: 50px; }
.total-counter-box {
    margin-top: 15px; font-family: 'Share Tech Mono', monospace; color: rgba(255,255,255,0.6);
    font-size: 0.9rem; background: rgba(0,0,0,0.4); padding: 5px 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1);
}
.total-val { color: var(--accent-gold); font-weight: bold; }

/* =========================================
   7. الفوتر (Footer) - محسّن
   ========================================= */
footer { 
    background: var(--footer-bg); 
    padding: 60px 0 20px; 
    margin-top: auto; 
    border-top: var(--footer-border); 
}
.footer-col-title { color: var(--accent-gold); font-weight: bold; margin-bottom: 20px; }
.footer-links a { 
    color: var(--text-muted); text-decoration: none; 
    display: inline-flex; align-items: center; gap: 8px; transition: 0.3s; 
}
.footer-links a:hover { color: var(--accent-gold); transform: translateX(-5px); }
.footer-logo { 
    height: 70px; filter: grayscale(100%) opacity(0.8); 
    transition: 0.5s; margin-bottom: 15px; 
}
.footer-logo:hover { filter: none; opacity: 1; transform: scale(1.05); }
[data-theme="light"] .footer-logo { filter: none; }

/* Social Icons */
.social-btn { 
    width: 40px; height: 40px; /* Increased size for better touch target */
    border-radius: 50%; background: rgba(128,128,128,0.1); 
    display: inline-flex; align-items: center; justify-content: center; 
    color: var(--text-color); margin-left: 8px; text-decoration: none; 
    border: 1px solid rgba(128,128,128,0.2); transition: 0.3s;
}
.social-btn:hover { background: var(--accent-gold); color: #fff; border-color: var(--accent-gold); transform: translateY(-3px); }

.scroll-top-btn { 
    display: inline-flex; align-items: center; gap: 5px; 
    color: var(--accent-gold); font-weight: bold; text-decoration: none; 
    padding: 8px 20px; border-radius: 20px; background: rgba(212, 175, 55, 0.05); 
    border: 1px solid rgba(212, 175, 55, 0.2); transition: 0.3s;
}
.scroll-top-btn:hover { background: var(--accent-gold); color: #fff; }

/* =========================================
   8. التجاوب والشاشات (Responsive Media Queries)
   ========================================= */

/* Tablets & Small Laptops (Max 992px) */
@media (max-width: 992px) {
    .glass-card { padding: 30px; margin-top: -40px; }
    .hero-title { font-size: 2.5rem; }
}

/* Mobile Devices (Max 768px) */
@media (max-width: 768px) {
    /* Navbar */
    .navbar-collapse { 
        background: var(--glass-bg); padding: 15px; 
        border-radius: 0 0 15px 15px; border-top: 1px solid rgba(128,128,128,0.1); 
    }
    
    /* Hero */
    .hero-title { font-size: 1.8rem; padding: 0 10px; }
    
    /* Cards */
    .glass-card { padding: 20px 15px; }
    
    /* Tafsir & Mushaf */
    .mushaf-page { max-height: 60vh; border-width: 4px; }
    .surah-title { font-size: 1.6rem; }
    .selection-wrapper { flex-direction: column; width: 100%; gap: 10px; }
    .select2-container, .btn-gold, .btn-outline-gold { width: 100% !important; margin-bottom: 5px; }
    
    /* Player Cards */
    .modern-player-card { padding: 15px; gap: 10px; }
    .play-btn-integrated { width: 45px; height: 45px; font-size: 1rem; }
    
    /* Azkar */
    .zekr-text { font-size: 1.2rem; line-height: 1.8; }
    .zekr-controls { flex-direction: column; align-items: stretch; }
    .control-btn, .counter-wrapper { width: 100%; justify-content: center; }
    .counter-tap-area { padding: 12px; }
    
    /* Footer Mobile Optimized */
    footer { text-align: center; padding: 40px 0 20px; }
    .footer-col { margin-bottom: 30px; }
    .footer-links { 
        display: flex; flex-direction: column; 
        align-items: center; gap: 10px; 
    }
    .footer-links a:hover { transform: translateY(-2px); }
    .d-flex.align-items-center { justify-content: center; } /* Center social icons */
}

/* Extra Small Devices (Max 480px) */
@media (max-width: 480px) {
    .hero-section { min-height: 40vh; }
    .hero-title { font-size: 1.5rem; }
    
    .modern-player-card { flex-wrap: wrap; justify-content: center; text-align: center; }
    .player-info { width: 100%; margin-bottom: 10px; }
    .timeline-container { width: 100%; }
    
    .compass-container { width: 200px; height: 200px; }
    .compass-arrow { font-size: 3.5rem; }
}

/* =========================================
   تعديل شبكة التفاسير (2 في الصف)
   ========================================= */

/* Container for Tafsir Cards */
#tafsirParts {
    display: grid;
    /* التعديل هنا: تكرار عمودين فقط بمساحات متساوية */
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
    padding: 20px;
    background: transparent;
    transition: all 0.3s ease;
}

/* في حالة الشاشات الصغيرة (الموبايل والتابلت الصغير) */
@media (max-width: 992px) {
    #tafsirParts {
        /* تحويلها لعمود واحد لضمان عدم صغر حجم الكارت */
        grid-template-columns: 1fr; 
    }
}