/* ============================================
   SIGNUP PAGE STYLES
   Builds upon global styles from theme-pages.css
   * Global rule already sets: box-sizing: border-box
   * Body text color: #d0d8e6 (inherited)
   * Font family: Raleway (inherited)
   ============================================ */

/* ===== FORM CONTAINER & ALIGNMENT ===== */

/* Main form box - 450px wide, centered */
.form-box {
    width: 450px !important;
    max-width: 450px !important;
    margin: 20px auto !important;
    padding: 25px 30px !important;
    background: rgba(36, 51, 66, 0.95) !important;
    border-radius: 10px !important;
    display: block !important;
}

/* ===== FORM ELEMENTS STYLING ===== */

/* All inputs - consistent height and width */
.form-box input[type="text"],
.form-box input[type="email"],
.form-box input[type="password"] {
    width: 100% !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 15px !important;
    margin-bottom: 15px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 5px !important;
    display: block !important;
}

/* Focus states for inputs */
.form-box input[type="text"]:focus,
.form-box input[type="email"]:focus,
.form-box input[type="password"]:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

/* Form field containers */
.form-box .form-field {
    width: 100% !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* ===== BUTTON STYLING ===== */

/* Submit button */
.form-box button[type="submit"] {
    width: 100% !important;
    height: 44px !important;
    line-height: 44px !important;
    margin-top: 25px !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    border: none !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

/* Button hover/focus states */
.form-box button[type="submit"]:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.form-box button[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

.form-box button[type="submit"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4) !important;
}

/* ===== TEXT & TYPOGRAPHY ===== */

/* Remove ALL color settings - inherit from body (#d0d8e6) */
.form-box,
.form-box *,
.form-box p,
.form-box span,
.form-box div,
.form-box label,
.form-box small,
.form-box input,
.form-box input::placeholder,
.form-box button,
.form-box .help-text,
.form-box .error-message,
.form-box .error-list,
.form-box .error-list li {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Burly heading exception */
.form-box .burly {
    color: burlywood !important;
    text-align: center !important;
    font-size: 1.3rem !important;
    margin-bottom: 25px !important;
    font-weight: 600 !important;
}

/* Help text */
.form-box .help-text {
    font-size: 0.875rem !important;
    margin-top: 5px !important;
    opacity: 0.8 !important;
    display: block !important;
}

/* ===== ERROR MESSAGES ===== */

/* Error list container */
.form-box .error-list {
    background: rgba(239, 68, 68, 0.1) !important;
    border-left: 3px solid #ef4444 !important;
    padding: 12px 15px !important;
    margin-bottom: 20px !important;
    border-radius: 3px !important;
    list-style: none !important;
}

/* Individual error messages */
.form-box .error-message {
    color: #fca5a5 !important;
    /* Light red for errors */
    font-size: 0.875rem !important;
    margin-top: 5px !important;
    display: block !important;
}

.form-box .error-list .error-message {
    color: #fca5a5 !important;
    margin-bottom: 5px !important;
}

.form-box .error-list .error-message:last-child {
    margin-bottom: 0 !important;
}

/* ===== LINKS (NO STYLING - INHERIT ONLY) ===== */

/* Remove ALL link styling - inherit everything */
.form-box a,
.form-box a:link,
.form-box a:visited,
.form-box a:hover,
.form-box a:focus,
.form-box a:active {
    color: inherit !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
}

/* ===== SPECIAL ELEMENTS ===== */

/* Turnstile/CAPTCHA container */
.form-box .cf-turnstile {
    margin: 20px 0 !important;
    display: block !important;
    width: 100% !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Mobile adjustments */
@media (max-width: 500px) {
    .form-box {
        width: 95% !important;
        max-width: 95% !important;
        margin: 15px auto !important;
        padding: 20px 15px !important;
    }

    .form-box .burly {
        font-size: 1.3rem !important;
        margin-bottom: 20px !important;
    }

    .form-box input[type="text"],
    .form-box input[type="email"],
    .form-box input[type="password"] {
        height: 42px !important;
        line-height: 42px !important;
        padding: 0 12px !important;
    }

    .form-box button[type="submit"] {
        height: 42px !important;
        line-height: 42px !important;
        margin-top: 20px !important;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .form-box {
        padding: 15px 12px !important;
    }

    .form-box input[type="text"],
    .form-box input[type="email"],
    .form-box input[type="password"] {
        height: 40px !important;
        line-height: 40px !important;
        font-size: 0.95rem !important;
    }

    .form-box button[type="submit"] {
        height: 40px !important;
        line-height: 40px !important;
        font-size: 0.95rem !important;
    }
}

/* ===== PWA BUTTON HIDING ===== */

/* Hide PWA install button on signup page */
.pwa-install-button,
.pwa-install-container,
[class*="pwa"],
[class*="install-button"],
button[onclick*="install"],
#pwa-button,
.pwa-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -9999 !important;
}

/* ===== UTILITY CLASSES ===== */

/* Text center alignment */
.text-center {
    text-align: center !important;
}

/* Margin utilities */
.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-25 {
    margin-bottom: 25px !important;
}