/*
|--------------------------------------------------------------------------
| CALCUTTA BAKERY CAFE
| LOGIN PAGE CSS
|--------------------------------------------------------------------------
| File:
|     /calcuttabakerycafe/assets/css/cbc_login.css
|
| DESIGN:
|     Desktop:
|         - Centered compact login composition
|         - Bakery image on LEFT
|         - Login form on RIGHT
|         - Image keeps ORIGINAL aspect ratio
|         - Image itself has rounded corners
|         - No image cropping
|         - No unnecessary desktop scrollbar
|
|     Mobile:
|         - Full-width bakery image
|         - Login box overlays lower portion of image
|         - Mobile layout remains compact
|--------------------------------------------------------------------------
*/

/*==========================================================================
  01. GLOBAL RESET
==========================================================================*/
*{
    box-sizing:border-box;
}
html,
body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
}
body{
    font-family:'Poppins',sans-serif;
    color:#3a2418;
    background:
        radial-gradient(circle at top left,rgba(255,255,255,.8),transparent 35%),
        linear-gradient(135deg,#f7e8d0 0%,#ecd0ae 50%,#d8ad7f 100%);
}

/*==========================================================================
  02. MAIN LOGIN WRAPPER
==========================================================================*/
.login-wrapper{
    position:relative;
    width:min(980px,calc(100vw - 80px));
    height:min(590px,calc(100vh - 50px));
    min-height:480px;
    margin:25px auto;
    display:grid;
    grid-template-columns:400px minmax(0,1fr);
    overflow:hidden;
    background:#fff;
    border-radius:24px;
    box-shadow:0 22px 60px rgba(58,36,24,.22);
}

/*==========================================================================
  03. BRAND / IMAGE PANEL
==========================================================================*/
.brand-panel{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:0;
    padding:20px;
    overflow:hidden;
    background:
        radial-gradient(circle at center,#8b4d2c 0%,#713d23 48%,#3a2418 100%);
    border-radius:24px 0 0 24px;
}
.brand-content{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.cbc-logo{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    margin:0 auto;
    border-radius:18px;
}

/*==========================================================================
  04. LOGIN PANEL
==========================================================================*/
.login-panel{
    position:relative;
    min-width:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 42px;
    overflow:hidden;
    background:
        linear-gradient(145deg,#fffdf9 0%,#fff8ed 52%,#f8ead6 100%);
}
.login-box{
    width:100%;
    max-width:350px;
    margin:0 auto;
}

/*==========================================================================
  05. LOGIN HEADING
==========================================================================*/
.login-title{
    margin:0 0 5px;
    color:#3a2418;
    font-family:'Playfair Display',serif;
    font-size:31px;
    font-weight:700;
    line-height:1.12;
    text-align:center;
}
.login-subtitle{
    margin:0 0 20px;
    color:#8a5a3c;
    font-size:12px;
    font-weight:500;
    line-height:1.4;
    text-align:center;
}

/*==========================================================================
  06. FORM GROUP
==========================================================================*/
.form-group{
    margin-bottom:13px;
}
.form-label{
    display:block;
    margin:0 0 6px;
    color:#5b3826;
    font-size:11px;
    font-weight:600;
}

/*==========================================================================
  07. INPUT WRAPPER
==========================================================================*/
.input-wrapper{
    position:relative;
    width:100%;
}
.input-wrapper i{
    position:absolute;
    top:50%;
    left:13px;
    z-index:2;
    width:15px;
    color:#9a6845;
    font-size:13px;
    text-align:center;
    transform:translateY(-50%);
    pointer-events:none;
}
.input-wrapper input{
    width:100%;
    height:42px;
    margin:0;
    padding:0 40px 0 38px;
    border:1px solid #dfc5a8;
    border-radius:9px;
    outline:none;
    background:#fff;
    color:#3a2418;
    font-family:'Poppins',sans-serif;
    font-size:12px;
    transition:border-color .2s ease,box-shadow .2s ease;
}
.input-wrapper input::placeholder{
    color:#b79a82;
}
.input-wrapper input:focus{
    border-color:#a45f31;
    box-shadow:0 0 0 3px rgba(164,95,49,.10);
}

/*==========================================================================
  08. PASSWORD TOGGLE
==========================================================================*/
.password-toggle{
    position:absolute;
    top:50%;
    right:11px;
    z-index:3;
    width:25px;
    height:25px;
    padding:0;
    border:0;
    background:transparent;
    color:#9a6845;
    font-size:12px;
    cursor:pointer;
    transform:translateY(-50%);
}
.password-toggle:hover{
    color:#713d23;
}

/*==========================================================================
  09. OPTIONS
==========================================================================*/
.login-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:2px 0 15px;
}
.remember-me{
    display:flex;
    align-items:center;
    gap:6px;
    color:#79543d;
    font-size:10px;
    cursor:pointer;
}
.remember-me input{
    width:12px;
    height:12px;
    margin:0;
    accent-color:#713d23;
}
.forgot-password{
    color:#8a4e2e;
    font-size:10px;
    font-weight:600;
    text-decoration:none;
}
.forgot-password:hover{
    color:#3a2418;
    text-decoration:underline;
}

/*==========================================================================
  10. LOGIN BUTTON
==========================================================================*/
.login-button{
    width:100%;
    height:42px;
    margin:0;
    padding:0 15px;
    border:0;
    border-radius:9px;
    background:linear-gradient(135deg,#713d23,#a45f31);
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.2px;
    cursor:pointer;
    box-shadow:0 7px 16px rgba(113,61,35,.20);
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.login-button:hover{
    background:linear-gradient(135deg,#60321d,#8e4f2a);
    box-shadow:0 9px 20px rgba(113,61,35,.26);
    transform:translateY(-1px);
}
.login-button:active{
    transform:translateY(0);
}

/*==========================================================================
  11. ERROR / MESSAGE
==========================================================================*/
.login-error,
.login-message{
    margin:0 0 13px;
    padding:8px 10px;
    border-radius:7px;
    font-size:10px;
    line-height:1.4;
    text-align:center;
}
.login-error{
    border:1px solid #e4b9a9;
    background:#fff0eb;
    color:#9b3f28;
}
.login-message{
    border:1px solid #d8c09f;
    background:#fff8e9;
    color:#79543d;
}

/*==========================================================================
  12. FOOTER
==========================================================================*/
.login-footer{
    margin-top:18px;
    color:#a1836d;
    font-size:9px;
    line-height:1.5;
    text-align:center;
}
.login-footer a{
    color:#8a4e2e;
    text-decoration:none;
}
.login-footer a:hover{
    text-decoration:underline;
}

/*==========================================================================
  13. LARGE DESKTOP
  1400PX AND ABOVE
==========================================================================*/
@media (min-width:1400px){
    .login-wrapper{
        width:1040px;
        height:620px;
        max-width:calc(100vw - 100px);
        max-height:calc(100vh - 50px);
        grid-template-columns:420px 620px;
        margin:25px auto;
    }
    .brand-panel{
        padding:22px;
        border-radius:24px 0 0 24px;
    }
    .cbc-logo{
        border-radius:20px;
    }
    .login-panel{
        padding:30px 52px;
    }
    .login-box{
        max-width:350px;
    }
}

/*==========================================================================
  14. STANDARD DESKTOP / LAPTOP
  769PX - 1399PX
==========================================================================*/
@media (min-width:769px) and (max-width:1399px){
    .login-wrapper{
        width:min(920px,calc(100vw - 70px));
        height:min(560px,calc(100vh - 45px));
        min-height:450px;
        margin:22px auto;
        grid-template-columns:40% 60%;
    }
    .brand-panel{
        padding:20px;
        border-radius:24px 0 0 24px;
    }
    .cbc-logo{
        border-radius:18px;
    }
    .login-panel{
        padding:25px 38px;
    }
    .login-box{
        max-width:330px;
    }
    .login-title{
        font-size:29px;
    }
    .login-subtitle{
        margin-bottom:17px;
        font-size:11px;
    }
    .form-group{
        margin-bottom:11px;
    }
    .form-label{
        margin-bottom:5px;
        font-size:10px;
    }
    .input-wrapper input{
        height:40px;
        font-size:11px;
    }
    .login-options{
        margin-bottom:13px;
    }
    .login-button{
        height:40px;
        font-size:11px;
    }
    .login-footer{
        margin-top:15px;
        font-size:8px;
    }
}

/*==========================================================================
  15. SHORT DESKTOP SCREEN
==========================================================================*/
@media (min-width:769px) and (max-height:700px){
    .login-wrapper{
        height:calc(100vh - 30px);
        min-height:430px;
        margin:15px auto;
    }
    .brand-panel{
        padding:16px;
    }
    .login-panel{
        padding:20px 32px;
    }
    .login-title{
        font-size:27px;
    }
    .login-subtitle{
        margin-bottom:14px;
    }
    .form-group{
        margin-bottom:9px;
    }
    .input-wrapper input{
        height:38px;
    }
    .login-options{
        margin-bottom:11px;
    }
    .login-button{
        height:38px;
    }
    .login-footer{
        margin-top:11px;
    }
}

/*==========================================================================
  16. VERY SHORT DESKTOP SCREEN
==========================================================================*/
@media (min-width:769px) and (max-height:560px){
    .login-wrapper{
        height:calc(100vh - 20px);
        min-height:400px;
        margin:10px auto;
    }
    .brand-panel{
        padding:12px;
    }
    .login-panel{
        padding:15px 28px;
    }
    .login-title{
        font-size:24px;
    }
    .login-subtitle{
        margin-bottom:10px;
        font-size:10px;
    }
    .form-label{
        margin-bottom:3px;
    }
    .form-group{
        margin-bottom:7px;
    }
    .input-wrapper input{
        height:35px;
    }
    .login-options{
        margin-bottom:8px;
    }
    .login-button{
        height:35px;
    }
    .login-footer{
        margin-top:8px;
    }
}

/*==========================================================================
  17. MOBILE
  IMPORTANT:
  Mobile layout intentionally remains independent from desktop.
==========================================================================*/
@media (max-width:768px){
    html,
    body{
        width:100%;
        min-height:100%;
        overflow-x:hidden;
    }
    body{
        min-height:100vh;
    }
    .login-wrapper{
        position:relative;
        width:100%;
        height:auto;
        min-height:100vh;
        margin:0;
        display:block;
        overflow:hidden;
        border-radius:0;
        box-shadow:none;
        background:#3a2418;
    }
    .brand-panel{
        position:relative;
        display:block;
        width:100%;
        height:auto;
        min-height:0;
        padding:0;
        overflow:hidden;
        border-radius:0;
        background:#3a2418;
    }
    .brand-content{
        display:block;
        width:100%;
        height:auto;
        min-height:0;
        overflow:hidden;
    }
    .cbc-logo{
        display:block;
        width:100%;
        height:auto;
        max-width:100%;
        max-height:none;
        margin:0;
        border-radius:0;
    }
    .login-panel{
        position:absolute;
        top:58%;
        left:50%;
        z-index:20;
        width:calc(100% - 44px);
        max-width:330px;
        height:auto;
        min-height:0;
        margin:0;
        padding:14px 16px 16px;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:visible;
        transform:translateX(-50%);
        border-radius:14px;
        background:rgba(255,250,241,.97);
        box-shadow:0 12px 32px rgba(40,22,12,.28);
    }
    .login-box{
        width:100%;
        max-width:none;
        margin:0;
    }
    .login-title{
        margin-bottom:3px;
        font-size:19px;
        line-height:1.1;
    }
    .login-subtitle{
        margin-bottom:11px;
        font-size:10px;
        line-height:1.3;
    }
    .form-group{
        margin-bottom:8px;
    }
    .form-label{
        margin-bottom:4px;
        font-size:9px;
    }
    .input-wrapper input{
        height:38px;
        padding-left:34px;
        padding-right:36px;
        border-radius:8px;
        font-size:10px;
    }
    .input-wrapper i{
        left:11px;
        width:13px;
        font-size:11px;
    }
    .password-toggle{
        right:8px;
        width:24px;
        height:24px;
        font-size:10px;
    }
    .login-options{
        margin:1px 0 10px;
        gap:7px;
    }
    .remember-me,
    .forgot-password{
        font-size:8px;
    }
    .remember-me{
        gap:4px;
    }
    .remember-me input{
        width:10px;
        height:10px;
    }
    .login-button{
        height:38px;
        border-radius:8px;
        font-size:10px;
    }
    .login-error,
    .login-message{
        margin-bottom:9px;
        padding:6px 8px;
        font-size:8px;
    }
    .login-footer{
        margin-top:10px;
        font-size:7px;
        line-height:1.4;
    }
}

/*==========================================================================
  18. SMALL MOBILE
  UP TO 480PX
==========================================================================*/
@media (max-width:480px){
    .login-panel{
        top:57%;
        width:calc(100% - 32px);
        max-width:340px;
        padding:13px 15px 15px;
        border-radius:13px;
    }
    .login-title{
        font-size:18px;
    }
    .login-subtitle{
        font-size:9px;
        margin-bottom:10px;
    }
    .form-group{
        margin-bottom:7px;
    }
    .input-wrapper input{
        height:36px;
        font-size:9px;
    }
    .login-button{
        height:36px;
        font-size:9px;
    }
}

/*==========================================================================
  19. VERY SMALL MOBILE
  UP TO 360PX
==========================================================================*/
@media (max-width:360px){
    .login-panel{
        top:56%;
        width:calc(100% - 24px);
        max-width:335px;
        padding:11px 13px 13px;
        border-radius:12px;
    }
    .login-title{
        font-size:17px;
    }
    .login-subtitle{
        font-size:8px;
        margin-bottom:8px;
    }
    .form-label{
        font-size:8px;
    }
    .input-wrapper input{
        height:34px;
        font-size:9px;
    }
    .login-button{
        height:34px;
        font-size:9px;
    }
    .login-options{
        margin-bottom:8px;
    }
    .remember-me,
    .forgot-password{
        font-size:7px;
    }
    .login-footer{
        margin-top:7px;
        font-size:6px;
    }
}