/*
Table of Contents:
1. Base Container and Layout
2. Brand and Header Section
3. Form Elements and Styling
4. Input Fields and Controls
5. Button Styling
6. Error and Notification System
7. Image Selection Grid
8. Notification and Toast System
9. Media Queries and Responsive Design
10. Animation Keyframes
*/

/* ================================
   1. BASE CONTAINER AND LAYOUT
   ================================ */
.wpcrypto-login-container {
    max-width: 480px;
    margin: 2rem auto;
    padding: 2.5rem;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border: 1px solid #f0f0f0;
}

/* ================================
   2. BRAND AND HEADER SECTION
   ================================ */
.wpcrypto-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.wpcrypto-brand img,
.wpcrypto-brand .custom-logo {
    max-width: 200px;
    height: auto;
    max-height: 80px;
    margin-bottom: 1rem;
}

.wpcrypto-brand h1 {
    font-size: 1.75rem;
    color: #1a202c;
    margin: 1rem 0 0.5rem 0;
    font-weight: 700;
}

.wpcrypto-brand h2 {
    font-size: 1.5rem;
    color: #2d3748;
    margin: 0 0 1rem 0;
    font-weight: 600;
}

/* ================================
   3. FORM ELEMENTS AND STYLING
   ================================ */
.wpcrypto-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.95rem;
}

.form-group small {
    color: #718096;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* ================================
   4. INPUT FIELDS AND CONTROLS
   ================================ */
.form-group input[type="text"],
.form-group input[type="password"] {
    padding: 0.875rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: #f7fafc;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
    outline: none;
    border-color: #667eea;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input[type="checkbox"] {
    margin-right: 0.5rem;
    transform: scale(1.1);
}

/* ================================
   5. BUTTON STYLING
   ================================ */
button[type="submit"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

button[type="submit"]:active {
    transform: translateY(0);
}

.wpcrypto-restart-btn {
    background: #f7fafc;
    color: #4a5568;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wpcrypto-restart-btn:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

/* ================================
   6. ERROR AND NOTIFICATION SYSTEM
   ================================ */
.wpcrypto-error {
    background: #fef2f2;
    color: #dc2626;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid #fecaca;
    font-size: 0.9rem;
    text-align: center;
}

.wpcrypto-attempts {
    background: #fef5e7;
    color: #975a16;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 1px solid #f6e05e;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
}

.wpcrypto-restart {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.help-links {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.help-links a {
    color: #667eea;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.help-links a:hover {
    color: #5a67d8;
    text-decoration: underline;
}

/* ================================
   7. IMAGE SELECTION GRID
   ================================ */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.image-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: #f7fafc;
}

.image-option:hover {
    border-color: #cbd5e0;
    background: #edf2f7;
}

.image-option input[type="radio"] {
    display: none;
}

.image-option input[type="radio"]:checked + img {
    transform: scale(1.1);
}

.image-option input[type="radio"]:checked ~ span {
    color: #667eea;
    font-weight: 600;
}

.image-option:has(input[type="radio"]:checked) {
    border-color: #667eea;
    background: #eef2ff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.image-option img {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    transition: transform 0.2s ease;
    border-radius: 4px;
}

.image-option span {
    font-size: 0.75rem;
    font-weight: 500;
    color: #4a5568;
    transition: all 0.2s ease;
}

/* ================================
   8. NOTIFICATION AND TOAST SYSTEM
   ================================ */
.wpcrypto-notification {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wpcrypto-notification.success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.wpcrypto-notification.error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.wpcrypto-notification.warning {
    background: #fefbf3;
    color: #a16207;
    border: 1px solid #fed7aa;
}

.wpcrypto-notification.info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.wpcrypto-notification-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wpcrypto-notification-content {
    flex: 1;
}

.wpcrypto-notification-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.wpcrypto-notification-close:hover {
    opacity: 1;
}

.wpcrypto-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.wpcrypto-toast {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 1rem 1.25rem;
    border-left: 4px solid #667eea;
    animation: slideInRight 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wpcrypto-toast.success {
    border-left-color: #16a34a;
}

.wpcrypto-toast.error {
    border-left-color: #dc2626;
}

.wpcrypto-toast.warning {
    border-left-color: #d97706;
}

.wpcrypto-toast.slide-out {
    animation: slideOutRight 0.3s ease-in forwards;
}

/* ================================
   9. LOADING STATES
   ================================ */
.wpcrypto-form.loading button[type="submit"] {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.wpcrypto-form.loading button[type="submit"]:after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 0.5rem;
}

/* ================================
   10. ANIMATION KEYFRAMES
   ================================ */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ================================
   11. MEDIA QUERIES AND RESPONSIVE DESIGN
   ================================ */
@media (max-width: 480px) {
    .wpcrypto-login-container {
        margin: 1rem;
        padding: 1.5rem;
    }

    .image-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .image-option {
        padding: 0.5rem;
    }

    .image-option img {
        width: 32px;
        height: 32px;
    }

    .help-links {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 320px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wpcrypto-brand h1 {
        font-size: 1.5rem;
    }
}

/* End of wpcrypto-user-login-page.css */