/* =========================================================
   TRUEPayments - Common CSS
   Shared by Login + Create Account pages
   ========================================================= */

* { box-sizing: border-box; }

        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            background: #fff;
            color: #111;
        }

        .login-page {
            min-height: 100vh;
            padding: 32px 44px;
        }

        .left-section {
            min-height: calc(100vh - 64px);
            position: relative;
            padding-right: 55px;
        }

        .brand {
            font-size: 21px;
            font-weight: 400;
            letter-spacing: -0.5px;
        }

        .brand-now { color: #61a8ff; }
        .brand-payments { color: #171717; }

        /* Language dropdown */
        .language {
            position: absolute;
            top: -3px;
            right: 58px;
        }

        .language-btn {
            border: 0;
            background: transparent;
            padding: 5px 4px;
            font-size: 14px;
            color: #222;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .language-btn:hover,
        .language-btn:focus {
            background: transparent;
            box-shadow: none;
        }

        .language-btn .flag {
            font-size: 16px;
        }

        .language-btn i {
            font-size: 11px;
            margin-left: 3px;
            color: #555;
        }

        .language-menu {
            min-width: 185px;
            padding: 6px;
            border: 1px solid #eee;
            border-radius: 9px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, .10);
        }

        .language-menu .dropdown-item {
            padding: 9px 10px;
            border-radius: 6px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .language-menu .dropdown-item:hover {
            background: #f2f7ff;
        }

        .language-menu .dropdown-item .flag {
            font-size: 18px;
        }

        .form-area {
            width: 412px;
            max-width: 100%;
            margin: 27px auto 0;
        }

        .form-area h1 {
            font-size: 34px;
            font-weight: 600;
            margin-bottom: 18px;
            letter-spacing: -1px;
        }

        .input-box {
            position: relative;
            margin-bottom: 17px;
        }

        .input-box label {
            position: absolute;
            top: 10px;
            left: 17px;
            font-size: 11px;
            color: #9a9a9a;
            z-index: 2;
        }

        .input-box .form-control {
            height: 56px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            padding: 23px 16px 6px;
            font-size: 14px;
            box-shadow: none;
        }

        .input-box .form-control:focus {
            border-color: #61a8ff;
            box-shadow: 0 0 0 2px rgba(97, 168, 255, .08);
        }

        .password-icon {
            position: absolute;
            right: 14px;
            bottom: 17px;
            color: #aaa;
            font-size: 18px;
            cursor: pointer;
        }

        .forgot {
            text-align: right;
            margin-top: -2px;
            margin-bottom: 106px;
        }

        .forgot a {
            color: #999;
            text-decoration: none;
            font-size: 14px;
        }

        .signin-btn {
            height: 48px;
            width: 100%;
            background: #61a8f5;
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 14px;
            font-weight: 600;
        }

        .signin-btn:hover {
            background: #5199e9;
            color: white;
        }

        .google-btn {
            height: 48px;
            width: 100%;
            margin-top: 16px;
            background: #fff;
            border: 1px solid #499cff;
            border-radius: 8px;
            color: #4d9cff;
            font-size: 14px;
            font-weight: 500;
        }

        .google-icon {
            font-size: 22px;
            font-weight: bold;
            margin-right: 9px;
            color: #4285f4;
        }

        .create-account {
            display: block;
            text-align: center;
            margin-top: 16px;
            color: #52a0ff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
        }

        .bottom-links {
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            gap: 29px;
        }

        .bottom-links a {
            color: #5ca4ff;
            text-decoration: none;
            font-size: 12px;
        }

        .support-btn {
            position: absolute;
            bottom: 0;
            right: 0;
            height: 33px;
            padding: 0 14px;
            border: 1px solid #60a7ff;
            border-radius: 20px;
            color: #60a7ff;
            background: #fff;
            font-size: 12px;
            font-weight: 500;
        }

        .support-btn i { margin-right: 7px; }

        /* Right panel */
        .promo-card {
            min-height: calc(100vh - 64px);
            background: #191d21;
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .promo-content {
            width: 100%;
            height: 100%;
            min-height: 579px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .payment-circle {
            width: 315px;
            height: 315px;
            border-radius: 50%;
            border: 30px dotted #243344;
            position: absolute;
            top: 44px;
            left: 50%;
            transform: translateX(-50%);
        }

        .payment-logo {
            position: absolute;
            top: 196px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            z-index: 2;
        }

        .payment-logo .now {
            color: #61a8ff;
            font-size: 57px;
            line-height: 55px;
            font-weight: 300;
            letter-spacing: -3px;
        }

        .payment-logo .payments {
            color: #fff;
            font-size: 27px;
            line-height: 28px;
            font-weight: 300;
        }

        .promo-text {
            position: absolute;
            bottom: 24px;
            left: 0;
            right: 0;
            text-align: center;
            color: #ddd;
            font-size: 23px;
            line-height: 1.5;
            font-weight: 300;
        }

        .promo-text strong {
            display: block;
            color: #fff;
            font-size: 28px;
            font-weight: 700;
            line-height: 1.2;
        }

        .star {
            position: absolute;
            z-index: 3;
        }

        .star-one {
            top: 95px;
            left: 63px;
            color: #f4a9c2;
            font-size: 43px;
        }

        .star-two {
            top: 105px;
            right: 87px;
            color: #65b1ff;
            font-size: 30px;
        }

        .star-three {
            bottom: 181px;
            left: 42px;
            color: #5faeff;
            font-size: 25px;
        }

        .star-four {
            bottom: 191px;
            right: 102px;
            color: #c28f9b;
            font-size: 28px;
        }

        @media (max-width: 991.98px) {
            .login-page { padding: 25px 20px; }

            .left-section {
                min-height: auto;
                padding-right: 0;
            }

            .language { right: 0; }

            .form-area { margin-top: 50px; }

            .forgot { margin-bottom: 60px; }

            .bottom-links,
            .support-btn {
                position: static;
                margin-top: 35px;
            }

            .bottom-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .promo-card {
                margin-top: 35px;
                min-height: 500px;
            }

            .promo-content { min-height: 500px; }
        }

        @media (max-width: 575.98px) {
            .login-page { padding: 20px 16px; }

            .brand { font-size: 19px; }

            .form-area h1 { font-size: 30px; }

            .promo-card { min-height: 430px; }

            .promo-content { min-height: 430px; }

            .payment-circle {
                width: 240px;
                height: 240px;
                border-width: 23px;
                top: 35px;
            }

            .payment-logo { top: 140px; }

            .payment-logo .now {
                font-size: 43px;
                line-height: 43px;
            }

            .payment-logo .payments { font-size: 22px; }

            .promo-text {
                font-size: 18px;
                bottom: 25px;
            }

            .promo-text strong { font-size: 22px; }

            .bottom-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
        }

/* ================= CREATE ACCOUNT PAGE ================= */

*{box-sizing:border-box}

body{
    margin:0;
    background:#fff;
    color:#111;
    font-family:Arial,Helvetica,sans-serif;
}

.login-page{
    min-height:100vh;
    padding:32px 44px;
}

.left-section{
    min-height:calc(100vh - 64px);
    position:relative;
    padding-right:55px;
}

.brand{
    font-size:21px;
    font-weight:400;
    letter-spacing:-.5px;
}
.brand-now{color:#61a8ff}
.brand-payments{color:#171717}

/* language */
.language{
    position:absolute;
    top:-3px;
    right:58px;
}

.language-btn{
    border:0;
    background:transparent;
    padding:5px 4px;
    font-size:14px;
    color:#222;
    display:flex;
    align-items:center;
    gap:5px;
}

.language-btn:focus,
.language-btn:hover{
    background:transparent;
    box-shadow:none;
}

.language-btn .flag{font-size:16px}
.language-btn i{
    font-size:11px;
    margin-left:3px;
    color:#555;
}

.language-menu{
    min-width:185px;
    padding:6px;
    border:1px solid #eee;
    border-radius:9px;
    box-shadow:0 8px 25px rgba(0,0,0,.10);
}

.language-menu .dropdown-item{
    padding:9px 10px;
    border-radius:6px;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:9px;
}

.language-menu .dropdown-item:hover{
    background:#f2f7ff;
}

.language-menu .flag{font-size:18px}

/* form */
.form-area{
    width:412px;
    max-width:100%;
    margin:27px auto 0;
}

.form-area h1{
    font-size:34px;
    font-weight:600;
    margin:0 0 18px;
    letter-spacing:-1px;
}

.input-box{
    position:relative;
    margin-bottom:17px;
}

.input-box label{
    position:absolute;
    top:10px;
    left:17px;
    font-size:11px;
    color:#999;
    z-index:2;
}

.input-box .form-control{
    height:56px;
    border:1px solid #e5e5e5;
    border-radius:8px;
    padding:23px 42px 6px 16px;
    font-size:14px;
    box-shadow:none;
}

.input-box .form-control:focus{
    border-color:#61a8ff;
    box-shadow:0 0 0 2px rgba(97,168,255,.08);
}

.input-box.placeholder-only .form-control{
    padding:6px 42px 6px 16px;
}

.input-box.placeholder-only .form-control::placeholder{
    color:#999;
    opacity:1;
}

.password-icon{
    position:absolute;
    right:14px;
    bottom:17px;
    color:#aaa;
    font-size:18px;
    cursor:pointer;
}

/* password rules */
.password-rules{
    margin-top:2px;
    margin-bottom:56px;
}

.password-rules-title{
    font-size:13px;
    color:#999;
    margin-bottom:11px;
}

.rules{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.rule{
    color:#61a8ff;
    font-size:13px;
    white-space:nowrap;
}

.rule i{
    font-size:14px;
    margin-right:4px;
}

/* checkboxes */
.check-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:16px;
    color:#aaa;
    font-size:13px;
    line-height:18px;
}

.check-row input{
    appearance:none;
    -webkit-appearance:none;
    width:16px;
    height:16px;
    min-width:16px;
    border:1px solid #d3d3d3;
    border-radius:4px;
    background:#fff;
    margin:0;
    cursor:pointer;
}

.check-row input:checked{
    background:#61a8ff;
    border-color:#61a8ff;
    position:relative;
}

.check-row input:checked:after{
    content:"✓";
    color:#fff;
    position:absolute;
    font-size:11px;
    left:3px;
    top:-1px;
}

.check-row label{cursor:pointer}

.check-row a{
    color:#4f9fff;
    text-decoration:none;
}

/* buttons */
.next-btn{
    width:100%;
    height:48px;
    border:0;
    border-radius:8px;
    background:#61a8f5;
    color:#fff;
    font-size:14px;
    font-weight:600;
    margin-top:0;
}

.next-btn:hover{
    background:#5199e9;
    color:#fff;
}

.google-btn{
    width:100%;
    height:48px;
    margin-top:16px;
    border:1px solid #499cff;
    border-radius:8px;
    background:#fff;
    color:#4d9cff;
    font-size:14px;
    font-weight:500;
}

.google-icon{
    font-size:22px;
    font-weight:bold;
    margin-right:9px;
    color:#4285f4;
}

.signin-link{
    display:block;
    text-align:center;
    margin-top:16px;
    color:#52a0ff;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
}

/* bottom */
.bottom-links{
    position:absolute;
    bottom:0;
    left:0;
    display:flex;
    gap:29px;
}

.bottom-links a{
    color:#5ca4ff;
    text-decoration:none;
    font-size:12px;
}

.support-btn{
    position:absolute;
    bottom:0;
    right:0;
    height:33px;
    padding:0 14px;
    border:1px solid #60a7ff;
    border-radius:20px;
    color:#60a7ff;
    background:#fff;
    font-size:12px;
    font-weight:500;
}

.support-btn i{margin-right:7px}

/* right card */
.promo-card{
    min-height:calc(100vh - 64px);
    background:#191d21;
    border-radius:15px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.promo-content{
    width:100%;
    height:100%;
    min-height:579px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.payment-circle{
    width:315px;
    height:315px;
    border-radius:50%;
    border:30px dotted #243344;
    position:absolute;
    top:113px;
    left:50%;
    transform:translateX(-50%);
}

.payment-logo{
    position:absolute;
    top:272px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    z-index:2;
}

.payment-logo .now{
    color:#61a8ff;
    font-size:57px;
    line-height:55px;
    font-weight:300;
    letter-spacing:-3px;
}

.payment-logo .payments{
    color:#fff;
    font-size:27px;
    line-height:28px;
    font-weight:300;
}

.promo-text{
    position:absolute;
    bottom:94px;
    left:0;
    right:0;
    text-align:center;
    color:#ddd;
    font-size:23px;
    line-height:1.5;
    font-weight:300;
}

.promo-text strong{
    display:block;
    color:#fff;
    font-size:28px;
    font-weight:700;
    line-height:1.2;
}

/* decorative stars */
.star{
    position:absolute;
    z-index:3;
}
.star-one{
    top:165px;
    left:63px;
    color:#f4a9c2;
    font-size:43px;
}
.star-two{
    top:54px;
    right:177px;
    color:#d7fa6e;
    font-size:30px;
}
.star-three{
    top:40px;
    right:70px;
    color:#263849;
    font-size:25px;
}
.star-four{
    top:199px;
    right:87px;
    color:#65b1ff;
    font-size:30px;
}
.star-five{
    bottom:250px;
    left:42px;
    color:#5faeff;
    font-size:25px;
}
.star-six{
    bottom:258px;
    right:102px;
    color:#c28f9b;
    font-size:28px;
}

.corner-blue{
    position:absolute;
    top:-4px;
    left:42px;
    width:70px;
    height:110px;
    border-left:1px solid #0c4e8e;
    border-right:1px solid #0c4e8e;
    transform:skew(-16deg);
    opacity:.8;
}

.corner-bottom{
    position:absolute;
    right:-4px;
    bottom:-8px;
    width:120px;
    height:130px;
    border-left:1px solid #075095;
    border-top:1px solid #075095;
    transform:rotate(7deg);
    opacity:.8;
}

/* responsive */
@media(max-width:991.98px){
    .login-page{padding:25px 20px}

    .left-section{
        min-height:auto;
        padding-right:0;
    }

    .language{right:0}
    .form-area{margin-top:50px}

    .password-rules{margin-bottom:35px}

    .bottom-links,
    .support-btn{
        position:static;
        margin-top:35px;
    }

    .bottom-row{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .promo-card{
        margin-top:35px;
        min-height:500px;
    }

    .promo-content{min-height:500px}
}

@media(max-width:575.98px){
    .login-page{padding:20px 16px}
    .brand{font-size:19px}
    .form-area h1{font-size:30px}

    .rules{gap:8px 15px}

    .promo-card{min-height:430px}
    .promo-content{min-height:430px}

    .payment-circle{
        width:240px;
        height:240px;
        border-width:23px;
        top:65px;
    }

    .payment-logo{top:170px}

    .payment-logo .now{
        font-size:43px;
        line-height:43px;
    }

    .payment-logo .payments{font-size:22px}

    .promo-text{
        font-size:18px;
        bottom:40px;
    }

    .promo-text strong{font-size:22px}

    .bottom-row{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }
}