/* ========================================================================
   MAHAL JEWELS CUSTOMER PORTAL
   AUTHENTICATION STYLESHEET
   Version: 1.0
   ======================================================================== */


/* ========================================================================
   DESIGN TOKENS
   ======================================================================== */

:root{

    /* Brand */

    --mjcp-primary:#800004;
    --mjcp-primary-dark:#690003;
    --mjcp-secondary:#8F6C2E;

    /* Backgrounds */

    --mjcp-bg:#FAF9F6;
    --mjcp-card:#FFFFFF;
    --mjcp-overlay:rgba(255,255,255,.88);

    /* Text */

    --mjcp-heading:#800004;
    --mjcp-text:#554840;
    --mjcp-text-light:#8C8278;

    /* Border */

    --mjcp-border:#E7DED4;
    --mjcp-border-light:#F4EFEA;

    /* Status */

    --mjcp-success:#2F9E44;
    --mjcp-error:#D92D20;
    --mjcp-warning:#E8A317;

    /* Radius */

    --mjcp-radius-xs:8px;
    --mjcp-radius-sm:12px;
    --mjcp-radius-md:16px;
    --mjcp-radius-lg:20px;
    --mjcp-radius-xl:28px;

    /* Shadow */

    --mjcp-shadow-sm:
        0 2px 8px rgba(0,0,0,.04);

    --mjcp-shadow-md:
        0 10px 28px rgba(0,0,0,.05);

    --mjcp-shadow-lg:
        0 18px 45px rgba(0,0,0,.08);

    /* Transition */

    --mjcp-transition:
        300ms cubic-bezier(.4,0,.2,1);

}



/* ========================================================================
   RESET
   ======================================================================== */

#mjcp-auth-wrapper,
#mjcp-auth-wrapper *{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

#mjcp-auth-wrapper{

    font-family:"Lora",serif;
    color:var(--mjcp-text);

}

#mjcp-auth-wrapper button,
#mjcp-auth-wrapper input{

    font:inherit;

}

#mjcp-auth-wrapper button{

    cursor:pointer;

}

#mjcp-auth-wrapper input{

    outline:none;

}



/* ========================================================================
   WRAPPER
   ======================================================================== */

#mjcp-auth-wrapper{

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

    margin:60px auto;

    padding:0 20px;

}



/* ========================================================================
   CARD
   ======================================================================== */

.mjcp-auth-card{

    background:var(--mjcp-card);

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

    border-radius:var(--mjcp-radius-xl);

    overflow:hidden;

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

    position:relative;

}



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

.mjcp-auth-header{

    padding:48px 48px 36px;

    text-align:center;

    border-bottom:1px solid var(--mjcp-border-light);

}

.mjcp-auth-title{

    font-family:"PT Serif",serif;

    font-size:38px;

    line-height:1.2;

    color:var(--mjcp-heading);

}

.mjcp-auth-subtitle{

    margin-top:18px;

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

    line-height:1.8;

    font-size:15px;

    max-width:430px;

    margin-left:auto;
    margin-right:auto;

}



/* ========================================================================
   BODY
   ======================================================================== */

.mjcp-auth-body{

    position:relative;

    min-height:470px;

}

.mjcp-auth-stage{

    position:relative;

    min-height:470px;

    padding:44px;

}



/* ========================================================================
   AUTH STATES
   ======================================================================== */

.mjcp-auth-state{

    position:absolute;

    inset:44px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(18px);

    transition:
        opacity var(--mjcp-transition),
        transform var(--mjcp-transition),
        visibility var(--mjcp-transition);

}

.mjcp-auth-state.is-active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

}

/* ========================================================================
   PROGRESS STEPPER
   ======================================================================== */

.mjcp-progress{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    padding:34px 44px;

    border-bottom:1px solid var(--mjcp-border-light);

    background:#fff;

}

.mjcp-progress-step{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    gap:12px;

    position:relative;

}

.mjcp-step-circle{

    width:44px;

    height:44px;

    border-radius:50%;

    border:2px solid var(--mjcp-border);

    background:#fff;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:"PT Serif",serif;

    font-size:18px;

    font-weight:700;

    transition:all var(--mjcp-transition);

}

.mjcp-step-label{

    font-size:14px;

    font-weight:500;

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

    white-space:nowrap;

    transition:all var(--mjcp-transition);

}

.mjcp-progress-line{

    flex:1;

    max-width:90px;

    height:2px;

    background:var(--mjcp-border);

    border-radius:999px;

    position:relative;

    overflow:hidden;

}

