/* --- Color Variables for Professional Look --- */
        :root {
            --color-primary-green: #10b981; /* Tailwind Emerald 500 - Professional Green */
            --color-secondary-dark: #1f2937; /* Tailwind Gray 800 - Main background */
            --color-panel-light: #f9fafb;     /* Tailwind Gray 50 - Form background */
            --color-input-border: #d1d5db;
            --color-text-dark: #374151;
            --color-text-light: #ffffff;
            --color-gold-hover: #fbbf24;      /* Tailwind Amber 400 */
            --color-red-error: #ef4444;       /* Tailwind Red 500 */
            --color-shadow: rgba(0, 0, 0, 0.4);
        }

        /* --- Base Styles: CRITICAL FOR NO SCROLLING (Split Layout) --- */
        body {
            background-color: var(--color-secondary-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh; /* Full viewport height */
            width: 100vw;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            overflow: hidden; /* Critical: Disables all body scrolling */
            font-family: 'Inter', sans-serif;
            transition: background-color 0.5s;
        }

        /* --- Split Container: Manages the two columns --- */
        .split-container {
            display: flex;
            width: 100%;
            height: 100vh;
            max-width: 1200px;
            max-height: 800px; /* Max size for a cleaner desktop window */
            border-radius: 0.75rem; /* Added radius to the container */
            overflow: hidden;
            box-shadow: 0 10px 40px var(--color-shadow);
        }

        /* ---------------------------------------------------- */
        /* --- 1. VISUAL PANEL (Left Division - Desktop Only) --- */
        /* ---------------------------------------------------- */
        .visual-panel {
            flex: 0 0 40%; /* Takes 40% of the desktop width */
            background: 
                linear-gradient(rgba(31, 41, 55, 0.85), rgba(31, 41, 55, 0.95)), /* Dark overlay for text contrast */
                url("https://placehold.co/800x1200/1f2937/ffffff?text=ELITE+ATHLETICS"); /* Placeholder background */
            background-size: cover;
            background-position: center;
            color: var(--color-text-light);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 2rem;
            
        }
        
        .visual-panel i {
             color: var(--color-gold-hover);
        }

        .visual-panel h1 {
            font-size: 2.5rem;
            font-weight: 900;
            margin-bottom: 1rem;
            letter-spacing: 1px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .visual-panel p {
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.5;
            max-width: 80%;
            opacity: 0.9;
        }

        /* ---------------------------------------------------- */
        /* --- 2. FORM PANEL (Right Division - Main Content) --- */
        /* ---------------------------------------------------- */
        .form-panel {
            flex-grow: 1; 
            background-color: var(--color-panel-light);
            color: var(--color-text-dark);
            display: flex;
            flex-direction: column;
            padding: 2rem 3rem; /* Increased horizontal padding, kept vertical padding */
            max-height: 100%; 
            box-sizing: border-box; /* Crucial for padding/height calculation */

            /* margin-bottom:50px !important; */
            overflow-y: auto;
            max-height: 100vh;
            padding-bottom: 2rem;
        }
        
        .header-content {
            text-align: center;
            /* margin-bottom: 2rem; */
            flex-shrink: 0;
        }

        .header-content i {
            color: var(--color-primary-green);
            font-size: 2rem; 
            margin-bottom: 0.5rem;
        }

        .header-content h2 {
            font-size: 1.75rem; 
            font-weight: 700; 
            color: var(--color-text-dark);
            margin-bottom: 0.25rem;
        }

        .header-content p {
            color: var(--color-text-dark);
            font-size: 0.9rem; 
            opacity: 0.7;
        }

        #register-form {
            display: flex;
            flex-direction: column;
            /* REMOVED flex-grow: 1 to prevent stretching/overlap */
            justify-content: flex-start; /* Start elements from the top */
            gap: 0.75rem; /* Fixed, reliable gap between input groups */
            /* min-height: 0; */
            margin-bottom:5px;

            
            /* Use padding for internal spacing if needed, but rely on gap for between-element space */
        }

        /* --- Form Elements --- */
        .input-group label {
            display: block;
            font-size: 0.85rem; 
            font-weight: 600; 
            color: var(--color-text-dark);
            margin-bottom: 0.25rem; 
        }

        .input-group input,
        .input-group select { 
            width: 100%;
            padding: 0.75rem 1rem; 
            border-radius: 0.375rem; 
            background-color: var(--color-panel-light);
            color: var(--color-text-dark);
            border: 1px solid var(--color-input-border);
            transition: border-color 200ms, box-shadow 200ms;
            font-size: 0.95rem;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
        }
        
        .input-group select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd' /%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center; 
            background-size: 1.1em 1.1em; 
            padding-right: 2.5rem; 
        }
        
        .input-group input:focus,
        .input-group select:focus {
            outline: none;
            border-color: var(--color-primary-green);
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); 
        }

        /* --- Register Button --- */
        .register-button {
            width: 100%;
            background-color: var(--color-primary-green);
            color: var(--color-text-light); 
            font-weight: 700; 
            padding: 0.85rem 1rem; 
            border-radius: 0.375rem; 
            border: none;
            cursor: pointer;
            transition: background-color 300ms, transform 300ms, box-shadow 300ms;
            margin-top: 1.5rem; /* Key adjustment: Ensure solid margin above the button */
            /* margin-bottom: 0.5rem;  */
            box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
            flex-shrink: 0; /* Prevents button from being compressed */
            margin-bottom:50px;
        }

        .register-button:hover {
            background-color: var(--color-gold-hover);
            transform: translateY(-1px);
            box-shadow: 0 6px 15px rgba(251, 191, 36, 0.5);
        }

        /* --- Footer Link --- */
        .login-text {
            text-align: center;
            color: var(--color-text-dark);
            margin-top: 1rem; 
            font-size: 0.85rem; 
            flex-shrink: 0; 
        }

        .login-text a {
            color: var(--color-primary-green);
            font-weight: 600;
            text-decoration: none;
        }

        .login-text a:hover {
            text-decoration: underline;
            color: var(--color-primary-green);
        }
        
        /* Message box styling */
        .message-box {
            text-align: center;
            color: var(--color-red-error);
            margin-top: 0.5rem;
            font-size: 0.8rem;
            flex-shrink: 0;
        }

        /* --- Mobile Adjustments (Hide Visual Panel) --- */
        @media (max-width: 767px) {

        body {
            height: auto !important;
            overflow-y: auto !important;
        }

        .split-container {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            display: block;
        }

        .form-panel {
            height: auto !important;
            max-height: none !important;
            overflow-y: visible !important;
            padding: 1.5rem !important;
        }
                
            .visual-panel {
                display: none; /* Hide the visual panel on mobile */
            }
            
            .header-content {
                margin-bottom: 1.5rem;
            }
            .header-content h2 {
                 font-size: 1.5rem;
            }
            #register-form {
                gap: 0.6rem; /* Tighter gap on mobile */
            }
            .register-button {
                margin-top: 1.25rem;
            }
            .login-text {
                margin-top: 0.75rem;
            }
        }


/* flash container */
/* Container – always on top */
.flash-container {
    position: fixed;
    top: 20px;
    right: 20px;
    width: auto;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Base style */
.flash-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    color: #fff;
    min-width: 220px;
    font-weight: 600;
    animation: slideIn 0.4s ease, fadeOut 0.8s ease 3s forwards;
}

/* Icons */
.flash-icon {
    font-size: 1.2rem;
}

/* Categories */
.flash-success {
    background: #10b981; /* emerald */
}

.flash-error,
.flash-danger {
    background: #ef4444; /* red */
}

.flash-warning {
    background: #f59e0b; /* amber */
    color: #1f2937;
}

.flash-info {
    background: #3b82f6; /* blue */
}

/* Animation: slide in from right */
@keyframes slideIn {
    from { 
        opacity: 0; 
        transform: translateX(50px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* Animation: fade out after 3s */
@keyframes fadeOut {
    to { 
        opacity: 0; 
        transform: translateX(30px); 
    }
}
  .input-group.error input,
  .input-group.error select,
  .input-group.error textarea { border-color: red; }
  .input-group.error .error-msg { color: red; font-size: 12px; margin-top: 4px; display: block; }