---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Бронь столика</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form action="#" method="POST">
        <h2>Заказ столика</h2>
        
        <label>Имя
            <input type="text" placeholder="Ваше имя" required>
        </label>
        
        <label>Телефон
            <input type="tel" placeholder="+7 (999) 999-99-99" 
                   pattern="\+7\s?[\(]{0,1}9[0-9]{2}[\)]{0,1}\s?\d{3}[-]{0,1}\d{2}[-]{0,1}\d{2}" 
                   title="Формат: +7 (999) 999-99-99" required>
        </label>
        
        <label>Дата и время
            <input type="datetime-local" required>
        </label>
        
        <label>Гостей
            <input type="number" min="1" max="20" value="2" required>
        </label>
        
        <label>Пожелания
            <textarea rows="3" placeholder="Столик у окна..."></textarea>
        </label>
        
        <button type="submit">Забронировать</button>
    </form>
</body>
</html>

* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f0f2f5; }
form { background: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
h2 { text-align: center; margin-bottom: 20px; font-size: 20px; }

label { display: block; margin-bottom: 15px; font-size: 14px; color: #555; }
input, textarea { 
    width: 100%; padding: 10px; margin-top: 5px; 
    border: 2px solid #ddd; border-radius: 6px; font-size: 14px; outline: none; transition: 0.3s;
}

/* Фокус */
input:focus, textarea:focus { border-color: #4a90e2; box-shadow: 0 0 5px rgba(74,144,226,0.4); }

/* Валидация */
input:invalid:not(:placeholder-shown) { border-color: #e74c3c; }
input:valid:not(:placeholder-shown) { border-color: #2ecc71; }

/* Кнопка */
button { 
    width: 100%; padding: 12px; background: #4a90e2; color: #fff; 
    border: none; border-radius: 6px; font-size: 16px; cursor: pointer; transition: 0.3s;
}
button:hover { background: #357abd; }
button:active { transform: scale(0.97); }