/* =========================================================
   Smart Mobile Care - Register CSS
   Page-specific styles
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.register-page{
    min-height:calc(100vh - 150px);

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

    padding:35px 15px 60px;

    background:#f5f7fb;
}


.register-container{
    width:100%;
    max-width:460px;

    margin:0 auto;
}


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

.register-card{
    width:100%;

    padding:30px;

    border:1px solid #e5eaf2;

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 12px 35px rgba(15,23,42,.08);
}


/* =========================================================
   LOGO
========================================================= */

.register-logo{
    width:70px;
    height:70px;

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

    margin:0 auto 15px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    box-shadow:
        0 8px 20px rgba(37,99,235,.18);
}


.register-logo img{
    width:48px;
    height:48px;

    object-fit:contain;

    display:block;
}


/* =========================================================
   HEADING
========================================================= */

.register-heading{
    text-align:center;

    margin-bottom:22px;
}


.register-heading span{
    display:block;

    margin-bottom:5px;

    color:#2563eb;

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

    letter-spacing:1.5px;
}


.register-heading h1{
    margin:0 0 6px;

    color:#111827;

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

    line-height:1.3;
}


.register-heading p{
    margin:0;

    color:#6b7280;

    font-size:11px;

    line-height:1.6;
}


/* =========================================================
   ALERT
========================================================= */

.register-alert{
    display:flex;
    align-items:flex-start;

    gap:8px;

    margin-bottom:17px;

    padding:11px 12px;

    border-radius:9px;

    font-size:9px;

    line-height:1.5;
}


.register-alert i{
    margin-top:1px;

    font-size:10px;
}


.register-alert.error{
    border:1px solid #fecaca;

    background:#fef2f2;

    color:#dc2626;
}


.register-alert.success{
    border:1px solid #bbf7d0;

    background:#f0fdf4;

    color:#15803d;
}


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

.register-form{
    width:100%;
}


.register-field{
    margin-bottom:14px;
}


