/**
 * Account pages (login, signup, logout, password reset)
 * Shared styles for the authentication flow.
 */

/* Page background gradient — the documented marketing/auth gradient.
   Distinct from the brand var(--primary-color)/var(--secondary-color)
   indigo pair on purpose; left as literal hex for now (the audit calls
   this out as a future palette decision). */
.account-page-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

/* Card styling */
.account-card {
    border-radius: 1rem;
    border: none;
}

/* Brand-colored primary button (override Bootstrap inside the auth card) */
.account-card .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.account-card .btn-primary:hover {
    background-color: #4338ca;
    border-color: #4338ca;
}

/* Input group styling */
.account-card .input-group-text {
    background-color: #f8f9fa;
}

/* Large icon at the top of each auth card */
.account-card .account-icon {
    font-size: 3rem;
}

/* Larger icon variant (logout / success states) */
.account-card .account-icon-lg {
    font-size: 4rem;
}

/* Success/completion circle (password-reset done, etc.) */
.account-success-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-size: 2.5rem;
}

/* "or sign in with email" divider that overlays an <hr> */
.account-card .account-divider {
    position: relative;
    margin: 1rem 0;
}

.account-card .account-divider hr {
    margin: 0;
}

.account-card .account-divider .account-divider-text {
    background: white;
    padding: 0 0.75rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.875rem;
    color: #6b7280;
    white-space: nowrap;
}

/* Honeypot field - completely hidden from users */
.honeypot-field {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Turnstile widget container */
.turnstile-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

/* Ensure Turnstile widget is visible */
.cf-turnstile {
    margin: 0 auto;
}