.mjcp-progress-line::after{

    content:"";

    position:absolute;

    inset:0;

    width:0;

    background:var(--mjcp-secondary);

    transition:width .45s ease;

}



/* ========================================================================
   ACTIVE STEP
   ======================================================================== */

.mjcp-progress-step.is-active .mjcp-step-circle{

    background:var(--mjcp-primary);

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

    color:#fff;

    transform:scale(1.05);

    box-shadow:
        0 8px 18px rgba(128,0,4,.20);

}

.mjcp-progress-step.is-active .mjcp-step-label{

    color:var(--mjcp-primary);

    font-weight:600;

}



/* ========================================================================
   COMPLETED STEP
   ======================================================================== */

.mjcp-progress-step.is-complete .mjcp-step-circle{

    background:var(--mjcp-secondary);

    border-color:var(--mjcp-secondary);

    color:#fff;

}

.mjcp-progress-step.is-complete .mjcp-step-label{

    color:var(--mjcp-secondary);

    font-weight:600;

}

.mjcp-progress-line.is-complete::after{

    width:100%;

}



/* ========================================================================
   HOVER
   ======================================================================== */

.mjcp-progress-step:hover .mjcp-step-circle{

    transform:translateY(-2px);

}



/* ========================================================================
   SMALL DEVICES
   ======================================================================== */

@media (max-width:640px){

    .mjcp-progress{

        padding:26px 20px;

        gap:10px;

    }

    .mjcp-progress-line{

        max-width:38px;

    }

    .mjcp-step-circle{

        width:38px;

        height:38px;

        font-size:16px;

    }

    .mjcp-step-label{

        font-size:12px;

    }

}

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

.mjcp-form{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.mjcp-form-header{

    text-align:center;

}

.mjcp-form-title{

    font-family:"PT Serif",serif;

    font-size:30px;

    line-height:1.3;

    color:var(--mjcp-heading);

}

.mjcp-form-description{

    margin-top:14px;

    font-size:15px;

    line-height:1.8;

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

}



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

.mjcp-form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.mjcp-form-group label{

    font-size:14px;

    font-weight:600;

    color:var(--mjcp-heading);

}



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

.mjcp-mobile-field{

    display:flex;

    align-items:center;

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

    border-radius:16px;

    overflow:hidden;

    background:#fff;

    transition:all var(--mjcp-transition);

}

.mjcp-mobile-field:focus-within{

    border-color:var(--mjcp-secondary);

    box-shadow:0 0 0 4px rgba(143,108,46,.12);

}

.mjcp-country-code{

    width:78px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    align-self:stretch;

    border-right:1px solid var(--mjcp-border);

    background:#faf7f2;

    font-weight:600;

    color:var(--mjcp-heading);

}



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

.mjcp-form input{

    width:100%;

    height:58px;

    padding:0 18px;

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

    border-radius:16px;

    background:#fff;

    color:var(--mjcp-text);

    font-size:16px;

    transition:all var(--mjcp-transition);

}

.mjcp-mobile-field input{

    border:none;

    border-radius:0;

    box-shadow:none;

}

.mjcp-mobile-field input:focus{

    box-shadow:none;

}

.mjcp-form input:focus{

    border-color:var(--mjcp-secondary);

    box-shadow:0 0 0 4px rgba(143,108,46,.12);

}

.mjcp-form input::placeholder{

    color:#B4AAA0;

}

.mjcp-form input[readonly]{

    background:#F9F7F4;

    color:#7D7369;

    cursor:not-allowed;

}



/* ========================================================================
   ERROR
   ======================================================================== */

.mjcp-field-error{

    min-height:20px;

    font-size:13px;

    color:var(--mjcp-error);

    font-weight:500;

}

.mjcp-form-group.has-error input{

    border-color:var(--mjcp-error);

}

.mjcp-form-group.has-error .mjcp-mobile-field{

    border-color:var(--mjcp-error);

}



/* ========================================================================
   HELPER TEXT
   ======================================================================== */

.mjcp-helper-text{

    text-align:center;

    font-size:14px;

    line-height:1.7;

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

}



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

.mjcp-divider{

    display:flex;

    align-items:center;

    gap:14px;

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

    font-size:13px;

}

.mjcp-divider::before,

.mjcp-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:var(--mjcp-border);

}



/* ========================================================================
   DISABLED
   ======================================================================== */

.mjcp-form input:disabled{

    opacity:.65;

    cursor:not-allowed;

}

