/* ═══════════════════════════════════════════
   HVC Appraisals — Submission Form Styles
   Dark green/gold theme matching HVN site
   ═══════════════════════════════════════════ */
:root {
  --hva-green:   #0e2318;
  --hva-green2:  #1c3827;
  --hva-gold:    #c9a84c;
  --hva-gold-lt: #e0c47a;
  --hva-cream:   #f5ecd7;
  --hva-border:  rgba(201,168,76,0.22);
  --hva-border2: rgba(201,168,76,0.5);
  --hva-red:     #e05555;
  --hva-muted:   rgba(245,236,215,0.45);
  --hva-radius:  3px;
}

/* ── Wrapper — fills full content column, no centering offset ── */
.hva-submit-wrap {
  font-family: inherit;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* ── Success state (handled above in v1.6.8) ── */
.hva-form-success h3 { font-size: 24px; color: var(--hva-gold-lt); margin: 0 0 12px; }
.hva-form-success p  { color: var(--hva-muted); font-size: 15px; line-height: 1.6; max-width: 480px; margin: 0 auto; }

/* ── Form — reset all inherited theme styles ── */
.hva-submit-form {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* ── Grid ── */
.hva-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 0 20px !important;
  padding: 0 !important;
}
@media (max-width: 600px) {
  .hva-form-grid { grid-template-columns: 1fr; }
}

/* ── Fields ── */
.hva-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 !important;
  padding: 0 !important;
}
.hva-form-field-full {
  margin: 0 0 20px !important;
  padding: 0 !important;
}

.hva-form-field label,
.hva-form-field-full label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(245,236,215,0.65) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  display: block !important;
}

.hva-req { color: var(--hva-gold) !important; margin-left: 2px; }
.hva-optional {
  color: var(--hva-muted) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.hva-field-hint {
  margin: 0 0 8px !important;
  font-size: 12px !important;
  color: var(--hva-muted) !important;
  line-height: 1.5 !important;
  padding: 0 !important;
}

/* ── Inputs — override ALL theme global input styles ── */
.hva-submit-form input[type=text],
.hva-submit-form input[type=email],
.hva-submit-form input[type=tel],
.hva-submit-form input[type=number],
.hva-submit-form select,
.hva-submit-form textarea {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1px solid var(--hva-border) !important;
  border-radius: var(--hva-radius) !important;
  font-size: 15px !important;
  font-family: inherit !important;
  color: var(--hva-cream) !important;
  background: rgba(255,255,255,0.06) !important;
  box-sizing: border-box !important;
  transition: border-color .2s, background .2s, box-shadow .2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.hva-submit-form input::placeholder,
.hva-submit-form textarea::placeholder {
  color: rgba(245,236,215,0.2) !important;
}
.hva-submit-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}
.hva-submit-form select option {
  background: #1c3827 !important;
  color: var(--hva-cream) !important;
}
.hva-submit-form input:focus,
.hva-submit-form select:focus,
.hva-submit-form textarea:focus {
  outline: none !important;
  border-color: var(--hva-border2) !important;
  background: rgba(255,255,255,0.09) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
}
.hva-submit-form textarea {
  resize: vertical !important;
  min-height: 140px !important;
  line-height: 1.6 !important;
}

/* Character count */
.hva-char-count {
  text-align: right;
  font-size: 12px;
  color: var(--hva-muted);
  margin-top: 4px;
  transition: color .15s;
}
.hva-char-hint {
  margin-left: 4px;
  font-weight: 600;
}
.hva-char--warn { color: var(--hva-red) !important; }
.hva-char--ok   { color: #6fbf73 !important; }
.hva-char--max  { color: var(--hva-gold) !important; }

/* ── Field errors are styled in the v1.6.8 animation block below ── */

/* ── Upload zone ── */
/* v1.9.0 — Dual-slot layout (two upload zones side by side).
   On narrow screens they stack. Each slot has its own label
   above the dashed dropzone box.                              */
.hva-upload-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) {
  .hva-upload-dual { grid-template-columns: 1fr; }
}
.hva-upload-slot { display: flex; flex-direction: column; }
.hva-upload-slot-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hva-gold-lt);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hva-upload-slot-label .hva-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--hva-muted);
}

