/* ─────────────────────────────────────────────────────────────
   MRKC Patient Portal — Auth pages stylesheet
   Shared by patient_login.php, patient_verify_otp.php, and any
   other patient-portal auth screens that reuse the same
   .portal-auth-* class names.

   Colors and fonts are pulled directly from mrkc.in's Tailwind
   config so this page matches the main site exactly:
     primary   = #461599 (violet)
     secondary = #006a60 (teal)
     headings  = 'Noto Serif'
     body      = 'Plus Jakarta Sans'
   ───────────────────────────────────────────────────────────── */

:root {
  --primary: #461599;
  --primary-container: #5e35b1;
  --on-primary: #ffffff;
  --secondary: #006a60;
  --secondary-container: #85f6e5;
  --on-secondary: #ffffff;
  --surface: #f8f9fb;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f2f4f6;
  --surface-container-high: #e6e8ea;
  --on-surface: #191c1e;
  --on-surface-variant: #494453;
  --outline-variant: #cbc3d5;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 1.15em;
  line-height: 1;
  vertical-align: middle;
}

/* ── Page shell ─────────────────────────────────────────────── */

.portal-auth-shell {
  position: relative;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px;
  padding: 32px 20px;
  overflow: hidden;
  width: 100%;
  background:
    radial-gradient(circle at 15% 15%, rgba(70,21,153,0.05), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(0,106,96,0.06), transparent 45%),
    var(--surface);
}

.portal-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
.portal-blob-a {
  width: 340px; height: 340px;
  top: -90px; left: -90px;
  background: var(--primary-container);
}
.portal-blob-b {
  width: 340px; height: 340px;
  bottom: -90px; right: -90px;
  background: var(--secondary-container);
}

/* ── Card ───────────────────────────────────────────────────── */

.portal-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: var(--surface-container-lowest);
  border: 1px solid rgba(25,28,30,0.06);
  border-radius: 24px;
  padding: 40px 32px 32px;
  box-shadow: 0 24px 48px -20px rgba(70,21,153,0.18), 0 2px 6px rgba(25,28,30,0.04);
}

.portal-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  margin-bottom: 22px;
  transition: color 0.15s ease;
}
.portal-back-link:hover { color: var(--primary); }
.portal-back-link .material-symbols-outlined { font-size: 1.05rem; }

/* ── Brand ──────────────────────────────────────────────────── */

.portal-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 26px;
}

.portal-auth-mark {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-bottom: 14px;
  box-shadow: 0 8px 20px -8px rgba(70,21,153,0.45);
}
.portal-auth-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.portal-auth-brand h1 {
  font-family: 'Noto Serif', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 3px;
  letter-spacing: -0.2px;
}
.portal-auth-brand p {
  font-size: 0.82rem;
  color: var(--on-surface-variant);
  margin: 0;
}

/* ── Title / subtitle ───────────────────────────────────────── */

.portal-auth-title {
  font-family: 'Noto Serif', serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--on-surface);
  text-align: center;
  margin-bottom: 8px;
}

.portal-auth-sub {
  font-size: 0.92rem;
  color: var(--on-surface-variant);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 26px;
}

/* ── Alerts ─────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.45;
  margin-bottom: 20px;
}
.alert-err {
  background: var(--error-container);
  color: var(--on-error-container);
}
.alert-err .material-symbols-outlined {
  color: var(--error);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Form fields ────────────────────────────────────────────── */

.field { margin-bottom: 22px; }

.field label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 8px;
}

.input-shell {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--outline-variant);
  border-radius: 12px;
  background: var(--surface-container-low);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-shell:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(70,21,153,0.12);
  background: var(--surface-container-lowest);
}

.input-shell .prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--on-surface-variant);
  background: var(--surface-container-high);
  border-right: 1.5px solid var(--outline-variant);
}

.input-shell input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 13px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--on-surface);
  letter-spacing: 0.3px;
}
.input-shell input::placeholder { color: #a19cae; letter-spacing: normal; }

/* ── Buttons ────────────────────────────────────────────────── */

.btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  color: var(--on-primary);
  box-shadow: 0 10px 24px -10px rgba(70,21,153,0.55);
}
.btn-primary:hover { opacity: 0.94; }

/* ── Footnotes ──────────────────────────────────────────────── */

.portal-auth-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--on-surface-variant);
  text-align: center;
  margin-top: 20px;
}
.portal-auth-note .material-symbols-outlined {
  font-size: 1rem;
  color: var(--secondary);
}

.portal-auth-footer {
  text-align: center;
  font-size: 0.86rem;
  color: var(--on-surface-variant);
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--surface-container-high);
}
.portal-auth-footer a {
  color: var(--primary);
  font-weight: 700;
}
.portal-auth-footer a:hover { text-decoration: underline; }

.portal-help-note {
  position: relative;
  z-index: 1;
  font-size: 0.82rem;
  color: var(--on-surface-variant);
  text-align: center;
}
.portal-help-note--inline {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--outline-variant);
}
.portal-help-note a {
  color: var(--secondary);
  font-weight: 700;
}
.portal-help-note a:hover { text-decoration: underline; }

/* ── Small screens ──────────────────────────────────────────── */

@media (max-width: 420px) {
  .portal-auth-card { padding: 32px 22px 26px; border-radius: 20px; }
  .portal-auth-title { font-size: 1.35rem; }
}