/*** Illuminated Hosting - customer login (modernized) ***/

/* ---- Brand colors: set these to match Illuminated Hosting ---- */
:root{
  --brand-bg:  #0f1b2d;   /* band behind the logo */
  --accent:    #2f6fed;   /* buttons, links, focus ring */
  --accent-dark:#2357c4;  /* button hover */
  --err:       #dc2626;
  --text:      #1f2933;
  --muted:     #6b7280;
  --border:    #d9dee5;
  --page-1:    #eef2f7;   /* page gradient top */
  --page-2:    #dde7f3;   /* page gradient bottom */
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,var(--page-1) 0%,var(--page-2) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  -webkit-font-smoothing:antialiased;
}

img{ border:0; }

.login-wrap{ width:100%; max-width:430px; }

.login-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 12px 40px rgba(16,27,45,.18);
  overflow:hidden;
}

.login-logo{
  background:var(--brand-bg);
  padding:22px 20px;
  text-align:center;
}
.login-logo img{
  max-width:100%;
  max-height:60px;
  vertical-align:middle;
}

.login-card-body{ padding:30px 32px 24px; }

.login-title{
  margin:0 0 20px;
  font-size:18px;
  font-weight:600;
  text-align:center;
  color:var(--text);
}

.form-group{ margin-bottom:16px; }
.form-group label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:6px;
}

/* inputs + language select (the PHP emits class "fieldinput" and #language) */
.fieldinput,
#language{
  width:100%;
  padding:11px 12px;
  font-size:15px;
  line-height:1.3;
  height:auto;
  color:var(--text);
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.fieldinput:focus,
#language:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(47,111,237,.18);
}

.fieldsubmit{ margin-top:4px; }
#submitbutton{
  width:100%;
  padding:12px;
  margin-top:6px;
  font-size:15px;
  font-weight:600;
  color:#fff;
  background:var(--accent);
  border:0;
  border-radius:9px;
  cursor:pointer;
  transition:background .15s ease;
}
#submitbutton:hover{ background:var(--accent-dark); }

/* error / status message */
#badlogin{
  margin:0 0 16px;
  padding:10px 12px;
  border-radius:8px;
  background:#fdecea;
  color:var(--err);
  font-size:13px;
  font-weight:500;
  text-align:center;
}
#badlogin:empty{ display:none; }

/* forgot-password / info line */
#reminder{ margin:14px 0 0; text-align:center; }
#reminder:empty{ display:none; }
.minilink,
#reminder a{
  color:var(--accent);
  font-size:13px;
  text-decoration:none;
}
.minilink:hover,
#reminder a:hover{ text-decoration:underline; }

/* footer */
.login-footer{
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid #eef1f5;
  text-align:center;
}
.copyright{ font-size:12px; color:var(--muted); }
.copyright a{ color:var(--muted); text-decoration:none; }
.copyright a:hover{ text-decoration:underline; }

@media (max-width:480px){
  body{ padding:14px; }
  .login-card-body{ padding:24px 20px 20px; }
}