/*
 * Padhai Lead System
 * Colorful Modern EdTech UI
 * Version: 1.2
 */

/* =========================================================
   GLOBAL
========================================================= */

.pls-overlay,
.pls-overlay *,
.pls-panel,
.pls-panel *,
.pls-sidebar-trigger,
.pls-sidebar-trigger * {
    box-sizing: border-box;
}

.pls-lock-scroll {
    overflow: hidden !important;
}


/* =========================================================
   DESIGN VARIABLES
========================================================= */

.pls-overlay {
    --pls-navy: #111827;
    --pls-text: #182033;
    --pls-muted: #687386;

    --pls-blue: #2563eb;
    --pls-violet: #6d3df5;
    --pls-pink: #d91f87;

    --pls-border: #e3e7ef;
}


/* =========================================================
   FLOATING QUESTION BUTTON
========================================================= */

.pls-sidebar-trigger {
    position: fixed;
    z-index: 99990;

    width: var(--pls-icon-size);
    height: var(--pls-icon-size);

    margin-top: calc(var(--pls-icon-size) / -2);

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

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7fffc 100%
        );

    border: 2px solid #00b978;

    border-radius: 22px;

    box-shadow:
        0 10px 28px rgba(17, 24, 39, 0.12);

    cursor: pointer;
    user-select: none;

    color: #00a96b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        calc(var(--pls-icon-size) * .48);

    font-weight: 800;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.pls-sidebar-trigger.pls-right {
    right: 18px;
}

.pls-sidebar-trigger.pls-left {
    left: 18px;
}

.pls-sidebar-trigger:hover {
    transform: scale(1.045);

    box-shadow:
        0 14px 34px rgba(17, 24, 39, .18);
}

.pls-sidebar-trigger:focus-visible {
    outline:
        3px solid rgba(0, 185, 120, .22);

    outline-offset: 3px;
}

.pls-sidebar-trigger img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 20px;
}


/* =========================================================
   SIDEBAR PANEL
========================================================= */

.pls-panel {
    position: fixed;

    z-index: 99991;

    top: 50%;

    width:
        min(
            400px,
            calc(100vw - 30px)
        );

    opacity: 0;

    pointer-events: none;

    transition:
        transform .3s cubic-bezier(.22, .61, .36, 1),
        opacity .22s ease;
}

.pls-panel.pls-right {
    right: 18px;

    transform:
        translateY(-50%)
        translateX(40px);
}

.pls-panel.pls-left {
    left: 18px;

    transform:
        translateY(-50%)
        translateX(-40px);
}

.pls-panel.pls-open {
    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(-50%)
        translateX(0);
}

.pls-panel-inner {
    position: relative;

    padding: 32px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfaff 100%
        );

    border:
        1px solid rgba(109, 61, 245, .10);

    border-radius: 22px;

    box-shadow:
        0 24px 70px rgba(38, 31, 91, .20);

    overflow: hidden;
}

.pls-panel-inner::before {
    content: "";

    position: absolute;

    top: -20px;
    right: -20px;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background:
        rgba(217, 31, 135, .08);

    pointer-events: none;
}


/* =========================================================
   POPUP OVERLAY
========================================================= */

.pls-overlay {
    position: fixed;

    z-index: 99999;

    inset: 0;

    display: flex;

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

    padding: 20px;

    background:
        rgba(15, 23, 42, .62);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.pls-overlay.pls-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   POPUP MODAL
========================================================= */

.pls-modal {
    position: relative;

    width:
        min(
            720px,
            calc(100vw - 32px)
        );

    max-height:
        calc(100vh - 32px);

    overflow-y: auto;
    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 72%,
            #fcfaff 100%
        );

    border:
        1px solid rgba(109, 61, 245, .08);

    border-radius: 28px;

    box-shadow:
        0 30px 100px rgba(15, 23, 42, .34);

    transform:
        translateY(10px)
        scale(.985);

    transition:
        transform .3s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   TOP DECORATIVE CIRCLE
========================================================= */

.pls-modal::before {
    content: "";

    position: absolute;

    top: -115px;
    right: -90px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .12),
            rgba(109, 61, 245, .10),
            rgba(217, 31, 135, .08)
        );

    pointer-events: none;
}


/* =========================================================
   BOTTOM DECORATIVE CIRCLE
========================================================= */

.pls-modal::after {
    content: "";

    position: absolute;

    bottom: -125px;
    left: -95px;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .07),
            rgba(109, 61, 245, .035) 55%,
            transparent 70%
        );

    pointer-events: none;
}

