/* ============================================================ */
/* WT Contact Modal — site-wide                                  */
/* Design tokens (--obsidian, --gold, etc.) come from the global */
/* theme stylesheet. Modal is fully namespaced under .wt-modal / */
/* .wt-form / .wt-submit-* so it can't collide with other UI.    */
/* ============================================================ */

/* ----- Modal Shell ----- */
.wt-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vh, 48px);
  opacity: 0; pointer-events: none;
  transition: opacity 250ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.wt-modal[aria-hidden="false"] {
  display: flex; opacity: 1; pointer-events: auto;
}
.wt-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 8, 16, 0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.wt-modal-shell {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; max-height: calc(100vh - 32px);
  background: linear-gradient(180deg, var(--charcoal, #12121e) 0%, var(--slate, #1a1a2a) 100%);
  border: 1px solid var(--gold-dim, rgba(231,199,153,0.12));
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(231,199,153,0.04) inset;
  overflow-y: auto;
  overflow-x: hidden;
  transform: scale(0.96) translateY(8px);
  transition: transform 300ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  -webkit-overflow-scrolling: touch;
}
.wt-modal[aria-hidden="false"] .wt-modal-shell { transform: scale(1) translateY(0); }
body.wt-modal-open { overflow: hidden; }

/* ----- Close button ----- */
.wt-modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border, rgba(231,199,153,0.10));
  border-radius: 50%; color: var(--silver, #8a8aa8);
  cursor: pointer;
  transition: border-color var(--fast, 0.15s), color var(--fast, 0.15s), background var(--fast, 0.15s);
}
.wt-modal-close:hover, .wt-modal-close:focus-visible {
  border-color: var(--gold, #e7c799); color: var(--gold, #e7c799);
  background: var(--gold-glow, rgba(231,199,153,0.06)); outline: none;
}

/* ----- Body / Head ----- */
.wt-modal-body {
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px) clamp(20px, 3vw, 32px);
}
.wt-modal-head { margin-bottom: 1.6rem; }
.wt-modal-eyebrow {
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-readable, #d4b88a); margin-bottom: .8rem;
}
.wt-modal-h {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.5rem, 3vw, 1.85rem); font-weight: 400;
  color: var(--headline-white, #f0f0f8); line-height: 1.2; margin: 0 0 .8rem;
}
.wt-modal-sub {
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-size: .92rem; color: var(--platinum, #d8d8e8);
  line-height: 1.65; margin: 0;
}

/* Phone link inside .wt-modal-sub (success state) */
.wt-modal-sub a {
  color: var(--platinum, #d8d8e8);
  text-decoration: none;
  border-bottom: 1px solid rgba(231, 199, 153, 0.22);
  transition: color var(--fast, 0.15s), border-color var(--fast, 0.15s);
}
.wt-modal-sub a:hover {
  color: var(--gold, #e7c799);
  border-color: var(--gold, #e7c799);
}

/* ----- Form ----- */
.wt-form { display: flex; flex-direction: column; gap: 1.05rem; }
.wt-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wt-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.wt-field { display: flex; flex-direction: column; gap: .4rem; }
.wt-field label, .wt-check label {
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .04em; color: var(--platinum, #d8d8e8);
}
.wt-req { color: var(--gold, #e7c799); margin-left: 2px; }
.wt-optional {
  display: inline-block; margin-left: .4rem;
  font-size: .65rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim, #5a5a78);
}

.wt-field input,
.wt-field select,
.wt-field textarea {
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-size: 16px;    /* 16px+ prevents iOS zoom */
  color: var(--headline-white, #f0f0f8);
  background: rgba(8, 8, 16, 0.6);
  border: 1px solid var(--border, rgba(231,199,153,0.10));
  border-radius: 5px;
  padding: .72rem .85rem;
  width: 100%;
  transition: border-color var(--fast, 0.15s), background var(--fast, 0.15s), box-shadow var(--fast, 0.15s);
  -webkit-appearance: none; appearance: none;
}
.wt-field textarea {
  resize: vertical; min-height: 100px; line-height: 1.55;
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
}
.wt-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23e7c799' stroke-width='1.4' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}
.wt-field input::placeholder,
.wt-field textarea::placeholder { color: var(--dim, #5a5a78); }
.wt-field input:focus,
.wt-field select:focus,
.wt-field textarea:focus {
  outline: none;
  border-color: var(--gold, #e7c799);
  background: rgba(8, 8, 16, 0.85);
  box-shadow: 0 0 0 3px rgba(231,199,153,0.10);
}
.wt-field input:invalid:not(:placeholder-shown),
.wt-field select.wt-invalid,
.wt-field textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(220, 80, 80, 0.55);
}

.wt-help {
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-size: .72rem; color: var(--silver, #8a8aa8);
  line-height: 1.5; margin-top: -.05rem;
}
.wt-err {
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-size: .75rem; color: rgb(240, 130, 130);
  min-height: 0; line-height: 1.4;
}
.wt-err:not(:empty) { padding-top: .15rem; }
.wt-err-form { margin-top: -.4rem; text-align: center; }

/* ----- Checkbox ----- */
.wt-check {
  display: grid; grid-template-columns: auto 1fr; gap: .65rem .85rem;
  align-items: center;
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  padding: .9rem 1rem;
  background: rgba(8, 8, 16, 0.4);
  border: 1px solid var(--border-soft, rgba(255,255,255,0.05));
  border-radius: 5px;
}
.wt-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--gold, #e7c799); border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(231,199,153,0.08), 0 0 0 0 rgba(231,199,153,0);
  cursor: pointer; position: relative;
  transition: background var(--fast, 0.15s), border-color var(--fast, 0.15s), box-shadow var(--fast, 0.15s);
}
.wt-check input[type="checkbox"]:hover {
  background: rgba(231,199,153,0.10);
  box-shadow: inset 0 0 0 1px rgba(231,199,153,0.18), 0 0 0 4px rgba(231,199,153,0.06);
}
.wt-check input[type="checkbox"]:checked {
  background: var(--gold, #e7c799); border-color: var(--gold, #e7c799);
  box-shadow: inset 0 0 0 1px rgba(231,199,153,0), 0 0 0 0 rgba(231,199,153,0);
}
.wt-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid var(--obsidian, #080810); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.wt-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(231,199,153,0.20), 0 0 0 3px rgba(231,199,153,0.35);
}
.wt-check label {
  font-size: .8rem; line-height: 1.55;
  color: var(--silver, #8a8aa8); cursor: pointer;
}
.wt-check .wt-err { grid-column: 1 / -1; }

/* ----- Submit ----- */
.wt-submit-row {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  margin-top: .3rem;
}
.wt-submit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; min-width: 220px;
  padding: 0 1.8rem;
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-size: .92rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--obsidian, #080810);
  background: var(--gold, #e7c799);
  border: 1px solid var(--gold, #e7c799);
  border-radius: 4px;
  cursor: pointer; position: relative;
  transition: background var(--fast, 0.15s), box-shadow var(--fast, 0.15s), transform var(--fast, 0.15s);
}
.wt-submit-btn:hover {
  background: var(--gold-bright, #f0d8b0);
  box-shadow: 0 4px 18px rgba(231,199,153,0.25);
}
.wt-submit-btn:active { transform: translateY(1px); }
.wt-submit-btn:focus-visible {
  outline: 2px solid var(--gold-bright, #f0d8b0); outline-offset: 3px;
}
.wt-submit-btn[aria-busy="true"] {
  background: var(--gold-muted, #c9a87a); pointer-events: none;
}
.wt-submit-btn[aria-busy="true"] .wt-submit-label { opacity: .4; }
.wt-submit-spinner {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(8, 8, 16, 0.3); border-top-color: var(--obsidian, #080810);
  border-radius: 50%; opacity: 0;
  animation: wt-spin 0.7s linear infinite;
}
.wt-submit-btn[aria-busy="true"] .wt-submit-spinner { opacity: 1; }
@keyframes wt-spin { to { transform: rotate(360deg); } }

.wt-submit-btn-ghost {
  background: transparent; color: var(--gold, #e7c799);
  border: 1px solid var(--gold-dim, rgba(231,199,153,0.12));
}
.wt-submit-btn-ghost:hover {
  background: var(--gold-glow, rgba(231,199,153,0.06));
  border-color: var(--gold, #e7c799); color: var(--gold, #e7c799);
  box-shadow: none;
}

.wt-submit-fallback {
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-size: .8rem; color: var(--silver, #8a8aa8); margin: 0;
}
.wt-submit-fallback a {
  color: var(--gold, #e7c799); text-decoration: none;
  border-bottom: 1px solid var(--gold-dim, rgba(231,199,153,0.12));
}
.wt-submit-fallback a:hover { border-color: var(--gold, #e7c799); }

/* ----- Footer in modal ----- */
.wt-modal-foot {
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--border-soft, rgba(255,255,255,0.05));
}
.wt-foot-addr {
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-size: .72rem; color: var(--dim, #5a5a78);
  letter-spacing: .04em; line-height: 1.5; text-align: center;
}

/* ----- Success state ----- */
.wt-success {
  text-align: center; padding: 1rem 0 .5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.wt-success-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold, #e7c799);
  background: var(--gold-glow, rgba(231,199,153,0.06));
  border: 1px solid var(--gold-dim, rgba(231,199,153,0.12));
  border-radius: 50%;
  margin-bottom: .4rem;
}
.wt-success .wt-modal-h { margin-bottom: .4rem; }
.wt-success .wt-modal-sub { max-width: 380px; }
.wt-success-ref {
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-size: .75rem; color: var(--silver, #8a8aa8);
  letter-spacing: .06em; padding: .5rem .9rem;
  background: rgba(8, 8, 16, 0.5);
  border: 1px solid var(--border-soft, rgba(255,255,255,0.05));
  border-radius: 4px;
}
.wt-success .wt-submit-btn { margin-top: .4rem; }

/* ----- Mobile ----- */
@media (max-width: 600px) {
  .wt-modal { padding: 0; align-items: stretch; }
  .wt-modal-shell {
    max-width: none; max-height: 100vh; min-height: 100vh;
    border-radius: 0; border-left: none; border-right: none;
  }
  .wt-field-row { grid-template-columns: 1fr; gap: 1.05rem; }
  .wt-modal-close { top: 12px; right: 12px; }
  .wt-modal-head { margin-bottom: 1.3rem; }
  .wt-submit-btn { width: 100%; }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .wt-modal, .wt-modal-shell, .wt-submit-btn { transition: none; }
  .wt-submit-spinner { animation: none; }
}