/* =====================================
   MARION'S INN LUXURY LOGIN DESIGN
===================================== */


*{
    box-sizing:border-box;
}


body{

    margin:0;

    padding:0;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;


    font-family:
    'Segoe UI',
    Arial,
    sans-serif;


    background:

    linear-gradient(
        rgba(105, 131, 106, 0.65),
        rgba(0,0,0,0.65)
    ),

    url("../../images/hotel.jpg");


    background-size:cover;

    background-position:center;

}



/* LOGIN CARD */

.login-container{


    width:420px;


    padding:45px;


    border-radius:25px;



    /* Solid, more opaque background instead of a blurred glass
       effect - backdrop-filter:blur() combined with border-radius
       renders as a large, broken circular smear across the whole
       page on some Android Chrome/WebView builds (confirmed on a
       real device), instead of staying inside the rounded card. A
       plain semi-opaque fill looks the same on every device and
       never has that failure mode. */

    background:

    rgba(6, 54, 17, 0.82);



    box-shadow:

    0 20px 50px
    rgba(0,0,0,0.5);



    text-align:center;


    color:white;


}




/* LOGO */

.login-logo{


    width:100px;

    height:100px;


    border-radius:50%;


    object-fit:cover;



    border:

    3px solid #d4af37;



    margin-bottom:15px;


}




/* ROLE LABEL */


.role-badge{


    display:inline-block;


    padding:

    8px 25px;



    border-radius:30px;



    background:

    #d4af37;



    color:white;



    font-size:14px;



    font-weight:bold;



    margin-bottom:20px;


}





/* TITLE */


.login-container h2{


    font-size:32px;


    margin:

    5px 0 10px;



    letter-spacing:1px;


}




.login-container p{


    color:#eeeeee;


    font-size:15px;


}




/* INPUT AREA */


.input-box{


    margin-top:20px;


}




.input-box input{


    width:100%;



    padding:15px;



    border:none;



    outline:none;



    border-radius:12px;



    font-size:15px;



    background:white;


}




.input-box input:focus{


    box-shadow:

    0 0 10px

    #d4af37;


}





/* LOGIN BUTTON */


.login-btn{


    margin-top:25px;



    width:100%;



    padding:15px;



    border:none;



    border-radius:12px;



    background:

    linear-gradient(

    45deg,

    #027434,

    #d4af37

    );



    color:white;



    font-size:18px;



    font-weight:bold;



    cursor:pointer;



    transition:.3s;


}




.login-btn:hover{


    transform:translateY(-3px);



    box-shadow:

    0 8px 20px

    rgba(212,175,55,.5);


}




/* ERROR MESSAGE */


.error-message{


    margin-top:20px;



    color:#ffcccc !important;



    background:

    rgba(255,0,0,.2);



    padding:10px;



    border-radius:10px;


}




/* SUCCESS MESSAGE */


.success-message{


    margin-top:20px;


    color:#d9f7d9 !important;


    background:

    rgba(76,175,80,.25);


    border:1px solid rgba(76,175,80,.5);


    padding:10px;


    border-radius:10px;


    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}


.success-message .spinner{

    width:14px;

    height:14px;

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

    border-top-color:#d9f7d9;

    border-radius:50%;

    animation:spin .7s linear infinite;

    flex-shrink:0;

}


@keyframes spin{

    to{ transform:rotate(360deg); }

}





/* BACK BUTTON */


.back-home{


    margin-top:25px;


}



.back-home a{


    color:white;



    text-decoration:none;



    font-size:14px;


}



.back-home a:hover{


    color:#d4af37;


}




/* MOBILE RESPONSIVE */


@media(max-width:500px){


.login-container{


    width:90%;


    padding:30px;


}



.login-container h2{


    font-size:26px;


}


}

/* =====================================
   LANDSCAPE LOGIN LAYOUT
   Used by manager/receptionist/customer
   login pages - splits the card into a
   left brand panel and a right form
   panel instead of one narrow stacked
   column.
===================================== */

