/*==================================================
 Mashhad Darou Authentication Theme
 Digits Plugin
 Version : 1.0
 Author : Amir + ChatGPT
==================================================*/


/*==================================================
 ROOT VARIABLES
==================================================*/

:root{

    /* Brand Colors */

    --md-primary:#F82568;
    --md-primary-hover:#db1d5a;

    --md-secondary:#61CE70;

    --md-text:#1E293B;

    --md-text-light:#64748B;

    --md-border:#E5E7EB;

    --md-background:#FFFFFF;

    --md-input:#F8FAFC;

    --md-error:#EF4444;

    --md-success:#22C55E;



    /* Radius */

    --md-radius:14px;

    --md-radius-small:10px;



    /* Shadow */

    --md-shadow:

        0 10px 30px rgba(0,0,0,.08);
        
    --md-shadow-hover:

        0 15px 35px rgba(0,0,0,.12);


    /* Transition */

    --md-transition:.25s ease;



    /* Fonts */

    --md-heading:"Anjoman";

    --md-body:"IRANSans";

}

/* ==============================
   Digits Base Reset
================================ */

.digits_login_wrapper,
.digits-login-modal,
.digits-form-container,
.digits-form_tab,
.digits_fields_wrapper,
.digits-form-content,
.digits-fields{

    box-sizing:border-box;

    font-family:var(--md-body);

}

.digits_login_wrapper *{

    box-sizing:border-box;

}
/* ==============================
   Main Wrapper
================================ */

.digits_login_wrapper{

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

    padding:60px 20px;

    background:transparent;

}



/* ==============================
   Login Card
================================ */

.digits-form-container{

    width:100%;
    max-width:430px;

    background:var(--md-background);

    border-radius:20px;

    padding:40px;

    box-shadow:var(--md-shadow);

    border:1px solid var(--md-border);

    transition:var(--md-transition);

}



/* Hover */

.digits-form-container:hover{

    box-shadow:var(--md-shadow-hover);

}

/*==================================================
 HEADER
==================================================*/

/* ==============================
   Header Wrapper
================================ */

.md-auth-header{

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

    margin-bottom:32px;

}


/* ==============================
   Logo
================================ */

.md-auth-logo{

    width:58px;
    height:auto;

    display:block;

    margin:0 auto 14px;

    user-select:none;

}


/* ==============================
   Slogan
================================ */

.md-auth-slogan{

    font-family:var(--md-heading);

    font-size:15px;

    line-height:1.9;

    font-weight:500;

    color:var(--md-text);

    letter-spacing:.2px;

}
/* ==============================
   Main Title
================================ */

.digits-form_heading_text{

    display:block;

    font-family:var(--md-heading) !important;

    font-size:34px !important;

    font-weight:700 !important;

    color:var(--md-text) !important;

    text-align:center;

    line-height:1.4;

    letter-spacing:.2px;

    margin-bottom:8px;

}


/* جلوگیری از استایل پیشفرض Digits */

.digits-form_heading_text:before,
.digits-form_heading_text:after{

    display:none !important;

}
/*==================================================
 TABS
==================================================*/

/* کانتینر تب‌ها */

.digits-form_tabs{

    display:flex;

    gap:10px;

    margin:28px 0;

}



/* هر تب */

.digits-form_tab-item{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    height:46px;

    border-radius:14px;

    border:1px solid var(--md-border);

    background:#fff;

    color:var(--md-text-light);

    font-family:var(--md-body);

    font-size:14px;

    font-weight:500;

    cursor:pointer;

    transition:var(--md-transition);

}



/* Hover */

.digits-form_tab-item:hover{

    border-color:var(--md-primary);

    color:var(--md-primary);

}



/* تب فعال */

.digits-tab_active{

    background:var(--md-primary) !important;

    color:#fff !important;

    border-color:var(--md-primary) !important;

}

/*==================================================
 INPUTS
==================================================*/

/* تمام فیلدهای فرم */

.digits_login_wrapper input[type="text"],
.digits_login_wrapper input[type="email"],
.digits_login_wrapper input[type="password"],
.digits_login_wrapper input[type="tel"]{

    width:100%;

    height:54px;

    background:var(--md-input);

    border:1px solid var(--md-border);

    border-radius:14px;

    padding:0 18px;

    font-family:var(--md-body) !important;

    font-size:15px;

    color:var(--md-text);

    transition:all .25s ease;

    outline:none;

    box-shadow:none;

}


/* Placeholder */

.digits_login_wrapper input::placeholder{

    color:var(--md-text-light);

    opacity:1;

}


/* Focus */

.digits_login_wrapper input:focus{

    border-color:var(--md-primary);

    background:#fff;

    box-shadow:0 0 0 4px rgba(248,37,104,.08);

}


/* Hover */

.digits_login_wrapper input:hover{

    border-color:#D1D5DB;

}


/* فاصله بین فیلدها */

.digits_login_wrapper .digits_fields_wrapper{

    display:flex;

    flex-direction:column;

    gap:16px;

}