.pls-overlay.pls-open .pls-modal {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   POPUP CONTENT
========================================================= */

.pls-modal-content {
    position: relative;

    z-index: 1;

    padding:
        42px
        48px
        34px;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.pls-modal .pls-close {
    position: absolute;

    top: 18px;
    right: 20px;

    z-index: 5;

    width: 44px;
    height: 44px;

    display: flex;

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

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        transparent;

    color:
        #111827;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 40px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition:
        background .18s ease,
        transform .18s ease;
}

.pls-modal .pls-close:hover {
    background:
        #f2f4f8;

    transform:
        scale(1.05);
}

.pls-modal .pls-close:focus-visible {
    outline:
        3px solid rgba(109, 61, 245, .20);

    outline-offset: 2px;
}


/* =========================================================
   SIDEBAR CLOSE
========================================================= */

.pls-panel .pls-close {
    position: absolute;

    top: 12px;
    right: 14px;

    z-index: 5;

    width: 38px;
    height: 38px;

    display: flex;

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

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        transparent;

    color:
        #111827;

    font-size: 30px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;
}

.pls-panel .pls-close:hover {
    background:
        #f2f4f8;
}


/* =========================================================
   POPUP TITLE
========================================================= */

.pls-modal h2 {
    margin:
        0
        0
        16px;

    padding: 0;

    color:
        var(--pls-navy);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 42px;

    font-weight: 800;

    line-height: 1.08;

    letter-spacing:
        -1.5px;
}


/* =========================================================
   TITLE GRADIENT ACCENT
========================================================= */

.pls-modal h2::after {
    content: "";

    display: block;

    width: 94px;
    height: 5px;

    margin-top: 15px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #2563eb 0%,
            #6d3df5 48%,
            #d91f87 100%
        );
}


/* =========================================================
   DESCRIPTION
========================================================= */

.pls-modal-content > p {
    max-width:
        650px;

    margin:
        0
        0
        32px;

    padding: 0;

    color:
        var(--pls-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 21px;

    font-weight: 400;

    line-height: 1.5;

    letter-spacing:
        -.2px;
}


/* =========================================================
   FORM
========================================================= */

.pls-lead-form {
    display: grid;

    gap: 20px;

    width: 100%;
}


/* =========================================================
   FIELD
========================================================= */

.pls-field {
    display: grid;

    gap: 8px;

    width: 100%;
}

.pls-field label {
    display: block;

    margin: 0;

    color:
        var(--pls-navy);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 18px;

    font-weight: 750;

    line-height: 1.25;
}


/* =========================================================
   INPUT
========================================================= */

.pls-field input {
    display: block;

    width: 100%;

    min-height: 68px;

    margin: 0;

    padding:
        15px
        21px;

    border:
        1.5px solid #d9dee8;

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfdff 100%
        );

    color:
        var(--pls-navy);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 19px;

    font-weight: 400;

    line-height: 1.2;

    appearance: none;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, .025);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.pls-field input::placeholder {
    color:
        #8b93a2;

    opacity: 1;
}

.pls-field input:hover {
    border-color:
        #b9c1cf;
}

.pls-field input:focus {
    outline: none;

    border-color:
        #6d3df5;

    box-shadow:
        0 0 0 4px rgba(109, 61, 245, .10),
        0 6px 18px rgba(109, 61, 245, .07);
}


/* =========================================================
   MESSAGE
========================================================= */

.pls-message {
    min-height: 0;

    margin-top:
        -1px;

    color:
        #596579;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        15px;

    line-height:
        1.45;
}

.pls-message:empty {
    display: none;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.pls-submit {
    position: relative;

    display: flex;

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

    width: 100%;

    min-height:
        68px;

    margin:
        1px
        0
        0;

    padding:
        15px
        24px;

    border:
        0;

    border-radius:
        14px;

    background:
        linear-gradient(
            100deg,
            #2563eb 0%,
            #653ff1 46%,
            #d51f86 100%
        );

    color:
        #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        20px;

    font-weight:
        800;

    line-height:
        1.2;

    cursor:
        pointer;

    box-shadow:
        0 12px 26px rgba(88, 65, 229, .23);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.pls-submit:hover {
    filter:
        brightness(1.035);

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 32px rgba(88, 65, 229, .29);
}

.pls-submit:active {
    transform:
        translateY(0);
}

.pls-submit:focus-visible {
    outline:
        3px solid rgba(109, 61, 245, .20);

    outline-offset:
        3px;
}

.pls-submit:disabled {
    opacity:
        .68;

    cursor:
        wait;

    transform:
        none;
}


/* =========================================================
   SPINNER
========================================================= */

.pls-spinner {
    display:
        none;

    width:
        19px;

    height:
        19px;

    margin-left:
        10px;

    border:
        3px solid rgba(255, 255, 255, .38);

    border-top-color:
        #ffffff;

    border-radius:
        50%;

    animation:
        pls-spin .7s linear infinite;
}

.pls-loading .pls-spinner {
    display:
        inline-block;
}

@keyframes pls-spin {
    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   SKIP
========================================================= */

.pls-skip {
    display:
        block;

    margin:
        10px
        auto
        0;

    padding:
        5px
        12px;

    border:
        0;

    background:
        transparent;

    color:
        #667085;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        17px;

    font-weight:
        600;

    line-height:
        1.3;

    cursor:
        pointer;

    transition:
        color .18s ease;
}

.pls-skip:hover {
    color:
        #111827;
}

.pls-skip:focus-visible {
    outline:
        3px solid rgba(109, 61, 245, .15);

    outline-offset:
        3px;

    border-radius:
        5px;
}


/* =========================================================
   HONEYPOT
========================================================= */

.pls-honeypot {
    position:
        absolute !important;

    left:
        -99999px !important;

    width:
        1px !important;

    height:
        1px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;
}


/* =========================================================
   SIDEBAR FORM
========================================================= */

.pls-panel .pls-lead-form {
    gap:
        17px;
}

.pls-panel .pls-field {
    gap:
        7px;
}

.pls-panel .pls-field label {
    font-size:
        16px;
}

.pls-panel .pls-field input {
    min-height:
        52px;

    padding:
        12px
        15px;

    border-radius:
        10px;

    font-size:
        17px;
}

.pls-panel .pls-submit {
    min-height:
        54px;

    margin-top:
        2px;

    border-radius:
        10px;

    font-size:
        17px;
}

.pls-panel .pls-skip {
    font-size:
        15px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .pls-modal {
        width:
            min(
                680px,
                calc(100vw - 32px)
            );

        border-radius:
            25px;
    }

    .pls-modal-content {
        padding:
            40px
            40px
            32px;
    }

    .pls-modal h2 {
        font-size:
            38px;
    }

    .pls-modal-content > p {
        margin-bottom:
            30px;

        font-size:
            20px;
    }

    .pls-field label {
        font-size:
            18px;
    }

    .pls-field input {
        min-height:
            64px;

        font-size:
            18px;
    }

    .pls-submit {
        min-height:
            64px;

        font-size:
            19px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .pls-overlay {
        padding:
            10px;
    }

    .pls-modal {
        width:
            calc(100vw - 20px);

        max-height:
            calc(100vh - 20px);

        border-radius:
            21px;
    }

    .pls-modal-content {
        padding:
            34px
            20px
            25px;
    }

    .pls-modal .pls-close {
        top:
            9px;

        right:
            9px;

        width:
            40px;

        height:
            40px;

        font-size:
            34px;
    }

    .pls-modal h2 {
        max-width:
            calc(100% - 38px);

        margin-bottom:
            14px;

        font-size:
            30px;

        letter-spacing:
            -1px;
    }

    .pls-modal h2::after {
        width:
            70px;

        height:
            5px;

        margin-top:
            12px;
    }

    .pls-modal-content > p {
        margin-bottom:
            27px;

        font-size:
            17px;

        line-height:
            1.5;
    }

    .pls-lead-form {
        gap:
            18px;
    }

    .pls-field {
        gap:
            7px;
    }

    .pls-field label {
        font-size:
            16px;
    }

    .pls-field input {
        min-height:
            57px;

        padding:
            12px
            15px;

        border-radius:
            11px;

        font-size:
            17px;
    }

    .pls-message {
        font-size:
            14px;
    }

    .pls-submit {
        min-height:
            57px;

        margin-top:
            1px;

        border-radius:
            11px;

        font-size:
            17px;

        box-shadow:
            0 9px 22px rgba(88, 65, 229, .20);
    }

    .pls-skip {
        margin-top:
            10px;

        font-size:
            16px;
    }


    /* =====================================================
       FLOATING QUESTION BUTTON
    ===================================================== */

    .pls-sidebar-trigger {
        --pls-icon-size:
            54px !important;

        border-radius:
            17px;
    }

    .pls-sidebar-trigger.pls-right {
        right:
            10px;
    }

    .pls-sidebar-trigger.pls-left {
        left:
            10px;
    }


    /* =====================================================
       MOBILE SIDEBAR
    ===================================================== */

    .pls-panel {
        width:
            calc(100vw - 20px);
    }

    .pls-panel.pls-right {
        right:
            10px;
    }

    .pls-panel.pls-left {
        left:
            10px;
    }

    .pls-panel-inner {
        padding:
            25px
            20px
            22px;

        border-radius:
            17px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .pls-modal-content {
        padding:
            31px
            16px
            22px;
    }

    .pls-modal h2 {
        font-size:
            27px;
    }

    .pls-modal-content > p {
        font-size:
            16px;
    }

    .pls-field input {
        min-height:
            54px;

        font-size:
            16px;
    }

    .pls-submit {
        min-height:
            54px;

        font-size:
            16px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .pls-overlay,
    .pls-modal,
    .pls-panel,
    .pls-sidebar-trigger,
    .pls-submit,
    .pls-spinner {
        animation:
            none !important;

        transition:
            none !important;
    }
}