/* SMM_CUSTOMER_LOGIN_DESIGN_V1 */
/* Login page only */

body.smm-login-page {
    min-height:100vh;
    margin:0;
    padding:30px 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-family:Arial,sans-serif;
    background:
        radial-gradient(ellipse at 15% 90%,rgba(65,44,210,.48),transparent 45%),
        radial-gradient(ellipse at 90% 5%,rgba(143,35,216,.42),transparent 42%),
        #070b24;
}

body.smm-login-page > .card {
    width:100%;
    max-width:460px;
    margin:auto;
    padding:38px 34px;
    border:1px solid #6b3cb8;
    border-radius:22px;
    background:linear-gradient(145deg,#131e4a,#0b1432);
    box-shadow:0 18px 65px rgba(0,0,0,.3),0 0 32px rgba(121,53,221,.18);
}

body.smm-login-page .card h2 {
    margin:0 0 10px;
    font-size:31px;
    font-weight:800;
    text-align:center;
}

body.smm-login-page .card > p {
    text-align:center;
    color:#aebbe0;
    font-size:14px;
    line-height:1.7;
}

body.smm-login-page .smm-login-field {
    margin:18px 0;
}

body.smm-login-page .smm-login-field label {
    display:block;
    margin-bottom:9px;
    font-size:13px;
    font-weight:700;
    color:#e4e8ff;
}

body.smm-login-page .smm-login-field input {
    width:100%;
    height:52px;
    margin:0;
    padding:13px 15px;
    border:1px solid #354681;
    border-radius:11px;
    background:#1b2855;
    color:#fff;
    font-size:14px;
    outline:none;
}

body.smm-login-page .smm-login-field input:focus {
    border-color:#a568ff;
    box-shadow:0 0 0 3px rgba(153,83,255,.15);
}

body.smm-login-page .smm-login-password-wrap {
    position:relative;
}

body.smm-login-page .smm-login-password-wrap input {
    padding-right:75px;
}

body.smm-login-page .smm-login-toggle {
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    width:auto;
    margin:0;
    padding:8px;
    border:0;
    background:transparent;
    color:#d6ccff;
    cursor:pointer;
    font-size:13px;
}

body.smm-login-page .smm-login-submit {
    display:block;
    width:100%;
    min-height:54px;
    margin-top:26px;
    border:1px solid #ae67ff;
    border-radius:12px;
    color:#fff;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
    background:linear-gradient(100deg,#7760ff,#b900ed);
    box-shadow:0 10px 30px rgba(123,50,232,.35);
}

body.smm-login-page .card a {
    color:#bb9aff;
    text-decoration:none;
}

body.smm-login-page .card a:hover {
    text-decoration:underline;
}

@media(max-width:767px) {
    body.smm-login-page {
        padding:20px 14px;
    }

    body.smm-login-page > .card {
        max-width:450px;
        padding:30px 22px;
    }

    body.smm-login-page .card h2 {
        font-size:28px;
    }
}


/* SMM_LOGIN_REFERENCE_V2 — LOGIN PAGE ONLY */

@media (min-width:768px) {

body.smm-login-page {
    display:block;
    padding:0;
    background:
        radial-gradient(ellipse at 50% 95%,rgba(48,28,153,.38),transparent 60%),
        radial-gradient(ellipse at 95% 8%,rgba(118,33,198,.32),transparent 45%),
        #050a22;
}

body.smm-login-page .smmb-login-header {
    width:min(96%,1450px);
    margin:22px auto 0;
    min-height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:16px 30px;
    background:#07102c;
    border:1px solid #26316b;
    border-radius:18px 18px 0 0;
}

body.smm-login-page .smmb-login-brand {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

body.smm-login-page .smmb-login-brand img {
    max-width:170px;
    max-height:55px;
    object-fit:contain;
}

body.smm-login-page .smmb-login-brand span {
    color:#bfc8ec;
    font-size:12px;
}

body.smm-login-page .smmb-login-header nav {
    display:flex;
    gap:22px;
    align-items:center;
}

body.smm-login-page .smmb-login-header a {
    color:#fff;
    text-decoration:none;
    font-size:13px;
}

body.smm-login-page .smmb-login-header-right {
    display:flex;
    align-items:center;
    gap:18px;
    font-size:13px;
}

body.smm-login-page .smmb-login-header-right a {
    padding:12px 25px;
    border-radius:10px;
    background:linear-gradient(100deg,#765bff,#b900ef);
    box-shadow:0 0 20px #8b35e86b;
}

body.smm-login-page .smmb-login-layout {
    width:min(96%,1450px);
    margin:0 auto 30px;
    padding:50px 55px;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:65px;
    align-items:center;
    border:1px solid #27366f;
    border-top:0;
    border-radius:0 0 20px 20px;
    background:
        radial-gradient(ellipse at 40% 95%,#3410a15c,transparent 55%),
        linear-gradient(140deg,#07102e,#0a1236);
}

body.smm-login-page .smmb-login-hero {
    min-width:0;
}

body.smm-login-page .smmb-login-badge {
    display:inline-block;
    padding:9px 18px;
    border-radius:25px;
    background:#1b2258;
    color:#c8b2ff;
    font-size:13px;
}

body.smm-login-page .smmb-login-hero h1 {
    margin:22px 0 16px;
    font-size:clamp(34px,4vw,62px);
    line-height:1.12;
    letter-spacing:-1px;
}

body.smm-login-page .smmb-login-hero h1 strong {
    color:#d751ff;
}

body.smm-login-page .smmb-login-hero > p {
    max-width:510px;
    color:#bfc9ee;
    font-size:17px;
    line-height:1.7;
}

body.smm-login-page .smmb-login-features {
    display:grid;
    gap:13px;
    margin:25px 0;
}

body.smm-login-page .smmb-login-features div {
    display:flex;
    align-items:center;
    gap:13px;
    font-size:15px;
}

body.smm-login-page .smmb-login-features span {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(140deg,#5734c6,#a12df2);
    box-shadow:0 0 16px #7d35e37a;
}

body.smm-login-page .smmb-login-illustration {
    height:285px;
    background:url('/rental_manager/assets/images/smmbajar-laptop-v9.svg')
        center bottom / contain no-repeat;
    filter:drop-shadow(0 0 22px #7933ef75);
}

body.smm-login-page .smmb-login-highlights {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
    padding:15px;
    border:1px solid #4938a0;
    border-radius:14px;
    background:#101641;
}

body.smm-login-page .smmb-login-highlights div {
    text-align:center;
    color:#c9c5ff;
    font-size:12px;
    font-weight:700;
}

body.smm-login-page > .smmb-login-layout > .card {
    width:100%;
    max-width:none;
    margin:0;
    padding:38px 35px;
    background:linear-gradient(145deg,#101b49,#0a1335);
    border:1px solid #6b3bbf;
    border-radius:19px;
    box-shadow:0 0 35px #7536d52b;
}

body.smm-login-page .smmb-login-form-head h2 {
    text-align:left;
    font-size:28px;
}

body.smm-login-page .smmb-login-form-head p {
    color:#aebbe0;
    font-size:14px;
}

body.smm-login-page .smmb-login-social {
    margin-top:25px;
}

body.smm-login-page .smmb-login-divider {
    display:flex;
    align-items:center;
    gap:12px;
    color:#8e9ac8;
    font-size:11px;
    text-align:center;
}

body.smm-login-page .smmb-login-divider:before,
body.smm-login-page .smmb-login-divider:after {
    content:"";
    flex:1;
    border-top:1px solid #344275;
}

body.smm-login-page .smmb-login-social-buttons {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:18px;
}

body.smm-login-page .smmb-login-social-buttons span {
    display:block;
    padding:13px;
    text-align:center;
    border:1px solid #354584;
    border-radius:10px;
    color:#8c96b7;
    background:#111b43;
    cursor:not-allowed;
}

}

body.smm-login-page .smmb-login-input-wrap {
    position:relative;
}

body.smm-login-page .smmb-login-input-wrap input {
    padding-left:57px;
}

body.smm-login-page .smmb-login-input-icon {
    position:absolute;
    top:50%;
    left:12px;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:8px;
    color:#ded0ff;
    background:linear-gradient(140deg,#4930b2,#8233dd);
}

body.smm-login-page .smmb-login-password input {
    padding-right:75px;
}

body.smm-login-page .smmb-login-form-head {
    margin-bottom:24px;
}

body.smm-login-page .smmb-login-form-head h2 {
    margin-bottom:8px;
}

body.smm-login-page .smmb-login-social {
    margin-top:24px;
}

body.smm-login-page .smmb-login-divider {
    text-align:center;
    color:#99a5cc;
    font-size:11px;
}

body.smm-login-page .smmb-login-social-buttons {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:15px;
}

body.smm-login-page .smmb-login-social-buttons span {
    padding:12px;
    border:1px solid #33447c;
    border-radius:10px;
    text-align:center;
    color:#aeb8d5;
    background:#121c45;
    cursor:not-allowed;
}

@media(max-width:767px) {

body.smm-login-page .smmb-login-header,
body.smm-login-page .smmb-login-hero {
    display:none;
}

body.smm-login-page .smmb-login-layout {
    display:flex;
    width:100%;
    min-height:calc(100vh - 40px);
    align-items:center;
    justify-content:center;
}

body.smm-login-page .smmb-login-layout > .card {
    width:100%;
    max-width:450px;
    margin:auto;
}

body.smm-login-page .smmb-login-form-head h2 {
    text-align:center;
    font-size:28px;
}

body.smm-login-page .smmb-login-form-head p {
    text-align:center;
    font-size:13px;
}

}


/* SMM_SOCIAL_BUTTON_PRESS_EFFECT_V1 */
/* Scoped to customer login social buttons only. */

body.smm-login-page .smmb-login-social-buttons {
    align-items: stretch;
}

body.smm-login-page .smmb-login-social-buttons > a,
body.smm-login-page .smmb-login-social-buttons > button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 12px;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
    -webkit-tap-highlight-color: transparent;
}

body.smm-login-page .smmb-login-social-buttons > a:hover,
body.smm-login-page .smmb-login-social-buttons > button:not(:disabled):hover {
    filter: brightness(1.10);
    box-shadow: 0 5px 18px rgba(103, 79, 255, .28);
}

body.smm-login-page .smmb-login-social-buttons > a:active,
body.smm-login-page .smmb-login-social-buttons > button:not(:disabled):active {
    transform: scale(.95);
    filter: brightness(.88);
    box-shadow: 0 2px 8px rgba(103, 79, 255, .20);
}

body.smm-login-page .smmb-login-social-buttons > a:focus-visible,
body.smm-login-page .smmb-login-social-buttons > button:focus-visible {
    outline: 2px solid #b5a6ff;
    outline-offset: 3px;
}

body.smm-login-page .smmb-login-social-buttons > button:disabled {
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    body.smm-login-page .smmb-login-social-buttons > a,
    body.smm-login-page .smmb-login-social-buttons > button {
        transition: none;
    }
}