/* Support Form — faithful implementation of Support Form.dc.html
   Palette: cream #f4ecdc / card #fffdf9 / gold accent #bf8a32 / green #3f9b6b / error #b23b2e */

* { box-sizing: border-box; }
html, body { margin: 0; }
input, textarea, button { font-family: inherit; font-size: inherit; color: inherit; outline: none; }
textarea { resize: none; }
::placeholder { color: #b6a596; }

.page {
  min-height: 100vh;
  width: 100%;
  background: #f4ecdc;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 24px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #2a1f18;
}
.shell { width: 100%; max-width: 476px; }

/* ---- Card ---- */
.card {
  background: #fffdf9;
  border: 1px solid rgba(120, 90, 30, .08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 28px 64px -32px rgba(120, 90, 30, .42);
}
.card-head { padding: 38px 40px 28px; }
.card-body { padding: 0 40px 36px; }

/* ---- Status pill ---- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f6efdd;
  border: 1px solid #ecdfc2;
  border-radius: 999px;
  padding: 6px 13px;
  margin-bottom: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: #7a6431;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3f9b6b;
  box-shadow: 0 0 0 3px rgba(63, 155, 107, .18);
  flex: none;
}

/* ---- Headings ---- */
.title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 33px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 9px;
  color: #241a13;
}
.subtitle { font-size: 14.5px; line-height: 1.55; color: #8a7263; margin: 0; }

/* ---- Fields ---- */
.field { margin-bottom: 16px; }
.label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #6e5648;
  margin-bottom: 7px;
}
.label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.label-row .label { margin-bottom: 0; }
.req { color: #bf8a32; }
.counter { font-size: 11.5px; color: #b6a596; }
.counter.has-text { color: #8a7263; }

.control { position: relative; }
.input {
  width: 100%;
  border: 1px solid #e6dcc4;
  background: #faf5ec;
  padding: 12px 14px;
  border-radius: 11px;
  font-size: 15px;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.control .input { padding-right: 40px; }
.input:focus {
  border-color: #bf8a32;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(191, 138, 50, .16);
}
.textarea { line-height: 1.5; min-height: 108px; padding-right: 14px; }

/* validation states (border color follows status, matching the design) */
.field.is-valid .input { border-color: #3f9b6b; }
.field.is-error .input { border-color: #b23b2e; }
.field.is-valid .input:focus,
.field.is-error .input:focus { border-color: #bf8a32; }

.valid-check {
  position: absolute;
  right: 13px;
  top: 50%;            /* control wraps only the single-line input → centers on it */
  transform: translateY(-50%);
  display: flex;
}
.field-error {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: #b23b2e;
  margin-top: 7px;
}
.field-error::before {
  content: "";
  width: 13px; height: 13px; flex: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23b23b2e' stroke-width='2'/%3E%3Cpath d='M12 7v6M12 16.5v.5' stroke='%23b23b2e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.field-hint { font-size: 12px; color: #8a7263; margin-top: 6px; }

/* ---- Dropzone ---- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1.5px dashed #e0d2b0;
  background: transparent;
  border-radius: 13px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.dropzone.is-dragging { border-color: #bf8a32; background: #f6efdd; }
.dropzone-title { font-size: 14px; color: #6e5648; }
.dropzone-browse { color: #bf8a32; font-weight: 600; }
.dropzone-sub { font-size: 12px; color: #a8917f; }

/* ---- File previews ---- */
.files { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 15px; }
.file { width: 76px; }
.file-thumb {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid #efe2cb;
  background: #fff;
}
.file-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
.file-pdf {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: #bf8a32; background: #f6efdd;
}
.file-remove {
  position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px;
  border: none; border-radius: 50%;
  background: rgba(42, 31, 24, .78); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.file-name {
  font-size: 11px; color: #9a8273; margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Submit ---- */
.submit {
  width: 100%;
  margin-top: 26px;
  background: #bf8a32;
  color: #fff;
  border: none;
  padding: 15px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, transform .14s, box-shadow .14s;
  box-shadow: 0 8px 20px -8px rgba(191, 138, 50, .6);
}
.submit:hover {
  background: #a3741f;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(191, 138, 50, .7);
}
.submit:disabled { opacity: .7; cursor: progress; transform: none; }

.trust {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 16px;
  font-size: 12px; color: #a8917f;
}

/* ---- Honeypot (hide from humans, keep reachable for bots) ---- */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Turnstile: invisible mode renders nothing; keep no layout footprint by default. */
.turnstile:empty { display: none; }
.turnstile { margin-top: 16px; }

/* ---- Success card ---- */
.card.success { padding: 52px 40px; text-align: center; }
.success-badge {
  width: 58px; height: 58px; border-radius: 50%;
  background: #bf8a32;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  box-shadow: 0 10px 24px -10px rgba(191, 138, 50, .7);
}
.success-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 26px; font-weight: 500; margin: 0 0 9px; color: #241a13;
}
.success-text { font-size: 14.5px; line-height: 1.55; color: #8a7263; margin: 0 0 6px; }
.success-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: #f6efdd; border-radius: 999px; padding: 7px 15px;
  margin: 14px 0 26px;
  font-size: 12.5px; font-weight: 600; color: #7a6431;
}
.ghost-btn {
  background: none;
  border: 1px solid #e0cda0;
  padding: 11px 24px;
  border-radius: 999px;
  font-size: 13.5px;
  cursor: pointer;
  color: #bf8a32;
  font-weight: 600;
  transition: border-color .12s;
}
.ghost-btn:hover { border-color: #bf8a32; }

[hidden] { display: none !important; }