/* ==========================================================================
   Sign in / Create account — styled to match the public website (MDC_WebSite).
   Loaded ONLY on the /Account/* pages (see Pages/Account/_AuthHead.cshtml), and every
   selector is scoped under .wa-wrap / .wa-card, so nothing here can ever affect
   the rest of the (Bootstrap-based) office app, even if this file were loaded elsewhere.
   ========================================================================== */
:root {
  --wa-ink: #0c1017;
  --wa-paper: #faf7f1;
  --wa-line: #e7dfd0;
  --wa-gold: #c39a4a;
  --wa-gold-2: #e9cf92;
  --wa-gold-ink: #7a5a1c;
  --wa-text: #1a1f29;
  --wa-muted: #667085;
  --wa-danger: #b3261e;
  --wa-ok: #14573a;
  --wa-shadow: 0 18px 40px -18px rgba(12, 16, 23, .28);
  --wa-font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --wa-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wa-ease: cubic-bezier(.2, .7, .2, 1);
}

.wa-wrap { min-height: 65vh; display: grid; place-items: center; padding: 3rem 1rem; margin: -1.5rem -1.5rem 0; font-family: var(--wa-font); color: var(--wa-text);
  background: radial-gradient(60% 50% at 80% 0%, rgba(195, 154, 74, .16), transparent 70%), var(--wa-paper); }
.wa-card { width: min(100% - 2rem, 470px); background: #fff; border: 1px solid var(--wa-line); border-radius: 22px; padding: 2.4rem; box-shadow: var(--wa-shadow); }
.wa-card.wa-wide { width: min(100% - 2rem, 640px); }
.wa-card h1 { font-family: var(--wa-font-display); font-weight: 600; font-size: 2.2rem; line-height: 1.12; margin: .3rem 0 .6rem; color: var(--wa-ink); }
.wa-eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 600; color: var(--wa-gold-ink); display: inline-flex; align-items: center; gap: .7rem; }
.wa-eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.wa-muted { color: var(--wa-muted); }
.wa-center { text-align: center; }
.wa-link { color: var(--wa-gold-ink); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color .2s; }
.wa-link:hover { border-color: currentColor; }

.wa-wrap label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: .4rem; color: var(--wa-ink); }
.wa-wrap input[type=text], .wa-wrap input[type=email], .wa-wrap input[type=password], .wa-wrap input[type=tel] {
  width: 100%; padding: .85rem 1rem; border: 1px solid #d9d0bd; border-radius: 12px; background: #fff; font: 400 1rem var(--wa-font); color: var(--wa-text);
  transition: border-color .2s, box-shadow .2s; box-shadow: none; }
.wa-wrap input:focus { outline: none; border-color: var(--wa-gold); box-shadow: 0 0 0 4px rgba(195, 154, 74, .2); }
.wa-field { margin-bottom: 1.15rem; }
.wa-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.wa-hint { font-size: .8rem; color: var(--wa-muted); margin-top: .3rem; }
.wa-check { display: flex; gap: .65rem; align-items: flex-start; font-weight: 400; font-size: .92rem; cursor: pointer; margin: 0; }
.wa-check input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--wa-gold-ink); flex: none; }
.wa-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }  /* honeypot */

.wa-wrap .field-validation-error, .wa-wrap .validation-summary-errors, .wa-wrap .text-danger { color: var(--wa-danger); font-size: .84rem; display: block; }
.wa-wrap .validation-summary-errors ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.wa-wrap .input-validation-error { border-color: var(--wa-danger) !important; }

.wa-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.wa-seg label { border: 1px solid #d9d0bd; border-radius: 12px; padding: .8rem 1rem; text-align: center; cursor: pointer; font-weight: 600; margin: 0; transition: all .2s; }
.wa-seg input { position: absolute; opacity: 0; }
.wa-seg input:checked + span { color: var(--wa-gold-ink); }
.wa-seg label:has(input:checked) { border-color: var(--wa-gold); background: rgba(195, 154, 74, .1); box-shadow: 0 0 0 3px rgba(195, 154, 74, .18); }

.wa-btn { --bg: var(--wa-ink); --fg: #fff; display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .55rem; padding: 1.05rem 2.1rem; border-radius: 999px;
  border: 1px solid var(--bg); background: var(--bg); color: var(--fg); font: 600 1rem/1 var(--wa-font); letter-spacing: .02em; cursor: pointer;
  transition: transform .25s var(--wa-ease), box-shadow .25s var(--wa-ease), background .25s, color .25s; }
.wa-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -8px rgba(12, 16, 23, .22); color: var(--fg); }
.wa-btn-gold { --bg: var(--wa-gold); --fg: #1b1405; }
.wa-btn-gold:hover { --bg: var(--wa-gold-2); }
.wa-btn-light { --bg: #fff; --fg: var(--wa-ink); border-color: var(--wa-line); }

.wa-alert { padding: .9rem 1.2rem; border-radius: 12px; margin-bottom: 1.2rem; font-size: .94rem; }
.wa-alert-ok { background: #e7f5ee; color: var(--wa-ok); border: 1px solid #b6e0c9; }

@media (max-width: 600px) { .wa-wrap { margin: -1rem -0.75rem 0; padding: 2rem .5rem; } .wa-card { padding: 1.6rem; } }