/*
 * Base styles and custom utilities for ProspectHub
 * Version: 1.0
*/

/* --- General Styles --- */
* { 
    font-family: 'Noto Sans Bengali', sans-serif; 
}

.gradient-bg-page { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    min-height: 100vh; 
}

/* --- Card Styles --- */
.card-shine { 
    position: relative; 
    overflow: hidden; 
    border-radius: 1.5rem; 
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); 
    backdrop-filter: blur(20px); 
    background: rgba(255, 255, 255, 0.95); 
    border: 1px solid rgba(255, 255, 255, 0.6); 
}

.card-shine::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); 
    transition: left 0.6s; 
}

.card-shine:hover::before { 
    left: 100%; 
}

/* --- Button Styles --- */
.btn-primary { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    transition: all 0.3s ease; 
    position: relative; 
    overflow: hidden; 
}

.btn-primary:hover:not(:disabled) { 
    transform: translateY(-2px); 
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4); 
}

.btn-primary:disabled { 
    opacity: 0.6; 
    cursor: not-allowed; 
    transform: none; 
}

/* --- Form Input Styles --- */
.form-input { 
    transition: all 0.3s ease; 
    border: 2px solid #e5e7eb; 
    background: rgba(255, 255, 255, 0.9); 
}

.form-input:focus { 
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2); 
    border-color: #667eea; 
    outline: none; 
}

.form-input.error { 
    border-color: #ef4444; 
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2); 
}

.form-input.success { 
    border-color: #10b981; 
}

.password-toggle:hover { 
    color: #667eea; 
}

/* --- Animation and Effects --- */
.form-container { 
    animation: slideInUp 0.8s ease-out; 
}

@keyframes slideInUp { 
    from { opacity: 0; transform: translateY(50px) scale(0.95); } 
    to { opacity: 1; transform: translateY(0) scale(1); } 
}

.loading-spinner { 
    border: 2px solid rgba(255, 255, 255, 0.3); 
    border-left-color: white; 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    to { transform: rotate(360deg); } 
}

.floating-particles { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: 1; 
}

.particle { 
    position: absolute; 
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 50%; 
    animation: float 6s infinite ease-in-out; 
}

@keyframes float { 
    0%, 100% { transform: translateY(0px) rotate(0deg); } 
    50% { transform: translateY(-20px) rotate(180deg); } 
}

.error-message { 
    color: #ef4444; 
    font-size: 0.875rem; 
    margin-top: 0.25rem; 
    opacity: 0; 
    animation: fadeInError 0.3s ease-in-out forwards; 
}

@keyframes fadeInError { 
    to { opacity: 1; } 
}

/*
 * --- CUSTOM OVERRIDES AND FIXES ---
*/

/* 1. Logo Size Fix */
.logo-img-auth {
    height: 80px !important; /* Increased logo height */
    width: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* 2. Logo Spacing Fix */
/* This targets the main container div that has the .text-center class */
.form-container > .card-shine > .text-center {
    margin-bottom: 1rem !important; /* Overrides Tailwind's mb-8 */
}

/* This targets the <a> tag that contains the logo */
.form-container > .card-shine > .text-center > a {
    margin-bottom: 0.5rem !important; /* Overrides Tailwind's mb-4 */
}