/* پس‌زمینه گرافیکی */
body::before { content: ''; position: fixed; top: -20%; left: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(217,119,6,0.12) 0%, transparent 60%); z-index: -1; filter: blur(50px); }
body::after { content: ''; position: fixed; bottom: -20%; right: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(5,150,105,0.12) 0%, transparent 60%); z-index: -1; filter: blur(50px); }

/* Typography */
.header-title { text-align: center; margin-bottom: 2rem; }
.header-title h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; margin-bottom: 0.5rem; }
.header-title p { color: var(--emerald-200); font-size: clamp(0.9rem, 2vw, 1.1rem); font-weight: 300; }

/* ====== REAL COMPASS UI ====== */
.qibla-wrapper { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 2.5rem 1rem;
    padding-top: 7rem;
    margin-bottom: 2.5rem; 
    position: relative; 
}

@media (min-width: 768px) {
    .qibla-wrapper {
        padding-top: 8rem;
    }
}

.phone-indicator { position: absolute; top: 1.5rem; font-size: 1.5rem; color: var(--emerald-300); z-index: 10; display: flex; flex-direction: column; align-items: center; }
.phone-indicator::after { content: 'بالای گوشی'; font-size: 0.7rem; opacity: 0.7; margin-top: 5px; }

.compass-outer { width: clamp(260px, 65vw, 320px); height: clamp(260px, 65vw, 320px); border-radius: 50%; background: radial-gradient(circle, rgba(2,44,34,0.9), rgba(6,78,59,0.9)); display: flex; justify-content: center; align-items: center; border: 2px solid rgba(251,191,36,0.3); position: relative; box-shadow: 0 0 40px rgba(0,0,0,0.6), inset 0 0 20px rgba(0,0,0,0.8); margin-top: 3.5rem; overflow: hidden; }

/* صفحه قطب‌نما ثابت - فقط عقربه حرکت می‌کنه */
.compass-dial { 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    position: absolute;
}

.compass-marks { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, transparent 0deg, transparent 4deg, rgba(255,255,255,0.05) 4deg, rgba(255,255,255,0.05) 5deg); mask-image: radial-gradient(transparent 62%, black 65%); -webkit-mask-image: radial-gradient(transparent 62%, black 65%); }

.direction-letter { position: absolute; font-weight: bold; font-size: 1.2rem; transform: translate(-50%, -50%); }
.dir-n { top: 10%; left: 50%; color: #ef4444; }
.dir-s { bottom: 2%; left: 50%; color: var(--emerald-200); }
.dir-e { top: 50%; right: 2%; color: var(--emerald-200); }
.dir-w { top: 50%; left: 10%; color: var(--emerald-200); }

/* فقط عقربه حرکت می‌کنه - transition نرم */
.qibla-pointer-container { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: transform 0.3s ease-out;
}

/* عقربه قبله */
.qibla-pointer { 
    width: 3px; 
    height: 50%; 
    background: linear-gradient(to top, transparent 10%, var(--gold-400) 90%); 
    position: absolute; 
    top: 0; 
    transform-origin: bottom center; 
    filter: drop-shadow(0 0 8px rgba(251,191,36,0.8)); 
    display: flex; 
    justify-content: center; 
}

/* ایموجی کعبه */
.kaaba-emoji { 
    position: absolute; 
    top: 10px; 
    font-size: 2.2rem; 
    transform: rotate(0deg); 
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.9)); 
    line-height: 1; 
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5); 
}

.compass-center { width: 14px; height: 14px; background: var(--gold-400); border-radius: 50%; position: absolute; z-index: 10; box-shadow: 0 0 10px rgba(0,0,0,0.8); border: 2px solid #022c22; }

/* دکمه وسط قطب‌نما */
.permission-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30; padding: 1.2rem; background: rgba(2, 44, 34, 0.85); backdrop-filter: blur(10px); border: 2px solid var(--gold-500); color: var(--gold-300); font-size: 1.1rem; font-weight: bold; border-radius: 50%; width: 120px; height: 120px; box-shadow: 0 0 30px rgba(217,119,6,0.4); transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; text-align: center; cursor: pointer; }
.permission-btn:active { transform: translate(-50%, -50%) scale(0.95); }
.permission-btn:hover { background: rgba(2, 44, 34, 0.95); color: var(--gold-400); box-shadow: 0 0 40px rgba(217,119,6,0.6); }

/* وضعیت و نمایش لوکیشن */
.location-section { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }

.location-display { display: none; padding: 1rem 1.5rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(251, 191, 36, 0.2); border-radius: 16px; color: var(--emerald-50); font-weight: 500; font-size: 1.1rem; align-items: center; justify-content: center; gap: 0.8rem; width: 100%; max-width: 400px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); backdrop-filter: blur(10px); }
.location-icon { font-size: 1.5rem; color: var(--gold-400); }
.location-details { display: flex; flex-direction: column; gap: 0.2rem; }
.location-source { font-size: 0.8rem; color: var(--emerald-300); font-weight: 300; }

.status-box { font-size: 0.9rem; color: var(--emerald-200); text-align: center; max-width: 90%; }

/* ====== PRAYER TIMES UI ====== */
.prayer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; width: 100%; }
.time-card { padding: 1.2rem; text-align: center; display: flex; flex-direction: column; gap: 0.5rem; position: relative; overflow: hidden; }
.time-card::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--emerald-600); transition: 0.3s; }
.time-card:hover::before { background: var(--gold-400); }
.prayer-name { color: var(--emerald-200); font-size: 1rem; font-weight: 500; }
.prayer-time { font-size: 1.6rem; font-weight: 900; color: #fff; letter-spacing: 1px; }

/* Animations */
.fade-in { animation: fadeIn 0.8s ease-out forwards; opacity: 0; }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}