/* ================================================================
   Meili Machining — inline RFQ form for regular site pages
   (home page #quote, /prototype-machining-services).
   Same rules as the form block in css/lp.css, kept separate so the
   paid landing pages are not touched. Builds on css/brand.css.
   ================================================================ */
.quote-form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: 0 30px 60px -36px rgba(16,40,68,.45) }
.lp-form-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--navy); margin-bottom: 4px }
.lp-form-sub { font-size: 13.5px; color: var(--mid); margin-bottom: 18px }
.form-row { margin-bottom: 16px }
.form-row label { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--ink) }
.form-input, .form-select, .form-textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: var(--font-body); color: var(--ink); background: #fff; transition: border-color .2s }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(6,75,250,.1) }
.form-textarea { resize: vertical; min-height: 84px }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.upload-area { border: 2px dashed #C9D1DC; border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s }
.upload-area:hover, .upload-area.dragging { border-color: var(--blue); background: rgba(6,75,250,.04) }
.upload-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(6,75,250,.08); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center }
.upload-icon svg { width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 2 }
.upload-text { font-size: 14px; color: var(--mid) }
.upload-text strong { color: var(--blue); font-weight: 600 }
.upload-formats { font-size: 11.5px; color: var(--dim); margin-top: 6px }
.confidential { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12px; color: var(--mid); line-height: 1.5 }
.confidential svg { width: 16px; height: 16px; stroke: var(--blue); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 1px }
.confidential a, .rfq-consent a { color: var(--blue) }
.more-details { margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px }
.more-details summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink) }
.more-details[open] summary { margin-bottom: 10px }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important }
.turnstile-wrap { display: flex; justify-content: center; margin: 14px 0 6px; min-height: 65px }
.rfq-consent { font-size: 11.5px; color: var(--mid); line-height: 1.55; margin: 10px 0; text-align: center }
.form-submit { width: 100%; padding: 15px; font-size: 15.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue); color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; font-family: var(--font-body) }
.form-submit:hover { background: var(--blue-hover) }
.form-submit:disabled { opacity: .65; cursor: wait }
.rfq-status { border-radius: 8px; padding: 12px 14px; margin-top: 12px; font-size: 13px; line-height: 1.5 }
.rfq-status.loading { background: #eef4fb; color: #24476b }
.rfq-status.success { background: #edf8f0; color: #1d6a35 }
.rfq-status.error { background: #fdeeee; color: #8a2424 }
.lp-reply { font-size: 12.5px; color: var(--mid); text-align: center; margin-top: 12px }
.lp-reply strong { color: var(--navy) }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr }
  .quote-form { padding: 20px }
}