/* HKI Custom Login Page Styling */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html, body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: #FFFFFF !important;
    overflow: hidden !important;
}

/* Fixed Fullscreen Container to Override Any Theme Wrappers */
.hki-login-page-container {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #FFFFFF !important;
    z-index: 999999 !important;
    overflow: hidden !important;
}

/* Left Column: Login Form - Strictly Left Aligned */
.hki-login-left-col {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 3.5rem 4rem !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    text-align: left !important;
}

@media (max-width: 991px) {
    .hki-login-left-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 2.5rem 2rem !important;
    }
    .hki-login-right-col {
        display: none !important;
    }
}

.hki-login-left-col > div {
    width: 100% !important;
    max-width: 400px !important;
    text-align: left !important;
}

/* Logo */
.hki-logo-box {
    margin-bottom: 2rem !important;
    text-align: left !important;
}

.hki-logo-img {
    max-height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
    margin-left: 0 !important;
}

/* Welcome Text */
.hki-welcome-box {
    margin-bottom: 2rem !important;
    text-align: left !important;
}

.hki-welcome-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1E1B2E !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.5px !important;
    text-align: left !important;
}

.hki-welcome-sub {
    font-size: 14px !important;
    color: #64748B !important;
    margin: 0 !important;
    font-weight: 400 !important;
    text-align: left !important;
}

/* Form Container & Group Overrides */
.hki-login-form,
.oe_login_form {
    width: 100% !important;
    max-width: 400px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: left !important;
    margin-left: 0 !important;
}

.hki-login-form .form-group,
.oe_login_form .form-group {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 1.25rem !important;
    width: 100% !important;
    position: relative !important;
    text-align: left !important;
}

.hki-login-form label,
.oe_login_form label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #682A60 !important;
    margin-bottom: 6px !important;
    text-align: left !important;
}

/* Input Fields - Forcing Visibility & Left Alignment */
.hki-login-form input.form-control,
.oe_login_form input.form-control,
.hki-login-form .input-group input,
.oe_login_form .input-group input,
.hki-login-form input[type="text"],
.oe_login_form input[type="text"],
.hki-login-form input[type="password"],
.oe_login_form input[type="password"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 48px !important;
    padding: 12px 16px 12px 42px !important;
    font-size: 14px !important;
    color: #1E293B !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
    text-align: left !important;
}

.hki-login-form input.form-control:focus,
.oe_login_form input.form-control:focus {
    border-color: #682A60 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(104, 42, 96, 0.15) !important;
    outline: none !important;
}

/* Input Group & Password Wrapper Override */
.hki-input-group,
.hki-login-form .input-group,
.oe_login_form .input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Left Field Icons */
.hki-input-icon-left {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #682A60 !important;
    font-size: 15px !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* Password Toggle Eye Icon */
.hki-toggle-eye {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #64748B !important;
    font-size: 15px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: color 0.2s !important;
}

.hki-toggle-eye:hover {
    color: #682A60 !important;
}

/* Captcha Layout Alignment */
.hki-captcha-group,
.g-recaptcha {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-bottom: 1.25rem !important;
    width: 100% !important;
    text-align: left !important;
}

/* Primary Submit Button */
.hki-btn-submit,
.hki-login-form button[type="submit"],
.oe_login_form button[type="submit"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 48px !important;
    background: #682A60 !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    margin-top: 1.25rem !important;
    box-shadow: 0 4px 12px rgba(104, 42, 96, 0.25) !important;
    transition: all 0.2s ease-in-out !important;
}

.hki-btn-submit:hover,
.hki-login-form button[type="submit"]:hover {
    background: #54204E !important;
    box-shadow: 0 6px 16px rgba(104, 42, 96, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #FFFFFF !important;
}

/* Disabled State Styling */
.hki-btn-submit:disabled,
.hki-btn-submit[disabled],
.hki-login-form button[type="submit"]:disabled,
.hki-login-form button[type="submit"][disabled],
.oe_login_form button[type="submit"]:disabled,
.oe_login_form button[type="submit"][disabled] {
    background: #CBD5E1 !important;
    color: #94A3B8 !important;
    border: 1px solid #CBD5E1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.8 !important;
}

/* Reset Password */
.hki-reset-box {
    text-align: left !important;
    margin-top: 1.25rem !important;
}

.hki-reset-link,
.oe_login_form a[href*="reset_password"] {
    color: #682A60 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.hki-reset-link:hover {
    color: #54204E !important;
    text-decoration: underline !important;
}

/* Footer */
.hki-login-footer {
    text-align: left !important;
    font-size: 12px !important;
    color: #94A3B8 !important;
    margin-top: 2rem !important;
    font-weight: 400 !important;
}

/* Right Column: Background Image Cover */
.hki-login-right-col {
    flex: 0 0 60% !important;
    max-width: 60% !important;
    background-image: url('/website_direct_login/static/src/img/login.png?v=4') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    height: 100vh !important;
}