.hva-upload-zone {
  position: relative;
  border: 1px dashed var(--hva-border2);
  border-radius: var(--hva-radius);
  background: rgba(255,255,255,0.03);
  transition: border-color .2s, background .2s;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hva-upload-zone.hva-drag-over {
  border-color: var(--hva-gold);
  background: rgba(201,168,76,0.07);
}
.hva-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.hva-upload-ui {
  text-align: center;
  padding: 28px 24px;
  pointer-events: none;
}
.hva-upload-icon { font-size: 32px; display: block; margin-bottom: 10px; opacity: 0.6; }
.hva-upload-ui p { margin: 4px 0; font-size: 14px; color: var(--hva-muted); }
.hva-upload-ui p strong { color: var(--hva-gold-lt); }
.hva-upload-sub { font-size: 12px !important; }

/* File preview */
.hva-file-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  background: rgba(201,168,76,0.05);
}
.hva-file-preview img {
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--hva-border2);
}
.hva-file-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
#hva-file-name { font-weight: 600; font-size: 14px; color: var(--hva-gold-lt); word-break: break-all; }
#hva-file-size { font-size: 13px; color: var(--hva-muted); }
.hva-remove-file {
  background: none;
  border: 1px solid rgba(224,85,85,0.4);
  border-radius: var(--hva-radius);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--hva-red);
  margin-top: 4px;
  width: fit-content;
  transition: all .2s;
}
.hva-remove-file:hover { background: rgba(224,85,85,0.1); border-color: var(--hva-red); }

/* ── Privacy note ── */
.hva-privacy-note {
  font-size: 12px;
  color: var(--hva-muted);
  line-height: 1.5;
  margin: 16px 0;
}
.hva-privacy-note a { color: var(--hva-gold); }

/* ── Submit button ── */
.hva-form-actions { margin-top: 8px; }
.hva-btn-submit {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 13px 32px !important;
  background: linear-gradient(135deg, var(--hva-gold-lt), var(--hva-gold)) !important;
  color: #0e2318 !important;
  border: none !important;
  border-radius: var(--hva-radius) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: opacity .2s, transform .15s, box-shadow .2s !important;
  box-shadow: none !important;
}
.hva-btn-submit:hover  { opacity: 0.88 !important; transform: translateY(-1px) !important; }
.hva-btn-submit:active { transform: translateY(1px) scale(0.98) !important; }
.hva-btn-submit:disabled { opacity: .65 !important; cursor: default !important; transform: none !important; }
/* When in submitting state, give the button a subtle pulse so the user keeps
   seeing motion. v1.6.8 — "feel like something is happening." */
.hva-btn-submit:disabled #hva-submit-loading {
  animation: hva-pulse 1.4s ease-in-out infinite;
}
@keyframes hva-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ── Status line (v1.6.8)
   Lives just above the submit button. Shows live progress when the form is
   submitting, plus a brief "✓ Submitted successfully" flash on success. */
.hva-form-status {
  margin: 8px 0 12px;
  padding: 10px 14px;
  background: rgba(201,168,76,0.10);
  border: 1px solid rgba(201,168,76,0.30);
  border-radius: var(--hva-radius);
  color: var(--hva-gold-lt);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  animation: hva-status-in .2s ease-out;
}
.hva-form-status--ok {
  background: rgba(111,191,115,0.12);
  border-color: rgba(111,191,115,0.40);
  color: #6fbf73;
}
.hva-form-status--err {
  background: rgba(224,85,85,0.10);
  border-color: rgba(224,85,85,0.35);
  color: var(--hva-red);
}
@keyframes hva-status-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Global error — shake on appearance to draw attention */
.hva-form-error-global:not([style*="display: none"]) {
  animation: hva-shake .35s ease-out;
}
@keyframes hva-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ── Field error — gentle slide-in */
.hva-field-err {
  color: var(--hva-red);
  font-size: 13px;
  display: none;
  margin-top: 3px;
}
.hva-field-err:not([style*="display: none"]):not(:empty) {
  display: block !important;
  animation: hva-status-in .25s ease-out;
}

