/* Reset + variables */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f6f7f9;--card:#ffffff;--muted:#9aa3ad;--accent:#111827;--accent-2:#ff7a18;--shadow: rgba(16,24,40,0.12);
}
html,body,#main{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(180deg,var(--bg),#ffffff);
  color: #0b1220; display:flex;align-items:center;justify-content:center;padding:48px;
}

/* Full-page blurred background using the hero image - subtle and color-matched */
body::before{
  content:'';
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image: url('/images/restomasterweb.png');
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  filter: blur(56px) saturate(110%);
  transform: scale(1.04);
  /* slightly stronger so image shows through more clearly */
  opacity:0.86;
}

/* Gentle light overlay so content stays readable but does not hide the image */
body::after{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.18));
}

/* Card */
.login-page{width:100%;max-width:960px}
.login-card{width:100%;display:flex;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px var(--shadow);min-height:460px;background:transparent}

/* Left: content */
.auth-left{flex:0 0 380px;background:var(--card);padding:44px 42px 38px;display:flex;flex-direction:column;justify-content:center}
.brand-row{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.brand-row img{width:44px;height:44px;border-radius:8px}
.logo{font-size:24px;color:var(--accent);font-weight:800}
.small-note{font-size:13px;color:var(--muted)}
.lead{color:var(--muted);font-size:14px;margin-bottom:20px}

/* Form fields */
.field{margin-bottom:16px}
.field input{width:100%;padding:14px 18px;border-radius:28px;border:1px solid #eef2f5;font-size:15px;background:#fff;color:#111827;box-shadow:0 6px 18px rgba(16,24,40,0.03);}
.field input::placeholder{color:#c1c8cf}
.password-row{display:flex;gap:10px}
.password-row input{flex:1}
.toggle-pass{background:#fff;border:1px solid #eef2f5;padding:10px 14px;border-radius:28px;cursor:pointer;color:#6b7280}

.form-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.remember{color:var(--muted);font-size:14px}
.form-bottom a{color:var(--accent-2);text-decoration:none;font-size:14px}

/* Action */
.primary{display:inline-block;padding:12px 28px;border-radius:28px;border:0;background:linear-gradient(90deg,#0b0b0b,#111827);color:white;font-weight:700;cursor:pointer;font-size:15px;box-shadow:0 8px 24px rgba(17,24,39,0.12)}
.primary:active{transform:translateY(1px)}

.form-msg{margin-top:14px;color:#ef4444;font-size:13px}

/* Right: hero image */
/* Right panel: use inline image only and center it. Remove background-image to avoid oversized cover */
.auth-right{flex:1 1 auto;position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;background:none;overflow:hidden}

/* Blurred, color-matched backdrop using the same image */
.auth-right::before{
  content:'';
  position:absolute;inset:0;
  background-image: url('/images/restomasterweb.png');
  background-size:cover;
  background-position:center right;
  filter: blur(28px) saturate(105%);
  transform: scale(1.06);
  z-index:0;
  opacity:0.95;
}
/* Make outer right corners rounded and remove strong overlay so image is visible */
.auth-right{border-top-right-radius:22px;border-bottom-right-radius:22px;border-top-left-radius:0;border-bottom-left-radius:0}
.auth-right::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.12));pointer-events:none;z-index:1}

/* Hero inline image: auto-resize, center and cap size so it never appears too big */
.auth-right .hero-img{
  position:relative;z-index:2;
  width:auto;
  max-width:460px;
  max-height:420px;
  height:auto;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 12px 40px rgba(2,6,23,0.08);
}

/* Slideshow inside right panel */
.slideshow{position:relative;inset:0;width:100%;height:100%;display:block;overflow:hidden;border-radius:14px;z-index:2}
.slide{position:absolute;inset:12px;border-radius:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:cover;opacity:0;transition:opacity .6s ease, transform .6s ease, filter .6s ease;filter:blur(10px) saturate(95%);transform:scale(1.02);z-index:1}
.slide.active{opacity:1;transform:scale(1);filter:blur(0px) saturate(110%);z-index:2}
/* .slide[alt] selector removed as it was an empty ruleset - keep alt for accessibility */

/* Make sure slideshow adapts on small screens */
@media (max-width:860px){
  .slideshow{height:160px}
  .slide{inset:0;width:100%;height:100%;border-radius:12px}
}

@media (min-width:1400px){
  .auth-right .hero-img{max-width:520px}
}

@media (max-width:860px){
  .login-card{flex-direction:column;border-radius:14px}
  .auth-left{flex:1 1 auto;padding:22px}
  .auth-right{order:2;height:160px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:12px;border-bottom-right-radius:12px;display:block}
  .auth-right .hero-img{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:none;height:160px;object-fit:cover;border-top-right-radius:12px;border-bottom-right-radius:0}
}

/* Footer small text */
.small-foot{margin-top:22px;color:var(--muted);font-size:13px}

/* Modal kept mostly same */
.modal{position:fixed;inset:0;align-items:center;justify-content:center;background:rgba(2,6,23,0.5);}
.modal[hidden]{display:none !important;} /* ensure hidden attribute hides modal */
.modal:not([hidden]){display:flex}
.modal-inner{background:var(--card);padding:20px;border-radius:10px;width:320px;box-shadow:0 10px 30px rgba(2,6,23,0.4)}
.modal input{width:100%;padding:10px;margin-top:10px;border:1px solid #e6e9ef;border-radius:8px}
.modal h2{margin-bottom:6px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.ghost{background:transparent;border:1px solid #e6e9ef;padding:8px 12px;border-radius:8px;cursor:pointer}

/* Responsive adjustments */
@media (max-width:860px){
  .login-card{flex-direction:column;border-radius:14px}
  .auth-right{order:2;height:180px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:12px;border-bottom-right-radius:12px}
  .auth-left{padding:22px}
  .brand-row img{width:36px;height:36px}
  .logo{font-size:20px}
  .primary{width:100%;text-align:center}
}
.logo{font-size:1.4rem;color:var(--bg2);margin-bottom:6px}
.lead{color:var(--muted);font-size:0.95rem;margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:0.85rem;color:var(--muted);margin-bottom:6px}
.field input{width:100%;padding:11px 12px;border-radius:8px;border:1px solid #e6e9ef;font-size:0.98rem;outline:none;transition:box-shadow .12s ease,border-color .12s ease}
.field input:focus{box-shadow:0 6px 18px rgba(11,19,34,0.08);border-color:var(--accent)}
.password-row{display:flex;gap:8px}
.toggle-pass{background:#f3f4f6;border:1px solid #e6e9ef;padding:8px 10px;border-radius:8px;cursor:pointer}
.toggle-pass:active{transform:translateY(1px)}
.error{display:block;color:var(--danger);font-size:0.82rem;margin-top:6px;min-height:18px}
.actions{display:flex;justify-content:space-between;align-items:center;margin:8px 0 18px}
.actions .remember{font-size:0.9rem;color:var(--muted)}
.actions a{font-size:0.9rem;color:var(--accent);text-decoration:none}
.primary{width:100%;padding:11px;border-radius:10px;border:0;background:linear-gradient(90deg,var(--accent),#ff4e50);color:white;font-weight:600;cursor:pointer;font-size:1rem}
.primary:active{transform:translateY(1px)}
.form-bottom{display:flex;justify-content:space-between;margin-top:14px}
.form-bottom a{color:var(--muted);text-decoration:none;font-size:0.9rem}
.login-link{color:var(--bg2);font-weight:600}
#form-msg{margin-top:12px;font-size:0.95rem;color:green;min-height:22px}
.small{font-size:0.9rem;color:var(--muted)}

.modal{position:fixed;inset:0;align-items:center;justify-content:center;background:rgba(2,6,23,0.5);}
.modal[hidden]{display:none !important;} /* ensure hidden attribute hides modal */
.modal:not([hidden]){display:flex}
.modal-inner{background:var(--card);padding:20px;border-radius:10px;width:320px;box-shadow:0 10px 30px rgba(2,6,23,0.4)}
.modal input{width:100%;padding:10px;margin-top:10px;border:1px solid #e6e9ef;border-radius:8px}
.modal h2{margin-bottom:6px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.ghost{background:transparent;border:1px solid #e6e9ef;padding:8px 12px;border-radius:8px;cursor:pointer}

/* Responsive tweaks */
@media (max-width:420px){
  .login-card{padding:20px}
}