/* RealMe Body Styles */
.realme-body {    background: #f0f0f0;    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    color: #333;    line-height: 1.6;    margin: 0;    padding: 0;}/* RealMe Header */.realme-header {    background: #010100;    color: white;    padding: 1rem 0;    border-bottom: 3px solid #d73502;    box-shadow: 0 2px 8px rgba(0,0,0,0.1);}.realme-header-content {    max-width: 1200px;    margin: 0 auto;    padding: 0 2rem;    display: flex;    justify-content: space-between;    align-items: center;}.realme-logo-section {    display: flex;    align-items: center;}.realme-logo {    height: 130px;    width: auto;}.nz-immigration-logo {    display: flex;    align-items: center;}.nz-logo {    height: 70px;    width: auto;}/* RealMe Content */.realme-content {    max-width: 1000px;    margin: 0 auto;    padding: 2rem;    background: #f0f0f0;    min-height: calc(100vh - 200px);}/* Login Container */.login-container {    min-height: 100vh;    background: #f5f5f5;}/* Login Header - RealMe Style */.login-header {    background: #1a1a1a;    color: white;    padding: 1rem 0;    margin-bottom: 2rem;}.login-header-content {    max-width: 1200px;    margin: 0 auto;    padding: 0 2rem;    display: flex;    justify-content: space-between;    align-items: center;}.logo-realme {    display: flex;    align-items: center;    gap: 0.5rem;    font-size: 1.5rem;    font-weight: 600;    color: white;}.logo-realme .logo-icon {    width: 32px;    height: 32px;    background: white;    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    color: #1a1a1a;    font-weight: bold;}.logo-immigration {    display: flex;    align-items: center;    gap: 0.5rem;    font-size: 0.9rem;    color: #ccc;}/* Notice Section */.login-notices {    max-width: 800px;    margin: 0 auto 2rem auto;    padding: 0 2rem;}.notice-card {    background: white;    border-radius: 8px;    padding: 1.5rem;    margin-bottom: 1rem;    box-shadow: 0 1px 3px rgba(0,0,0,0.1);}.notice-title {    font-size: 1.1rem;    font-weight: 600;    margin-bottom: 0.5rem;    color: #333;}.notice-text {    color: #666;    line-height: 1.5;    margin-bottom: 0.5rem;}.notice-warning {    color: #d73502;    font-weight: 500;}/* Login Wrapper */.login-wrapper {    background: white;    border-radius: 8px;    box-shadow: 0 4px 20px rgba(0,0,0,0.08);    overflow: hidden;    max-width: 900px;    width: 100%;    margin: 0 auto;    display: grid;    grid-template-columns: 1fr 1fr;    min-height: 500px;    border: 1px solid #e9ecef;}.login-left, .login-right {    padding: 3rem;    display: flex;    flex-direction: column;    justify-content: center;}.login-right {    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);    border-left: 1px solid #e9ecef;    position: relative;}.login-right::before {    content: '';    position: absolute;    top: 0;    left: 0;    width: 4px;    height: 100%;    background: linear-gradient(180deg, #d73502 0%, #b8260b 100%);}.login-title {    font-size: 1.875rem;    font-weight: 400;    margin-bottom: 1rem;    color: #1a1a1a;    line-height: 1.3;}.login-title .brand {    color: #d73502;    font-weight: 600;}.login-subtitle {    color: #666;    margin-bottom: 2rem;    font-size: 1rem;    line-height: 1.6;}/* RealMe Notices */.realme-notices {    background: white;    margin-bottom: 2rem;    border-radius: 8px;    overflow: hidden;    box-shadow: 0 1px 3px rgba(0,0,0,0.1);}.notice-item {    padding: 1.5rem;    border-bottom: 1px solid #e5e7eb;}.notice-item:last-child {    border-bottom: none;}.notice-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #1f2937;
}

.notice-text {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

.notice-text strong {
    color: #1f2937;
    font-weight: 600;
}

/* RealMe Main Section */
.realme-main-section {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    min-height: 500px;
    margin-top: 2rem;
}

/* Login Section */
.login-section {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Create Section */
.create-section {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f8f9fa;
    position: relative;
    border-left: 1px solid #e5e7eb;
}

/* Section Titles */
.section-title {
    font-size: 1.875rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: #1f2937;
    line-height: 1.3;
}

.realme-red {
    color: #D74308;
    font-weight: 600;
}

.section-subtitle {
    color: #6b7280;
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.6;
}

.section-description {
    color: #6b7280;
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.6;
}

/* RealMe Form */
.realme-form {
    max-width: 400px;
}

.form-field {
    margin-bottom: 1.5rem;
}

.realme-input {
    width: 100%;
    max-width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #1f2937;
    border-radius: 8px;
    font-size: 1rem;
    background: #f9fafb;
    transition: all 0.2s ease;
    color: #374151;
    font-family: inherit;
    box-sizing: border-box;
}

.realme-input:focus {
    outline: none;
    border-color: #D74308;
    background: white;
    box-shadow: 0 0 0 3px rgba(215, 67, 8, 0.1);
}

.realme-input:hover {
    border-color: #D74308;
}

.realme-input::placeholder {
    color: #6b7280;
    font-weight: 400;
}

/* RealMe Login Button */
.realme-login-btn {
    background: #D74308;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1rem;
}

.realme-login-btn:hover {
    background: #B8360B;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(215, 67, 8, 0.3);
}

.btn-realme-icon {
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

/* RealMe Create Button */
.realme-create-btn {
    background: #D74308;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    max-width: 300px;
    margin-top: 1rem;
}

.realme-create-btn:hover {
    background: #B8360B;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(215, 67, 8, 0.3);
    color: white;
    text-decoration: none;
}

.btn-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Error Messages */
.error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Success Messages */
.success-message {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Password Field with Toggle */
.password-field-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input {
    width: 100%;
    padding-right: 3.5rem !important; /* Make more space for the eye icon */
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #6b7280;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 4px;
}

.password-toggle:hover {
    color: #374151;
    background-color: rgba(107, 114, 128, 0.1);
}

.password-toggle:focus {
    outline: 2px solid #d73502;
    outline-offset: 2px;
    border-radius: 4px;
}

.eye-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

/* Mobile Responsive for RealMe Login */
@media (max-width: 768px) {
    .realme-content {
        padding: 1rem;
    }
    
    .realme-main-section {
        flex-direction: column;
        min-height: auto;
    }
    
    .create-section {
        border-left: none;
        border-top: 1px solid #e5e7eb;
    }
    
    .login-section,
    .create-section {
        padding: 2rem 1.5rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .realme-form {
        max-width: 100%;
    }
    
    .realme-create-btn {
        max-width: 100%;
    }
}