/* Custom Micro-Lending Login Styles */
.login-container {
    background: linear-gradient(to bottom right, #f8fafc 0%, #f1f5f9 100%);
}

.graphic-section {
    background-color: #EF4444;
    position: relative;
    overflow: hidden;
}

.graphic-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.auth-button {
    background-color: #EF4444;
    transition: all 0.2s ease;
}

.auth-button:hover {
    background-color: #dc2626;
    transform: translateY(-1px);
}

.auth-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.input-field {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
}

.input-field:focus {
    border-color: #EF4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

@media (max-width: 768px) {
    .graphic-section {
        display: none;
    }
    
    .login-form-section {
        width: 100%;
        padding: 1.5rem;
    }
}

/* Custom Micro-Lending Styles */
.bg-chinese-red {
    background-color: #EF4444;
}

.text-chinese-red {
    color: #EF4444;
}

.hover\:bg-chinese-red\/90:hover {
    background-color: rgba(239, 68, 68, 0.9);
}

.focus\:ring-chinese-red:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
    outline: none;
}

/* Input field transitions */
.border-gray-300 {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .min-h-screen {
        padding: 1rem;
    }
    
    .max-w-3xl {
        max-width: 100%;
        border-radius: 1rem;
    }
}

/* Graphic section gradient overlay */
.bg-chinese-red::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    pointer-events: none;
}

/* SVG graphic styling */
.svg-financial {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Link hover effects */
a.hover\:underline:hover {
    text-decoration-color: #EF4444;
}

/* Form container shadow */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
                0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.bg-gradient-micro {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
}