/* HansMed — Healing Courtyard auth modal theme.
   Styles the existing auth modal (ui.js .modal + tpl-auth-modal .auth-modal)
   in the cream/clay/ink courtyard palette, so the reused login/register/Google/
   forgot/verify/reset flows match the v3 landing. Loaded only on index.html. */

.modal-backdrop{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(38,24,16,0.55);
  backdrop-filter:blur(3px);
  transition:opacity .25s ease;
}
.modal{
  position:relative;
  width:100%; max-width:440px;
  max-height:90vh; overflow-y:auto;
  background:var(--cream-50);
  color:var(--ink-800);
  border:1px solid rgba(38,24,16,0.10);
  border-radius:18px;
  box-shadow:var(--shadow-deep);
  padding:34px 32px 30px;
  font-family:var(--font-ui);
  animation:hm-modal-pop .3s cubic-bezier(.2,.8,.2,1.05);
}
.modal--lg{ max-width:480px; }
@keyframes hm-modal-pop{ from{opacity:0; transform:translateY(12px) scale(.985);} to{opacity:1; transform:none;} }

.modal-close{
  position:absolute; top:14px; right:16px;
  width:34px; height:34px; border:none; border-radius:999px;
  background:transparent; color:var(--ink-500);
  font-size:22px; line-height:1; cursor:pointer;
  transition:background .2s, color .2s;
}
.modal-close:hover{ background:var(--cream-200); color:var(--ink-900); }

.modal-header{ margin-bottom:18px; }
.modal-title{
  font-family:var(--font-display);
  font-style:italic; font-weight:500;
  font-size:30px; line-height:1.1; color:var(--ink-900);
  letter-spacing:-0.01em;
}
.modal-subtitle{ margin-top:4px; font-size:13px; color:var(--clay-500); }

/* ── Tabs ── */
.tabs{ display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid rgba(38,24,16,0.10); }
.tab{
  appearance:none; border:none; background:transparent; cursor:pointer;
  padding:10px 4px; margin-right:14px;
  font-family:var(--font-ui); font-size:14px; font-weight:600;
  color:var(--ink-300);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .2s, border-color .2s;
}
.tab:hover{ color:var(--clay-600); }
.tab.is-active{ color:var(--ink-900); border-bottom-color:var(--ink-900); }

/* ── Panels ── */
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation:hm-fade .25s ease; }
@keyframes hm-fade{ from{opacity:0;} to{opacity:1;} }

/* ── Fields ── */
.field{ margin-bottom:15px; }
.field-label{
  display:block; margin-bottom:6px;
  font-size:11px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--clay-600);
}
.field-input{
  width:100%; box-sizing:border-box;
  padding:11px 13px;
  font-family:var(--font-ui); font-size:15px; color:var(--ink-900);
  background:var(--cream-50);
  border:1px solid rgba(38,24,16,0.18);
  border-radius:10px;
  transition:border-color .2s, box-shadow .2s;
}
.field-input::placeholder{ color:var(--ink-300); }
.field-input:focus{
  outline:none;
  border-color:var(--ink-900);
  box-shadow:0 0 0 3px rgba(38,24,16,0.08);
}
.field-hint{ margin-top:5px; font-size:12px; color:var(--ink-300); }
.field-error{ margin-top:5px; font-size:12px; color:#9a3412; }
.field-input.has-error,.field-input[aria-invalid="true"]{ border-color:#9a3412; }

/* ── Buttons ── */
.btn{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px;
  font-family:var(--font-ui); font-size:14px; font-weight:600;
  border-radius:999px; border:1px solid transparent;
  transition:transform .15s ease, background .2s, color .2s, border-color .2s;
}
.btn--block{ width:100%; }
.btn--primary{ background:var(--ink-900); color:var(--cream-50); }
.btn--primary:hover{ transform:translateY(-1px); background:var(--ink-800); }
.btn:disabled{ opacity:.55; cursor:default; transform:none; }

/* Google OAuth button (data-action="google-oauth") */
[data-action="google-oauth"]{
  width:100%; margin:4px 0 6px;
  padding:11px 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--cream-50); color:var(--ink-800);
  border:1px solid rgba(38,24,16,0.20); border-radius:999px;
  font-family:var(--font-ui); font-size:14px; font-weight:600; cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s;
}
[data-action="google-oauth"]:hover{ background:var(--cream-100); border-color:rgba(38,24,16,0.32); transform:translateY(-1px); }

/* "or" divider between Google and the form, if present */
.auth-divider, .or-divider{
  display:flex; align-items:center; gap:12px;
  margin:14px 0; color:var(--ink-300); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after,.or-divider::before,.or-divider::after{
  content:""; flex:1; height:1px; background:rgba(38,24,16,0.12);
}

/* ── Alerts ── */
.alert{ padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:14px; }
.alert--danger{ background:#fbeae5; color:#7c2d12; border:1px solid #f0c4b4; }
.alert--success{ background:#eef3e7; color:#3f5230; border:1px solid #d2dec0; }

/* ── Consent rows (register/professional) ── */
.consent-row{ display:flex; align-items:flex-start; gap:9px; margin:6px 0 14px; }
.consent-row input[type="checkbox"]{ margin-top:3px; accent-color:var(--ink-900); }
.consent-text{ font-size:12.5px; line-height:1.5; color:var(--ink-500); }
.consent-text a{ color:var(--clay-600); }

/* helper links inside panels (forgot / back-to-login) */
.auth-modal a{ color:var(--clay-600); text-decoration:underline; cursor:pointer; }
.auth-modal a:hover{ color:var(--ink-900); }

/* small print under buttons */
.auth-modal .muted, .auth-modal .form-foot{ font-size:13px; color:var(--ink-500); margin-top:12px; text-align:center; }

/* Chinese mode: drop italic on the modal title */
html[lang="zh"] .modal-title{ font-family:var(--font-zh); font-style:normal; letter-spacing:.02em; }