/* BangkokPC member service login — builds on the shared operator login layout. */
body.bangkok-service-login {
    --service-blue: #168bff;
    --service-violet: #7046ff;
    --service-magenta: #c12cff;
}

.service-login-shell::before {
    background:
        linear-gradient(rgba(76, 91, 145, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(76, 91, 145, .045) 1px, transparent 1px),
        radial-gradient(circle at 12% 22%, rgba(22, 139, 255, .2), transparent 29%),
        radial-gradient(circle at 86% 78%, rgba(193, 44, 255, .16), transparent 31%),
        #ffffff;
    background-size: 48px 48px, 48px 48px, auto, auto, auto;
}

.service-login-stage {
    min-height: 640px;
    grid-template-columns: minmax(0, 1.2fr) minmax(410px, .8fr);
}

.service-login-visual {
    min-height: 640px;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.72) 46%, rgba(255,255,255,0.18) 100%),
        linear-gradient(0deg, rgba(255,255,255,0.82) 0%, transparent 50%),
        url('/adm-assets/img/hero/hero-2-pc.jpg') center / cover no-repeat;
}

.service-login-visual .operator-kicker { color: #1260a5; }

.service-login-visual .operator-visual-copy > p {
    color: #151525;
}

.service-login-visual .operator-capabilities span {
    border-color: rgba(134, 174, 255, .25);
    background: rgba(255,255,255,0.66);
}

.service-login-panel {
    background:
        radial-gradient(circle at 100% 0%, rgba(112, 70, 255, .18), transparent 36%),
        radial-gradient(circle at 0% 100%, rgba(22, 139, 255, .09), transparent 38%),
        linear-gradient(155deg, rgba(255,255,255,0.99), rgba(255,255,255,0.99));
}

.service-role-badge {
    border-color: rgba(45, 148, 255, .35);
    color: #1263a5;
    background: rgba(22, 139, 255, .09);
}

.service-login-panel .operator-heading h2 {
    font-size: 35px;
    line-height: 1.2;
}

.service-login-panel .operator-input-wrap .input-adm:focus {
    border-color: rgba(83, 126, 255, .85);
    box-shadow: 0 0 0 3px rgba(75, 96, 255, .13), 0 0 22px rgba(112, 70, 255, .08);
}

.service-login-cta {
    background: linear-gradient(105deg, var(--service-blue), var(--service-violet) 58%, var(--service-magenta));
    box-shadow: 0 14px 35px rgba(80, 60, 255, .25);
}

.service-login-cta:hover {
    box-shadow: 0 17px 42px rgba(80, 60, 255, .36);
}

.service-login-help {
    border-color: rgba(96, 119, 196, .2);
    background: rgba(255,255,255,0.52);
}

.service-visual-status b { color: #12a571; }

@media (max-width: 920px) {
    .service-login-stage { grid-template-columns: 1fr; }
    .service-login-visual { min-height: 390px; padding: 54px 44px 30px; }
    .service-login-panel { padding-block: 52px; }
}

@media (max-width: 620px) {
    .service-login-shell { padding: 82px 16px 24px; }
    .service-login-shell .operator-brand { top: 22px; left: 22px; }
    .service-login-shell .operator-brand small { display: none; }
    .service-login-stage { border-radius: 21px; }
    .service-login-visual { min-height: 330px; padding: 40px 28px 26px; }
    .service-login-visual .operator-visual h1 { font-size: 37px; }
    .service-login-visual .operator-capabilities { gap: 7px; }
    .service-login-panel { padding: 42px 28px; }
    .service-login-panel .operator-heading h2 { font-size: 31px; }
}