@media screen and (max-width: 768px) {
    /* --- Хедър --- */
    .header {
        flex-direction: column;
        padding: 15px;
        gap: 20px;
    }

    .title-container {
        position: static;
        transform: none;
        width: 100%;
        margin-bottom: 10px;
    }

    .title-container h1 {
        font-size: 1.8rem;
        text-align: center;
    }

    /* --- ФИКС ЗА USER INFO КОНТЕЙНЕРА --- */
    /* Това е елементът, който е счупен на снимката */
    .user-info-container {
        width: 90%;          /* Да не опира в краищата */
        max-width: 400px;
        margin: 0 auto;      /* Центриране */
        
        display: flex;
        flex-direction: column; /* Подреждаме ги вертикално! */
        align-items: center;    /* Центрираме съдържанието */
        gap: 10px;              /* Разстояние между редовете */
        
        padding: 20px;
        height: auto;           /* Оставяме височината да се разпъне според съдържанието */
        
        /* Променяме формата от "хапче" (50px) на леко заоблена кутия */
        border-radius: 16px !important; 
        background: rgba(16, 24, 32, 0.95);
    }

    /* --- Потребителско име и аватар --- */
    .user-info {
        margin-right: 0;
        width: 100%;
        justify-content: center; /* Центрираме ги */
        margin-bottom: 5px;
    }

    /* --- Бутони (Излез и Админ Панел) --- */
    .auth-button, 
    .admin-panel-button {
        width: 100%;        /* Да заемат цялата ширина за по-лесно натискане */
        margin: 5px 0 0 0;  /* Махаме страничните отстояния и слагаме малко отгоре */
        text-align: center;
        padding: 12px;
        font-size: 1rem;
        display: block;     /* Гарантираме, че са блокови елементи */
        margin-right: 0px !important;
    }

    /* --- Други корекции за страницата --- */
    .product-container {
        padding: 20px 10px;
    }
    
    .modal-content {
        width: 95%;
        max-height: 85vh;
        padding: 20px;
    }
}

@media screen and (max-width: 480px) {
    .header {
        padding: 10px;
    }

    .title {
        font-size: 1.3em;
    }

    /* Допълнително подсигуряване за много малки екрани */
    .user-info-container {
        width: 95%;
    }
}