.login-container.landscape{
    width:820px;
    max-width:92vw;
    padding:0;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    text-align:left;
    overflow:hidden;
}

.login-brand-panel{
    flex:0 0 38%;
    padding:45px 32px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:rgba(0,0,0,0.15);
    border-right:1px solid rgba(255,255,255,0.15);
}

.login-form-panel{
    flex:1;
    padding:45px 40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:left;
}

@media(max-width:700px){

    .login-container.landscape{
        flex-direction:column;
        width:90%;
    }

    .login-brand-panel{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,0.15);
        padding:30px;
    }

    .login-form-panel{
        padding:30px;
    }

}

/* =====================================
   FIELD LABELS
===================================== */

.field-label{

    display:block;

    text-align:left;

    color:#f3f0e6;

    font-size:13px;

    font-weight:600;

    margin-bottom:8px;

    letter-spacing:.3px;

}

/* =====================================
   PASSWORD SHOW / HIDE TOGGLE
===================================== */

.password-wrapper{

    position:relative;

    display:flex;

    align-items:center;

}

.password-wrapper input{

    padding-right:48px;

}

.password-toggle{

    position:absolute;

    right:6px;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    color:#b8860b;

    cursor:pointer;

    background:transparent;

    transition:.25s;

    user-select:none;

}

.password-toggle:hover{

    color:#8a6508;

    background:rgba(212,175,55,.12);

}

.password-toggle i{

    font-size:17px;

}

/* =====================================
   AUTH HELPER LINKS
===================================== */

.auth-links{

    margin-top:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    font-size:14px;

}

.forgot-link{

    color:#f0e6c8;

    text-decoration:none;

    font-size:13px;

    transition:.25s;

}

.forgot-link:hover{

    color:#d4af37;

    text-decoration:underline;

}

.muted-text{

    color:#e6e2d6;

}

.register-link{

    margin-top:22px;

    padding-top:16px;

    border-top:1px solid rgba(255,255,255,.18);

    flex-wrap:wrap;

}

.register-link-btn{

    color:#d4af37;

    font-weight:700;

    text-decoration:none;

    transition:.25s;

}

.register-link-btn:hover{

    color:#ffd966;

    text-decoration:underline;

}

/* =====================================
   SUCCESS MESSAGE
===================================== */

.success-message{

    margin-top:20px;

    color:#d4edda !important;

    background:rgba(46,125,50,.25);

    border:1px solid rgba(46,125,50,.5);

    padding:12px;

    border-radius:10px;

    font-size:14px;

}

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

/* register.php reuses the two-panel ".landscape" layout (same
   820px card as the manager/receptionist/customer logins), so
   this class must NOT redeclare width - that was fighting the
   .landscape width at equal specificity and forcing the whole
   card down to 480px while still using the two-column flex
   layout, squeezing everything sideways.

   The form itself is long (8 fields), so related fields are
   paired into rows (.form-row) instead of stacking one-per-line,
   and spacing is tightened - this keeps the whole card's height
   inside a normal viewport with no scrolling needed, so an
   error banner at the top of the form is never pushed out of
   view. The max-height/overflow-y below is only a safety net
   for unusually short windows - on a normal screen the content
   now fits without it ever engaging. */

.register-container .login-form-panel{
    padding-top:26px;
    padding-bottom:26px;
}

.register-container .input-box{
    margin-top:12px;
}

.register-container .input-box input,
.register-container .input-box textarea{
    padding:11px 12px;
}

.register-container .form-row{
    display:flex;
    gap:14px;
    margin-top:12px;
}

.register-container .form-row .input-box{
    flex:1;
    min-width:0;
    margin-top:0;
}

.register-container .login-btn{
    margin-top:16px;
}

.register-container .human-check{
    margin-top:12px;
}

