/*=========================================================
PALAM BAKERS
LOGIN MODAL
=========================================================*/

.login-modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

display:flex;

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

opacity:0;
visibility:hidden;

pointer-events:none;

transition:.35s;

z-index:999999;

}

.login-modal.show{

opacity:1;

visibility:visible;

pointer-events:auto;

}


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

.login-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.45);

}


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

.login-box{

position:relative;

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

background:#fff;

border-radius:22px;

padding:45px 40px;

box-shadow:0 30px 90px rgba(0,0,0,.25);

z-index:5;

animation:popup .35s ease;

}

@keyframes popup{

0%{

opacity:0;

transform:translateY(40px) scale(.96);

}

100%{

opacity:1;

transform:none;

}

}


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

.login-close{

position:absolute;

top:18px;

right:18px;

width:42px;

height:42px;

border:none;

background:none;

cursor:pointer;

font-size:22px;

color:#222;

transition:.25s;

}

.login-close:hover{

transform:rotate(90deg);

color:#c89b32;

}


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

.login-logo{

text-align:center;

margin-bottom:28px;

}

.login-logo img{

width:95px;

height:95px;

border-radius:50%;

object-fit:cover;

display:block;

margin:auto;

}


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

.login-tabs{

display:flex;

justify-content:center;

gap:55px;

margin-bottom:35px;

}

.tab-btn{

background:none;

border:none;

font-size:28px;

font-family:"Cormorant Garamond",serif;

font-weight:700;

cursor:pointer;

color:#999;

padding-bottom:10px;

border-bottom:3px solid transparent;

transition:.30s;

}

.tab-btn.active{

color:#1b2b19;

border-color:#c89b32;

}
/*=========================================
TAB PANELS
=========================================*/

.tab-panel{

display:none;

}

.tab-panel.active{

display:block;

animation:fadeTab .30s ease;

}

@keyframes fadeTab{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:none;

}

}


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

.form-group{

margin-bottom:18px;

}

.form-group label{

display:block;

margin-bottom:8px;

font-size:14px;

font-weight:600;

color:#222;

}

.form-group input{

width:100%;

height:54px;

padding:0 16px;

border:1px solid #d9d9d9;

border-radius:10px;

font-size:15px;

outline:none;

background:#fff;

transition:.25s;

}

.form-group input:focus{

border-color:#c89b32;

box-shadow:0 0 0 4px rgba(200,155,50,.12);

}


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

.submit-btn{

width:100%;

height:54px;

margin-top:10px;

border:none;

border-radius:10px;

background:#c89b32;

color:#fff;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.30s;

}

.submit-btn:hover{

background:#af8424;

transform:translateY(-2px);

}


/*=========================================
BOTTOM TEXT
=========================================*/

.switch-text{

margin-top:22px;

text-align:center;

font-size:14px;

color:#666;

line-height:24px;

}

.switch-text a{

color:#c89b32;

font-weight:700;

text-decoration:none;

}

.switch-text a:hover{

text-decoration:underline;

}


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

.form-group input::placeholder{

color:#999;

}


/*=========================================
AUTOFILL FIX
=========================================*/

input:-webkit-autofill{

-webkit-box-shadow:0 0 0 1000px #fff inset;

-webkit-text-fill-color:#222;

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

@media (max-width:992px){

.login-box{

max-width:500px;

padding:38px 30px;

margin:20px;

}

.login-logo{

margin-bottom:22px;

}

.login-logo img{

width:85px;

height:85px;

}

.login-tabs{

gap:40px;

margin-bottom:28px;

}

.tab-btn{

font-size:24px;

}

.form-group input{

height:50px;

font-size:15px;

}

.submit-btn{

height:50px;

font-size:15px;

}

}


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

@media (max-width:768px){

.login-modal{

padding:15px;

}

.login-box{

width:100%;

max-width:100%;

padding:28px 20px;

border-radius:18px;

}

.login-close{

top:12px;

right:12px;

width:36px;

height:36px;

font-size:18px;

}

.login-logo{

margin-bottom:18px;

}

.login-logo img{

width:72px;

height:72px;

}

.login-tabs{

gap:24px;

margin-bottom:22px;

}

.tab-btn{

font-size:22px;

}

.form-group{

margin-bottom:16px;

}

.form-group label{

font-size:13px;

margin-bottom:6px;

}

.form-group input{

height:46px;

padding:0 14px;

font-size:14px;

}

.submit-btn{

height:48px;

font-size:15px;

}

.switch-text{

font-size:13px;

margin-top:18px;

}

}


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

@media (max-width:480px){

.login-modal{

padding:10px;

}

.login-box{

padding:22px 16px;

border-radius:14px;

}

.login-logo img{

width:62px;

height:62px;

}

.login-tabs{

gap:18px;

}

.tab-btn{

font-size:19px;

}

.form-group input{

height:44px;

font-size:13px;

}

.submit-btn{

height:46px;

font-size:14px;

}

.switch-text{

font-size:12px;

}

}


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

body.modal-open{

overflow:hidden;

}