/* 1. Глобални настройки за мобилни устройства и iOS */
:root {
    --safe-inset-top: env(safe-area-inset-top);
    --safe-inset-bottom: env(safe-area-inset-bottom);
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background: #f4f4f4; 
    text-align: center; 
    padding: 15px; 
    margin: 0;
    -webkit-text-size-adjust: 100%;
}

/* 2. Контейнерът вече е гъвкав и се разпъва на iOS */
.container { 
    background: white; 
    padding: 20px; 
    border-radius: 15px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    width: 100%;
    max-width: 500px; /* Увеличено за по-добър изглед, но гъвкаво */
    margin: auto; 
    box-sizing: border-box;
}

h1 { color: #ffcc00; text-shadow: 1px 1px 2px #444; margin-top: 10px; }

/* 3. Бутони - пълна ширина и гъвкавост */
.btn, button.btn { 
    display: block; 
    width: 100%; 
    background: #ffcc00; 
    color: black; 
    padding: 14px; 
    margin: 12px 0; 
    text-decoration: none; 
    border-radius: 8px; 
    font-weight: bold; 
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 16px; /* Предотвратява зуум при клик в iOS */
}

.btn.secondary { background: #eee; border: 1px solid #ccc; }

/* 4. Нова Секция: Редица от бутони (за Статус бутоните) */
.status-grid {
    display: flex !important;
    gap: 10px;
    margin: 20px 0;
    width: 100%;
    justify-content: space-between;
}

.status-btn {
    flex: 1; /* Принуждава бутоните да са абсолютно еднакви по ширина */
    min-width: 0;
    padding: 12px 5px !important;
    font-size: 0.85em;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    border: none;
    white-space: nowrap;
}

/* 5. Входове и форми */
input, select, textarea { 
    width: 100%; 
    padding: 12px; 
    margin: 10px 0; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    box-sizing: border-box;
    font-size: 16px; /* Важно за iOS */
}

/* Стил за бутона Изход */
.btn-logout {
    display: block;
    margin-top: 30px;
    padding: 12px;
    color: #d9534f;
    text-decoration: none;
    border: 1px solid #d9534f;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.3s;
}

.btn-logout:hover {
    background: #d9534f;
    color: white;
}

/* Карти за пчелини */
.apiary-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

.apiary-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Стил за блока за оптимизация за Android */
.android-optimization-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Разстояние между логото и текста */
    margin-top: 30px; /* Отстояние от горния елемент */
    padding: 15px;
    background-color: #f9f9f9; /* Лек сив фон, за да изпъкне */
    border-radius: 10px;
    border: 1px solid #eee;
    width: 100%;
    box-sizing: border-box;
}

/* Стил за самото лого */
.android-icon-small {
    width: 24px; /* Фиксирана малка ширина, за да е като икона */
    height: auto; /* Запазва пропорциите */
    display: block;
}

/* Стил за текста в блока */
.android-optimization-box p {
    margin: 0;
    font-size: 0.85em; /* Леко намален размер на шрифта */
    color: #555; /* Умерен сив цвят за текста */
    text-align: left; /* Текстът да е подравнен вляво спрямо логото */
}

/* Специфичен цвят за думата Android, ако желаеш */
.android-optimization-box strong {
    color: #3DDC84; /* Официалното зелено на Android */
}

.apiary-info strong { font-size: 1.1em; color: #2c3e50; }
.apiary-info small { color: #7f8c8d; margin-top: 4px; }


/*стилове за хелп бутона*/
.help-container {
    position: absolute; 
    top: 15px;
    left: 15px;
    z-index: 9999; 
}

.help-btn {
    background: #f1c40f; 
    border: none;
    color: #333; 
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.1s;
    width: 20px; 
    height: 20px;
    position: relative; /* Важно за пулсацията */
}

/* Ефектът на пулсиране */
.help-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #f1c40f;
    opacity: 0.6;
    z-index: -1;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}

.help-btn:active {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0.95);
}
/*стилове за хелп бутона*/



/* Секция за профилактиа, ако не я искаме да се вижда я слагаме в коментар. Край 

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px;
    background: rgba(241, 196, 15, 0.6); 
    z-index: 9998;
    pointer-events: none;
}


body::after {
    content: "В момента се извършва профилактика, възможни са смущения в работата на приложението";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px;
    line-height: 26px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    
    
    display: block;
    animation: marquee 12s linear infinite; 
}

@keyframes marquee {
    0% { 
        
        transform: translateX(100vw); 
    }
    100% { 
   
        transform: translateX(-100%); 
    }
}

на секцията за профилактика */