.register-field label{
    display:block;

    margin-bottom:6px;

    color:#374151;

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


.register-field label span{
    color:#9ca3af;

    font-size:8px;

    font-weight:400;
}


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

.register-input{
    position:relative;

    display:flex;
    align-items:center;

    width:100%;

    height:47px;

    border:1px solid #dbe2ea;

    border-radius:10px;

    background:#fff;

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


.register-input:focus-within{
    border-color:#2563eb;

    box-shadow:
        0 0 0 3px
        rgba(37,99,235,.10);
}


.register-input > i:first-child{
    width:42px;

    flex:0 0 42px;

    color:#64748b;

    font-size:13px;

    text-align:center;
}


.register-input:focus-within
> i:first-child{
    color:#2563eb;
}


.register-input input{
    width:100%;
    height:100%;

    min-width:0;

    padding:0 12px 0 0;

    border:none;
    outline:none;

    background:transparent;

    color:#111827;

    font-family:'Poppins',sans-serif;

    font-size:11px;
}


.register-input input::placeholder{
    color:#9ca3af;
}


.register-input input:-webkit-autofill{
    -webkit-box-shadow:
        0 0 0 1000px #fff inset;

    -webkit-text-fill-color:#111827;
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.register-password-toggle{
    width:42px;
    height:100%;

    flex:0 0 42px;

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

    border:none;

    background:transparent;

    color:#64748b;

    cursor:pointer;

    font-size:12px;
}


.register-password-toggle:hover{
    color:#2563eb;
}


/* =========================================================
   PASSWORD STRENGTH
========================================================= */

.register-password-strength{
    margin-top:7px;
}


.strength-bar{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:4px;

    width:100%;

    height:3px;
}


.strength-bar span{
    display:block;

    border-radius:10px;

    background:#e5e7eb;

    transition:
        background .2s ease;
}


.register-password-strength small{
    display:block;

    margin-top:4px;

    color:#9ca3af;

    font-size:7px;
}


/* Password levels */

.register-password-strength.weak
.strength-bar span:nth-child(1){
    background:#ef4444;
}


.register-password-strength.medium
.strength-bar span:nth-child(1),
.register-password-strength.medium
.strength-bar span:nth-child(2){
    background:#f59e0b;
}


.register-password-strength.good
.strength-bar span:nth-child(1),
.register-password-strength.good
.strength-bar span:nth-child(2),
.register-password-strength.good
.strength-bar span:nth-child(3){
    background:#2563eb;
}


.register-password-strength.strong
.strength-bar span{
    background:#16a34a;
}


.register-password-strength.weak
small{
    color:#dc2626;
}


.register-password-strength.medium
small{
    color:#d97706;
}


.register-password-strength.good
small{
    color:#2563eb;
}


.register-password-strength.strong
small{
    color:#16a34a;
}


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

.register-submit{
    width:100%;
    height:47px;

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

    gap:7px;

    margin-top:4px;

    border:none;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    color:#fff;

    font-family:'Poppins',sans-serif;

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

    cursor:pointer;

    box-shadow:
        0 7px 16px
        rgba(37,99,235,.18);

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


.register-submit:hover{
    transform:translateY(-1px);

    box-shadow:
        0 10px 20px
        rgba(37,99,235,.23);
}


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


.register-submit:disabled{
    opacity:.7;

    cursor:wait;

    transform:none;
}


/* =========================================================
   LOGIN LINK
========================================================= */

.register-login{
    display:flex;
    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:4px;

    margin-top:20px;

    color:#6b7280;

    font-size:9px;

    text-align:center;
}


.register-login a{
    color:#2563eb;

    font-weight:600;

    text-decoration:none;
}


.register-login a:hover{
    text-decoration:underline;
}


/* =========================================================
   EXTRA LINK
========================================================= */

.register-extra{
    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:17px;
    padding-top:14px;

    border-top:1px solid #eef2f7;
}


.register-extra a{
    display:flex;
    align-items:center;

    gap:5px;

    color:#64748b;

    font-size:8px;

    text-decoration:none;

    transition:.2s;
}


.register-extra a:hover{
    color:#2563eb;
}


.register-extra i{
    font-size:8px;
}


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

.register-field.has-error
.register-input{
    border-color:#ef4444;

    box-shadow:
        0 0 0 3px
        rgba(239,68,68,.08);
}


.register-field.has-error
> label{
    color:#dc2626;
}


.register-field-error{
    display:block;

    margin-top:5px;

    color:#dc2626;

    font-size:8px;

    line-height:1.4;
}


.register-field-error i{
    margin-right:3px;

    font-size:7px;
}


/* =========================================================
   PASSWORD MATCH
========================================================= */

.register-field.password-match
.register-input{
    border-color:#16a34a;
}


.register-field.password-match
> label{
    color:#15803d;
}


.register-field.password-mismatch
.register-input{
    border-color:#ef4444;

    box-shadow:
        0 0 0 3px
        rgba(239,68,68,.08);
}


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

@media(max-width:768px){

    .register-page{
        min-height:calc(100vh - 120px);

        padding:
            20px
            12px
            90px;
    }


    .register-container{
        max-width:400px;
    }


    .register-card{
        padding:24px 20px;

        border-radius:16px;
    }


    .register-logo{
        width:60px;
        height:60px;

        margin-bottom:12px;

        border-radius:15px;
    }


    .register-logo img{
        width:41px;
        height:41px;
    }


    .register-heading{
        margin-bottom:18px;
    }


    .register-heading span{
        font-size:7px;
    }


    .register-heading h1{
        font-size:20px;
    }


    .register-heading p{
        font-size:8px;
    }


    .register-alert{
        font-size:8px;

        padding:9px 10px;
    }


    .register-field{
        margin-bottom:12px;
    }


    .register-field label{
        font-size:8px;
    }


    .register-field label span{
        font-size:6.5px;
    }


    .register-input{
        height:44px;

        border-radius:9px;
    }


    .register-input > i:first-child{
        width:38px;

        flex-basis:38px;

        font-size:11px;
    }


    .register-input input{
        font-size:9px;
    }


    .register-password-toggle{
        width:38px;

        flex-basis:38px;

        font-size:10px;
    }


    .register-password-strength small{
        font-size:6px;
    }


    .register-submit{
        height:44px;

        font-size:9px;
    }


    .register-login{
        font-size:8px;
    }


    .register-extra a{
        font-size:7px;
    }


    .register-field-error{
        font-size:6.5px;
    }

}


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

@media(max-width:400px){

    .register-page{
        padding:
            15px
            8px
            85px;
    }


    .register-card{
        padding:20px 15px;

        border-radius:13px;
    }


    .register-heading h1{
        font-size:18px;
    }


    .register-heading p{
        font-size:7px;
    }


    .register-input{
        height:42px;
    }


    .register-input > i:first-child{
        width:35px;

        flex-basis:35px;
    }


    .register-input input{
        font-size:8px;
    }


    .register-password-toggle{
        width:35px;

        flex-basis:35px;
    }


    .register-submit{
        height:42px;
    }

}