/* ── Success state — bigger, more celebratory check + soft entrance */
.hva-form-success {
  text-align: center;
  padding: 48px 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hva-border2);
  animation: hva-success-in .5s ease-out;
}
.hva-success-icon {
  font-size: 64px;
  margin-bottom: 12px;
  display: inline-block;
  animation: hva-bounce-in .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes hva-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hva-bounce-in {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ── Global error ── */
.hva-form-error-global {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(224,85,85,0.1);
  border: 1px solid rgba(224,85,85,0.3);
  border-radius: var(--hva-radius);
  color: var(--hva-red);
  font-size: 14px;
}

/* ── Math CAPTCHA ── */
.hva-math-field { margin-bottom: 24px; }
.hva-math-field label {
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(245,236,215,0.65) !important;
  font-weight: 700 !important;
}
.hva-math-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.hva-math-row input[type=number] {
  padding: 11px 14px !important;
  border: 1px solid var(--hva-border) !important;
  border-radius: var(--hva-radius) !important;
  font-size: 16px !important;
  font-family: inherit !important;
  color: var(--hva-cream) !important;
  background: rgba(255,255,255,0.06) !important;
  box-sizing: border-box !important;
  width: 120px !important;
  -moz-appearance: textfield !important;
}
.hva-math-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
.hva-math-row input[type=number]::placeholder { color: rgba(245,236,215,0.2) !important; }
.hva-math-row input[type=number]:focus {
  outline: none !important;
  border-color: var(--hva-border2) !important;
  background: rgba(255,255,255,0.09) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
}

.hva-btn-refresh {
  padding: 10px 16px;
  background: rgba(201,168,76,0.1);
  border: 1px solid var(--hva-border);
  border-radius: var(--hva-radius);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: inherit;
  color: var(--hva-gold-lt);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.hva-btn-refresh:hover {
  background: rgba(201,168,76,0.18);
  border-color: var(--hva-border2);
}
.hva-btn-refresh:disabled { opacity: .5; cursor: default; }

/* ── Honeypot (hidden) ── */
.hva-hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   v1.7.0 — Visual Prominence + Larger Type
   ───────────────────────────────────────────
   Wraps the form area in a CTA card with strong
   visual hierarchy and larger, more readable type.
   Compact and punchy. Appended at end of file so
   later rules win over earlier base rules where
   they target the same selectors.
   ═══════════════════════════════════════════ */

/* Card frame around the entire form area */
.hva-submit-wrap {
  background: linear-gradient(180deg, rgba(28,56,39,0.35) 0%, rgba(14,35,24,0.55) 100%) !important;
  border: 1px solid var(--hva-gold) !important;
  border-radius: 6px !important;
  padding: 28px 30px 24px !important;
  margin: 0 0 28px !important;
  position: relative;
  box-shadow: 0 14px 36px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}
/* Gold accent bar across the top */
.hva-submit-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hva-gold-lt), var(--hva-gold), var(--hva-gold-lt));
}
@media (max-width: 600px) {
  .hva-submit-wrap { padding: 22px 16px 20px !important; }
}

/* Internal form header */
.hva-form-header {
  margin: 0 0 22px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid var(--hva-border);
  text-align: center;
}
.hva-form-title {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--hva-gold-lt) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
}
.hva-form-tagline {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--hva-muted) !important;
}
@media (max-width: 600px) {
  .hva-form-title { font-size: 1.4rem !important; }
  .hva-form-tagline { font-size: 14px !important; }
}

/* Bigger labels (was 0.68rem ~ 11px) */
.hva-submit-form .hva-form-field label,
.hva-submit-form .hva-form-field-full label,
.hva-math-field label {
  font-size: 0.82rem !important;
  letter-spacing: 0.10em !important;
  color: rgba(245,236,215,0.78) !important;
  margin: 0 0 6px !important;
}

/* Bigger hint text (was 12px) */
.hva-field-hint {
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 0 8px !important;
}

/* 16px inputs prevent iOS auto-zoom on focus; brighter border */
.hva-submit-form input[type=text],
.hva-submit-form input[type=email],
.hva-submit-form input[type=tel],
.hva-submit-form input[type=number],
.hva-submit-form select,
.hva-submit-form textarea {
  font-size: 16px !important;
  padding: 12px 14px !important;
  border-color: rgba(201,168,76,0.35) !important;
}
.hva-submit-form input:hover,
.hva-submit-form select:hover,
.hva-submit-form textarea:hover {
  border-color: rgba(201,168,76,0.55) !important;
  background: rgba(255,255,255,0.08) !important;
}
.hva-math-row input[type=number] { font-size: 16px !important; }

/* Tighter grid & field margins */
.hva-form-grid {
  gap: 16px !important;
  margin: 0 0 16px !important;
}
.hva-form-field-full {
  margin: 0 0 16px !important;
}

/* Bigger centered submit button */
.hva-form-actions {
  text-align: center;
  margin-top: 20px !important;
}
.hva-submit-wrap .hva-btn-submit {
  font-size: 0.95rem !important;
  padding: 17px 48px !important;
  letter-spacing: 0.14em !important;
  min-width: 300px;
}
@media (max-width: 600px) {
  .hva-submit-wrap .hva-btn-submit {
    width: 100%;
    min-width: 0;
    padding: 16px 24px !important;
  }
}

/* Bigger privacy note + char count */
.hva-privacy-note { font-size: 13px !important; line-height: 1.55 !important; }
.hva-char-count   { font-size: 13px !important; }

/* ────────────────────────────────────────────────────────
   v1.9.0 — Intro paragraph line-height tightening on the
   /online-appraisal page. WordPress page content paragraphs
   above the form (direct children of .entry-content) get a
   slightly tighter line-height for a denser visual block.
   Only applies on pages that contain our submit form (the
   :has() selector scopes this to those pages and nothing else).
   Paragraphs INSIDE the form (.hva-submit-wrap p) are left
   alone — they have their own styling.
   ─────────────────────────────────────────────────────── */
.entry-content:has(.hva-submit-wrap) > p,
.entry-content:has(.hva-submit-wrap) > div > p {
  line-height: 1.5;
}