/* Стили самого диалога */
#pwa-install-instr-dialog {
    border: none;
    border-radius: 15px;
    padding: 0;
    /*max-width: 500px;*/
    width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);

    /* Центрирование */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0; /* Убираем браузерные отступы по умолчанию */    
}

/* Фон за диалогом */
#pwa-install-instr-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.dialog-content {
    padding: 25px;
    position: relative;
    font-family: sans-serif;
}

.close-x {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
}

.instr-card {
    background: #f4f7f9;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.instr-card h3 { margin-top: 0; color: #007bff; font-size: 1.1em; }
.instr-card p { margin-bottom: 0; font-size: 0.95em; }

.btn-got-it {
    width: 100%;
    background: #007bff;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    margin-top: 15px;
    font-weight: bold;
    cursor: pointer;
}

/* Анимация появления */
#pwa-dialog[open] {
    animation: slide-up 0.3s ease-out;
}

@keyframes slide-up {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* стили кнопки открытия диалога */
#open-instr-btn {
    border-radius: 0px; 
    position:relative;  
    bottom:0 !important; 
    left:0 !important; 
    width:100% !important; 
    height:30px !important; 
    background:#007b11 !important; 
    color:white !important; 
    border:none !important; 
    /*z-index:2147483647 !important;*/
    overflow:hidden !important; 
    cursor:pointer !important; 
    padding:0; 
    margin:0; 
    display:flex; 
    align-items:center; 
    justify-content:center;
}

.sliding-text {
    position: absolute; 
    white-space: nowrap; 
    font-family: sans-serif; 
    font-weight: bold; 
    font-size: 16px; 
    will-change: transform;
}

@keyframes slide-pause-out {
    0% {
        transform: translateX(100vw);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    15% {
        transform: translateX(0); /* Центр */
        opacity: 1;
    }
    45% {
        transform: translateX(0); /* Пауза в центре */
        opacity: 1;
    }
    55% {
        transform: translateX(-100vw); /* Уход влево */
        opacity: 0;
    }
    100% {
        transform: translateX(-100vw);
        opacity: 0;
    }
}

.sliding-text {
    animation: slide-pause-out 6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.delay-phrase {
    /* Задержка ровно в половину цикла */
    animation-delay: 3s;
}

/* При наведении — останавливаем, чтобы пользователь успел прочитать/нажать */
#open-instr-btn:hover .sliding-text {
    animation-play-state: paused;
}

@media (display-mode: standalone) {
    /* Стили только для установленного PWA */
    #open-instr-btn { display: none; }
  }