/* ============================================================
   HAYAK — Login + MFA Page Styling
   CSS Client Extension: hayak-login-mfa-css
   ============================================================ */

/* ============================================================
   SPLIT LAYOUT (applied when JS has wrapped the MFA portlet)
   ============================================================ */
body.page-maximized:has(.portlet-mfa-verify):not(:has(.hayak-mfa-shell)) #wrapper {
    visibility: hidden;
}
body.page-maximized.mfa-custom-layout #main-content > .portlet-layout {
    display: none !important;
}

.hayak-mfa-shell {
    min-height: 100vh;
}

.hayak-mfa-shell .left-login-bg {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hayak-mfa-shell .left-login-bg > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hayak-mfa-shell .login-image-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hayak-mfa-shell .login-image-title .w-35 { width: 35%; }
.hayak-mfa-shell .login-image-title .w-28 { width: 28%; }

.hayak-mfa-shell .right-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.hayak-mfa-shell .right-pane-inner {
    width: 100%;
    max-width: 480px;
    text-align: center;
    padding: 0 10px;
}

.hayak-mfa-shell .right-pane-inner > img.logo {
    width: 50%;
    margin-bottom: 10px;
}

.hayak-mfa-shell h1.mfa-heading {
    font-size: 20px;
    font-weight: 600;
    margin: 25px 0;
    color: #222;
}

.hayak-mfa-shell .mobile-banner {
    width: 100%;
    margin-bottom: 40px;
}

.hayak-mfa-shell .custom-back-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    color: #F28300;
    font-weight: bold;
    text-decoration: none;
}

.hayak-mfa-shell .custom-back-link:hover {
    text-decoration: underline;
}

/* ============================================================
   MFA PORTLET CHROME CLEANUP
   ============================================================ */
.portlet-mfa-verify .portlet-title-text,
.portlet-mfa-verify .portlet-header,
.portlet-mfa-verify .portlet-icon-back {
    display: none !important;
}

.portlet-mfa-verify .portlet-content,
.portlet-mfa-verify .portlet-content-container,
.portlet-mfa-verify .portlet-body {
    padding: 0 !important;
}

.portlet-mfa-verify form.container-fluid {
    background: transparent !important;
    padding: 0 !important;
    max-width: unset !important;
}

/* ============================================================
   INFO MESSAGE
   ============================================================ */
.portlet-mfa-verify .portlet-msg-info {
    background-color: #f0f6fb;
    border: 1px solid #b8d4e8;
    border-left: 4px solid #003C64;
    border-radius: 6px;
    color: #003C64;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    padding: 12px 14px;
    margin-bottom: 18px;
    text-align: left;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.portlet-mfa-verify .btn {
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    padding-top: 7px;
    padding-bottom: 7px;
    width: 100%;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.portlet-mfa-verify .btn-secondary,
.portlet-mfa-verify .btn-secondary:hover,
.portlet-mfa-verify .btn-secondary:focus,
.portlet-mfa-verify .btn-secondary:active {
    background-color: #003C64 !important;
    border-color: #003C64 !important;
    color: #ffffff !important;
}

.portlet-mfa-verify .btn-secondary:disabled,
.portlet-mfa-verify .btn-secondary[disabled] {
    background-color: #003C64 !important;
    border-color: #003C64 !important;
    color: #ffffff !important;
    opacity: 0.55;
    cursor: not-allowed;
}

.portlet-mfa-verify .btn-primary,
.portlet-mfa-verify .btn-primary:hover,
.portlet-mfa-verify .btn-primary:focus,
.portlet-mfa-verify .btn-primary:active {
    background-color: #FFBF15 !important;
    border-color: #FFBF15 !important;
    color: #301C00 !important;
}

.portlet-mfa-verify .btn-primary:disabled,
.portlet-mfa-verify .btn-primary[disabled] {
    background-color: #FFBF15 !important;
    border-color: #FFBF15 !important;
    color: #301C00 !important;
    opacity: 0.55;
    cursor: not-allowed;
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.portlet-mfa-verify .control-label {
    font-size: 14px;
    font-weight: 500;
    color: #444;
    margin-bottom: 4px;
    display: block;
    text-align: left;
}

.portlet-mfa-verify input.form-control {
    font-size: 16px;
    padding: 8px 12px;
    border: 1px solid #bbb;
    border-radius: 4px;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.15em;
    text-align: center;
    font-weight: 600;
}

.portlet-mfa-verify input.form-control:focus {
    border-color: #003C64;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 60, 100, 0.12);
}

.portlet-mfa-verify .form-group {
    margin-bottom: 16px;
}

.portlet-mfa-verify .button-holder {
    margin-top: 8px;
    margin-bottom: 14px;
}

#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_phaseTwo {
    margin-top: 20px;
}

/* ============================================================
   ALERTS
   ============================================================ */
#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_messageContainer {
    margin: 12px 0;
}

#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_messageContainer .alert {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_messageContainer .alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_messageContainer .alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_messageContainer .alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

#_com_liferay_multi_factor_authentication_web_portlet_MFAVerifyPortlet_messageContainer .alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .hayak-mfa-shell .left-login-bg { display: none; }
    .hayak-mfa-shell .right-pane { min-height: auto; padding: 40px 20px; }
}