/* --- ОБЩИЕ СТИЛИ --- */
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #f0f2f5; color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
#app { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: 90%; max-width: 400px; text-align: center; position: relative; padding-top: 60px; }
h2 { margin-top: 0; margin-bottom: 20px; }
button { background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 16px; margin: 5px; transition: background-color 0.2s, border-color 0.2s; }
button:hover { background-color: #0056b3; }
button:disabled { background-color: #e9ecef; color: #6c757d; cursor: not-allowed; }
.hidden { display: none; }

/* --- КНОПКА "НАЗАД" --- */
.back-button { position: absolute; top: 10px; left: 10px; background-color: #f0f2f5; border: none; color: #555; font-size: 24px; line-height: 1; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.back-button:hover { background-color: #e2e6ea; }

/* --- ПОЛЯ ВВОДА --- */
.input-group { margin-bottom: 15px; text-align: left; }
.input-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }
.input-group input { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }

/* --- ВРЕМЕННЫЕ СЛОТЫ --- */
#time-slots { margin-bottom: 15px; } /* Добавим отступ снизу */
#time-slots button { width: 80px; background-color: #f8f9fa; color: #007bff; border: 1px solid #007bff; }
#time-slots button:hover { background-color: #e2e6ea; }
.busy-slot { background-color: #e9ecef; color: #6c757d; border-color: #e9ecef; text-decoration: line-through; }
.busy-slot:hover { background-color: #e9ecef; }

/* НОВЫЙ СТИЛЬ: для подсвеченного времени */
.selected-slot {
    background-color: #007bff !important;
    color: white !important;
}

/* НОВЫЙ СТИЛЬ: для кнопки "Записаться" */
.book-button {
    width: 100%;
    padding: 12px;
    font-size: 18px;
    background-color: #28a745; /* Зеленый цвет */
}
.book-button:hover {
    background-color: #218838;
}

/* --- ЭКРАН ПОДТВЕРЖДЕНИЯ --- */
#confirmation-screen h2 { color: #28a745; }
#confirmation-details { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; padding: 15px; margin-top: 20px; margin-bottom: 20px; text-align: left; line-height: 1.6; }
#confirmation-footer { font-style: italic; color: #555; }

/* --- СПИННЕР ЗАГРУЗКИ --- */
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #007bff; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }```