/* ====================================
   FastAid Landing Page Styles - DNSC Inspired
   ==================================== */

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #2d5a3d 0%, #3d6e4d 25%, #4d7e5d 50%, #3d6e4d 75%, #2d5a3d 100%);
    background-size: 400% 400%;
    animation: bodyGradient 20s ease infinite;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: hidden;
}

/* Animated Particles Container */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 50% 50%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 80% 10%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 33% 80%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 15% 90%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(3px 3px at 40% 20%, rgba(6, 214, 160, 0.4), transparent),
        radial-gradient(3px 3px at 70% 40%, rgba(239, 71, 111, 0.4), transparent),
        radial-gradient(3px 3px at 25% 60%, rgba(255, 255, 255, 0.4), transparent);
    background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 300% 300%, 300% 300%, 300% 300%;
    background-position: 0% 0%, 40% 60%, 50% 50%, 80% 10%, 90% 60%, 33% 80%, 15% 90%, 40% 20%, 70% 40%, 25% 60%;
    background-repeat: no-repeat;
    animation: particlesFloat 25s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

/* Heartbeat Pulse Effect */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 15% 30%, rgba(239, 71, 111, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(6, 214, 160, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    animation: pulseEffect 4s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes bodyGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes particlesFloat {
    0%, 100% { 
        background-position: 0% 0%, 40% 60%, 50% 50%, 80% 10%, 90% 60%, 33% 80%, 15% 90%, 40% 20%, 70% 40%, 25% 60%;
        opacity: 0.8;
    }
    25% {
        background-position: 10% 20%, 50% 70%, 60% 40%, 85% 5%, 95% 65%, 38% 85%, 20% 95%, 45% 25%, 75% 45%, 30% 65%;
        opacity: 1;
    }
    50% { 
        background-position: 20% 40%, 60% 80%, 70% 30%, 90% 0%, 100% 70%, 43% 90%, 25% 100%, 50% 30%, 80% 50%, 35% 70%;
        opacity: 0.9;
    }
    75% {
        background-position: 15% 30%, 55% 75%, 65% 35%, 87% 7%, 97% 67%, 40% 87%, 22% 97%, 47% 27%, 77% 47%, 32% 67%;
        opacity: 1;
    }
}

@keyframes pulseEffect {
    0%, 100% { 
        opacity: 0.5;
        transform: scale(1);
    }
    25% { 
        opacity: 0.8;
        transform: scale(1.05);
    }
    50% { 
        opacity: 0.5;
        transform: scale(1);
    }
    75% { 
        opacity: 0.7;
        transform: scale(1.03);
    }
}

/* Main Container */
.landing-container {
    display: grid;
    grid-template-columns: 45% 55%;
    max-width: 1000px;
    width: 90%;
    margin: 20px auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
    z-index: 1;
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Welcome Panel - Left Side with Medical Themed Animation */
.welcome-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3d6e4d 0%, #4d7e5d 25%, #5d8e6d 50%, #4d7e5d 75%, #3d6e4d 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Medical Cross Pattern */
.welcome-panel::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: 
        repeating-linear-gradient(0deg, transparent 0px, transparent 40px, rgba(255,255,255,0.03) 40px, rgba(255,255,255,0.03) 45px, transparent 45px, transparent 85px),
        repeating-linear-gradient(90deg, transparent 0px, transparent 40px, rgba(255,255,255,0.03) 40px, rgba(255,255,255,0.03) 45px, transparent 45px, transparent 85px);
    animation: medicalGrid 25s linear infinite;
    z-index: 1;
}

/* Heartbeat/ECG Line Effect */
.welcome-panel::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 50px,
        rgba(255, 255, 255, 0.15) 50px,
        rgba(255, 255, 255, 0.15) 52px,
        transparent 52px,
        rgba(255, 255, 255, 0.15) 60px,
        rgba(255, 255, 255, 0.15) 70px,
        transparent 70px,
        rgba(255, 255, 255, 0.15) 75px,
        rgba(255, 255, 255, 0.15) 77px,
        transparent 77px,
        transparent 150px
    );
    animation: ecgPulse 3s linear infinite;
    z-index: 2;
    opacity: 0.4;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes medicalGrid {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(85px, 85px) rotate(360deg); }
}

@keyframes ecgPulse {
    0% { transform: translateX(-150px); }
    100% { transform: translateX(100%); }
}

.welcome-image {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Form Panel - Right Side */
.form-panel {
    padding: 35px 30px;
    background: white;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    max-height: 95vh;
}

.form-panel::-webkit-scrollbar {
    width: 8px;
}

.form-panel::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.form-panel::-webkit-scrollbar-thumb {
    background: #6a9c7f;
    border-radius: 4px;
}

.form-panel::-webkit-scrollbar-thumb:hover {
    background: #5a8a6d;
}

.form-container {
    width: 100%;
    max-width: 420px;
    animation: fadeIn 0.5s ease-out;
    padding: 10px 0;
}

/* Brand Header */
.brand-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.brand-logo {
    width: 100px;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    margin: 0 auto 15px;
    display: block;
    animation: fadeIn 0.8s ease-out;
}

.brand-title {
    font-size: 1.6rem;
    color: #2c3e50;
    margin-bottom: 6px;
    font-weight: 700;
    line-height: 1.2;
}

.brand-subtitle {
    font-size: 0.85rem;
    color: #7f8c8d;
    font-weight: 400;
    line-height: 1.4;
}

/* Alert Message */
.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: none;
    animation: slideDown 0.4s ease-out;
    font-size: 0.9rem;
    position: relative;
}

.alert.show {
    display: block !important;
}

.alert.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert i {
    margin-right: 8px;
}

/* Form Tabs */
.form-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    background: #f5f6fa;
    padding: 4px;
    border-radius: 8px;
}

.tab-button {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #7f8c8d;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tab-button:hover {
    color: #5a6c7d;
}

.tab-button.active {
    background: white;
    color: #2c3e50;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Forms */
.form {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease-out;
}

.form.active {
    display: block;
    animation: formSlideIn 0.4s ease-out forwards;
}

@keyframes formSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-group {
    margin-bottom: 20px;
    animation: fieldFadeIn 0.5s ease-out backwards;
}

.form.active .form-group:nth-child(1) { animation-delay: 0.1s; }
.form.active .form-group:nth-child(2) { animation-delay: 0.15s; }
.form.active .form-group:nth-child(3) { animation-delay: 0.2s; }
.form.active .form-group:nth-child(4) { animation-delay: 0.25s; }
.form.active .form-group:nth-child(5) { animation-delay: 0.3s; }
.form.active .form-group:nth-child(6) { animation-delay: 0.35s; }

@keyframes fieldFadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: #2d3436;
    font-weight: 600;
    font-size: 0.95rem;
}

.input-group {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #b2bec3;
    font-size: 1.1rem;
    z-index: 1;
}

.form-control {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: white;
}

.form-control:focus {
    outline: none;
    border-color: #6a9c7f;
    box-shadow: 0 0 0 3px rgba(106, 156, 127, 0.1);
}

.form-control::placeholder {
    color: #b2bec3;
}

/* Role Selection */
.role-selection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

.role-option {
    position: relative;
    padding: 20px 12px;
    border: 2px solid #dfe6e9;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
}

.role-option:hover {
    border-color: #6a9c7f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(106, 156, 127, 0.2);
}

.role-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.role-option input[type="radio"]:checked ~ i,
.role-option input[type="radio"]:checked ~ .role-title,
.role-option input[type="radio"]:checked ~ .role-desc {
    color: #6a9c7f;
}

.role-option.active {
    border-color: #6a9c7f;
    background: linear-gradient(135deg, rgba(106, 156, 127, 0.1) 0%, rgba(90, 138, 109, 0.1) 100%);
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(106, 156, 127, 0.25);
}

.role-option i {
    font-size: 2.2rem;
    color: #b2bec3;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    display: block;
}

.role-option.active i {
    transform: scale(1.1);
    color: #6a9c7f;
}

.role-title {
    font-size: 1rem;
    font-weight: 600;
    color: #2d3436;
    margin-bottom: 4px;
    transition: all 0.3s ease;
}

.role-desc {
    font-size: 0.8rem;
    color: #636e72;
    transition: all 0.3s ease;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 14px 30px;
    background: linear-gradient(135deg, #6a9c7f 0%, #5a8a6d 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #5a8a6d 0%, #4a7a5d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(106, 156, 127, 0.3);
}

.submit-btn:active {
    transform: translateY(0);
}

.submit-btn .loading {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

.submit-btn.loading .loading {
    display: block;
}

.submit-btn.loading .btn-text {
    opacity: 0.7;
}

/* Forgot Password */
.forgot-password {
    text-align: center;
    margin-top: 16px;
}

.forgot-password a {
    color: #6a9c7f;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.forgot-password a:hover {
    color: #5a8a6d;
    text-decoration: underline;
}

/* Admin Login Link */
.admin-login-link {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
}

.admin-login-link .admin-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.admin-login-link .admin-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.admin-login-link .admin-link i {
    font-size: 1rem;
}

/* Dynamic Fields Animation */
#instructorFields,
#studentFields {
    animation: slideDown 0.4s ease-out;
    overflow: hidden;
}

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        max-height: 500px;
        opacity: 1;
        transform: translateY(0);
    }
}

/* Submit Button Animation */
.submit-btn {
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.submit-btn:hover::before {
    width: 300px;
    height: 300px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .landing-container {
        grid-template-columns: 1fr;
        max-width: 550px;
        margin: 10px auto;
    }
    
    .welcome-panel {
        display: none;
    }
    
    .form-panel {
        padding: 35px 25px;
        max-height: 100vh;
    }
    
    .form-group {
        margin-bottom: 18px;
    }
}

@media (max-width: 576px) {
    .landing-container {
        width: 100%;
        border-radius: 0;
        margin: 0;
    }
    
    .form-panel {
        padding: 20px 18px;
    }
    
    .brand-header {
        margin-bottom: 20px;
        padding-bottom: 12px;
    }
    
    .brand-logo {
        width: 80px;
        max-height: 80px;
        margin-bottom: 12px;
    }
    
    .brand-title {
        font-size: 1.3rem;
    }
    
    .brand-subtitle {
        font-size: 0.75rem;
    }
    
    .tab-button {
        padding: 8px 10px;
        font-size: 0.85rem;
        gap: 4px;
    }
    
    .tab-button i {
        font-size: 0.9rem;
    }
    
    .role-selection {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .role-option {
        padding: 18px 10px;
    }
    
    .role-option i {
        font-size: 2rem;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .form-control {
        padding: 10px 10px 10px 38px;
        font-size: 0.9rem;
    }
    
    .input-icon {
        left: 12px;
        font-size: 1rem;
    }
}

/* Loading State */
.form.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Success Message */
.alert.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Error Message */
.alert.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Info Message */
.alert.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}