:root{
    --login-navy:#10233f;
    --login-navy-2:#193a5f;
    --login-teal:#0f766e;
    --login-teal-soft:#dff7f2;
    --login-gold:#c9973e;
    --login-gold-soft:#fff4dc;
    --login-cream:#f7f2e9;
    --login-ink:#172033;
    --login-muted:#667085;
    --login-line:#e8e1d6;
    --login-white:#ffffff;
    --login-danger:#b42318;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body.hotel-login-page{
    min-height:100vh;
    margin:0;
    color:var(--login-ink);
    background:
        radial-gradient(circle at 8% 10%,rgba(201,151,62,.16),transparent 24%),
        radial-gradient(circle at 92% 86%,rgba(15,118,110,.13),transparent 28%),
        #f8f5ef;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.hotel-login-shell{min-height:100vh;padding:clamp(18px,3vw,40px);display:grid;place-items:center}
.hotel-login-frame{
    width:min(1180px,100%);
    min-height:min(760px,calc(100vh - 80px));
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
    overflow:hidden;
    border:1px solid rgba(16,35,63,.08);
    border-radius:30px;
    background:#fff;
    box-shadow:0 34px 90px rgba(32,48,74,.14);
}
.hotel-login-showcase{
    position:relative;
    overflow:hidden;
    padding:clamp(34px,5vw,64px);
    color:#fff;
    background:
        linear-gradient(145deg,rgba(8,25,49,.96),rgba(16,53,80,.95) 52%,rgba(15,118,110,.92));
}
.hotel-login-showcase::before,.hotel-login-showcase::after{content:"";position:absolute;border-radius:999px;pointer-events:none}
.hotel-login-showcase::before{width:370px;height:370px;right:-170px;top:-130px;background:rgba(201,151,62,.20)}
.hotel-login-showcase::after{width:320px;height:320px;left:-170px;bottom:-150px;background:rgba(94,234,212,.12)}
.hotel-login-showcase-inner{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column}
.hotel-brand{display:flex;align-items:center;gap:15px}
.hotel-brand-logo{
    width:68px;height:68px;flex:0 0 68px;border-radius:20px;display:grid;place-items:center;overflow:hidden;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 0 0 5px rgba(255,255,255,.035)
}
.hotel-brand-logo img{display:block;width:100%;height:100%;object-fit:contain;padding:8px;background:rgba(255,255,255,.95)}
.hotel-brand-logo i{font-size:1.75rem;color:#fde7b3}
.hotel-brand-copy small{display:block;margin-bottom:4px;color:#f9d995;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hotel-brand-copy strong{display:block;max-width:330px;font-size:1.05rem;line-height:1.28;font-weight:800;color:#fff}
.hotel-login-hero{margin:auto 0;padding:64px 0 46px;max-width:620px}
.hotel-login-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:17px;color:#f8d894;font-size:.73rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.hotel-login-hero h1{margin:0;max-width:590px;font-size:clamp(2.25rem,4.7vw,4.35rem);font-weight:850;letter-spacing:-.055em;line-height:.98}
.hotel-login-hero p{max-width:540px;margin:22px 0 0;color:rgba(255,255,255,.72);font-size:1rem;line-height:1.78}
.hotel-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:auto}
.hotel-capability{min-height:116px;padding:16px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.07);backdrop-filter:blur(8px)}
.hotel-capability i{display:grid;place-items:center;width:35px;height:35px;margin-bottom:13px;border-radius:11px;background:rgba(255,255,255,.11);color:#f9d995;font-size:1rem}
.hotel-capability strong{display:block;font-size:.78rem;color:#fff}.hotel-capability span{display:block;margin-top:5px;color:rgba(255,255,255,.58);font-size:.67rem;line-height:1.45}
.hotel-login-form-side{position:relative;display:flex;align-items:center;padding:clamp(34px,5vw,68px);background:linear-gradient(180deg,#fff 0%,#fffdf9 100%)}
.hotel-login-form-wrap{width:100%;max-width:430px;margin:0 auto}
.hotel-login-security{display:inline-flex;align-items:center;gap:7px;margin-bottom:25px;padding:7px 10px;border:1px solid #d8ebe7;border-radius:999px;background:#f0fbf8;color:#0f766e;font-size:.68rem;font-weight:800}
.hotel-login-form-wrap h2{margin:0;font-size:clamp(1.7rem,3vw,2.35rem);font-weight:850;letter-spacing:-.045em}
.hotel-login-intro{margin:9px 0 28px;color:var(--login-muted);font-size:.88rem;line-height:1.65}
.hotel-login-alert{border:0;border-radius:15px;padding:12px 14px;font-size:.78rem}.hotel-login-alert.alert-danger{background:#fff1f0;color:#9f1f17}
.hotel-field{margin-bottom:18px}
.hotel-field-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;color:#344054;font-size:.76rem;font-weight:800}
.hotel-input-wrap{position:relative}
.hotel-input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#98a2b3;font-size:1rem;z-index:2}
.hotel-login-input{
    width:100%;height:54px;padding:10px 46px 10px 45px;border:1px solid #ddd7cc;border-radius:15px;background:#fff;color:#172033;
    font-size:.9rem;box-shadow:0 1px 2px rgba(16,24,40,.02);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease
}
.hotel-login-input::placeholder{color:#a3a9b4}.hotel-login-input:hover{border-color:#cfc5b6}.hotel-login-input:focus{outline:0;border-color:#1b8d83;box-shadow:0 0 0 4px rgba(15,118,110,.11);background:#fff}
.hotel-password-toggle{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:11px;background:transparent;color:#667085;display:grid;place-items:center}.hotel-password-toggle:hover{background:#f3f6f6;color:#0f766e}
.hotel-login-submit{
    width:100%;min-height:55px;border:0;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:9px;
    background:linear-gradient(135deg,#17365b,#0f766e);color:#fff;font-size:.87rem;font-weight:800;box-shadow:0 14px 28px rgba(15,87,92,.20);transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease
}
.hotel-login-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 18px 34px rgba(15,87,92,.25)}.hotel-login-submit:disabled{opacity:.68;cursor:not-allowed}
.hotel-login-submit .spinner-border{width:1rem;height:1rem;border-width:2px}
.hotel-login-help{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;color:#7a8190;font-size:.71rem;text-align:center}.hotel-login-help i{color:#c9973e}
.hotel-login-footer{margin-top:34px;padding-top:22px;border-top:1px solid #eee8df;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:#8a909a;font-size:.67rem}
.hotel-login-contact{display:flex;align-items:center;gap:8px;color:#667085}.hotel-login-contact i{color:#0f766e}
@media(max-width:991.98px){
    .hotel-login-shell{padding:18px}.hotel-login-frame{min-height:auto;grid-template-columns:1fr;border-radius:24px}.hotel-login-showcase{padding:28px 28px 30px}.hotel-login-hero{padding:42px 0 30px}.hotel-login-hero h1{font-size:clamp(2rem,8vw,3.4rem)}.hotel-capabilities{grid-template-columns:repeat(3,1fr)}.hotel-login-form-side{padding:36px 28px 42px}.hotel-login-form-wrap{max-width:520px}
}
@media(max-width:575.98px){
    .hotel-login-shell{padding:0;display:block;background:#fff}.hotel-login-frame{border:0;border-radius:0;box-shadow:none;min-height:100vh}.hotel-login-showcase{padding:24px 20px 32px}.hotel-brand-logo{width:56px;height:56px;flex-basis:56px;border-radius:17px}.hotel-login-hero{padding:35px 0 12px}.hotel-login-hero h1{font-size:2.2rem}.hotel-login-hero p{margin-top:15px;font-size:.86rem}.hotel-capabilities{display:none}.hotel-login-form-side{padding:32px 20px 38px}.hotel-login-security{margin-bottom:20px}.hotel-login-footer{margin-top:28px;display:block;text-align:center}.hotel-login-contact{justify-content:center;margin-bottom:9px}
}
@media(prefers-reduced-motion:reduce){.hotel-login-submit,.hotel-login-input{transition:none}}

/* Stage 8: animated hotel-photo page background + account recovery */
body.hotel-login-page{
    position:relative;
    isolation:isolate;
    overflow-x:hidden;
    background:#0b1f33;
}
body.hotel-login-page::before{
    content:"";
    position:fixed;
    z-index:-2;
    inset:-7%;
    background-image:url('../../images/auth/login-background.jpg');
    background-size:cover;
    background-position:center center;
    transform:scale(1.03);
    animation:hotelLoginBackgroundMotion 24s ease-in-out infinite alternate;
    will-change:transform,background-position;
}
body.hotel-login-page::after{
    content:"";
    position:fixed;
    z-index:-1;
    inset:0;
    background:
        radial-gradient(circle at 18% 16%,rgba(201,151,62,.24),transparent 28%),
        linear-gradient(115deg,rgba(7,20,39,.82),rgba(7,35,48,.58) 52%,rgba(4,36,34,.76));
    backdrop-filter:saturate(.92);
}
@keyframes hotelLoginBackgroundMotion{
    0%{transform:scale(1.03) translate3d(0,0,0);background-position:48% 50%}
    50%{transform:scale(1.09) translate3d(-.7%,.4%,0);background-position:53% 47%}
    100%{transform:scale(1.14) translate3d(.8%,-.5%,0);background-position:46% 53%}
}
.hotel-login-shell{position:relative;z-index:1;background:transparent}
.hotel-login-frame{background:rgba(255,255,255,.98);box-shadow:0 36px 100px rgba(0,0,0,.34);border-color:rgba(255,255,255,.3)}
.hotel-login-alert.alert-success{background:#ecfdf3;color:#067647;border:1px solid #abefc6}
.hotel-forgot-link{color:#0f766e;text-decoration:none;font-size:.72rem;font-weight:800;white-space:nowrap}
.hotel-forgot-link:hover{color:#0b5f59;text-decoration:underline}

.hotel-auth-recovery-page .hotel-login-shell{padding:clamp(18px,4vw,48px)}
.hotel-recovery-card{
    width:min(520px,100%);
    padding:clamp(28px,5vw,48px);
    border:1px solid rgba(255,255,255,.42);
    border-radius:28px;
    background:rgba(255,253,249,.97);
    box-shadow:0 34px 100px rgba(0,0,0,.32);
    backdrop-filter:blur(12px);
}
.hotel-recovery-brand{display:flex;align-items:center;gap:14px;padding-bottom:22px;margin-bottom:28px;border-bottom:1px solid #eee6da}
.hotel-recovery-brand .hotel-brand-logo{width:58px;height:58px;flex-basis:58px;border-radius:17px;background:#10233f;border:1px solid rgba(16,35,63,.12)}
.hotel-recovery-brand small{display:block;color:#b07a25;font-size:.65rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;margin-bottom:4px}
.hotel-recovery-brand strong{display:block;color:#172033;font-size:.98rem;line-height:1.3}
.hotel-recovery-icon{width:58px;height:58px;display:grid;place-items:center;margin-bottom:19px;border-radius:18px;background:linear-gradient(135deg,#e9fbf7,#d8f5ef);color:#0f766e;font-size:1.45rem;box-shadow:inset 0 0 0 1px #c7eae3}
.hotel-recovery-icon.danger{background:#fff0f1;color:#b42318;box-shadow:inset 0 0 0 1px #fecdd3}
.hotel-recovery-card h1{margin:0;font-size:clamp(1.65rem,4vw,2.15rem);font-weight:850;letter-spacing:-.04em;color:#172033}
.hotel-recovery-card>p{margin:10px 0 25px;color:#667085;font-size:.88rem;line-height:1.7}
.hotel-auth-back{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:18px;color:#475467;text-decoration:none;font-size:.76rem;font-weight:800}
.hotel-auth-back:hover{color:#0f766e}
.hotel-recovery-note{display:flex;gap:9px;align-items:flex-start;margin-top:24px;padding:13px 14px;border-radius:14px;background:#f8f6f1;color:#667085;font-size:.69rem;line-height:1.55}
.hotel-recovery-note i{color:#b07a25;margin-top:1px}

@media(max-width:575.98px){
    .hotel-login-shell{background:transparent}
    .hotel-login-frame{min-height:100vh;background:rgba(255,255,255,.98)}
    .hotel-auth-recovery-page .hotel-login-shell{padding:18px}
    .hotel-recovery-card{border-radius:22px;padding:26px 20px}
}
@media(prefers-reduced-motion:reduce){
    body.hotel-login-page::before{animation:none;transform:none}
}

/* Stage 8.1: translucent hotel details/showcase panel */
.hotel-login-frame{
    background:transparent;
}
.hotel-login-showcase{
    background:
        linear-gradient(145deg,
            rgba(8,25,49,.76) 0%,
            rgba(16,53,80,.64) 52%,
            rgba(15,118,110,.66) 100%);
    -webkit-backdrop-filter:blur(2px) saturate(1.08);
    backdrop-filter:blur(2px) saturate(1.08);
}
.hotel-login-showcase::before{
    background:rgba(201,151,62,.16);
}
.hotel-login-showcase::after{
    background:rgba(94,234,212,.09);
}
.hotel-capability{
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
}
.hotel-login-hero p{
    color:rgba(255,255,255,.82);
    text-shadow:0 1px 2px rgba(0,0,0,.16);
}
.hotel-brand-copy strong,
.hotel-login-hero h1,
.hotel-capability strong{
    text-shadow:0 2px 9px rgba(0,0,0,.20);
}

@media(max-width:575.98px){
    .hotel-login-frame{background:transparent}
    .hotel-login-showcase{
        background:linear-gradient(150deg,rgba(8,25,49,.73),rgba(15,75,86,.64));
    }
    .hotel-login-form-side{
        background:rgba(255,253,249,.97);
    }
}