/* ===================================================
   DIGITAL MPPHED LOGIN
   Modern UI
===================================================*/

:root{

    --primary:#0F5ED7;
    --primary-dark:#073A93;
    --secondary:#00AEEF;

    --success:#16a34a;

    --white:#ffffff;

    --light:#f7f9fc;

    --text:#222;

    --border:#dfe7f1;

    --shadow:0 20px 50px rgba(0,0,0,.15);

    --radius:18px;

}



*{

    margin:0;

    padding:0;

    box-sizing:border-box;

    font-family:'Segoe UI',sans-serif;

}



body{

    background:#eef3fb;

    overflow-x:hidden;

}



.login-page{

    min-height:100vh;

}



.login-wrapper{

    display:flex;

    min-height:100vh;

}



/*========================

LEFT

========================*/

.login-left{

    width:60%;

    position:relative;

    overflow:hidden;

    color:#fff;

    background:

        linear-gradient(

        140deg,

        rgba(4,45,126,.95),

        rgba(0,119,182,.85)

        ),

        url("../img/auth-banner-1.webp");

    background-size:cover;

    background-position:center;

}



.overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

        rgba(0,0,0,.25),

        rgba(0,0,0,.45)

        );

}



.left-content{

    position:relative;

    z-index:5;

    padding: 15px 50px;

}



.dept-logo{

    width:90px;

    background:#fff;

    border-radius:50%;

    padding:8px;

    box-shadow:0 10px 25px rgba(0,0,0,.3);

}



.gov-title{

    /*margin-top:25px;*/

    letter-spacing:1px;

    color:#fff;

}



.system-title{

	margin-top: 0px;
    font-size: 30px;
    line-height: 30px;
    font-weight: 700;

}



.system-desc{

    margin-top:25px;

    width:80%;

    font-size:18px;

    opacity:.9;

}



/*========================

FEATURES

========================*/

.feature-grid{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}



.feature-card{

    backdrop-filter:blur(15px);

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.25);

    border-radius:20px;

    padding:30px;

    transition:.35s;

}



.feature-card:hover{

    transform:translateY(-8px);

}



.feature-card i{

    font-size:34px;

    margin-bottom:18px;

}



.feature-card h4{

    margin-bottom:8px;

}



.feature-card p{

    opacity:.9;

}



/*========================

RIGHT

========================*/

.login-right{

    width:40%;

    background:#f7f9fc;

   /* display:flex;  */

    align-items:center;

    justify-content:center;

    padding:40px;

}



.login-card{

    width:100%;

    max-width:480px;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(18px);

    border-radius:26px;

    border:1px solid rgba(255,255,255,.45);

    box-shadow:

    0 25px 60px rgba(0,0,0,.18);

    transition:.35s;
	padding: 15px;

}

.login-card:hover{

    transform:translateY(-6px);

}



.login-header{

    text-align:center;

    margin-bottom:15px;

}



.login-logo{

    width:90px;

    /*border-radius:50%;*/

    margin-bottom:10px;

}



.login-header h2{

    font-weight:700;

    color:#222;

}



.login-header p{

    color:#777;

}






/*========================

SWITCH

========================*/

.login-switch{

    display:flex;

    background:#edf2fb;

    border-radius:50px;

    overflow:hidden;

    margin-bottom:30px;

}



.switch-btn{

    flex:1;

    border:0;

    background:none;

    padding:15px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}



.switch-btn.active{

    background:var(--primary);

    color:#fff;

}



/*========================

FORM

========================*/

.form-group{

    margin-bottom:22px;

}



.form-group label{

    font-weight:600;

    margin-bottom:8px;

    display:block;

}



.form-control{

    height:45px;

    border-radius:14px;

    border:1px solid var(--border);

    padding-left:18px;

    transition:.3s;

}



.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .18rem rgba(15,94,215,.18);

}



.password-wrapper{

    position:relative;

}



.password-wrapper input{

    padding-right:55px;

}



.togglePassword{

    position:absolute;

    right:18px;

    top:18px;

    cursor:pointer;

    color:#777;

}



/*========================

BUTTON

========================*/

