/* css/responsive.css */

@media (max-width: 1024px) {
    .current-date {
        display: none;
    }
    .back-to-main-btn .btn-text {
        display: none;
    }
    .back-to-main-btn {
        padding: 0.6rem 0.8rem;
    }
    .nav-content {
        gap: 0.2rem;
    }
    .nav-btn {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
    }
    
    .header-content {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .logo { flex-shrink: 1; }
    .logo h1 { font-size: 1.3rem; white-space: nowrap; }
    
    .header-controls { gap: 0.5rem; }

    .current-date,
    .back-to-main-btn {
       display: none;
    }

    .country-tab-btn { padding: 0.5rem; font-size: 1.2rem; gap: 0; }
    .country-tab-btn .country-name { display: none; }

    .mobile-menu-btn { display: block; }
    
    .navigation {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100vh;
        background: rgba(26, 35, 126, 0.95);
        backdrop-filter: blur(10px);
        transition: left 0.3s ease-in-out;
        z-index: 200;
        padding-top: 5rem;
    }
    
    .navigation.open { left: 0; }
    
    .nav-content {
        flex-direction: column;
        padding: 2rem;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    
    .nav-btn {
        justify-content: flex-start;
        padding: 1rem 1.5rem;
        border-radius: 10px;
        width: 100%;
    }
    
    .current-prayer-card {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    
    .prayer-times-grid { grid-template-columns: 1fr; }
    .calendar-grid { font-size: 0.9rem; }
    .day-prayer-times { grid-template-columns: repeat(2, 1fr); }
    .footer-content { flex-direction: column; gap: 1rem; }

    /* Responsive per pamjet e reja */
    .city-dropdown { min-width: 200px; font-size: 0.9rem; }
    .position-times-grid { grid-template-columns: repeat(2, 1fr); }
    
    .my-location-header h2, .page-header h2 { font-size: 1.5rem; }
    
    .compass { width: 220px; height: 220px; }
    
    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .setting-item-label p { max-width: 100%; }
}

@media (max-width: 480px) {
    .logo h1 { font-size: 1.1rem; }
    .logo i { font-size: 1.5rem; }
    
    .current-prayer-card { padding: 1.5rem; }
    .current-prayer-time { font-size: 2rem; }
    
    .calendar-day-number { font-size: 1rem; }
    .calendar-day-hijri { font-size: 0.7rem; }

    .location-btn { width: 100%; justify-content: center; }
    
    .tracker-item-info .time { display: none; }
}