/* Register carries twice the fields of a plain login (paired into
   .form-row columns), so the shared .landscape breakpoint (700px)
   is too narrow for it specifically - between ~701px and 819px the
   brand/form split AND the form-row pairs are both still side by
   side, squeezing labels onto two lines and clipping placeholder
   text (visible on common tablet widths like a 768px iPad). Give
   the register card its own, wider breakpoint so it stacks to a
   single column before that cramped zone is ever reached. */
@media(max-width:860px){

    .login-container.landscape.register-container{
        flex-direction:column;
        width:90%;
        max-width:520px;
    }

    .register-container .login-brand-panel{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,0.15);
        padding:30px;
    }

    .register-container .login-form-panel{
        padding:26px 30px;
    }

}

@media(max-width:520px){

    .register-container .form-row{
        flex-direction:column;
        gap:0;
    }

    .register-container .form-row .input-box{
        margin-top:12px;
    }

}

/* -----------------------------------------------------------
   BRAND-PANEL HIGHLIGHTS
   Fills the left panel with a few real selling points instead
   of leaving it mostly empty next to the taller form column -
   keeps both panels visually balanced at any height, and the
   panel heights now stay in sync automatically (no cap/scroll
   needed on the form side any more).
----------------------------------------------------------- */

.register-container .register-highlights{
    list-style:none;
    margin:26px 0 0;
    padding:0;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:14px;
    text-align:left;
}

.register-container .register-highlights li{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:13.5px;
    line-height:1.35;
    color:#f3f0e6;
}

.register-container .register-highlights li i{
    flex:0 0 32px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(212,175,55,.22);
    border:1px solid rgba(212,175,55,.5);
    color:#d4af37;
    font-size:13px;
}

@media(max-width:860px){

    .register-container .register-highlights{
        margin-top:20px;
    }

}

.register-container textarea{

    width:100%;

    padding:15px;

    border:none;

    outline:none;

    border-radius:12px;

    font-size:14px;

    font-family:inherit;

    background:white;

    color:#333;

    resize:vertical;

    box-sizing:border-box;

}

.register-container textarea:focus{

    box-shadow:0 0 10px #d4af37;

}

.hint-text{

    color:#e8e2cf;

    font-weight:400;

    font-size:12px;

}

.register-container .human-check{
    margin-top:14px;
}

/* =====================================
   "I'M NOT A ROBOT" HUMAN CHECK
===================================== */

.human-check{
    margin-top:20px;
}

.human-check-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border-radius:12px;
    background:rgba(255,255,255,.92);
    cursor:pointer;
    user-select:none;
    transition:box-shadow .2s, background .2s;
}

.human-check-row:hover{
    box-shadow:0 0 10px rgba(212,175,55,.5);
}

.human-check-row:focus{
    outline:none;
    box-shadow:0 0 0 2px #027434;
}

.human-check.verified .human-check-row{
    background:#e9f6ea;
    cursor:default;
    box-shadow:none;
}

.hc-box{
    width:26px;
    height:26px;
    border-radius:7px;
    border:2px solid #b7c4b8;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:border-color .2s, background .2s;
}

.hc-box svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:#fff;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:0;
    transform:scale(.5);
    transition:opacity .18s ease .05s, transform .18s ease .05s;
}

.human-check.verified .hc-box{
    border-color:#1b5e20;
    background:#1b5e20;
}

.human-check.verified .hc-box svg{
    opacity:1;
    transform:scale(1);
}

.hc-spinner{
    display:none;
    width:26px;
    height:26px;
    border-radius:50%;
    border:2.5px solid #d8e2d8;
    border-top-color:#027434;
    flex-shrink:0;
    animation:hc-spin .7s linear infinite;
}

.human-check.checking .hc-spinner{ display:block; }
.human-check.checking .hc-box{ display:none; }

@keyframes hc-spin{ to{ transform:rotate(360deg); } }

.hc-text{ flex:1; }

.hc-title{
    display:block;
    font-size:14.5px;
    font-weight:700;
    color:#123a1c;
}