/* ========================================================================
   PRIMARY BUTTON
   ======================================================================== */

.mjcp-btn-primary{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    background:var(--mjcp-primary);

    color:#fff;

    font-size:16px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    transition:all var(--mjcp-transition);

    position:relative;

    overflow:hidden;

}

.mjcp-btn-primary:hover{

    background:var(--mjcp-primary-dark);

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(128,0,4,.20);

}

.mjcp-btn-primary:active{

    transform:translateY(0);

}

.mjcp-btn-primary:disabled{

    background:#D7D2CC;

    color:#FFFFFF;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}



/* ========================================================================
   BUTTON SHINE
   ======================================================================== */

.mjcp-btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transition:left .8s ease;

}

.mjcp-btn-primary:hover::before{

    left:140%;

}



/* ========================================================================
   BUTTON TEXT
   ======================================================================== */

.mjcp-btn-primary span{

    position:relative;

    z-index:2;

}



/* ========================================================================
   LINK BUTTONS
   ======================================================================== */

.mjcp-btn-link{

    background:none;

    border:none;

    padding:0;

    color:var(--mjcp-secondary);

    font-size:15px;

    font-weight:600;

    transition:all var(--mjcp-transition);

}

.mjcp-btn-link:hover{

    color:var(--mjcp-primary);

}



/* ========================================================================
   OTP ACTIONS
   ======================================================================== */

.mjcp-otp-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}



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

.mjcp-spinner{

    display:none;

    width:18px;

    height:18px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.30);

    border-top-color:#fff;

    animation:mjcp-spin .7s linear infinite;

}



/* ========================================================================
   LOADING BUTTON
   ======================================================================== */

.mjcp-btn-primary.is-loading{

    pointer-events:none;

}

.mjcp-btn-primary.is-loading .mjcp-spinner{

    display:block;

}

.mjcp-btn-primary.is-loading .mjcp-btn-text{

    opacity:.9;

}



/* ========================================================================
   SPIN ANIMATION
   ======================================================================== */

@keyframes mjcp-spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/* ========================================================================
   FOCUS ACCESSIBILITY
   ======================================================================== */

.mjcp-btn-primary:focus-visible,

.mjcp-btn-link:focus-visible{

    outline:3px solid rgba(143,108,46,.25);

    outline-offset:3px;

}



/* ========================================================================
   SMALL DEVICES
   ======================================================================== */

@media (max-width:640px){

    .mjcp-otp-actions{

        flex-direction:column;

        align-items:center;

    }

    .mjcp-btn-link{

        width:100%;

        text-align:center;

    }

}

/* ========================================================================
   OTP WRAPPER
   ======================================================================== */

.mjcp-otp-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin:10px 0 8px;

}



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

.mjcp-otp-input{

    width:58px;

    height:64px;

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

    border-radius:16px;

    background:#fff;

    text-align:center;

    font-family:"PT Serif",serif;

    font-size:24px;

    font-weight:700;

    color:var(--mjcp-heading);

    transition:all var(--mjcp-transition);

    caret-color:var(--mjcp-primary);

}



/* ========================================================================
   OTP HOVER
   ======================================================================== */

.mjcp-otp-input:hover{

    border-color:var(--mjcp-secondary);

}



/* ========================================================================
   OTP FOCUS
   ======================================================================== */

.mjcp-otp-input:focus{

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

    background:#fff;

    box-shadow:
        0 0 0 4px rgba(128,0,4,.10);

    transform:translateY(-2px);

}



/* ========================================================================
   OTP FILLED
   ======================================================================== */

.mjcp-otp-input:not(:placeholder-shown){

    border-color:var(--mjcp-secondary);

}



/* ========================================================================
   OTP ERROR
   ======================================================================== */

.mjcp-otp-wrapper.has-error .mjcp-otp-input{

    border-color:var(--mjcp-error);

    animation:mjcp-shake .35s ease;

}



/* ========================================================================
   OTP SUCCESS
   ======================================================================== */

.mjcp-otp-wrapper.is-success .mjcp-otp-input{

    border-color:var(--mjcp-success);

    background:#F7FFF9;

}



/* ========================================================================
   SHAKE
   ======================================================================== */

@keyframes mjcp-shake{

    0%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-5px);

    }

    40%{

        transform:translateX(5px);

    }

    60%{

        transform:translateX(-5px);

    }

    80%{

        transform:translateX(5px);

    }

    100%{

        transform:translateX(0);

    }

}



