/* ===============================================
   Responsive Design — Glass UI, Mobile & Tablet
================================================ */

/* الشريط الجانبي: أيقونات فقط على الشاشات الضيقة */
@media (max-width: 900px) {
    .khaliq-sidebar,
    .khaliq-sidebar:hover,
    .khaliq-sidebar:focus-within {
        width: 45px !important;
        min-width: 36px;
        padding: 0;
    }
    .sidebar-logo span,
    .sidebar-links a span { display: none !important; }
    body { padding-right: 45px !important; }
}

@media (max-width: 600px) {
    .khaliq-sidebar,
    .khaliq-sidebar:hover,
    .khaliq-sidebar:focus-within {
        width: 34px !important;
        min-width: 25px;
        padding: 0;
    }
    .sidebar-logo { font-size: 0.91em; padding: 13px 4px 10px 0; }
}

/* الحاويات والبطاقات */
@media (max-width: 900px) {
    .container { width: 99%; padding: 0 2px; }
    .card, .card-glass, .info-box, .season-card,
    .year-title, .results-header, .moon-card, .export-options, .input-card {
        padding: 1.05rem 0.4rem;
        border-radius: 11px;
        font-size: 0.97em;
    }
}

/* النماذج */
@media (max-width: 800px) {
    input, select, textarea {
        font-size: 0.93em;
        padding: 0.7rem 0.6rem;
    }
    .btn, button, input[type="submit"], input[type="button"] {
        padding: 0.7rem 1.3rem;
        font-size: 0.98em;
        border-radius: 11px;
    }
}

@media (max-width: 600px) {
    .form-row { flex-direction: column; gap: 0.7em; }
    label { font-size: 0.98em; }
    .card-mini, .info-mini { padding: 0.8rem 0.6rem; border-radius: 9px; }
}

/* العناوين */
@media (max-width: 700px) {
    h1 { font-size: 1.41rem; }
    h2 { font-size: 1.19rem; }
    h3 { font-size: 1.01rem; }
}

/* تمرير أفقي للحاويات الضيقة */
@media (max-width: 600px) {
    .container { overflow-x: auto; }
}

/* البطاقات على الشاشات الصغيرة جداً */
@media (max-width: 440px) {
    .card, .card-glass, .info-box, .season-card,
    .year-title, .results-header, .moon-card, .export-options, .input-card,
    .container {
        padding: 0.15rem 0.02rem;
        border-radius: 8px;
        font-size: 0.90em;
    }
}