.btn-login{

    width:100%;

    height:46px;

    border:none;

    border-radius:15px;

    color:#fff;

    font-weight:700;

    font-size:17px;

    background:

        linear-gradient(

        135deg,

        #0F5ED7,

        #00AEEF

        );

    transition:.3s;

}



.btn-login:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(15,94,215,.35);

}



/*========================

ALERT

========================*/

.alert{

    border-radius:14px;

}



/*========================

ERROR

========================*/

.error_msg{

    font-size:13px;

}



/*========================

LOADER

========================*/

.page-loader{

    position:fixed;

    inset:0;

    background:#fff;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

}



.spinner{

    width:55px;

    height:55px;

    border:6px solid #dfe7f1;

    border-top-color:#0F5ED7;

    border-radius:50%;

    animation:spin .8s linear infinite;

}



@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}



/*========================

RESPONSIVE

========================*/

@media(max-width:1200px){

    .system-title{

        font-size:42px;

        line-height:50px;

    }

}



@media(max-width:991px){

    .login-left{

        display:none;

    }

    .login-right{

        width:100%;

        padding:20px;

    }

}



@media(max-width:576px){

    .login-card{

        padding:25px;

    }

    .login-header h2{

        font-size:26px;

    }

    .form-control{

        height:50px;

    }

}


/*==========================
BACKGROUND SHAPES
==========================*/

.login-left::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    top:-180px;

    right:-120px;

    animation:floatCircle 12s infinite ease-in-out;

}

.login-left::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    bottom:-120px;

    left:-120px;

    animation:floatCircle2 10s infinite ease-in-out;

}

@keyframes floatCircle{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(35px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatCircle2{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-35px);

    }

    100%{

        transform:translateY(0);

    }

}



.btn-login{

    position:relative;

    overflow:hidden;

}

.btn-login::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    rgba(255,255,255,.35);

    transform:skewX(-25deg);

}

.btn-login:hover::before{

    left:150%;

    transition:.8s;

}


.feature-card{

    cursor:pointer;

}

.feature-card:hover{

    background:rgba(255,255,255,.18);

    box-shadow:

    0 18px 35px rgba(0,0,0,.18);

}


.stats-row{

display:flex;

gap:20px;

margin-top:50px;

}
/*
.stats-row div{

flex:1;

padding:18px;

background:rgba(255,255,255,.10);

border-radius:16px;

text-align:center;

backdrop-filter:blur(8px);

}
*/

.stats-row h2{

margin:0;

font-size:30px;

color:#fff;

}

.stats-row span{

font-size:14px;

opacity:.9;

}

.login-footer{

margin-top:25px;

text-align:center;

font-size:13px;

color:#888;

}

.login-card{

animation:cardFade .8s;

}

@keyframes cardFade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:none;

}

}

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#0F5ED7;

border-radius:10px;

}

.gov-badge{

display:inline-block;

padding:12px 22px;

background:rgba(255,255,255,.12);

border-radius:50px;

margin-top:35px;

backdrop-filter:blur(10px);

font-size:14px;

}


.spinner{

border-top-color:#00AEEF;

animation:spin .8s linear infinite;

}

.page-loader{

background:

linear-gradient(

135deg,

#f4f8ff,

#ffffff

);

}