/* ========================================================================
   OTP TIMER
   ======================================================================== */

.mjcp-otp-timer{

    margin-top:12px;

    text-align:center;

    font-size:14px;

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

}

.mjcp-otp-timer strong{

    color:var(--mjcp-primary);

}



/* ========================================================================
   RESEND DISABLED
   ======================================================================== */

.mjcp-btn-link.is-disabled{

    opacity:.45;

    pointer-events:none;

}



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

@media (max-width:640px){

    .mjcp-otp-wrapper{

        gap:8px;

    }

    .mjcp-otp-input{

        width:46px;

        height:54px;

        font-size:20px;

        border-radius:12px;

    }

}

@media (max-width:420px){

    .mjcp-otp-wrapper{

        gap:6px;

    }

    .mjcp-otp-input{

        width:42px;

        height:50px;

        font-size:18px;

    }

}

/* ========================================================================
   LOADING OVERLAY
   ======================================================================== */

.mjcp-loading-overlay{

    position:absolute;

    inset:0;

    background:var(--mjcp-overlay);

    backdrop-filter:blur(10px);

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

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:opacity .35s ease,
               visibility .35s ease;

    z-index:999;

}

.mjcp-loading-overlay.is-active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}



/* ========================================================================
   LOADING CONTENT
   ======================================================================== */

.mjcp-loading-content{

    width:100%;

    max-width:340px;

    text-align:center;

    background:#FFFFFF;

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

    border-radius:22px;

    padding:40px 32px;

    box-shadow:var(--mjcp-shadow-lg);

}



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

.mjcp-loading-spinner{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

}

.mjcp-loading-spinner span{

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--mjcp-primary);

    animation:mjcp-loading-bounce 1.2s infinite ease-in-out;

}

.mjcp-loading-spinner span:nth-child(2){

    animation-delay:.18s;

}

.mjcp-loading-spinner span:nth-child(3){

    animation-delay:.36s;

}



/* ========================================================================
   LOADING ANIMATION
   ======================================================================== */

@keyframes mjcp-loading-bounce{

    0%,
    80%,
    100%{

        transform:scale(.5);

        opacity:.4;

    }

    40%{

        transform:scale(1.15);

        opacity:1;

    }

}



/* ========================================================================
   LOADING TITLE
   ======================================================================== */

.mjcp-loading-title{

    font-family:"PT Serif",serif;

    font-size:26px;

    color:var(--mjcp-heading);

    margin-bottom:12px;

}



/* ========================================================================
   LOADING TEXT
   ======================================================================== */

.mjcp-loading-text{

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

    line-height:1.8;

    font-size:15px;

}



/* ========================================================================
   BODY LOCK
   ======================================================================== */

body.mjcp-loading{

    overflow:hidden;

}



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

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

    .mjcp-loading-spinner span{

        animation:none;

        opacity:1;

    }

}



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

@media (max-width:640px){

    .mjcp-loading-content{

        max-width:92%;

        padding:32px 24px;

    }

    .mjcp-loading-title{

        font-size:22px;

    }

}

/* ========================================================================
   SUCCESS CONTAINER
   ======================================================================== */

.mjcp-success-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.mjcp-success-icon{

    margin-bottom:30px;

}



/* ========================================================================
   SUCCESS SVG
   ======================================================================== */

.mjcp-success-svg{

    width:110px;

    height:110px;

}

.mjcp-success-circle{

    fill:none;

    stroke:var(--mjcp-success);

    stroke-width:4;

    stroke-dasharray:314;

    stroke-dashoffset:314;

    animation:mjcp-circle .7s ease forwards;

}

.mjcp-success-check{

    fill:none;

    stroke:#FFFFFF;

    stroke-width:5;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:60;

    stroke-dashoffset:60;

    animation:mjcp-check .45s ease .6s forwards;

}



/* ========================================================================
   SUCCESS BACKGROUND
   ======================================================================== */

.mjcp-success-icon{

    width:110px;

    height:110px;

    border-radius:50%;

    background:var(--mjcp-success);

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

        0 18px 40px rgba(47,158,68,.20);

}



/* ========================================================================
   SUCCESS TITLE
   ======================================================================== */

.mjcp-success-title{

    font-family:"PT Serif",serif;

    font-size:32px;

    color:var(--mjcp-heading);

    margin-bottom:14px;

}



/* ========================================================================
   SUCCESS TEXT
   ======================================================================== */

.mjcp-success-text{

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

    line-height:1.8;

    max-width:420px;

    margin-bottom:34px;

}



