/* Light Theme for Axon Signup */
/* Include after styles.css to override dark theme */

:root {
    --primary: #d7c238;
    --primary-hover: #B8931F;
    --primary-light: rgba(201, 162, 39, 0.12);
    --text-dark: #111827;
    --text-gray: #4B5563;
    --text-light: #6B7280;
    --border: #E5E7EB;
    --background: #F3F4F6;
    --white: #FFFFFF;
    --error: #DC2626;
    --error-light: rgba(220, 38, 38, 0.1);
}

body {
    background: #F9FAFB;
    color: var(--text-dark);
}

/* Header */
header .card-header {
    border-bottom-color: var(--border);
}

/* Registration Card */
.registration-card {
    background: var(--white);
    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.08);
    border-color: var(--border);
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
    background: var(--white);
    border-color: var(--border);
    color: var(--text-dark);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-light);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

input.error,
select.error {
    border-color: var(--error);
    background: var(--error-light);
}

/* Select dropdown */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234B5563' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

select option {
    background: var(--white);
    color: var(--text-dark);
}

/* Password toggle */
.password-toggle {
    color: var(--text-light);
}

.password-toggle:hover {
    color: var(--text-dark);
}

/* Phone prefix */
.phone-prefix {
    background: var(--background);
    border-color: var(--border);
    color: var(--text-dark);
}

/* Labels */
label {
    color: var(--text-dark);
}

/* Trust badges */
.trust-badges .badge {
    background: var(--background);
    color: var(--text-gray);
}

/* Terms checkbox */
.checkbox-custom {
    background: var(--white);
    border-color: var(--border);
}

.terms-label,
.terms-label a {
    color: var(--text-gray);
}

.terms-label a:hover {
    color: var(--primary-hover);
}

/* Buttons */
.submit-btn {
    background: var(--primary);
    color: #111827;
}

.submit-btn:hover {
    background: var(--primary-hover);
}

.submit-btn.secondary {
    background: var(--background);
    color: var(--text-dark);
    border: 1px solid var(--border);
}

.submit-btn.secondary:hover {
    background: var(--border);
}

/* Theme toggle */
.theme-toggle {
    background: var(--white);
    border-color: var(--border);
    color: var(--text-gray);
}

.theme-toggle:hover {
    border-color: var(--text-gray);
    color: var(--text-dark);
}

/* Language dropdown */
.lang-dropdown-toggle {
    background: var(--white);
    border-color: var(--border);
    color: var(--text-dark);
}

.lang-dropdown-toggle:hover {
    background: var(--background);
}

.lang-dropdown-menu {
    background: var(--white);
    border-color: var(--border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.lang-option:hover {
    background: var(--background);
}

.lang-name {
    color: var(--text-dark);
}

/* Error banner */
.error-banner {
    background: var(--error-light);
    border-color: var(--error);
    color: var(--error);
}

/* Error messages */
.error-message {
    color: var(--error);
}

/* Verification step */
.verification-step {
    background: var(--white);
}

.step-header {
    background: var(--background);
    border-bottom-color: var(--border);
}

.step-subtitle {
    color: var(--text-gray);
}

.step-sidebar {
    background: var(--background);
    border-right-color: var(--border);
}

.step-item {
    color: var(--text-light);
}

.step-item.active {
    color: var(--text-dark);
    border-left-color: var(--primary);
}

.step-item.completed {
    color: #059669;
}

.step-content {
    background: var(--white);
}

.step-content h2 {
    color: var(--text-dark);
}

.step-content > p {
    color: var(--text-gray);
}

.email-display {
    color: var(--text-dark);
}

/* PIN inputs */
.pin-input {
    background: var(--white);
    border-color: var(--border);
    color: var(--text-dark);
}

.pin-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Resend section */
.resend-section p,
.resend-section a {
    color: var(--text-gray);
}

.resend-section a:hover {
    color: var(--primary-hover);
}

/* Change email link */
.change-email-link {
    color: var(--text-gray);
}

.change-email-link:hover {
    color: var(--primary-hover);
}

/* Modals */
.modal-content {
    background: var(--white);
    border-color: var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-header {
    border-bottom-color: var(--border);
}

.modal-title {
    color: var(--text-dark);
}

.modal-close {
    color: var(--text-light);
}

.modal-close:hover {
    color: var(--text-dark);
}

.modal-body p {
    color: var(--text-gray);
}

.modal-footer {
    border-top-color: var(--border);
}

.btn-modal-cancel {
    background: var(--background);
    color: var(--text-dark);
    border-color: var(--border);
}

.btn-modal-cancel:hover {
    background: var(--border);
}

.btn-modal-confirm {
    background: var(--primary);
    color: #111827;
}

.btn-modal-confirm:hover {
    background: var(--primary-hover);
}

/* Error modal */
.error-modal .modal-content {
    border-color: var(--error);
}

.error-modal .modal-header {
    background: var(--error-light);
}

.error-modal .modal-title {
    color: var(--error);
}

/* Disclaimer modal */
.disclaimer-title {
    color: var(--text-dark);
}

.disclaimer-body {
    color: var(--text-gray);
}

.disclaimer-icon {
    color: var(--accent);
}

/* Questionnaire */
.form-group label {
    color: var(--text-dark);
}

.radio-group label {
    color: var(--text-gray);
}

.radio-custom {
    background: var(--white);
    border-color: var(--border);
}

/* Confirmation step */
.confirmation-content h2 {
    color: var(--text-dark);
}

.confirmation-content p {
    color: var(--text-gray);
}

.verification-prompt {
    background: transparent;
}

.verification-prompt h3 {
    color: var(--text-dark);
}

.verification-prompt p {
    color: var(--text-gray);
}

/* Success icon - keep green */
.success-icon svg circle {
    stroke: #059669;
}

.success-icon svg path {
    stroke: #059669;
}

/* Turnstile widget - adjust for light bg */
.turnstile-wrapper {
    background: var(--background);
    border-radius: 8px;
    padding: 12px;
}

/* Scrollbar for light theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* Focus outline for accessibility */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    body {
        background: white;
    }
    
    .registration-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}


.card-header {
    padding: 1rem; border-bottom: 1px solid #dfdfdf;
}
footer{
    font-size: 11px;
    width: 100%;
    padding: 1rem;
    max-width: 72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-top: 1px solid #c4c4c4;
    margin-top: 2rem;
    color: #5f5f5f;
}