/* static/css/styles.css body { font-family: Arial, sans-serif; margin: 20px; } form { margin-top: 20px; } input { display: block; margin: 10px 0; padding: 10px; width: 100%; max-width: 300px; } button { padding: 10px 20px; background-color: #28a745; color: white; border: none; cursor: pointer; } button:hover { background-color: #218838; } */ body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; } .blur-bg-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); z-index: 1; } .form-popup { position: relative; z-index: 2; width: 100%; max-width: 400px; background: #fff; border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); padding: 20px; margin: 50px auto; } .form-box h2 { margin-bottom: 20px; color: #333; } .form-details { text-align: center; margin-bottom: 20px; } .form-content .input-field { position: relative; margin-bottom: 20px; } .input-field input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; outline: none; } .input-field label { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); pointer-events: none; transition: 0.2s; color: #999; } .input-field input:focus + label, .input-field input:not(:placeholder-shown) + label { top: -10px; left: 10px; color: #333; font-size: 12px; } .button { width: 100%; padding: 10px; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; } .bottom-link { text-align: center; margin-top: 10px; } .bottom-link a { color: #007bff; text-decoration: none; } .bottom-link a:hover { text-decoration: underline; } .policy-text { margin-bottom: 20px; font-size: 14px; color: #555; } .policy-text input { margin-right: 5px; } .close-btn { position: absolute; top: 15px; right: 15px; cursor: pointer; font-size: 24px; color: #333; }