.watermark{

position:absolute;

bottom:20px;

right:30px;

font-size:70px;

font-weight:bold;

color:rgba(255,255,255,.05);

pointer-events:none;

}















  html, body {
            height: 100%;
        }

        .err-page {
            min-height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            background: linear-gradient(135deg, #fff3f0 0%, #ffffff 55%, #fff6f0 100%);
            overflow: hidden;
            padding: 30px 15px;
        }

        /* Decorative blurred blobs */
        .err-blob {
            position: absolute;
            border-radius: 50%;
            opacity: 0.15;
            z-index: 0;
        }

        .err-blob-1 {
            width: 420px;
            height: 420px;
            background: #dc3545;
            top: -140px;
            left: -140px;
        }

        .err-blob-2 {
            width: 320px;
            height: 320px;
            background: #fd7e14;
            bottom: -120px;
            right: -100px;
        }

        .err-blob-3 {
            width: 200px;
            height: 200px;
            background: #dc3545;
            bottom: 10%;
            left: 6%;
            opacity: 0.08;
        }

        .err-content {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 620px;
            text-align: center;
            background: #ffffff;
            border-radius: 20px;
            padding: 50px 40px;
            box-shadow: 0 20px 60px rgba(220, 53, 69, 0.12);
        }

        .err-brand {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-bottom: 30px;
        }

        .err-brand img {
            height: 55px;
        }

        .err-brand-text {
            text-align: left;
            line-height: 1.2;
        }

        .err-brand-text .dept {
            font-weight: 700;
            font-size: 16px;
            color: #1a1a2e;
            display: block;
        }

        .err-brand-text .gov {
            font-size: 12px;
            color: #6c757d;
            display: block;
        }

        .err-icon-wrap {
            width: 110px;
            height: 110px;
            margin: 0 auto 25px;
            border-radius: 50%;
            background: linear-gradient(135deg, #dc3545, #fd7e14);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(220, 53, 69, 0.35);
            animation: err-shake 4s ease-in-out infinite;
        }

        .err-icon-wrap i {
            font-size: 46px;
            color: #ffffff;
        }

        @keyframes err-shake {
            0%, 92%, 100% { transform: rotate(0deg); }
            94% { transform: rotate(-8deg); }
            96% { transform: rotate(8deg); }
            98% { transform: rotate(-4deg); }
        }

        .err-code {
            font-weight: 800;
            font-size: 15px;
            letter-spacing: 2px;
            color: #dc3545;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .err-title {
            font-weight: 800;
            font-size: 34px;
            color: #1a1a2e;
            margin-bottom: 12px;
            letter-spacing: 0.5px;
        }

        .err-sub {
            font-size: 16px;
            color: #6c757d;
            margin-bottom: 35px;
            line-height: 1.6;
        }

        .err-btn-group {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .err-btn {
            min-width: 160px;
            border-radius: 50px;
            padding: 10px 26px;
            font-weight: 600;
        }

        .err-btn-outline {
            background: #ffffff;
            border: 1.5px solid #dc3545;
            color: #dc3545;
        }

        .err-btn-outline:hover {
            background: #dc3545;
            color: #ffffff;
        }

        .err-ref {
            margin-top: 35px;
            padding-top: 20px;
            border-top: 1px solid #eef1f5;
            font-size: 12px;
            color: #9aa0a6;
        }

        @media (max-width: 480px) {
            .err-content {
                padding: 35px 22px;
            }

            .err-title {
                font-size: 26px;
            }

            .err-brand-text .dept {
                font-size: 13px;
            }
        }
		
		
		.feature-card:nth-child(1) i.fa-boxes {
    color: #f39c12; /* Warm orange - warehouse/stock feel */
}

.feature-card:nth-child(2) i.fa-chart-line {
    color: #27ae60; /* Green - growth/analytics feel */
}

.feature-card:nth-child(3) i.fa-users {
    color: #3498db; /* Blue - trust/security feel */
}

.feature-card:nth-child(4) i.fa-mobile-alt {
    color: #9b59b6; /* Purple - modern/tech feel */
}

.feature-card i {
    font-size: 2rem;
    margin-bottom: 12px;
}
    

        :root {
            --mp-primary: #0b6e8f;
            --mp-primary-dark: #073c50;
            --mp-primary-light: #12a4d1;
            --mp-accent: #f0a202;
            --mp-bg: #f4f8fa;
            --mp-text: #16232b;
            --mp-text-muted: #64798a;
            --mp-danger: #dc3545;
            --mp-radius: 16px;
            --mp-radius-sm: 10px;
            --mp-shadow: 0 20px 50px rgba(7, 60, 80, 0.14);
            --font-display: 'Poppins', 'Segoe UI', sans-serif;
            --font-body: 'Inter', 'Segoe UI', sans-serif;
        }

        body {
            font-family: var(--font-body);
            background-color: var(--mp-bg);
            color: var(--mp-text);
        }

        .authentication-wrapper.authentication-3 {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--mp-bg);
            padding: 24px;
        }

        .authentication-inner {
            width: 100%;
            max-width: 1180px;
            display: flex;
            border-radius: var(--mp-radius);
            overflow: hidden;
            box-shadow: var(--mp-shadow);
            background: #fff;
        }

        /* ---------- LEFT BRAND PANEL ---------- */
        .login-left {
            position: relative;
            flex: 0 0 55%;
            max-width: 55%;
            min-height: 720px;
            padding: 48px 44px 0;
            /* background-image (if any) comes from login-modern.css — we only
               set a fallback color here so the panel never looks unstyled if
               that file doesn't define one. The .overlay div below adds the
               brand-color tint on top without touching this background. */
            background-color: var(--mp-primary-dark);
            background-size: cover;
            background-position: center;
            color: #fff;
            overflow: hidden;
            display: flex;
            align-items: stretch;
        }

        .login-left .overlay {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(160deg, rgba(7, 60, 80, 0.88) 0%, rgba(11, 110, 143, 0.82) 62%, rgba(18, 164, 209, 0.68) 100%),
                radial-gradient(circle at 15% 15%, rgba(255,255,255,0.10), transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(255,255,255,0.08), transparent 45%);
            pointer-events: none;
        }

        /* signature element: a soft water-wave silhouette anchoring the panel */
        .login-left::after {
            content: "";
            position: absolute;
            left: -10%;
            right: -10%;
            bottom: -2px;
            height: 140px;
            background: rgba(255, 255, 255, 0.07);
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            pointer-events: none;
        }

        .login-left::before {
            content: "";
            position: absolute;
            left: -15%;
            right: -15%;
            bottom: -30px;
            height: 110px;
            background: rgba(255, 255, 255, 0.10);
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            pointer-events: none;
        }

        .left-content {
            position: relative;
            z-index: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-bottom: 40px;
        }

        .dept-logo {
            width: 100%;
            max-width: 62px;
            filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
        }

        .gov-title {
            font-family: var(--font-body);
            font-weight: 500;
            font-size: 13px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.78);
            margin-bottom: 2px;
        }

        .system-title {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 26px;
            line-height: 1.25;
            margin-bottom: 0;
            color: #fff;
        }

        .system-desc {
            font-family: var(--font-body);
            font-size: 14.5px;
            line-height: 1.6;
            color: rgba(255,255,255,0.82);
            max-width: 480px;
            margin: 14px 0 0;
        }

        .department-text {
            margin-top: 22px;
        }

        .department-text .dpt-text {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 15px;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.22);
            padding: 8px 18px;
            border-radius: 999px;
            backdrop-filter: blur(6px);
        }

        .department-text .dpt-text i {
            color: var(--mp-accent);
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
            margin-top: 28px !important;
        }

        .feature-card {
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: var(--mp-radius-sm);
            padding: 18px 16px;
            backdrop-filter: blur(8px);
            transition: transform .25s ease, background .25s ease;
        }

        .feature-card:hover {
            transform: translateY(-3px);
            background: rgba(255,255,255,0.14);
        }

        .feature-card i {
            font-size: 1.6rem !important;
            margin-bottom: 10px !important;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
        }

        .feature-card h4 {
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 3px;
        }

        .feature-card p {
            font-size: 12px;
            color: rgba(255,255,255,0.75);
            margin: 0;
            line-height: 1.4;
        }

        .stats-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-top: 30px;
            padding-top: 22px;
            border-top: 1px solid rgba(255,255,255,0.18);
        }

        .stats-row > div {
            text-align: center;
        }

        .stats-row h2 {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 22px;
            color: #fff;
            margin-bottom: 2px;
        }

        .stats-row span {
            font-size: 11px;
            color: rgba(255,255,255,0.7);
            text-transform: uppercase;
		}

        .gov-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 26px;
            padding: 9px 20px;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--mp-primary-dark);
            background: #fff;
            border-radius: 999px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.18);
        }

        .gov-badge i {
            color: var(--mp-accent);
        }

        /* ---------- RIGHT FORM PANEL ---------- */
        .authentication-inner > .d-flex.col-lg-5 {
            flex: 0 0 45%;
            max-width: 45%;
            padding: 56px 56px 40px !important;
            display: flex;
            align-items: center;
            background: #fff;
            animation: mp-fade-in .5s ease both;
        }

        @keyframes mp-fade-in {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .login-txt-back {
            background: transparent;
        }

        .login-form-logo img {
            max-height: 46px;
        }

        .logo-title-header {
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--mp-bg);
            border-radius: var(--mp-radius-sm);
            border-left: 3px solid var(--mp-accent);
        }

        .logo-tagline span {
            display: block;
            font-size: 11.5px;
            line-height: 1.5;
            color: var(--mp-text-muted);
        }

        .logo-tagline span:first-child {
            font-style: italic;
            color: var(--mp-primary-dark);
            margin-bottom: 4px;
        }

        .inventory-auth-form .form-label {
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 13px;
            color: var(--mp-text);
            margin-bottom: 6px;
        }

        /* segmented "Login Via" pill toggle — pure CSS, no markup/JS changes */
        .radio-button-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--mp-bg);
            border-radius: 999px;
            padding: 5px;
        }

        .radio-button-toggle .form-check {
            flex: 1;
            padding: 0;
            margin: 0;
            position: relative;
        }

        .radio-button-toggle .form-check-input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            cursor: pointer;
        }

        .radio-button-toggle .form-check-label {
            display: block;
            text-align: center;
            padding: 9px 10px;
            border-radius: 999px;
            font-weight: 600 !important;
            color: var(--mp-text-muted);
            cursor: pointer;
            transition: all .2s ease;
            margin: 0;
        }

        .radio-button-toggle .form-check-input:checked + .form-check-label {
            background: var(--mp-primary);
            color: #fff;
            box-shadow: 0 6px 16px rgba(11, 110, 143, 0.35);
        }

        .radio-button-toggle .or-text {
            display: none;
        }

        .icon-field {
            position: relative;
			border: 1.5px solid #e3e9ee !important;
        }

        .icon-field .icon-input {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--mp-primary);
            font-size: 14px;
            z-index: 2;
        }

        .icon-field .form-control {
            padding-left: 40px !important;
            height: 46px;
            border-radius: var(--mp-radius-sm) !important;
           /* border: 1.5px solid #e3e9ee !important; */
            font-size: 14px;
            background: #fbfcfd;
            transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .icon-field: focus {
            border-color: var(--mp-primary) !important;
            box-shadow: 0 0 0 4px rgba(11, 110, 143, 0.12) !important;
            background: #fff;
            outline: none;
        }

        select.form-control {
            padding-left: 40px !important;
            padding-right: 34px !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            background-color: #fbfcfd !important;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%2364798a' stroke-width='1.6' fill='none' fill-rule='evenodd'/></svg>") !important;
            background-repeat: no-repeat !important;
            background-position: right 16px center !important;
            background-size: 12px 8px !important;
        }

        select.form-control::-ms-expand {
            display: none;
        }

        /* Chrome/Edge tint saved-login fields blue on autofill — match our own field style instead */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-text-fill-color: var(--mp-text) !important;
            -webkit-box-shadow: 0 0 0px 1000px #fbfcfd inset !important;
            box-shadow: 0 0 0px 1000px #fbfcfd inset !important;
            transition: background-color 5000s ease-in-out 0s;
            caret-color: var(--mp-text);
        }

        .toggle-password {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--mp-text-muted);
            cursor: pointer;
            z-index: 2;
            font-size: 14px;
        }

        .toggle-password:hover {
            color: var(--mp-primary);
        }

        .captcha__textfield {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .captcha-img img {
            height: 46px;
            border-radius: var(--mp-radius-sm);
            border: 1.5px solid #e3e9ee;
        }

        #refreshCaptcha {
            cursor: pointer;
        }

        .error_msg {
            display: block;
            font-size: 12px;
            margin-top: 4px;
        }

        .inventory-bt.btn-ocean {
            height: 46px;
            border: none !important;
            border-radius: var(--mp-radius-sm) !important;
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 15px;
            letter-spacing: 0.02em;
            background: linear-gradient(135deg, var(--mp-primary) 0%, var(--mp-primary-dark) 100%) !important;
            color: #fff !important;
            box-shadow: 0 10px 24px rgba(11, 110, 143, 0.3);
            transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
        }

        .inventory-bt.btn-ocean:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 30px rgba(11, 110, 143, 0.4);
        }

        .inventory-bt.btn-ocean:active {
            transform: translateY(0);
        }

        .inventory-bt.btn-ocean:disabled {
            opacity: 0.7;
            transform: none;
        }

        .text-link {
            color: var(--mp-primary) !important;
            font-weight: 500;
            text-decoration: none;
        }

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

        .alert.alert-danger {
            border: none;
            border-radius: var(--mp-radius-sm);
            background: #fdecea;
            color: #b3261e;
            font-size: 13px;
            padding: 12px 16px;
        }

        .indent-title {
            font-family: var(--font-display);
            font-weight: 600;
            color: var(--mp-text);
        }

        .resent-otp {
            margin-top: 6px;
        }

        /* ---------- PAGE LOADER ---------- */
        .page-loader {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(244, 248, 250, 0.92);
            backdrop-filter: blur(3px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
        }

        .page-loader .spinner {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 4px solid rgba(11, 110, 143, 0.15);
            border-top-color: var(--mp-primary);
            animation: mp-spin .8s linear infinite;
        }

        .page-loader .txt {
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 13px;
            color: var(--mp-primary-dark);
            letter-spacing: 0.02em;
        }

        @keyframes mp-spin {
            to { transform: rotate(360deg); }
        }

        /* ---------- ACCESSIBILITY / QUALITY FLOOR ---------- */
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible {
            outline: 3px solid rgba(11, 110, 143, 0.45);
            outline-offset: 2px;
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.001ms !important;
                transition-duration: 0.001ms !important;
            }
        }

        /* ---------- RESPONSIVE ---------- */
        @media (max-width: 991.98px) {
            .login-left {
                display: none;
            }

            .authentication-inner > .d-flex.col-lg-5 {
                flex: 0 0 100%;
                max-width: 100%;
                padding: 40px 26px !important;
            }
        }

        @media (max-width: 575.98px) {
            .authentication-wrapper.authentication-3 {
                padding: 0;
            }

            .authentication-inner {
                border-radius: 0;
                min-height: 100vh;
            }

            .authentication-inner > .d-flex.col-lg-5 {
                padding: 32px 18px !important;
            }
        }
		
		
		
		
		
		 /* ---------- STEP INDICATOR ---------- */
        .fp-stepper {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 28px;
            position: relative;
        }

        .fp-stepper::before {
            content: "";
            position: absolute;
            top: 15px;
            left: 34px;
            right: 34px;
            height: 2px;
            background: #e3e9ee;
            z-index: 0;
        }

        .fp-step {
            position: relative;
            z-index: 1;
            flex: 1;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        .fp-step-num {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid #e3e9ee;
            color: var(--mp-text-muted);
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .25s ease;
        }

        .fp-step-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--mp-text-muted);
            letter-spacing: 0.01em;
        }

        .fp-step.active .fp-step-num {
            background: var(--mp-primary);
            border-color: var(--mp-primary);
            color: #fff;
            box-shadow: 0 6px 14px rgba(11, 110, 143, 0.35);
        }

        .fp-step.active .fp-step-label {
            color: var(--mp-primary-dark);
        }

        .fp-step.done .fp-step-num {
            background: var(--mp-success);
            border-color: var(--mp-success);
            color: #fff;
        }

        .fp-step.done .fp-step-num::before {
            content: "\f00c";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 12px;
        }

        .fp-step.done .fp-step-num span { display: none; }

        .fp-heading {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 21px;
            color: var(--mp-text);
            text-align: center;
            margin-bottom: 4px;
        }

        .fp-subtext {
            font-size: 13.5px;
            color: var(--mp-text-muted);
            text-align: center;
            margin-bottom: 22px;
            line-height: 1.5;
        }

        .fp-subtext b {
            color: var(--mp-text);
        }

        .inventory-auth-form .form-label {
            font-family: var(--font-body);
            font-weight: 600;
            font-size: 13px;
            color: var(--mp-text);
            margin-bottom: 6px;
        }