
/* SMMBAJAR SIGNUP DESIGN V9 */
* { box-sizing:border-box; }

html { margin:0; }

body.smm-signup-page {
    margin:0;
    min-height:100vh;
    color:#fff;
    font-family:Inter,Arial,sans-serif;
    background:
      radial-gradient(ellipse at 0% 90%,#1727a4 0%,transparent 38%),
      radial-gradient(ellipse at 100% 0%,#6732d5 0%,transparent 33%),
      #070b26;
}

body.smm-signup-page a {
    color:#b36aff;
    text-decoration:none;
}

body.smm-signup-page .smm-header {
    width:calc(100% - 28px);
    max-width:1540px;
    margin:20px auto 0;
    min-height:90px;
    padding:18px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:#07112e;
    border:1px solid #233365;
    border-bottom:1px solid #172b58;
    border-radius:22px 22px 0 0;
}

body.smm-signup-page .smm-brand {
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    font-size:23px;
    font-weight:900;
    white-space:nowrap;
}

body.smm-signup-page .smm-crown {
    color:#e34fff;
    font-size:48px;
    line-height:1;
    text-shadow:0 0 22px #ae35ff;
}

body.smm-signup-page .smm-brand-accent {
    color:#dd62ff;
}

body.smm-signup-page .smm-brand-sub {
    display:block;
    color:#d2d8f5;
    font-size:12px;
    font-weight:500;
    margin-top:3px;
}

body.smm-signup-page .smm-nav {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:clamp(12px,2.3vw,35px);
}

body.smm-signup-page .smm-nav a {
    color:#f5f2ff;
    font-size:14px;
    font-weight:650;
}

body.smm-signup-page .smm-nav .smm-nav-signup {
    padding:13px 32px;
    border:1px solid #9345df;
    border-radius:13px;
    background:#10183a;
    box-shadow:0 0 13px #7437b65e;
}

body.smm-signup-page .smm-signup-layout {
    width:calc(100% - 28px);
    max-width:1540px;
    margin:0 auto;
    padding:32px 35px 40px;
    display:grid;
    grid-template-columns:minmax(0,1.24fr) minmax(0,1fr) minmax(0,.82fr);
    align-items:start;
    gap:25px;
    background:
      radial-gradient(ellipse at 32% 95%,#3510a0 0%,transparent 38%),
      linear-gradient(135deg,#06102e,#080b27);
    border:1px solid #233365;
    border-top:0;
    border-radius:0 0 22px 22px;
}

body.smm-signup-page .smm-hero {
    grid-column:1;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:730px;
    padding:10px 0 0;
    border:0;
    background:transparent;
    box-shadow:none;
}

body.smm-signup-page .smm-hero-badge {
    align-self:flex-start;
    padding:9px 18px;
    border-radius:30px;
    background:#14204c;
    border:1px solid #293b75;
    color:#e0c4ff;
    font-size:13px;
    font-weight:700;
}

body.smm-signup-page .smm-hero h1 {
    margin:20px 0 14px;
    color:white;
    font-size:clamp(32px,3.5vw,57px);
    font-weight:900;
    line-height:1.13;
    letter-spacing:-1.6px;
    overflow-wrap:normal;
    word-break:normal;
}

body.smm-signup-page .smm-hero h1 span {
    background:linear-gradient(90deg,#f24add,#a970ff,#41d3ef);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

body.smm-signup-page .smm-hero > p {
    margin:0 0 26px;
    color:#e4e7fc;
    font-size:clamp(13px,1.15vw,17px);
    line-height:1.6;
}

body.smm-signup-page .smm-hero-features {
    display:grid;
    gap:13px;
}

body.smm-signup-page .smm-hero-features > div {
    display:flex;
    align-items:center;
    gap:15px;
    font-size:clamp(12px,1.1vw,16px);
    font-weight:600;
}

body.smm-signup-page .smm-hero-features span {
    flex:0 0 43px;
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:linear-gradient(135deg,#5433cb,#a32aff);
    box-shadow:0 0 18px #7431d87a;
    color:#fff;
    font-size:20px;
}

body.smm-signup-page .smm-reference-art {
    display:block;
    width:100%;
    height:285px;
    margin-top:auto;
    background:url('/rental_manager/assets/images/smmbajar-laptop-v9.svg')
        center bottom/contain no-repeat;
    filter:drop-shadow(0 0 20px #682dff70);
}

body.smm-signup-page .smm-signup-layout > .card {
    grid-column:2;
    width:100%;
    max-width:none;
    min-width:0;
    min-height:0;
    height:auto;
    margin:0;
    padding:28px 27px;
    border:1px solid #7541d3;
    border-radius:20px;
    background:linear-gradient(145deg,#111b4b,#0b1435);
    box-shadow:0 0 30px #7534e72c;
}

body.smm-signup-page .smm-form-heading {
    margin:0 0 22px;
}

body.smm-signup-page .smm-form-heading h2 {
    margin:0 0 6px;
    font-size:27px;
    color:#fff;
    line-height:1.2;
}

body.smm-signup-page .smm-form-heading p {
    margin:0;
    font-size:13px;
    color:#aab7df;
}

body.smm-signup-page .smm-form-icon {
    display:none;
}

body.smm-signup-page .smm-field {
    position:relative;
    margin:0 0 14px;
}

body.smm-signup-page .smm-field > label {
    display:block;
    margin:0 0 7px;
    color:#e5e9ff;
    font-size:12px;
    font-weight:700;
}

body.smm-signup-page .smm-field input {
    display:block;
    width:100%;
    height:46px;
    min-height:46px;
    margin:0;
    padding:11px 12px 11px 56px;
    border:1px solid #2b3c79;
    border-radius:10px;
    outline:none;
    color:white;
    font-size:13px;
    background:#192653;
}

body.smm-signup-page .smm-field input:focus {
    border-color:#9d57ff;
    box-shadow:0 0 0 3px #8734f22b;
}

body.smm-signup-page .smm-field input::placeholder {
    color:#8b98c0;
}

body.smm-signup-page .smm-input-icon {
    position:absolute;
    left:0;
    bottom:0;
    width:45px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:linear-gradient(145deg,#33278c,#6032c8);
    color:#e5d6ff;
    font-size:18px;
}

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

body.smm-signup-page .smm-password-wrap input {
    padding-right:65px;
}

body.smm-signup-page .smm-password-wrap .smm-eye {
    position:absolute;
    right:7px;
    top:50%;
    transform:translateY(-50%);
    width:auto;
    min-height:0;
    margin:0;
    padding:6px;
    border:0;
    color:#d8d9ff;
    background:transparent;
    box-shadow:none;
    font-size:11px;
    cursor:pointer;
}

body.smm-signup-page .smm-terms {
    display:flex;
    align-items:center;
    gap:9px;
    margin:20px 0;
    font-size:12px;
    line-height:1.5;
    color:#cbd1ed;
}

body.smm-signup-page .smm-terms input {
    flex:0 0 16px;
    width:16px;
    height:16px;
    min-height:16px;
    margin:0;
    accent-color:#9d34f7;
}

body.smm-signup-page .smm-create-button {
    display:block;
    width:100%;
    min-height:54px;
    margin:10px 0 0;
    border:1px solid #b36dff;
    border-radius:11px;
    color:white;
    font-size:15px;
    font-weight:750;
    cursor:pointer;
    background:linear-gradient(100deg,#7863ff,#ba00f1);
    box-shadow:0 8px 25px #8335ee6b;
}

body.smm-signup-page .card > p {
    margin:20px 0 0;
    text-align:center;
    color:#c4cbe7;
    font-size:12px;
}

body.smm-signup-page .smm-benefits {
    grid-column:3;
    grid-row:1;
    display:flex;
    flex-direction:column;
    gap:18px;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
}

body.smm-signup-page .smm-benefit-panel,
body.smm-signup-page .smm-benefit-note {
    width:100%;
    margin:0;
    padding:25px 20px;
    border:1px solid #263875;
    border-radius:19px;
    background:linear-gradient(140deg,#121e50,#0d173c);
    box-shadow:inset 0 0 35px #4a25b72b;
}

body.smm-signup-page .smm-benefit-shield {
    display:block;
    font-size:57px;
    color:#917aff;
    text-shadow:0 0 22px #693dff;
}

body.smm-signup-page .smm-benefit-panel h3 {
    margin:15px 0 24px;
    color:white;
    font-size:23px;
}

body.smm-signup-page .smm-benefit-card {
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 22px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
}

body.smm-signup-page .smm-benefit-icon {
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:white;
    font-size:19px;
    background:linear-gradient(140deg,#5335c6,#942afa);
    box-shadow:0 0 15px #7a37ed60;
}

body.smm-signup-page .smm-benefit-card strong {
    display:block;
    color:#fff;
    font-size:13px;
}

body.smm-signup-page .smm-benefit-card small {
    display:block;
    margin-top:4px;
    color:#abb8e2;
    font-size:11px;
    line-height:1.4;
}

body.smm-signup-page .smm-benefit-note {
    min-height:185px;
    color:#c3cdef;
    font-size:14px;
    line-height:1.7;
}

body.smm-signup-page .smm-benefit-note b {
    display:block;
    color:white;
    font-size:18px;
    margin-bottom:10px;
}

body.smm-signup-page .smm-footer {
    text-align:center;
    padding:18px;
    color:#8d9ac5;
    font-size:12px;
}

/* Chrome Desktop Site, including 980px viewport */
@media(min-width:768px) and (max-width:1100px) {
    body.smm-signup-page .smm-header {
        padding:15px 20px;
        min-height:72px;
    }

    body.smm-signup-page .smm-brand {
        font-size:18px;
    }

    body.smm-signup-page .smm-crown {
        font-size:35px;
    }

    body.smm-signup-page .smm-nav {
        gap:12px;
    }

    body.smm-signup-page .smm-nav a {
        font-size:11px;
    }

    body.smm-signup-page .smm-signup-layout {
        grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.85fr);
        gap:12px;
        padding:22px 15px;
    }

    body.smm-signup-page .smm-hero {
        min-height:660px;
    }

    body.smm-signup-page .smm-hero h1 {
        font-size:clamp(26px,3.2vw,36px);
    }

    body.smm-signup-page .smm-hero-features > div {
        font-size:11px;
        gap:9px;
    }

    body.smm-signup-page .smm-hero-features span {
        flex-basis:34px;
        width:34px;
        height:34px;
        font-size:16px;
    }

    body.smm-signup-page .smm-reference-art {
        height:220px;
    }

    body.smm-signup-page .smm-signup-layout > .card {
        padding:19px 13px;
    }

    body.smm-signup-page .smm-form-heading h2 {
        font-size:21px;
    }

    body.smm-signup-page .smm-benefit-panel,
    body.smm-signup-page .smm-benefit-note {
        padding:17px 12px;
    }

    body.smm-signup-page .smm-benefit-panel h3 {
        font-size:18px;
    }

    body.smm-signup-page .smm-benefit-card strong {
        font-size:11px;
    }
}

/* Normal mobile: form only */
@media(max-width:767px) {
    body.smm-signup-page .smm-header,
    body.smm-signup-page .smm-hero,
    body.smm-signup-page .smm-benefits,
    body.smm-signup-page .smm-footer {
        display:none !important;
    }

    body.smm-signup-page .smm-signup-layout {
        display:flex;
        flex-direction:column;
        justify-content:center;
        width:100%;
        max-width:480px;
        min-height:100dvh;
        margin:0 auto;
        padding:20px 14px;
        border:0;
        background:transparent;
    }

    body.smm-signup-page .smm-signup-layout > .card {
        display:block;
        width:100%;
        max-width:450px;
        margin:auto;
        padding:25px 20px;
    }
}


/* SMM_SIGNUP_VIEWPORT_FIX_V10 */

body.smm-signup-page {
    overflow-x:hidden;
}

@media (min-width:768px) {

    body.smm-signup-page .smm-header,
    body.smm-signup-page .smm-signup-layout {
        width:calc(100% - 24px);
        max-width:1510px;
        margin-left:auto;
        margin-right:auto;
    }

    body.smm-signup-page .smm-header {
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        min-height:75px;
    }

    body.smm-signup-page .smm-signup-layout {
        display:grid;
        grid-template-columns:
            minmax(0,1.2fr)
            minmax(0,1fr)
            minmax(0,.85fr);
        gap:16px;
        align-items:start;
    }

    body.smm-signup-page .smm-hero {
        grid-column:1;
        grid-row:1;
        min-width:0;
    }

    body.smm-signup-page .smm-signup-layout > .card {
        grid-column:2;
        grid-row:1;
        min-width:0;
        width:100%;
    }

    body.smm-signup-page .smm-benefits {
        grid-column:3;
        grid-row:1;
        min-width:0;
    }
}

@media (max-width:767px) {

    body.smm-signup-page .smm-header,
    body.smm-signup-page .smm-hero,
    body.smm-signup-page .smm-benefits,
    body.smm-signup-page .smm-footer {
        display:none !important;
    }

    body.smm-signup-page .smm-signup-layout {
        display:flex !important;
        width:100% !important;
        max-width:480px !important;
        min-height:100dvh;
        margin:0 auto !important;
        padding:20px 14px !important;
        grid-template-columns:none !important;
        justify-content:center;
    }

    body.smm-signup-page .smm-signup-layout > .card {
        display:block !important;
        width:100% !important;
        max-width:450px !important;
        margin:auto !important;
    }
}


/* SMM_ISOLATED_LAYOUT_V12 */

html:has(body.smm-signup-page) {
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
}

body.smm-signup-page {
    display:block !important;
    position:static !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:100vh !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    transform:none !important;
}

body.smm-signup-page * {
    box-sizing:border-box;
}

@media (min-width:768px) {

    body.smm-signup-page > .smm-header {
        position:relative !important;
        display:flex !important;
        float:none !important;
        clear:both !important;
        transform:none !important;
        width:calc(100% - 32px) !important;
        max-width:1450px !important;
        min-height:80px !important;
        height:auto !important;
        margin:16px auto 0 !important;
        padding:15px 28px !important;
        align-items:center !important;
        justify-content:space-between !important;
    }

    body.smm-signup-page > .smm-signup-layout {
        position:relative !important;
        display:grid !important;
        float:none !important;
        clear:both !important;
        transform:none !important;
        width:calc(100% - 32px) !important;
        max-width:1450px !important;
        min-width:0 !important;
        height:auto !important;
        min-height:0 !important;
        margin:0 auto !important;
        padding:28px !important;
        grid-template-columns:
            minmax(0,1.2fr)
            minmax(320px,1fr)
            minmax(230px,.82fr) !important;
        gap:22px !important;
        align-items:start !important;
    }

    body.smm-signup-page > .smm-signup-layout > .smm-hero {
        display:flex !important;
        position:relative !important;
        grid-column:1 !important;
        grid-row:1 !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        margin:0 !important;
        transform:none !important;
    }

    body.smm-signup-page > .smm-signup-layout > .card {
        display:block !important;
        position:relative !important;
        grid-column:2 !important;
        grid-row:1 !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        height:auto !important;
        min-height:0 !important;
        margin:0 !important;
        transform:none !important;
    }

    body.smm-signup-page > .smm-signup-layout > .smm-benefits {
        display:flex !important;
        position:relative !important;
        grid-column:3 !important;
        grid-row:1 !important;
        flex-direction:column !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        margin:0 !important;
        transform:none !important;
    }

    body.smm-signup-page > .smm-footer {
        display:block !important;
        position:relative !important;
        clear:both !important;
        width:100% !important;
        margin:15px auto !important;
        text-align:center !important;
        transform:none !important;
    }
}

@media (min-width:768px) and (max-width:1100px) {

    body.smm-signup-page > .smm-signup-layout {
        padding:20px 14px !important;
        gap:12px !important;
        grid-template-columns:
            minmax(0,1.1fr)
            minmax(300px,1fr)
            minmax(200px,.8fr) !important;
    }

    body.smm-signup-page > .smm-signup-layout > .card {
        padding:20px 15px !important;
    }
}

@media (max-width:767px) {

    body.smm-signup-page > .smm-header,
    body.smm-signup-page .smm-hero,
    body.smm-signup-page .smm-benefits,
    body.smm-signup-page > .smm-footer {
        display:none !important;
    }

    body.smm-signup-page > .smm-signup-layout {
        position:relative !important;
        display:flex !important;
        flex-direction:column !important;
        transform:none !important;
        width:100% !important;
        max-width:480px !important;
        min-width:0 !important;
        min-height:100dvh !important;
        height:auto !important;
        margin:0 auto !important;
        padding:20px 14px !important;
        justify-content:center !important;
        align-items:center !important;
        grid-template-columns:none !important;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
    }

    body.smm-signup-page > .smm-signup-layout > .card {
        position:relative !important;
        display:block !important;
        width:100% !important;
        max-width:450px !important;
        min-width:0 !important;
        height:auto !important;
        margin:auto !important;
        transform:none !important;
    }
}

/* SMM_DYNAMIC_HEADER_LOGO_V13 */
body.smm-signup-page .smm-header-logo {
    display:block !important;
    width:auto !important;
    max-width:170px !important;
    height:44px !important;
    max-height:44px !important;
    object-fit:contain !important;
    flex:0 1 auto !important;
}
@media(max-width:767px) {
    body.smm-signup-page .smm-header {
        display:none !important;
    }
}


/* SMM_SIGNUP_DESKTOP_FINISH_V15 */

/*
 * Signup page only.
 * Desktop only.
 * Other pages remain untouched.
 */

@media (min-width:768px) {

    body.smm-signup-page {
        min-height:100vh;
        height:auto;
        overflow-x:hidden;
    }

    body.smm-signup-page .smm-header-logo {
        display:block;
        width:auto;
        height:58px;
        max-width:220px;
        max-height:58px;
        object-fit:contain;
        object-position:left center;
        flex-shrink:0;
    }

    body.smm-signup-page .smm-brand {
        display:flex;
        align-items:center;
        min-width:0;
    }

    body.smm-signup-page .smm-header {
        min-height:92px;
    }

    body.smm-signup-page .smm-signup-layout {
        margin-bottom:0;
    }

    body.smm-signup-page .smm-footer {
        margin-top:0;
        padding-top:18px;
        padding-bottom:22px;
    }
}

/*
 * Mobile signup remains form-only.
 * No desktop logo changes on mobile.
 */

@media (max-width:767px) {

    body.smm-signup-page .smm-header,
    body.smm-signup-page .smm-hero,
    body.smm-signup-page .smm-benefits,
    body.smm-signup-page .smm-footer {
        display:none !important;
    }
}


/* SMM_DESKTOP_LOGO_BACKGROUND_V16 */

/*
 * Signup desktop mode only.
 * No mobile, login, dashboard or admin changes.
 */

@media (min-width:768px) {

    body.smm-signup-page .smm-header-logo {
        display:block !important;
        width:auto !important;
        max-width:240px !important;
        height:65px !important;
        max-height:65px !important;
        object-fit:contain !important;
        object-position:left center !important;
        flex-shrink:0 !important;
    }

    body.smm-signup-page .smm-brand {
        display:flex !important;
        align-items:center !important;
        max-width:260px;
        min-width:0;
    }

    body.smm-signup-page > .smm-header {
        min-height:95px !important;
    }

    body.smm-signup-page {
        background:
            radial-gradient(
                ellipse at 85% 8%,
                rgba(100,42,190,.30),
                transparent 45%
            ),
            #070b26 !important;
        background-attachment:scroll !important;
    }

    body.smm-signup-page > .smm-footer {
        margin:0 auto !important;
        padding:18px 12px 24px !important;
    }
}

/* Mobile signup remains form-only. */
@media (max-width:767px) {

    body.smm-signup-page > .smm-header,
    body.smm-signup-page .smm-hero,
    body.smm-signup-page .smm-benefits,
    body.smm-signup-page > .smm-footer {
        display:none !important;
    }
}
