/* 1. Theme Variables */
:root {
    --form-bg: #f9f9f9;
    --form-text: #333333;
    --input-bg: #ffffff;
    --input-border: #dddddd;
    --input-text: #000000;
    --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    --alert-bg: #fff3cd;
    --alert-text: #856404;
    --alert-border: #ffeeba;
}

/* This triggers if the system is dark OR if your toggle is set to dark-soccer */
@media (prefers-color-scheme: dark) {
    :root {
        --form-bg: #1e1e1e;
        --form-text: #f8f9fa;
        --input-bg: #2d2d2d;
        --input-border: #444444;
        --input-text: #ffffff;
        --box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }
}

/* Update this specific block in contact-form.css */
[data-theme="dark-soccer"] .contact-form {
    background-color: #000a1a; /* Matches your layout deep navy */
    border: 1px solid var(--brand-cyan);
    color: #ffffff; /* Sets default text color to white */
}

    /* Explicitly target labels and the form title */
    [data-theme="dark-soccer"] .contact-form label,
    [data-theme="dark-soccer"] .contact-form h2 {
        color: #ffffff !important;
    }

    /* Ensure inputs have contrast */
    [data-theme="dark-soccer"] .contact-form input,
    [data-theme="dark-soccer"] .contact-form textarea {
        background-color: #000a1a !important; /* Deep Navy background */
        color: #ffffff !important; /* White text for visibility */
        border: 1px solid #00acc1 !important; /* Brand Cyan border */
    }
        
        /* Ensure placeholder text is visible but muted */
        [data-theme="dark-soccer"] .contact-form input::placeholder,
        [data-theme="dark-soccer"] .contact-form textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

    /* Style the buttons to use the brand navy/cyan combo */
    [data-theme="dark-soccer"] .contact-form button {
        background-color: transparent !important;
        border: 1px solid var(--brand-cyan) !important;
        color: var(--brand-cyan) !important;
    }

        [data-theme="dark-soccer"] .contact-form button:hover {
            background-color: var(--brand-cyan) !important;
            color: #000a1a !important;
        }

/* 2. Form Styles using Variables */
.contact-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--form-bg);
    color: var(--form-text);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .contact-form label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid var(--input-border);
        background-color: var(--input-bg);
        color: var(--input-text);
        border-radius: 4px;
        box-sizing: border-box;
    }

    .contact-form textarea {
        height: 150px;
        resize: vertical;
    }

    .contact-form button {
        background-color: var(--brand-navy) !important;
        color: white !important;
        border: 2px solid var(--brand-cyan) !important;
        transition: all 0.3s ease;
    }

        .contact-form button:hover {
            background-color: var(--brand-cyan) !important;
            border-color: var(--brand-navy) !important;
        }

/* 3. Alert Variants */
.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--alert-border);
    background-color: var(--alert-bg);
    color: var(--alert-text);
    border-radius: 0.25rem;
    position: relative;
}

/* 4. CAPTCHA Styles */
#captchaContainer {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#captchaCanvas {
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    border-radius: 4px;
    margin-bottom: 10px;
}