
/* ==========================================================
   PADIDAR MOBILE AUTH POPUP V1
   ========================================================== */

.pf-auth-modal{
    display:none;
}


/*
 * MOBILE / TABLET ONLY
 */
@media(min-width:0px){

    body.pf-auth-open{
        overflow:hidden !important;
        touch-action:none;
    }


    .pf-auth-modal{
        position:fixed;
        inset:0;

        z-index:999999;

        display:block;

        visibility:hidden;
        opacity:0;

        pointer-events:none;

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


    .pf-auth-modal.is-open{
        visibility:visible;
        opacity:1;

        pointer-events:auto;
    }


    .pf-auth-backdrop{
        position:absolute;
        inset:0;

        background:
            rgba(2,18,32,.68);

        backdrop-filter:
            blur(4px);

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


    /*
     * Bottom-sheet style modal.
     */

    .pf-auth-sheet{
        position:absolute;

        right:0;
        bottom:0;
        left:0;

        width:100%;
        max-height:
            min(90vh,760px);

        overflow-y:auto;

        padding:
            24px 18px
            calc(
                22px
                + env(safe-area-inset-bottom)
            );

        border-radius:
            24px 24px 0 0;

        background:#fff;

        box-shadow:
            0 -20px 60px
            rgba(0,0,0,.22);

        transform:
            translateY(105%);

        transition:
            transform .28s
            cubic-bezier(
                .22,
                .8,
                .24,
                1
            );

        direction:rtl;
    }


    .pf-auth-modal.is-open
    .pf-auth-sheet{
        transform:
            translateY(0);
    }


    .pf-auth-close{
        position:absolute;

        top:17px;
        left:17px;

        display:flex;

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

        width:38px;
        height:38px;

        padding:0;

        border:1px solid #e1e8ee;
        border-radius:50%;

        background:#f5f8fa;

        color:#153d5c;

        font-size:27px;
        font-weight:400;
        line-height:1;

        cursor:pointer;
    }


    /*
     * Brand
     */

    .pf-auth-brand{
        display:flex;

        align-items:center;

        gap:12px;

        padding-left:48px;
    }


    .pf-auth-brand img{
        width:54px;
        height:54px;

        object-fit:contain;

        border:1px solid #e3eaf0;
        border-radius:13px;

        background:#fff;

        padding:5px;
    }


    .pf-auth-brand span{
        display:block;

        margin-bottom:3px;

        color:#ed1b35;

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


    .pf-auth-brand strong{
        display:block;

        color:#0a355b;

        font-size:20px;
        line-height:1.5;
        font-weight:950;
    }


    .pf-auth-intro{
        margin:16px 0 17px;

        color:#687f90;

        font-size:13px;
        line-height:1.9;
        font-weight:600;
    }


    /*
     * Tabs
     */

    .pf-auth-tabs{
        display:grid;

        grid-template-columns:
            1fr 1fr;

        gap:5px;

        padding:5px;

        margin-bottom:18px;

        border-radius:12px;

        background:#edf2f6;
    }


    .pf-auth-tab{
        height:44px;

        padding:0;

        border:0;
        border-radius:9px;

        background:transparent;

        color:#5f7688;

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

        cursor:pointer;
    }


    .pf-auth-tab.is-active{
        background:#fff;

        color:#0b385f;

        box-shadow:
            0 4px 13px
            rgba(7,49,82,.08);
    }


    /*
     * WooCommerce cleanup
     */

    .pf-auth-woo
    #customer_login{
        display:block !important;

        width:100% !important;
    }


    .pf-auth-woo
    #customer_login::before,
    .pf-auth-woo
    #customer_login::after{
        display:none !important;
    }


    .pf-auth-woo
    .u-column1,
    .pf-auth-woo
    .u-column2{
        float:none !important;

        width:100% !important;

        margin:0 !important;
        padding:0 !important;
    }


    .pf-auth-woo
    .u-column2{
        display:none;
    }


    .pf-auth-woo.is-register
    .u-column1{
        display:none !important;
    }


    .pf-auth-woo.is-register
    .u-column2{
        display:block !important;
    }


    .pf-auth-woo h2{
        display:none !important;
    }


    .pf-auth-woo
    form.woocommerce-form{
        margin:0 !important;

        padding:0 !important;

        border:0 !important;

        border-radius:0 !important;

        background:transparent !important;
    }


    /*
     * Labels
     */

    .pf-auth-woo
    .form-row{
        margin:
            0 0 13px !important;

        padding:0 !important;
    }


    .pf-auth-woo label{
        display:block;

        margin-bottom:7px;

        color:#234c68 !important;

        font-size:12px !important;
        line-height:1.6 !important;
        font-weight:850 !important;
    }


    .pf-auth-woo
    .required{
        color:#ed1b35 !important;
    }


    /*
     * Inputs
     */

    .pf-auth-woo
    input.input-text,
    .pf-auth-woo
    input[type="text"],
    .pf-auth-woo
    input[type="email"],
    .pf-auth-woo
    input[type="password"]{
        width:100% !important;
        height:52px !important;

        padding:
            0 14px !important;

        border:
            1px solid #d4dfe7 !important;

        border-radius:
            10px !important;

        outline:none !important;

        background:
            #f8fafc !important;

        color:#173e5a !important;

        font-size:
            16px !important;

        font-weight:
            650 !important;

        box-shadow:none !important;

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


    .pf-auth-woo
    input.input-text:focus,
    .pf-auth-woo
    input[type="text"]:focus,
    .pf-auth-woo
    input[type="email"]:focus,
    .pf-auth-woo
    input[type="password"]:focus{
        border-color:
            #6f9bb9 !important;

        background:#fff !important;
    }


    /*
     * Password eye
     */

    .pf-auth-woo
    .password-input{
        width:100% !important;
    }


    /*
     * Remember
     */

    .pf-auth-woo
    .woocommerce-form-login__rememberme{
        display:flex !important;

        align-items:center;

        gap:7px;

        margin:
            2px 0 13px !important;
    }


    .pf-auth-woo
    .woocommerce-form-login__rememberme
    input{
        width:17px !important;
        height:17px !important;

        margin:0 !important;
    }


    /*
     * Submit buttons
     */

    .pf-auth-woo
    button.button,
    .pf-auth-woo
    .woocommerce-button{
        width:100% !important;
        min-height:52px !important;

        margin:
            5px 0 0 !important;

        padding:
            0 18px !important;

        border:0 !important;
        border-radius:
            10px !important;

        background:
            #ed1b35 !important;

        color:#fff !important;

        font-size:
            14px !important;

        font-weight:
            900 !important;

        box-shadow:
            0 9px 20px
            rgba(237,27,53,.18)
            !important;
    }


    .pf-auth-woo
    button.button:hover,
    .pf-auth-woo
    .woocommerce-button:hover{
        background:
            #d8142c !important;
    }


    /*
     * Lost password
     */

    .pf-auth-woo
    .woocommerce-LostPassword{
        margin:
            13px 0 0 !important;

        text-align:center;
    }


    .pf-auth-woo
    .woocommerce-LostPassword a{
        color:#315d7d !important;

        font-size:
            12px !important;

        font-weight:
            750 !important;

        text-decoration:none !important;
    }


    /*
     * Registration helper text
     */

    .pf-auth-woo
    .woocommerce-privacy-policy-text,
    .pf-auth-woo
    .woocommerce-form-register p{
        color:#758a9a;

        font-size:
            11px;

        line-height:
            1.9;
    }


    .pf-auth-woo
    .woocommerce-privacy-policy-link{
        color:#0b5488 !important;
    }


    /*
     * Security footer
     */

    .pf-auth-security{
        display:flex;

        align-items:center;

        gap:8px;

        margin-top:18px;

        padding:11px 12px;

        border:
            1px solid #e2e9ee;

        border-radius:
            10px;

        background:#f6f9fb;
    }


    .pf-auth-security span{
        display:flex;

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

        flex:0 0 auto;

        width:24px;
        height:24px;

        border-radius:50%;

        background:#e5f6ed;

        color:#16804a;

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


    .pf-auth-security p{
        margin:0;

        color:#708596;

        font-size:10.5px;
        line-height:1.7;
        font-weight:650;
    }


    /*
     * Woo notices inside modal
     */

    .pf-auth-woo
    .woocommerce-error,
    .pf-auth-woo
    .woocommerce-message,
    .pf-auth-woo
    .woocommerce-info{
        margin:
            0 0 15px !important;

        padding:
            12px 14px !important;

        border-radius:
            9px !important;

        font-size:
            11px !important;

        line-height:
            1.8 !important;
    }

}


/*
 * Very small phones
 */

@media(max-width:390px){

    .pf-auth-sheet{
        padding-right:15px;
        padding-left:15px;
    }

    .pf-auth-brand strong{
        font-size:18px;
    }

}




/* ==========================================================
   PADIDAR_AUTH_DESKTOP_MODAL_V3
   Desktop = centered modal
   Mobile  = existing bottom sheet
   ========================================================== */

@media(min-width:922px){

    .pf-auth-modal{
        position:fixed !important;
        inset:0 !important;

        display:block !important;

        z-index:999999 !important;

        visibility:hidden;
        opacity:0;

        pointer-events:none;

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


    .pf-auth-modal.is-open{
        visibility:visible;
        opacity:1;

        pointer-events:auto;
    }


    .pf-auth-backdrop{
        position:absolute !important;
        inset:0 !important;

        background:
            rgba(3,19,33,.68) !important;

        backdrop-filter:
            blur(6px);

        -webkit-backdrop-filter:
            blur(6px);
    }


    .pf-auth-sheet{
        position:absolute !important;

        top:50% !important;
        right:auto !important;
        bottom:auto !important;
        left:50% !important;

        width:min(
            560px,
            calc(100% - 48px)
        ) !important;

        max-height:
            min(86vh,760px) !important;

        overflow-y:auto !important;

        padding:
            30px 29px 28px !important;

        border:
            1px solid rgba(10,53,91,.08) !important;

        border-radius:
            22px !important;

        background:#fff !important;

        box-shadow:
            0 28px 85px
            rgba(0,22,40,.30) !important;

        transform:
            translate(
                -50%,
                calc(-50% + 22px)
            )
            scale(.985) !important;

        transition:
            transform .25s ease,
            opacity .25s ease !important;

        direction:rtl !important;
    }


    .pf-auth-modal.is-open
    .pf-auth-sheet{

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1) !important;
    }


    .pf-auth-brand{
        padding-left:52px !important;
    }


    .pf-auth-brand img{
        width:62px !important;
        height:62px !important;

        border-radius:15px !important;
    }


    .pf-auth-brand strong{
        font-size:23px !important;
    }


    .pf-auth-intro{
        font-size:13px !important;

        line-height:2 !important;
    }


    .pf-auth-tabs{
        margin-top:19px !important;
    }


    .pf-auth-tab{
        height:47px !important;

        font-size:13px !important;
    }


    .pf-auth-woo
    input.input-text,
    .pf-auth-woo
    input[type="text"],
    .pf-auth-woo
    input[type="email"],
    .pf-auth-woo
    input[type="password"]{

        height:53px !important;

        font-size:15px !important;
    }


    .pf-auth-woo
    button.button,
    .pf-auth-woo
    .woocommerce-button{

        min-height:53px !important;

        font-size:14px !important;
    }


    .pf-auth-close{
        top:20px !important;
        left:20px !important;

        width:40px !important;
        height:40px !important;
    }

}


/*
 * Mobile keeps the bottom-sheet behaviour.
 */

@media(max-width:921px){

    .pf-auth-sheet{

        top:auto !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        width:100% !important;

        max-height:
            min(90vh,760px) !important;

        border-radius:
            24px 24px 0 0 !important;

        transform:
            translateY(105%) !important;
    }


    .pf-auth-modal.is-open
    .pf-auth-sheet{

        transform:
            translateY(0) !important;
    }

}

