/* Authentication Component Styles */

/* Authentication Page Layout */
.auth-page {
    max-width: 400px;
    margin: 0 auto;
    padding: var(--spacing-6);
}

.auth-page .form-container {
    background-color: var(--color-white);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    border: var(--border-width-1) solid var(--color-gray-200);
    box-shadow: var(--shadow-base);
}

/* Authentication Description Text */
.auth-description {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

/* Authentication Info Text (e.g., wallet guide link) */
.auth-info {
    margin-bottom: var(--spacing-5);
    color: var(--color-text-secondary);
}

/* Primary Action Button Spacing */
#connect-wallet-btn {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-3);
}

/* Status Text Spacing */
#status-text {
    margin-bottom: var(--spacing-4);
}

.status-info {
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

/* Wallet Requirement Section */
.wallet-requirement {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
}

/* Wallet Not Detected Alert */
#wallet-required {
    margin-top: var(--spacing-5);
}

#wallet-required .alert p:last-child {
    margin-top: var(--spacing-4);
    margin-bottom: 0;
}

/* Utility class for hidden elements (CSP-compliant) */
.hidden {
    display: none !important;
}

/* Toast notification positioning (CSP-compliant) */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}