@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --center-node: 130px;
    --center-icon: 48px;
    --small-node: 50px;
    --small-icon: 26px;
    --junction-dot: 4.5px;
    --stroke-width-red: 2.5px;
    --stroke-width-pink: 2.5px;
}

body, html {
    height: 100%;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.h-100vh {
    min-height: 100vh;
}

/* --- LEFT PANEL --- */

.left-panel{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 40px;
    overflow: hidden;
    color: #fff;
     /*
     background:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                radial-gradient(68.46% 73.1% at 50% 50%, #231515 0%, #121212 100%); 
    background-size: 40px 40px, 40px 40px, cover;
    background-position:center, center, center;
    /*background:url("/assets/img/primepulse_login/left-panel-bg.png") center/cover no-repeat;*/
    background: radial-gradient(68.46% 73.1% at 50% 50%, #231515 0%, #121212 100%);

}

img.bg-grid {
    position: absolute;
    z-index: 0;
}

/* Network Graphic Container */
.network-graphic {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 6 / 5;
    margin-bottom: 50px;
}

/* Network Lines (SVG) */
.network-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.red-paths path {
    fill: none;
    stroke: #971428;
    stroke-width: var(--stroke-width-red);
    stroke-linejoin: round;
}

.fade-paths path {
    fill: none;
    /* stroke: url(#lineFade); */
    stroke: #6d061787;
    stroke-width: var(--stroke-width-pink);
    stroke-linejoin: round;
}

.pulse-paths path {
    fill: none;
    stroke: #ff2a4b;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px #ff2a4b) drop-shadow(0 0 12px #ff1c40);
    opacity: 1;
}

.junctions circle {
    fill: #730617;
    stroke: #730617;
    /*stroke: #ff1c40; */
    stroke-width: 1.5;
    transition: all 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.node {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    transform: translate(-50%, -50%);
}

.node::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1.5px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
                linear-gradient(217.47deg, #a81c2f 15.79%, rgba(168, 28, 47, 0) 45%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: spinBorder 5s linear infinite;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
    linear-gradient(217.47deg, #a81c2f 15.79%, rgba(168, 28, 47, 0) 45%);
}

@keyframes spinBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Central Node Configuration */
.node-center {
    width: var(--center-node);
    height: var(--center-node);
    top: 50%;
    padding: 14px;
    left: 50%;
    box-shadow: 0 0 40px rgba(176, 13, 35, 0.3), inset 0 0 20px rgba(176, 13, 35, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 104.04%);
    backdrop-filter: blur(35.05693054199219px)
}

.node-center .inner-glow {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(72.17604064941406px);
    background: linear-gradient(180deg, #563433, #482424);
}

/* Small Outer Nodes */
.node-small {
    width: var(--small-node);
    height: var(--small-node);
    background: radial-gradient(circle, #241114 0%, #0a0405 80%);
    box-shadow: 0 0 12px rgba(168, 15, 34, 0.2), 0 4px 10px rgba(0,0,0,0.6);
    backdrop-filter: blur(14.435209274291992px);
}

/* Dekstop Node Positions */
.n-1 { top: 12%; left: 23.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.n-2 { top: 30%; left: 6.66%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.n-3 { top: 58%; left: 23.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.n-4 { top: 76%; left: 6.66%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.n-5 { top: 20%; left: 93.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.n-6 { top: 50%; left: 73.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.n-7 { top: 64%; left: 93.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.n-8 { top: 92%; left: 73.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0) 12.53%, rgba(211, 11, 44, 0.1) 85.46%); }

.mobile-graphic { display: none; }
.desktop-graphic { display: block; }

/* Mobile Node Positions */
.m-center { top: 50%; left: 50%; }
.m-n-1 { top: 11.42%; left: 23.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.m-n-2 { top: 28.57%; left: 6.66%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.m-n-3 { top: 57.14%; left: 23.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.m-n-4 { top: 80.00%; left: 6.66%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.m-n-5 { top: 17.14%; left: 93.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.m-n-6 { top: 50.00%; left: 73.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.m-n-7 { top: 65.71%; left: 93.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0.1) 12.53%, rgba(211, 11, 44, 0) 85.46%); }
.m-n-8 { top: 91.42%; left: 73.33%; background: linear-gradient(208.18deg, rgba(211, 11, 44, 0) 12.53%, rgba(211, 11, 44, 0.1) 85.46%); } 



.desktop-screen{
    display: none;
}

/* Left Panel Content */
.trust-badge {
    background-color: #FFFFFF33;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(5px);
}

.trust-badge i {
    color: #fff;
    margin-right: 6px;
}

.left-panel h2 {
    font-size: 34px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.left-panel p {
    font-size: 16px;
}

/* --- RIGHT PANEL  --- */
.right-panel {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
}

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.title {
    font-size: 26px;
    font-weight: 700;
    color: #191E2A;
    margin-bottom: 8px;
    text-align: center;
}

.boxcontent {
    color: #797A7E;
    font-size: 16px;
    text-align: center;
    margin-bottom: 35px;
}

/* Form Controls */
.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.input-group {
    margin-bottom: 20px;
}

.error-border input::placeholder {
    color: #ff0000 !important;
}  

.input-icon, .input-group-text {
    background-color: #ffffff;
    border: 1px solid #ededed;
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: #adb5bd;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-icon svg path {
    transition: fill 0.2s;
}

.form-control {
    height: 42px;
    background-color: #ffffff;
    border: 1px solid #ededed;
    border-left: none;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: #333;
    padding-left: 0;
    box-shadow: none !important;
    transition: all 0.2s;
}

.form-control::placeholder {
    color: #797A7E;
}

.form-control:read-only, .forgot_el {
    background-color: #f8f9fa;
}

/* Fix for browser autofill background color */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover, 
.form-control:-webkit-autofill:focus, 
.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s;
}

 .input-group:focus-within .input-icon,
.input-group:focus-within .form-control,
.input-group:focus-within .cs-toggle-password {
    border-color: #ededed;
} 

.error-border {
    border-color: #d30f2c !important;
    border-radius: 8px;
    box-shadow: 3px 5px 9px rgba(247, 11, 11, 0.1);
}
.error-border .input-icon, 
.error-border .form-control,
.error-border .cs-toggle-password {
    border-color: #d30f2c !important;
}
label.error {
    color: #d30f2c !important;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
    margin-bottom: 0;
    display: block;
}

.cs-toggle-password {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: none;
    border-radius: 0 8px 8px 0;
    color: #adb5bd;
    display: flex;
    align-items: center;
    padding: 0 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.cs-toggle-password img{
    filter: brightness(0) saturate(100%) invert(73%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

input#password, input#password, #confirmPassword, #newPassword, #currentPassword{
    border-right: none !important;
}

/* Custom Checkbox & Options */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    font-size: 13px;
}

.remember-label {
    display: flex;
    align-items: center;
    color: #495057;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}

.remember-label input {
    display: none;
}

.custom-checkbox {
    width: 16px;
    height: 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 4px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.remember-label input:checked + .custom-checkbox {
    background-color: #d30f2c;
    border-color: #d30f2c;
}

.remember-label input:checked + .custom-checkbox::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
    font-size: 10px;
}

.form-options a, .backtologin_btn a {
    color: #C60A2A;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s;
    font-family: "Inter", sans-serif;
}

.form-options a:hover, .backtologin_btn a:hover {
    color: #9f0019;
    text-decoration: none;
}

.backtologin_btn {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

/* Buttons */
.signInBtn {
    background: linear-gradient(357.28deg, #33020B -30.69%, #540312 -13.96%, #960720 22.07%, #C60A2A 51.66%, #E30C30 74.82%, #EF0D33 87.69%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(211, 15, 44, 0.2);
    font-family: "Inter", sans-serif;
}

.signInBtn:hover, button.signInBtn:focus {
    background: linear-gradient(350.28deg, #33020B -30.69%, #540312 -13.96%, #960720 22.07%, #C60A2A 51.66%, #E30C30 74.82%, #EF0D33 87.69%);
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(211, 15, 44, 0.3) !important;
}

.divider{
    margin: 25px 0;
    position: relative;
    width: 100%;
}

.divider:after {
    position: absolute;
    content: 'OR';
    font-size: 12px;
    background: #fff;
    color: #4B4B4B;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
}

.btn-google {
    background-color: #f3f3f3;
    color: #333333 !important;
    border: 1px solid #ededed;
    border-radius: 8px;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    text-decoration: none;
}   
    
.btn-google:hover {
    background-color: #ededed;
    text-decoration: none;
}

.btn-google img, .btn-google svg {
    width: 18px;
    margin-right: 10px;
}

/* OTP Input Styling */
.pin-inputs {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
}

.pin-input {
    width: 100%;
    height: 48px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #333;
    transition: all 0.2s;
    background-color: #fff;
}

.pin-input:focus {
    border-color: #ededed;
    outline: none;
    /* box-shadow: 0 0 0 3px rgba(211, 15, 44, 0.1); */
}

.pin-inputs .loginInput {
    margin-bottom: 0;
}

/* Animations for form transitions */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */

@media (max-width: 991.98px)  {

    :root {
        --center-node: 90px;
        --center-icon: 32px;
        --small-node: 40px;
        --small-icon: 18px;
        --junction-dot: 3px;
        --stroke-width-red: 1.5px;
        --stroke-width-pink: 1.5px;
    }
    .row.h-100vh {
        background-color: #111111;
        background-image: 
            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        background-position: center top;
        height: auto;
        min-height: 100vh;
    }
    .left-panel {
        /* background: radial-gradient(circle at 50% 40%, rgba(30, 17, 19, 0.8) 0%, transparent 80%); */
        padding: 40px 20px 80px;
        min-height: auto;
    }
    .network-graphic {
        margin-bottom: 0;
    }
    .right-panel {
        background-color: transparent;
        padding: 0 15px 40px;
        align-items: flex-start;
    }
    .login-wrapper {
        background-color: #ffffff;
        border-radius: 10px;
        padding: 30px 20px;
        margin-top: -60px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        position: relative;
        z-index: 10;
        max-width: 100%;
    }
    
    img.bg-grid {
        position: absolute;
        z-index: 0;
        height: 380px;
    }
}

@media (min-width: 992px) {
    .left-panel.col-lg-6 {
        flex: 0 0 60%;
        max-width: 60%;
    }
    .right-panel.col-lg-6 {
        flex: 0 0 40%;
        max-width: 40%;
    }

}

@media (max-width: 1100px) {
    .desktop-screen{
        display: block;
    }

    .desktop-graphic{
        display: none;
    }
}

@media (max-width: 991px) {
    
    .desktop-screen{
        display: none;
    }
}

@media (max-width:500px){
    .brand-logo{
        margin-bottom: 20px;
    }

    .title {
        font-size: 18px;
    }
    .boxcontent {
        font-size: 13px;
        margin-bottom: 24px;
    }
    .node-center{
        width: 57px;
        height: 57px;
        padding: 7px;
    }
    .node-small {
        width: 24px;
        height: 24px;
    }

    .signInBtn{
        height: 42px;
        font-size: 14px;
    }

    .backtologin_btn {
        margin-top: 14px;
    }
}