/* ─────────────────────────────────────────────────────────────────────────
   MedVol DRM — Login Screen
   Reference-matched: Inter font, navy+blue palette, airy sky background,
   solid blue CTA, clean white login card.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --ink:#0f1b4c;             /* deep navy — headline + body */
  --ink-soft:#334469;        /* secondary text */
  --muted:#8891a9;           /* placeholder / small labels */
  --accent:#2563eb;          /* MedVol brand blue (CTAs, highlights) */
  --accent-strong:#1d4ed8;   /* hover state */
  --accent-ghost:#eef4ff;    /* subtle backgrounds */
  --surface:#ffffff;
  --input-bg:#f3f5fa;
  --input-border:#e4e8f0;
  --divider:#e9ecf3;
  --ok:#059669;
  --err:#dc2626;
  --warn:#f59e0b;
  --purple:#7c3aed;
  --red:#ef4444;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:#ffffff;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ─── Background — airy sky-blue → warm peach glow ─────────────────────── */
.background{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    linear-gradient(135deg,#e8f1ff 0%,#f0f6ff 35%,#fff4ec 75%,#ffe8dc 100%);
}
.scenic-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;}
.glow-sky   {width:620px;height:620px;top:-160px;left:-120px;background:radial-gradient(circle,#8bb6ff 0%,transparent 70%);}
.glow-warm  {width:520px;height:520px;top:40%;right:-120px;background:radial-gradient(circle,#ffb686 0%,transparent 70%);opacity:.45;}
.glow-foliage{width:460px;height:460px;bottom:-120px;left:30%;background:radial-gradient(circle,#a7e8c4 0%,transparent 70%);opacity:.4;}

/* ─── Page Layout ─────────────────────────────────────────────────────── */
.login-page{
  position:relative;z-index:1;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(400px,1fr);
  gap:40px;
  padding:40px 48px;
  align-items:stretch;
  max-width:1600px;
  margin:0 auto;
}

/* ─── LEFT · Hero ──────────────────────────────────────────────────────── */
.hero-section{
  position:relative;
  display:flex;flex-direction:column;
  padding:12px 32px 12px 12px;
  overflow:visible;
}

/* Brand (top-left) */
.brand{display:flex;align-items:center;gap:12px;margin-bottom:72px;}
.brand-mark{
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.brand-mark svg{width:100%;height:100%;display:block;}
.brand span{
  font-family:'Inter',sans-serif;
  font-weight:700;font-size:22px;letter-spacing:-.3px;color:var(--ink);
}

/* Hero content */
.hero-content{
  display:flex;flex-direction:column;gap:28px;
  position:relative;max-width:620px;
}

.hero-content h1{
  font-family:'Inter',sans-serif;
  font-size:60px;
  font-weight:800;
  line-height:1.08;
  color:var(--ink);
  letter-spacing:-1.6px;
}
.hero-content h1 span{
  color:var(--accent);
  display:inline;
}

.hero-description{
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:540px;
}

/* Decorative glass icons that float between hero + card (purely visual) */
.deco-icons{
  position:absolute;
  top:-20px;
  right:-10px;
  pointer-events:none;
  display:none; /* Shown only on wide screens */
}
@media (min-width:1200px){.deco-icons{display:block;}}
.deco{
  position:absolute;
  width:70px;height:70px;
  display:flex;align-items:center;justify-content:center;
  border-radius:18px;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.9);
  box-shadow:0 10px 30px rgba(37,99,235,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
  font-size:30px;
  animation:floatIcon 5.5s ease-in-out infinite;
}
.deco-chart {top:40px;  right:380px;}
.deco-trophy{top:0;     right:220px; animation-delay:-1.5s;}
.deco-target{top:120px; right:90px;  animation-delay:-3s;}
@keyframes floatIcon{
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%   {transform:translateY(-14px) rotate(2deg);}
}

/* Feature cards — 4 compact tiles in a row */
.features{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  margin-top:12px;
  max-width:620px;
}
.feature-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;
  padding:18px 10px;
  border-radius:16px;
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.95);
  box-shadow:0 6px 20px rgba(37,99,235,0.08);
  transition:transform .22s ease, box-shadow .22s ease;
}
.feature-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(37,99,235,0.14);
}
.feature-icon{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}
.feature-icon.blue  {background:linear-gradient(135deg,#dbeafe,#bfdbfe);}
.feature-icon.yellow{background:linear-gradient(135deg,#fef3c7,#fde68a);}
.feature-icon.purple{background:linear-gradient(135deg,#ede9fe,#ddd6fe);}
.feature-icon.red   {background:linear-gradient(135deg,#fee2e2,#fecaca);}
.feature-text{display:flex;flex-direction:column;line-height:1.2;}
.feature-text strong{font-size:13px;font-weight:700;color:var(--ink);}
.feature-text small{font-size:12px;color:var(--ink-soft);margin-top:1px;}

/* ─── RIGHT · Login Card ──────────────────────────────────────────────── */
.login-section{
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.login-card{
  width:100%;
  max-width:460px;
  padding:48px 44px;
  background:var(--surface);
  border-radius:26px;
  border:1px solid rgba(255,255,255,0.9);
  box-shadow:
    0 24px 70px rgba(15,27,76,0.12),
    0 4px 10px rgba(15,27,76,0.04);
}

.welcome-area{margin-bottom:32px;}
.welcome-area h2{
  font-family:'Inter',sans-serif;
  font-size:30px;font-weight:800;color:var(--ink);
  letter-spacing:-.5px;
  display:flex;align-items:center;gap:8px;
  line-height:1.1;
}
.wave{display:inline-block;animation:wave 2.6s ease-in-out infinite;transform-origin:70% 70%;}
@keyframes wave{
  0%,60%,100%{transform:rotate(0deg);}
  10%,30%{transform:rotate(14deg);}
  20%,40%{transform:rotate(-8deg);}
  50%{transform:rotate(10deg);}
}
.welcome-area p{
  font-size:14px;color:var(--ink-soft);line-height:1.55;margin-top:8px;
}

/* Form */
#loginForm{display:flex;flex-direction:column;gap:16px;}

.form-group{display:flex;flex-direction:column;gap:6px;}

.input-container{
  position:relative;display:flex;align-items:center;
  background:var(--input-bg);
  border:1.5px solid transparent;
  border-radius:14px;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.input-container:focus-within{
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,0.1);
}
.input-icon{
  width:48px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;opacity:.5;
}
.input-container input{
  flex:1;background:transparent;border:none;outline:none;
  font-size:15px;color:var(--ink);
  padding:16px 10px 16px 0;
  font-family:inherit;font-weight:500;
}
.input-container input::placeholder{color:var(--muted);font-weight:400;}
.password-toggle{
  background:none;border:none;cursor:pointer;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;opacity:.45;color:inherit;
  transition:opacity .15s;
}
.password-toggle:hover{opacity:1;}

/* Options */
.form-options{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  margin-top:2px;
}
.remember{
  display:flex;align-items:center;gap:9px;
  font-size:14px;color:var(--ink-soft);cursor:pointer;user-select:none;
  font-weight:500;
}
.remember input{display:none;}
.checkmark{
  width:20px;height:20px;border-radius:6px;
  border:1.5px solid #c7cedd;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s, border-color .15s, transform .1s;
}
.remember input:checked + .checkmark{
  background:var(--accent);
  border-color:var(--accent);
  transform:scale(1.03);
}
.remember input:checked + .checkmark::after{
  content:"✓";color:#fff;font-size:13px;font-weight:800;line-height:1;
}
.forgot-password{
  background:none;border:none;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--accent);
  font-family:inherit;
  transition:color .15s;
}
.forgot-password:hover{color:var(--accent-strong);text-decoration:underline;}

/* Primary CTA — SOLID BLUE (matches reference) */
.login-button{
  margin-top:10px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 20px;border:none;border-radius:14px;cursor:pointer;
  background:var(--accent);
  color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.1px;
  font-family:inherit;
  transition:background-color .18s ease, transform .12s ease, box-shadow .22s ease;
  box-shadow:0 10px 24px rgba(37,99,235,0.3);
}
.login-button:hover:not(:disabled){
  background:var(--accent-strong);
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(37,99,235,0.38);
}
.login-button:active:not(:disabled){transform:translateY(0);}
.login-button:disabled{opacity:.65;cursor:not-allowed;}
.login-button .arrow{
  display:inline-block;transition:transform .22s ease;
  font-size:18px;line-height:1;
}
.login-button:hover:not(:disabled) .arrow{transform:translateX(4px);}

/* Error / success message */
.login-message{
  display:none;
  padding:12px 14px;border-radius:10px;
  font-size:13px;font-weight:500;line-height:1.45;
}
.login-message.show{
  display:block;animation:shake .4s ease;
  background:#fee2e2;border:1px solid #fecaca;color:#991b1b;
}
.login-message.success{background:#d1fae5;border-color:#6ee7b7;color:#065f46;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%,60%{transform:translateX(-5px);}
  40%,80%{transform:translateX(5px);}
}

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .login-page{
    grid-template-columns:1fr;
    gap:20px;
    padding:28px 24px;
  }
  .hero-section{padding:0;}
  .brand{margin-bottom:28px;}
  .hero-content h1{font-size:42px;letter-spacing:-1px;}
  .hero-description{font-size:15px;}
  .features{grid-template-columns:repeat(4,1fr);gap:10px;}
  .deco-icons{display:none;}
}
@media (max-width: 720px){
  .login-page{padding:20px 16px;}
  .hero-content h1{font-size:32px;}
  .hero-description{font-size:14px;}
  .features{grid-template-columns:repeat(2,1fr);gap:10px;}
  .login-card{padding:32px 24px;border-radius:20px;}
  .welcome-area h2{font-size:24px;}
}