:root {
        --primary: #0E4669;    /* Premium Blue */
        --primary-light: #1a6a9b;    /* Light variant */
        --primary-dark: #072e45;     /* Dark variant */
        --secondary: #4dabf7;  /* Soft blue */
        --secondary-light: #a5d8ff;  /* Light soft blue */
        --accent: #1a6a9b;     /* Light accent */
        --success: #10B981;    /* Green */
        --info: #0E4669;       /* Info */
        --warning: #ffd43b;    /* Yellow */
        --danger: #fa5252;     /* Soft red */
        --dark: #2b2d42;      /* Dark blue-gray */
        --gray-600: #4b5563;
        --gray-400: #9ca3af;
        --gray-100: #f8f9fa;  /* Very light gray */
        --light: #ffffff;     /* White */
        --border-color: #e2e8f0;    /* Light gray border */
        --border-radius: 0.5rem;
        --shadow: 0 4px 20px rgba(14, 70, 105, 0.08);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    

    body {
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        background: linear-gradient(135deg, #f0f4f8 0%, #e6eff5 50%, #dce7ed 100%);
        color: var(--dark);
        line-height: 1.6;
        min-height: 100vh;
        padding: 1rem;
        display: flex;
        align-items: center;
    }
    
    @media (min-width: 768px) {
        body {
            padding: 2rem 1rem;
        }
    }
 
    .container {
        max-width: 1000px;
        width: 100%;
        margin: 0 auto;
        padding: 0 0.5rem;
    }
    
    @media (min-width: 768px) {
        .container {
            margin: 1rem auto;
            padding: 0 1rem;
        }
    }

    .card {
        border: none;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        transition: var(--transition);
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(14, 70, 105, 0.1), 0 10px 10px -5px rgba(14, 70, 105, 0.04);
    }

    .card-header {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: white;
        border: none;
        padding: 1.5rem 2rem;
        position: relative;
        overflow: hidden;
    }

    .card-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--primary), var(--primary-light));
        background-size: 200% 200%;
        animation: gradient 3s ease infinite;
    }

    .card-header h3 {
        font-weight: 700;
        margin: 0;
        color: white;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .card-body {
        padding: 2rem;
    }

    .form-section {
        margin-bottom: 2.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--gray-100);
    }

    .form-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--primary);
    }

    .section-title i {
        margin-right: 0.5rem;
        color: var(--primary);
    }

    .form-label {
        font-weight: 500;
        color: var(--gray-600);
        margin-bottom: 0.5rem;
    }

    .form-control, .form-select {
        padding: 0.75rem 1rem;
        border-radius: 0.375rem;
        border: 1px solid #d1d5db;
        transition: var(--transition);
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 0.25rem rgba(14, 70, 105, 0.25);
        border-color: var(--primary-light);
    }

    .input-group-text {
        background-color: var(--light);
        border: 1px solid #d1d5db;
        color: var(--gray-600);
        transition: var(--transition);
    }

    .input-group:focus-within .input-group-text {
        border-color: var(--primary-light);
        color: var(--primary);
    }

    .document-upload {
        border: 2px dashed #d1d5db;
        border-radius: 0.5rem;
        padding: 1.5rem;
        text-align: center;
        cursor: pointer;
        transition: var(--transition);
        background-color: var(--light);
    }

    .document-upload:hover {
        border-color: var(--primary);
        background-color: rgba(14, 70, 105, 0.05);
    }

    .document-upload.drag-over {
        border-color: var(--primary);
        background-color: rgba(14, 70, 105, 0.06);
        box-shadow: 0 8px 20px rgba(14, 70, 105, 0.08);
        transform: translateY(-2px);
    }

    .document-upload i {
        font-size: 2rem;
        color: var(--primary);
        margin-bottom: 0.75rem;
    }

    .document-upload p {
        margin: 0;
        color: var(--gray-600);
    }

    .document-upload small {
        color: var(--gray-400);
        font-size: 0.75rem;
    }

    .btn-primary {
        background-color: var(--primary);
        border-color: var(--primary);
        font-weight: 500;
        letter-spacing: 0.5px;
        transition: var(--transition);
    }

    .btn-primary:hover {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(14, 70, 105, 0.3);
    }

    .btn-outline-primary {
        color: var(--primary);
        border-color: var(--primary);
    }

    .btn-outline-primary:hover {
        background-color: var(--primary);
        border-color: var(--primary);
        color: white;
    }

    .form-check-input:checked {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .form-check-label a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
    }

    .form-check-label a:hover {
        text-decoration: underline;
    }

    .text-danger {
        color: #ef4444 !important;
    }

    .is-invalid {
        border-color: #ef4444 !important;
    }

    .invalid-feedback {
        color: #ef4444;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .login-link {
        text-align: center;
        margin-top: 1.5rem;
    }

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

    .login-link a:hover {
        text-decoration: underline;
    }

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

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .container {
            padding: 1rem;
        }
        
        .card-body {
            padding: 1.5rem;
        }
        
        .section-title {
            font-size: 1.1rem;
        }
    }

    /* Custom file input styling */
    .custom-file-upload {
        display: none;
    }

    .file-info {
        font-size: 0.875rem;
        color: var(--gray-600);
        margin-top: 0.25rem;
    }

    /* Toggle switch for registration type */
    .registration-type-toggle {
        display: flex;
        background-color: var(--light);
        border-radius: 2rem;
        padding: 0.25rem;
        margin-bottom: 1.5rem;
    }

    .registration-type-btn {
        flex: 1;
        text-align: center;
        padding: 0.75rem;
        border-radius: 2rem;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }

    .registration-type-btn.active {
        background-color: white;
        color: var(--primary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border-color: var(--primary-light);
    }


                            /* Responsive layout for type selection buttons */
                            #typeSelectButtons{
                                gap: 0.75rem;
                                align-items: center;
                            }
                            #typeSelectButtons .type-select-btn{
                                flex: 1 1 calc(50% - 0.75rem);
                                min-width: 140px;
                                max-width: 320px;
                                box-sizing: border-box;
                                padding-left: 1.25rem;
                                padding-right: 1.25rem;
                            }
                            @media (max-width: 480px){
                                #typeSelectButtons{flex-direction: column; gap: 0.5rem;}
                                #typeSelectButtons .type-select-btn{flex: 1 1 100%; width: 100%;}
                            }