.hc-sub{
    display:block;
    font-size:12px;
    color:#4c5d4d;
    margin-top:1px;
}

.hc-error{
    margin-top:8px;
    color:#ffcccc;
    font-size:13px;
    display:none;
}

/* =====================================
   VERIFICATION SUCCESS POPUP
   (matches the checkmark / message / OK
   card used across the site's forms)
===================================== */

.success-popup{
    position:fixed;
    inset:0;
    background:rgba(6,20,10,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
}

.success-popup.show{
    opacity:1;
    pointer-events:auto;
}

.success-popup-card{
    background:#fff;
    border-radius:22px;
    padding:36px 30px 28px;
    text-align:center;
    width:100%;
    max-width:320px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
    transform:translateY(10px) scale(.97);
    transition:transform .25s cubic-bezier(.2,.8,.2,1);
}

.success-popup.show .success-popup-card{
    transform:translateY(0) scale(1);
}

.success-popup-icon{
    width:78px;
    height:78px;
    border-radius:50%;
    border:3px solid #1b5e20;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.success-popup-icon::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:50%;
    background:radial-gradient(circle, #e9f6ea 0%, transparent 70%);
    z-index:-1;
}

.success-popup-icon svg{
    width:36px;
    height:36px;
}

.success-popup-icon path{
    stroke:#1b5e20;
    stroke-width:3;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:40;
    stroke-dashoffset:40;
    animation:success-draw .4s ease forwards .15s;
}

@keyframes success-draw{ to{ stroke-dashoffset:0; } }

.success-popup-msg{
    font-size:17px;
    font-weight:700;
    line-height:1.4;
    margin:0 0 22px;
    color:#1F2937;
}

.success-popup-ok{
    min-width:130px;
    padding:11px 34px;
    border:none;
    border-radius:999px;
    background:linear-gradient(90deg,#1b5e20,#d4af37);
    color:#fff;
    font-weight:700;
    font-size:14.5px;
    font-family:inherit;
    cursor:pointer;
}

.success-popup-ok:hover{
    box-shadow:0 8px 20px rgba(212,175,55,.45);
}

/* =====================================
   OTP VERIFICATION CODE - 6 SEPARATE BOXES
   Used on verify_login.php (staff MFA) and the
   forgot-password flows for manager, receptionist and
   customer. Sized so 6 boxes + gaps (6*44 + 5*8 = 304px)
   comfortably fit inside the plain .login-container's usable
   width (420px - 2*45px padding = 330px) - the old 48px/10px
   sizing needed 338px, 8px more than was available, which
   clipped/cramped the row against the card's edge.
===================================== */

.otp-boxes{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:6px;
}

.otp-box{
    width:44px;
    height:52px;
    text-align:center;
    font-size:20px;
    font-weight:700;
    border-radius:10px;
    border:none;
    background:#fff;
    color:#222;
}

.otp-box:focus{
    outline:2px solid #d4af37;
}

@media(max-width:500px){

    .otp-boxes{
        gap:6px;
    }

    .otp-box{
        width:36px;
        height:46px;
        font-size:17px;
    }

}
 
/* =====================================
   REMEMBER ME CHECKBOX ROW
===================================== */
 
.remember-me-row{
    margin-top:14px;
    margin-bottom:4px;
    text-align:left;
}
 
.remember-me-label{
    display:flex;
    align-items:center;
    gap:8px;
    color:#f0e6c8;
    font-size:13px;
    cursor:pointer;
}
 
.remember-me-label input[type="checkbox"]{
    width:16px;
    height:16px;
    accent-color:#d4af37;
    cursor:pointer;
}

/* =====================================
   REGISTRATION VIEWPORT FIX
   Prevents the tall registration card
   from being vertically clipped.
===================================== */

body:has(.register-container){
    align-items:flex-start;
    overflow-y:auto;
    padding:20px 0;
}

.register-container{
    margin:0 auto;
}

.register-container .login-form-panel{
    justify-content:flex-start;
}