* { box-sizing: border-box; }
body { margin: 0; padding: 30px 22px; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: radial-gradient(ellipse at 85% 5%, #e6f1ea, transparent 55%), #f6f9f6; color: #38604d; font-family: 'Segoe UI', sans-serif; }
a { color: #007d81; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.admin-login-shell { width: 100%; max-width: 960px; display: grid; grid-template-columns: 1fr 1.05fr; border: 1px solid #e0eae2; border-radius: 24px; overflow: hidden; box-shadow: 0 18px 60px #194d3b0b; background: #fff; }
.admin-login-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; min-height: 540px; background: linear-gradient(180deg, #0e403d22 0%, #123f3bd9 65%, #123f3bf5 100%), url('../storage/assets/images/hotelimage/loginimg.png') center/cover; color: #fff; }
.story-brand { background: #ffffffef; border-radius: 12px; padding: 9px 14px; width: fit-content; }
.story-brand img { width: 115px; height: 46px; object-fit: contain; display: block; }
.story-eyebrow { font-size: 10px; letter-spacing: 2px; color: #c2dbcc; }
.story-content h2 { font-size: 33px; font-weight: 500; line-height: 1.3; letter-spacing: -.7px; margin: 16px 0; }
.story-content p { font-size: 12px; color: #d0e0d7; line-height: 1.9; max-width: 310px; margin-bottom: 25px; }
.story-caption { display: flex; align-items: center; gap: 9px; font-size: 10px; color: #d9e7dc; }
.story-caption span { width: 25px; height: 1px; background: #bbcf9a; }
.admin-login-form { padding: 27px 38px 22px; }
.back-link { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #8a9e90; margin-bottom: 22px; }
.form-brand { display: block; width: 120px; height: 48px; object-fit: contain; margin-bottom: 18px; }
.portal-badge { display: inline-flex; align-items: center; gap: 7px; color: #668a73; background: #eef6ef; border: 1px solid #e0ede2; padding: 5px 9px; border-radius: 20px; font-size: 10px; }
h1 { color: #2d604c; margin: 13px 0 6px; font-size: 29px; font-weight: 600; letter-spacing: -.7px; }
.login-intro { color: #8a9e90; font-size: 12px; margin: 0 0 23px; line-height: 1.7; }
form > label { display: block; font-size: 12px; margin-bottom: 7px; color: #6d8977; }
.login-input { position: relative; margin-bottom: 17px; }
.login-input input { width: 100%; min-height: 45px; border: 1px solid #dce8df; border-radius: 10px; padding: 11px 42px 11px 37px; background: #fbfdfb; font: inherit; font-size: 13px; color: #426b52; }
.login-input input::placeholder { color: #a4b3a7; font-size: 12px; }
.login-input input:focus { outline: none; border-color: #007d81; box-shadow: 0 0 0 3px #007d810c; }
.field-icon { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); font-size: 12px; color: #8fa997; pointer-events: none; }
#toggle-password { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 33px; height: 33px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 7px; color: #7c9986; cursor: pointer; }
#toggle-password:hover { background: #edf5ef; }
.login-options { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; margin: 0 0 23px; }
.login-options label { display: flex; align-items: center; gap: 6px; color: #819788; cursor: pointer; }
.login-options input { accent-color: #007d81; margin: 0; }
.login-submit { width: 175px; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; border: 0; border-radius: 28px; background: linear-gradient(120deg, #008681, #006c73); color: #fff; font-size: 13px; cursor: pointer; box-shadow: 0 5px 13px #007d8113; }
.login-submit:hover { background: #006b70; }
.other-login { text-align: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid #edf2ed; color: #91a294; font-size: 11px; }
.other-login a { margin-left: 4px; font-weight: 500; }
.login-footer { font-size: 9px; color: #a0afa2; text-align: center; margin: 19px 0 0; }
.login-alert { font-size: 12px; padding: 12px; border-radius: 9px; line-height: 1.7; margin-bottom: 17px; }
.login-alert p { margin: 0; }
.login-alert.error { border: 1px solid #ecd9d2; background: #fff6f2; color: #ac7565; }
.login-alert.success { border: 1px solid #d7e9dc; background: #edf7ef; color: #548165; }
:focus-visible { outline: 2px solid #c2a15c; outline-offset: 3px; }
@media(max-width: 760px) { body { padding: 20px 15px; } .admin-login-shell { grid-template-columns: 1fr; max-width: 460px; border-radius: 20px; } .admin-login-story { display: none; } .admin-login-form { padding: 24px; } .login-input input { font-size: 16px; } h1 { font-size: 27px; } }
@media(max-height: 650px) and (min-width: 761px) { body { padding: 15px; } .admin-login-story { min-height: 490px; } .admin-login-form { padding-top: 20px; } .back-link { margin-bottom: 12px; } .form-brand { margin-bottom: 10px; } }
/* Compact login spacing to fit standard laptop screens. */
body { padding: 14px 18px; }
.admin-login-story { min-height: 470px; padding: 26px; }
.admin-login-form { padding: 20px 34px 18px; }
.back-link { margin-bottom: 13px; }
.form-brand { height: 40px; margin-bottom: 12px; }
h1 { margin-top: 10px; font-size: 27px; }
.login-intro { margin-bottom: 17px; }
.login-input { margin-bottom: 13px; }
.login-input input { min-height: 42px; padding-top: 10px; padding-bottom: 10px; }
.login-options { margin-bottom: 17px; }
.other-login { margin-top: 17px; padding-top: 13px; }
.login-footer { margin-top: 13px; }
@media(max-width: 760px) { body { padding: 12px; } .admin-login-form { padding: 20px 24px; } }
@media(max-height: 650px) and (min-width: 761px) { .admin-login-story { min-height: 440px; } .admin-login-form { padding-top: 16px; padding-bottom: 16px; } .back-link { margin-bottom: 10px; } .form-brand { height: 34px; margin-bottom: 9px; } .login-intro { margin-bottom: 14px; } .login-input { margin-bottom: 11px; } }
/* Add a little height when the viewport has room. */
@media(min-width: 761px) and (min-height: 651px) {
    .admin-login-story { min-height: min(510px, calc(100dvh - 32px)); }
    .admin-login-form { padding-top: 26px; padding-bottom: 24px; }
    .back-link { margin-bottom: 17px; }
    .form-brand { margin-bottom: 15px; }
    .login-intro { margin-bottom: 20px; }
    .login-input { margin-bottom: 16px; }
    .login-options { margin-bottom: 20px; }
}
.story-brand { background: transparent; box-shadow: none; border: 0; }
.story-brand img { width: 170px; height: auto; max-height: 75px; object-fit: contain; }
@media(min-width: 761px) and (min-height: 651px) { .admin-login-story { min-height: min(530px, calc(100dvh - 32px)); } }
@media(min-width: 761px) and (min-height: 651px) { .admin-login-story { min-height: min(550px, calc(100dvh - 32px)); } }