body {
    
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    position: relative;
    height: 100vh;
    overflow: hidden;
    background-color: #000;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

canvas {
    display: none;
}

button {
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    position: absolute;
}

/* Кнопка snap по центру */
#snap {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute; /* Убедитесь, что элемент имеет абсолютное позиционирование */
    left: 50%; /* Центрируем по горизонтали */
    bottom: 5%; /* Отступ от нижней части экрана */
    transform: translateX(-50%); /* Сдвигаем на половину ширины для точного центрирования */
}


/* Кнопка nextButton, центрированная между правым краем и кнопкой snap */
#nextButton {
    width: 80px;
    height: 80px;
    border: none; /* Полностью убираем рамку */
    background: none; /* Убираем фон */
    box-shadow: none; /* Убираем тени */
    font-size: 18px; /* Увеличенный шрифт для удобочитаемости */
    font-weight: bold;
    color: #fff; /* Белый текст */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px 1px 0 #000,
         1px 1px 0 #000; /* Чёрная обводка текста, чтобы было видно на любом фоне */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 5%;
    left: calc(50% + 30%);
    transform: translateX(-50%);
    cursor: pointer; /* Добавляем указатель при наведении */
}



/* Стиль для кнопки #skip */
#skip {
    width: 80px;
    height: 80px;
    border: none; /* Полностью убираем рамку */
    background: none; /* Убираем фон */
    box-shadow: none; /* Убираем тени */
    font-size: 18px; /* Увеличенный шрифт для удобочитаемости */
    font-weight: bold;
    color: #fff; /* Белый текст */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px 1px 0 #000,
         1px 1px 0 #000; /* Чёрная обводка текста, чтобы было видно на любом фоне */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 5%;
    left: calc(50% - 30%);
    transform: translateX(-50%);
    cursor: pointer; /* Добавляем указатель при наведении */
}




/* Кнопка flash-btn в левом верхнем углу */
.flash-btn {
    
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: bold;
    color: #000;
    position: absolute;
    top: 2.5%; /* Отступ сверху */
    left: 5%; /* Отступ слева */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Заголовок header-title относительно snap, с отступом сверху 15% от snap */
.header-title {
    
    position: absolute;
    bottom: calc(5% + 80px); /* 15% выше кнопки snap, где snap на 10% от низа */
    left: 50%;
    transform: translateX(-50%); /* Центрируем по горизонтали */
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-align: center;
}

.header-title-dmgs {
    
    position: absolute;
    bottom: calc(5% + 80px); /* 15% выше кнопки snap, где snap на 10% от низа */
    left: 50%;
    transform: translateX(-50%); /* Центрируем по горизонтали */
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-align: center;
}

.header-title-manager-docs {
    
    position: absolute;
    bottom: calc(5% + 80px); /* 15% выше кнопки snap, где snap на 10% от низа */
    left: 50%;
    transform: translateX(-50%); /* Центрируем по горизонтали */
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-align: center;
}



/* Стиль для notification */
#notification {
    display: none; /* Изначально скрыто */
    padding: 17px;
    color: white;
    position: fixed;
    top: 80px; /* Закрепляем сверху */
    left: 0;
    right: 0;
    margin: 0 15px; /* Отступы слева и справа */
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    z-index: 9999;
    text-align: center;
}

/* Общие стили для всех кнопок */
.main-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.main-button {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: bold;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.main-button:hover {
    background-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.05);
}

/* Специфичные стили для каждой кнопки */

/* Кнопка "Документы" (выше кнопки "Повреждения") */
.documents-button {
     width: 200px;
    height: 75px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    font-weight: bold;
    color: #000;
     display: flex;
    justify-content: center; 
    align-items: center;    
    text-align: center;  
    top: 25%; /* 25% выше "Повреждения" */
}

/* Кнопка "Повреждения" (по центру экрана) */
.damages-button {
     width: 200px;
    height: 75px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    font-weight: bold;
    color: #000;
     display: flex;
    justify-content: center; 
    align-items: center;    
    text-align: center;  
    top: 50%; /* Центр экрана */
    transform: translateY(-50%); /* Центрируем по вертикали */
}

/* Кнопка "Документы от менеджера" (ниже кнопки "Повреждения") */
.manager-documents-button {
     width: 200px;
    height: 75px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    font-weight: bold;
    color: #000;
     display: flex;
    justify-content: center; 
    align-items: center;    
    text-align: center;  
    top: 65%; /* 25% ниже "Повреждения" */
}