/* Global Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa; /* Very light gray for contrast with container */
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    line-height: 1.6;
}

/* Container */
.container {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04); /* Soft, atmospheric shadow */
    padding: 50px;
    width: 100%;
    max-width: 550px; /* Slightly narrower for elegance */
    margin: 20px;
    animation: fadeIn 0.8s ease-out;
    box-sizing: border-box;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Headings */
h2 {
    text-align: center;
    color: #1a1a1a;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

/* Instructions */
.instructions {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-bottom: 30px;
}

.instructions a {
    color: #000;
    text-decoration: underline;
    font-weight: 500;
}

/* Form Groups */
.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

/* Inputs */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="file"],
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background-color: #fbfbfb;
    transition: all 0.2s ease;
    font-size: 15px;
    box-sizing: border-box; /* Ensure padding doesn't overflow width */
    font-family: inherit;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: #333;
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Radio Groups */
.radio-group.horizontal {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
}

.radio-group input[type="radio"] {
    margin-right: 6px;
    accent-color: #333; /* Black accent for radio buttons */
}

.radio-group label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

/* Buttons */
button {
    background-color: #1a1a1a; /* Elegant dark button */
    color: white;
    padding: 14px 28px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    letter-spacing: 0.5px;
}

button:hover {
    background-color: #333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Specific adjustments for "Send Code" button to sit next to input if needed, 
   but current HTML structure stacks them. Let's make it look good stacked or fix HTML later.
   Currently in HTML: input then button block. */
#sendCodeButton {
    margin-top: 10px;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #e1e1e1;
}

#sendCodeButton:hover {
    background-color: #e5e5e5;
    border-color: #d1d1d1;
}

/* One Click Login Button */
#oneClickLoginBtn {
    width: 100%;
    margin-bottom: 15px;
    background-color: #1a1a1a;
    font-size: 15px;
}

#oneClickLoginBtn:hover {
    background-color: #333;
}

/* Textarea resizing */
textarea {
    resize: vertical;
    min-height: 80px;
}