/* Login Page - Modern Design */

/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Body styling - full height centering */
body.login-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #E0ECF4 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: hidden !important;
}

/* Background SVG - mountain illustration */
body.login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/login-bg.svg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 100% auto;
    z-index: 1;
    pointer-events: none;
}

/* Login Container - uses CSS Grid for precise vertical positioning */
.login-container {
    position: relative;
    z-index: 100;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

/* Top section stretches from top to card, logo centered inside */
.login-top-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100px;
}

/* Logo centered inside top section */
.login-logo {
    text-align: center;
}

/* Bottom section to balance the layout */
.login-bottom-section {
    flex: 1;
    min-height: 20px;
}

.login-logo img {
    height: 74px;
    width: 190px;
}

.login-card {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: none;
    padding: 48px 24px 8px 32px;
    width: 347px;
    max-width: 347px;
}

.login-title {
    color: #00003D;
    font-size: 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    text-align: center;
    margin: 0 0 32px 0;
    line-height: 31.2px;
    word-wrap: break-word;
}

/* Form Groups */
.form-group-wrapper {
    margin-bottom: 16px;
}

.input-with-icon {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 12px;
    color: #00003D;
    font-size: 18px;
    z-index: 1;
    pointer-events: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-icon.icon-person {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9988 11.8972C10.8541 11.8972 9.91827 11.5337 9.19127 10.8067C8.46411 10.0796 8.10052 9.14365 8.10052 7.99899C8.10052 6.85432 8.46411 5.91807 9.19127 5.19024C9.91827 4.46224 10.8541 4.09824 11.9988 4.09824C13.1434 4.09824 14.0807 4.46224 14.8105 5.19024C15.5405 5.91807 15.9055 6.85432 15.9055 7.99899C15.9055 9.14365 15.5405 10.0796 14.8105 10.8067C14.0807 11.5337 13.1434 11.8972 11.9988 11.8972ZM3.85052 18.524V17.7157C3.85052 17.0572 4.01652 16.4907 4.34852 16.016C4.68036 15.5412 5.10894 15.1806 5.63427 14.9342C6.75894 14.4302 7.83969 14.0522 8.87652 13.8002C9.91319 13.5482 10.9539 13.4222 11.9985 13.4222C13.0507 13.4222 14.0906 13.5524 15.1183 13.8127C16.1459 14.0731 17.2194 14.4485 18.3388 14.939C18.8868 15.1823 19.3266 15.5407 19.6583 16.014C19.9898 16.4873 20.1555 17.0546 20.1555 17.7157V18.524C20.1555 18.9922 19.9892 19.3931 19.6565 19.7267C19.3239 20.0604 18.9204 20.2272 18.4463 20.2272H5.55377C5.08127 20.2272 4.67927 20.0604 4.34777 19.7267C4.01627 19.3931 3.85052 18.9922 3.85052 18.524ZM5.55377 18.524H18.4463V17.7397C18.4463 17.4756 18.3671 17.2237 18.2088 16.9842C18.0504 16.7446 17.8546 16.5671 17.6213 16.4517C16.5704 15.9469 15.6084 15.6007 14.735 15.413C13.8617 15.2253 12.949 15.1315 11.997 15.1315C11.053 15.1315 10.134 15.2253 9.24002 15.413C8.34602 15.6007 7.38477 15.9466 6.35627 16.4507C6.12127 16.5662 5.92877 16.7438 5.77877 16.9835C5.62877 17.2233 5.55377 17.4754 5.55377 17.7397V18.524ZM11.9988 10.194C12.6336 10.194 13.1586 9.98682 13.5738 9.57249C13.9888 9.15799 14.1963 8.63315 14.1963 7.99799C14.1963 7.36115 13.9891 6.8359 13.5748 6.42224C13.1606 6.00857 12.6361 5.80174 12.0013 5.80174C11.3664 5.80174 10.8414 6.00865 10.4263 6.42249C10.0113 6.83649 9.80377 7.36065 9.80377 7.99499C9.80377 8.63115 10.0109 9.15665 10.4253 9.57149C10.8394 9.98649 11.3639 10.194 11.9988 10.194Z' fill='%2300003D'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

.input-icon.icon-lock {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.55377 22.1375C5.08544 22.1375 4.68444 21.9707 4.35077 21.6372C4.01727 21.3036 3.85052 20.9026 3.85052 20.4342V9.69174C3.85052 9.22174 4.01727 8.81941 4.35077 8.48475C4.68444 8.14991 5.08544 7.98249 5.55377 7.98249H7.18427V5.71424C7.18427 4.37474 7.65319 3.23424 8.59102 2.29274C9.52869 1.35124 10.6654 0.880493 12.0013 0.880493C13.3371 0.880493 14.4734 1.35124 15.4103 2.29274C16.3473 3.23424 16.8158 4.37474 16.8158 5.71424V7.98249H18.4463C18.9163 7.98249 19.3186 8.14991 19.6533 8.48475C19.9881 8.81941 20.1555 9.22174 20.1555 9.69174V20.4342C20.1555 20.9026 19.9881 21.3036 19.6533 21.6372C19.3186 21.9707 18.9163 22.1375 18.4463 22.1375H5.55377ZM5.55377 20.4342H18.4463V9.69174H5.55377V20.4342ZM12.0043 16.988C12.5348 16.988 12.9875 16.8044 13.3625 16.4372C13.7375 16.0701 13.925 15.6287 13.925 15.113C13.925 14.613 13.7361 14.1588 13.3583 13.7505C12.9804 13.3422 12.5263 13.138 11.9958 13.138C11.4653 13.138 11.0125 13.3422 10.6375 13.7505C10.2625 14.1588 10.075 14.6172 10.075 15.1255C10.075 15.6338 10.2639 16.0713 10.6418 16.438C11.0196 16.8047 11.4738 16.988 12.0043 16.988ZM8.88752 7.98249H15.1125V5.71549C15.1125 4.84233 14.8113 4.10308 14.2088 3.49774C13.6063 2.89241 12.8714 2.58974 12.0043 2.58974C11.1373 2.58974 10.4011 2.89241 9.79577 3.49774C9.19027 4.10308 8.88752 4.84233 8.88752 5.71549V7.98249Z' fill='%2300003D'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

.input-icon.icon-email {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 20C3.45 20 2.979 19.804 2.587 19.412C2.195 19.02 1.99934 18.5493 2 18V6C2 5.45 2.196 4.979 2.588 4.587C2.98 4.195 3.45067 3.99934 4 4H20C20.55 4 21.021 4.196 21.413 4.588C21.805 4.98 22.0007 5.45067 22 6V18C22 18.55 21.804 19.021 21.412 19.413C21.02 19.805 20.5493 20.0007 20 20H4ZM12 13L4 8V18H20V8L12 13ZM12 11L20 6H4L12 11ZM4 8V6V18V8Z' fill='%2300003D'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

.input-icon.icon-mobile {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 23C6.45 23 5.979 22.804 5.587 22.412C5.195 22.02 4.99934 21.5493 5 21V3C5 2.45 5.196 1.979 5.588 1.587C5.98 1.195 6.45067 0.999337 7 1H17C17.55 1 18.021 1.196 18.413 1.588C18.805 1.98 19.0007 2.45067 19 3V21C19 21.55 18.804 22.021 18.412 22.413C18.02 22.805 17.5493 23.0007 17 23H7ZM7 18V21H17V18H7ZM12 20.5C12.2833 20.5 12.521 20.404 12.713 20.212C12.905 20.02 13.0007 19.7827 13 19.5C13 19.2167 12.904 18.979 12.712 18.787C12.52 18.595 12.2827 18.4993 12 18.5C11.7167 18.5 11.479 18.596 11.287 18.788C11.095 18.98 10.9993 19.2173 11 19.5C11 19.7833 11.096 20.021 11.288 20.213C11.48 20.405 11.7173 20.5007 12 20.5ZM7 16H17V6H7V16ZM7 4H17V3H7V4Z' fill='%2300003D'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

.input-with-icon .form-control-modern {
    padding-left: 48px;
}

.input-label {
    display: block;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #333333;
    margin-bottom: 8px;
    font-weight: 400;
    line-height: 21px;
    word-wrap: break-word;
}

.label-with-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.label-with-link .input-label {
    margin-bottom: 0;
    line-height: 21px;
}

.forgot-password-link {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #757575;
    text-decoration: none;
    font-weight: 400;
    line-height: 21px;
    word-wrap: break-word;
}

.forgot-password-link:hover {
    text-decoration: underline;
    color: #0061A6;
}

.form-group-modern {
    margin-bottom: 0;
}

.form-control-modern {
    width: 100%;
    padding: 12px 12px 12px 48px;
    border: 1px solid #BDBDBD;
    border-radius: 6px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    line-height: 24px;
    transition: border-color 0.2s;
    background: white;
    position: relative;
    height: 48px;
    color: #333333;
    box-sizing: border-box;
}

.form-control-modern::placeholder {
    color: #757575;
}

.form-control-modern:focus {
    border-color: #0061A6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,97,166,0.1);
}

.form-group-modern .help-block {
    color: #d32f2f;
    font-size: 12px;
    margin-top: 5px;
}

.form-group-modern.has-error .form-control-modern {
    border-color: #d32f2f;
}

/* Login Button */
.btn-login {
    width: 100%;
    background: #0061A6;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
    border-radius: 26px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 16px;
    height: 45px;
    line-height: 20.8px;
    word-wrap: break-word;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-login:hover {
    background: #002A87;
}

.btn-login:active {
    transform: scale(0.98);
}

/* Footer Links */
.login-footer-links {
    text-align: center;
    margin-top: 16px;
    padding-bottom: 0;
    margin-bottom: 0;
}

.login-footer-links p {
    color: #333333;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    margin: 0;
    line-height: 20.8px;
    word-wrap: break-word;
}

.create-account-link {
    color: #0061A6;
    text-decoration: underline;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

.create-account-link:hover {
    color: #002A87;
}

.login-additional-links {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    margin-top: 16px;
    border-top: 1px solid #BDBDBD;
}

.login-additional-links a {
    color: #333333;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    font-weight: 400;
    line-height: 21px;
    word-wrap: break-word;
}

.login-additional-links a:hover {
    color: #0061A6;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    body.login-page {
        min-height: 100vh;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    body.login-page::before {
        display: none;
    }
    
    .login-container {
        min-height: auto;
        padding: 20px 15px;
    }
    
    .login-top-section {
        flex: 0 0 auto;
        min-height: 80px;
        padding: 20px 0;
    }
    
    .login-logo img {
        height: 60px;
        width: auto;
    }
    
    .login-card {
        padding: 32px 20px 8px 20px;
        width: 100%;
        max-width: 100%;
        min-width: auto;
        box-sizing: border-box;
    }
    
    .login-bottom-section {
        flex: 0 0 auto;
        min-height: 20px;
    }
    
    .login-title {
        font-size: 20px;
        line-height: 26px;
    }
    
    .form-control-modern {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
    
    .login-additional-links {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .login-additional-links a {
        white-space: nowrap;
    }
}

/* Register user form - required field indicators */
.register-user-form .form-group.required .glyphicon::after {
    content: '* ';
    color: #d32f2f;
    position: absolute;
    font-size: 9px;
    left: -2px;
    top: -5px;
}
.register-user-form .required-notice::before {
    content: '* ';
    color: #d32f2f;
}