/* =====================================================================
   Diennakts Zobārstniecība — WAF OTP login theme
   Asset for Sophos WAF authentication template "JKZ-Template".
   Palette & feel matched to https://diennaktszobarstnieciba.lv
   No external font/CDN calls (GDPR-clean) — system font stack.
   ===================================================================== */

:root{
  --brand:#8da78d;       /* MediCenter sage — accent, focus, logo rings */
  --brand-soft:#b0c2ac;  /* site button green */
  --btn:#6f8c6a;         /* deeper sage so white label stays legible (AA) */
  --btn-hover:#5e7a58;
  --ink:#2f3a2e;         /* headings / input text */
  --text:#5b6b5b;        /* labels / body */
  --muted:#8a978a;       /* footer note */
  --line:#d9e0d8;        /* borders, separators */
  --field:#fbfcfb;       /* input fill */
  --card:#ffffff;
}

*{box-sizing:border-box;}

/* Full-page sage backdrop via a FIXED layer pinned to all four edges — it always
   covers the whole viewport regardless of html/body height, content or scroll.
   The card is fixed-centered (below), so the page can never grow or scroll. */
html,body{margin:0;background:#d7e0d4;}
body::before{
  content:"";
  position:fixed;
  top:0;right:0;bottom:0;left:0;       /* cover entire viewport, always */
  background:#d7e0d4;
  z-index:-1;
}
body{
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
              "Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---- card ----------------------------------------------------------- */
#container{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);     /* dead-centre, no page growth */
  z-index:1;
  width:392px;max-width:calc(100% - 28px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(36,52,36,.16),0 3px 10px rgba(36,52,36,.07);
  overflow:hidden;
}

/* ---- logo + tagline ------------------------------------------------- */
.info{padding:34px 32px 6px;text-align:center;font-size:14px;}
.info img{
  display:inline-block;width:auto;height:auto;
  max-width:248px;max-height:74px;margin:0 auto;
}
.info .tagline{
  margin:14px 0 0;color:var(--ink);
  font-size:13px;font-weight:600;letter-spacing:.2px;line-height:1.4;
}

/* ---- form ----------------------------------------------------------- */
form{margin:0;padding:18px 32px 6px;}
form p{margin:0 0 16px;}

label{
  display:block;margin:0 0 7px;
  color:var(--text);
  font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.7px;
}

input{font-family:inherit;outline:none;}

input[type=text],input[type=password]{
  display:block;width:100%;height:46px;margin:0;padding:0 14px;
  color:var(--ink);font-size:14.5px;
  background:var(--field);
  border:1px solid var(--line);border-radius:9px;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input[type=text]::placeholder,input[type=password]::placeholder{color:#9fad9f;}
input[type=text]:focus,input[type=password]:focus{
  border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 4px rgba(141,167,141,.20);
}

/* ---- submit --------------------------------------------------------- */
input[type=submit]{
  display:block;float:none;height:44px;
  width:-webkit-fit-content;width:fit-content;min-width:190px;  /* shrink to label */
  margin:8px auto 2px;padding:0 44px;                            /* centered */
  border:0;border-radius:9px;cursor:pointer;
  background:var(--btn);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.4px;
  -webkit-appearance:none;appearance:none;
  box-shadow:0 6px 16px rgba(111,140,106,.28);
  transition:background .15s,transform .04s,box-shadow .15s;
}
input[type=submit]:hover{background:var(--btn-hover);box-shadow:0 8px 20px rgba(111,140,106,.34);}
input[type=submit]:active{transform:translateY(1px);}
input[type=submit]:focus-visible{outline:3px solid rgba(141,167,141,.55);outline-offset:2px;}

/* ---- footer note ---------------------------------------------------- */
.note{
  float:none;margin:0;padding:18px 32px 26px;
  border-top:1px solid #eef1ee;
  color:var(--muted);font-size:11.5px;line-height:1.55;text-align:center;
}
.note b{color:var(--text);font-weight:600;}

/* ---- phones --------------------------------------------------------- */
@media (max-width:430px){
  .info{padding:28px 22px 4px;}
  form{padding:16px 22px 6px;}
  .note{padding:16px 22px 24px;}
}