html,
body {
    min-height: 100%;
}

body {
    background: #f6f6fb !important;
}

.jovio-auth-page {
    min-height: 100vh;
}

.jovio-auth-page > .header-wrapper {
    display: none !important;
}

.jovio-auth-v3 {
    min-height: 100vh;
    padding: 35px 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(circle at 8% 15%, rgba(255,215,85,.16), transparent 25%),
        radial-gradient(circle at 92% 85%, rgba(119,115,188,.12), transparent 25%),
        #f7f7fb;
}

.jovio-auth-card {
    width: 100%;
    max-width: 1050px;
    min-height: 620px;

    display: grid;
    grid-template-columns: 42% 58%;

    overflow: hidden;

    border-radius: 30px;
    background: #fff;

    box-shadow:
        0 28px 75px rgba(37,32,78,.14);
}


/* BRAND SIDE */

.jovio-auth-visual {
    position: relative;

    padding: 45px 38px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;

    background:
        linear-gradient(145deg,#7773bc,#8d88d5);

    color: #fff;
}

.jovio-auth-visual::before {
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    top:-90px;
    left:-70px;

    border-radius:50%;

    background:rgba(255,255,255,.08);
}

.jovio-auth-visual::after {
    content:"";

    position:absolute;

    width:160px;
    height:160px;

    bottom:-55px;
    right:-45px;

    border-radius:40px;

    transform:rotate(22deg);

    background:rgba(255,215,85,.17);
}

.jovio-auth-brand-logo {
    position:relative;
    z-index:2;

    width:145px;
    min-height:82px;

    padding:12px 18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:22px;

    background:#fff;

    box-shadow:
        0 12px 30px rgba(30,25,70,.14);
}

.jovio-auth-brand-logo img {
    width:115px;
    max-height:60px;

    object-fit:contain;
}

.jovio-auth-visual-copy {
    position:relative;
    z-index:2;
}

.jovio-auth-visual-copy h1 {
    margin:0 0 12px;

    color:#fff;

    font-size:32px;
    font-weight:800;
    line-height:1.4;
}

.jovio-auth-visual-copy p {
    max-width:330px;

    margin:0;

    color:rgba(255,255,255,.80);

    font-size:14px;
    font-weight:500;
    line-height:1.9;
}

.jovio-auth-toys {
    position:relative;
    z-index:2;

    display:flex;
    gap:10px;
}

.jovio-auth-toy {
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:15px;

    background:rgba(255,255,255,.13);

    font-size:23px;
}

.jovio-auth-toy:nth-child(2) {
    background:rgba(255,215,85,.22);
}

.jovio-auth-toy:nth-child(3) {
    background:rgba(255,100,92,.20);
}


/* FORM SIDE */

.jovio-auth-content {
    padding:48px 54px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.jovio-auth-heading {
    margin-bottom:24px;
}

.jovio-auth-heading h2 {
    margin:0 0 6px;

    color:#25242d;

    font-size:28px;
    font-weight:800;
}

.jovio-auth-heading p {
    margin:0;

    color:#8d8b96;

    font-size:13px;
    font-weight:500;
}


/* TABS */

.jovio-auth-tabs {
    margin-bottom:28px;

    padding:5px;

    display:grid;
    grid-template-columns:1fr 1fr;

    border-radius:15px;

    background:#f2f1f8;
}

.jovio-auth-tab {
    min-height:47px;

    border:0;
    border-radius:11px;

    background:transparent;

    color:#777582;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:.2s;
}

.jovio-auth-tab.active {
    background:#fff;

    color:#6863b2;

    box-shadow:
        0 4px 14px rgba(49,44,95,.08);
}


/* FORMS */

.jovio-auth-form {
    display:none;
}

.jovio-auth-form.active {
    display:block;
}

.jovio-field {
    margin-bottom:15px;
}

.jovio-field label {
    display:block;

    margin-bottom:7px;

    color:#46444f;

    font-size:12px;
    font-weight:700;
}

.jovio-field-box {
    position:relative;
}

.jovio-field-box i {
    position:absolute;

    top:50%;
    right:16px;

    transform:translateY(-50%);

    color:#aaa8ba;

    font-size:20px;
}

html[dir="ltr"] .jovio-field-box i {
    right:auto;
    left:16px;
}

.jovio-field-box input {
    width:100%;
    height:54px;

    padding:0 48px 0 16px;

    border:1px solid #e4e3eb;
    border-radius:14px;

    outline:none;

    background:#fff;

    color:#292832;

    font-size:14px;
    font-weight:600;

    transition:.2s;
}

html[dir="ltr"] .jovio-field-box input {
    padding:0 16px 0 48px;
}

.jovio-field-box input:focus {
    border-color:#7773bc;

    box-shadow:
        0 0 0 4px rgba(119,115,188,.08);
}

.jovio-forgot {
    margin:-2px 0 18px;

    text-align:end;
}

.jovio-forgot a {
    color:#7773bc !important;

    font-size:12px;
    font-weight:700;
}

.jovio-auth-submit {
    width:100%;
    min-height:54px;

    border:0;
    border-radius:14px;

    background:
        linear-gradient(135deg,#7773bc,#8782cf);

    color:#fff;

    font-size:14px;
    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 9px 22px rgba(119,115,188,.22);
}

.invalid-feedback {
    display:block !important;

    margin-top:5px;

    color:#d95858;

    font-size:11px;
    font-weight:600;
}


/* HOME */

.jovio-auth-home {
    position:absolute;

    top:26px;
    inset-inline-end:28px;

    z-index:4;

    color:rgba(255,255,255,.85) !important;

    font-size:12px;
    font-weight:700;
}


/* MOBILE */

@media(max-width:767px){

    .jovio-auth-v3 {
        padding:14px;
        align-items:flex-start;
    }

    .jovio-auth-card {
        grid-template-columns:1fr;

        min-height:auto;

        border-radius:22px;
    }

    .jovio-auth-visual {
        min-height:220px;

        padding:28px 22px;
    }

    .jovio-auth-brand-logo {
        width:115px;
        min-height:66px;

        border-radius:17px;
    }

    .jovio-auth-brand-logo img {
        width:90px;
    }

    .jovio-auth-visual-copy h1 {
        font-size:22px;
    }

    .jovio-auth-visual-copy p {
        font-size:12px;
        line-height:1.7;
    }

    .jovio-auth-toys {
        display:none;
    }

    .jovio-auth-content {
        padding:27px 20px 32px;
    }

    .jovio-auth-heading h2 {
        font-size:23px;
    }

    .jovio-auth-heading p {
        font-size:12px;
    }

    .jovio-auth-tab {
        min-height:45px;

        font-size:13px;
    }

    .jovio-field label {
        font-size:13px;
    }

    .jovio-field-box input {
        height:53px;

        font-size:14px;
    }

}


/* ============================================================
   JOVIO AUTH — HOME BUTTON + FLOATING TOYS
   ============================================================ */


/* REAL HOME BUTTON */

.jovio-auth-home {
    position: absolute !important;

    top: 26px !important;
    inset-inline-start: 28px !important;
    inset-inline-end: auto !important;

    min-height: 42px;

    padding: 9px 15px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 1px solid rgba(255,255,255,.28);

    border-radius: 13px;

    background: rgba(255,255,255,.14);

    color: #fff !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    text-decoration: none !important;

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    transition:
        transform .2s ease,
        background-color .2s ease;

    z-index: 20 !important;
}


.jovio-auth-home::before {
    content: "←";

    font-family: Arial, sans-serif;

    font-size: 17px;

    line-height: 1;
}


html[dir="rtl"]
.jovio-auth-home::before {
    content: "→";
}


.jovio-auth-home:hover {
    background: rgba(255,255,255,.23);

    transform: translateY(-2px);
}


/* ============================================================
   FLOATING TOYS
   ============================================================ */

.jovio-auth-floating-toys {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;
}


.jovio-flying-toy {
    position: absolute;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #fff;

    font-size: 18px;

    background: rgba(255,255,255,.12);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    animation:
        jovioToyFloat 6s ease-in-out infinite;
}


.jovio-flying-toy.toy-one {
    top: 21%;
    left: 15%;

    color: #ffd95f;

    animation-delay: 0s;
}


.jovio-flying-toy.toy-two {
    top: 36%;
    right: 9%;

    color: #54d1d9;

    animation-delay: -1.4s;
}


.jovio-flying-toy.toy-three {
    bottom: 20%;
    left: 11%;

    color: #ff7469;

    animation-delay: -2.8s;
}


.jovio-flying-toy.toy-four {
    bottom: 11%;
    right: 19%;

    color: #ffd95f;

    animation-delay: -4s;
}


@keyframes jovioToyFloat {

    0%,
    100% {
        transform:
            translate3d(0,0,0)
            rotate(-5deg);

        opacity: .55;
    }

    25% {
        transform:
            translate3d(8px,-14px,0)
            rotate(7deg);

        opacity: .9;
    }

    50% {
        transform:
            translate3d(-5px,-24px,0)
            rotate(-4deg);

        opacity: .7;
    }

    75% {
        transform:
            translate3d(10px,-11px,0)
            rotate(8deg);

        opacity: .9;
    }

}


/* Keep main content above toys */

.jovio-auth-brand-logo,
.jovio-auth-visual-copy,
.jovio-auth-toys {
    position: relative;

    z-index: 5;
}


/* MOBILE */

@media (max-width: 767px) {

    .jovio-auth-home {
        top: 17px !important;

        inset-inline-start: 17px !important;

        min-height: 38px;

        padding:
            7px 11px !important;

        font-size:
            11px !important;
    }


    .jovio-flying-toy {
        width: 32px;
        height: 32px;

        border-radius: 10px;

        font-size: 14px;
    }


    .jovio-flying-toy.toy-one {
        top: 25%;
        left: 8%;
    }


    .jovio-flying-toy.toy-two {
        top: 42%;
        right: 7%;
    }


    .jovio-flying-toy.toy-three {
        bottom: 12%;
        left: 13%;
    }


    .jovio-flying-toy.toy-four {
        display: none;
    }

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .jovio-flying-toy {
        animation: none !important;
    }

}


/* ============================================================
   JOVIO AUTH — BACK HOME UNDER SUBMIT
   ============================================================ */

.jovio-auth-home {
    display: none !important;
}

.jovio-auth-back-home {
    margin-top: 14px;

    display: flex;
    justify-content: center;
}

.jovio-auth-back-home a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 6px 10px;

    color: #7773bc !important;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        transform .2s ease,
        color .2s ease;
}

.jovio-auth-back-home a:hover {
    color: #5e59aa !important;

    transform: translateX(-3px);
}

html[dir="rtl"]
.jovio-auth-back-home i {
    transform: rotate(180deg);
}

@media (max-width: 767px) {

    .jovio-auth-back-home {
        margin-top: 12px;
    }

    .jovio-auth-back-home a {
        font-size: 13px;
    }

}