/* ========================================================================
   SUCCESS INFO
   ======================================================================== */

.mjcp-success-info{

    width:100%;

    background:#FAFAF8;

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

    border-radius:18px;

    padding:24px;

    margin-bottom:30px;

}

.mjcp-success-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.mjcp-success-row+.mjcp-success-row{

    margin-top:18px;

    padding-top:18px;

    border-top:1px solid var(--mjcp-border-light);

}

.mjcp-success-label{

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

    font-size:15px;

}

.mjcp-success-value{

    color:var(--mjcp-heading);

    font-weight:600;

}



/* ========================================================================
   STATUS BADGE
   ======================================================================== */

.mjcp-success-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

    border-radius:999px;

    background:#EDF9F0;

    color:var(--mjcp-success);

    font-size:13px;

    font-weight:700;

}



/* ========================================================================
   ACTIONS
   ======================================================================== */

.mjcp-success-actions{

    width:100%;

    margin-bottom:22px;

}



/* ========================================================================
   COUNTDOWN
   ======================================================================== */

#mjcp-success-countdown{

    color:var(--mjcp-primary);

    font-weight:700;

}



/* ========================================================================
   ANIMATIONS
   ======================================================================== */

@keyframes mjcp-circle{

    to{

        stroke-dashoffset:0;

    }

}

@keyframes mjcp-check{

    to{

        stroke-dashoffset:0;

    }

}



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

@media (max-width:640px){

    .mjcp-success-title{

        font-size:26px;

    }

    .mjcp-success-info{

        padding:18px;

    }

    .mjcp-success-row{

        flex-direction:column;

        gap:10px;

        align-items:flex-start;

    }

}

/* ========================================================================
   UTILITIES
   ======================================================================== */

.mjcp-hidden{

    display:none !important;

}

.mjcp-invisible{

    visibility:hidden !important;

}

.mjcp-text-center{

    text-align:center;

}

.mjcp-w-100{

    width:100%;

}



/* ========================================================================
   STATE HELPERS
   ======================================================================== */

.mjcp-fade-in{

    animation:mjcpFadeIn .35s ease forwards;

}

.mjcp-fade-out{

    animation:mjcpFadeOut .25s ease forwards;

}

@keyframes mjcpFadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes mjcpFadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}



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

#mjcp-auth-wrapper input::selection{

    background:rgba(128,0,4,.18);

}



/* ========================================================================
   SCROLLBAR
   ======================================================================== */

#mjcp-auth-wrapper ::-webkit-scrollbar{

    width:8px;

}

#mjcp-auth-wrapper ::-webkit-scrollbar-track{

    background:#F5F2EE;

}

#mjcp-auth-wrapper ::-webkit-scrollbar-thumb{

    background:#D5C8BB;

    border-radius:999px;

}

#mjcp-auth-wrapper ::-webkit-scrollbar-thumb:hover{

    background:var(--mjcp-secondary);

}



/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

#mjcp-auth-wrapper *:focus-visible{

    outline:3px solid rgba(143,108,46,.25);

    outline-offset:3px;

}



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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}



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

@media (max-width:991px){

    #mjcp-auth-wrapper{

        max-width:700px;

        margin:40px auto;

    }

}



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

@media (max-width:767px){

    #mjcp-auth-wrapper{

        padding:16px;

        margin:24px auto;

    }

    .mjcp-auth-header{

        padding:34px 24px 28px;

    }

    .mjcp-auth-title{

        font-size:30px;

    }

    .mjcp-auth-subtitle{

        font-size:14px;

    }

    .mjcp-auth-stage{

        padding:28px;

        min-height:420px;

    }

    .mjcp-auth-state{

        inset:28px;

    }

    .mjcp-form-title{

        font-size:26px;

    }

}



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

@media (max-width:480px){

    #mjcp-auth-wrapper{

        padding:12px;

    }

    .mjcp-auth-card{

        border-radius:20px;

    }

    .mjcp-auth-stage{

        padding:22px;

    }

    .mjcp-auth-state{

        inset:22px;

    }

    .mjcp-auth-title{

        font-size:28px;

    }

    .mjcp-form-title{

        font-size:22px;

    }

    .mjcp-btn-primary{

        height:54px;

    }

}



/* ========================================================================
   PRINT
   ======================================================================== */

@media print{

    #mjcp-auth-wrapper{

        display:none;

    }

}



/* ========================================================================
   END OF FILE
   ======================================================================== */