/* Relay's contact form, styled like the rest of normanlamps.com (owner, 2026-10-12): the site's Inter body font and 14px text, navy
   headings, the account pages' inputs (light border, 8px corners, gold focus glow) and a navy primary button. The card, the grid and the
   Contact Details box come from the site's own newhome.css. Colours use the site's --nh-* tokens with fallbacks. */
.relay-contact { --rc-navy:var(--nh-navy,#0B3566); --rc-deep:var(--nh-navy-deep,#001B49); --rc-gold:var(--nh-gold,#EAB73E); --rc-ink:var(--nh-ink,#1F2937);
  --rc-gray:var(--nh-gray,#6B7280); --rc-line:#d7dce3; --rc-soft:#f5f7fa; --rc-err:#b42318; --rc-ok:#157a4a;
  font-family:var(--nh-body,"Inter","Open Sans",Helvetica,Arial,sans-serif); color:var(--rc-ink); font-size:14px; line-height:1.55;
  max-width:700px; margin:0 auto; padding:22px 4px 30px; }
.relay-contact [hidden], .relay-contact form[hidden] { display:none !important; }   /* the grid below must not override hidden */
.relay-contact h1 { font-size:22px; font-weight:800; color:var(--rc-deep); margin:0 0 8px; line-height:1.25; }
.relay-contact .contact-intro { font-size:14px; color:#4b5563; line-height:1.6; margin:0 0 20px; padding-bottom:16px; border-bottom:1px solid #e3e8ef; }
.relay-contact .contact-intro p { margin:0; }
/* the intro shows on the form only; on the thank-you view it is hidden and the heading keeps the dividing line (owner, 2026-10-12) */
.relay-contact.is-thanked h1 { padding-bottom:14px; border-bottom:1px solid #e3e8ef; margin-bottom:18px; }

/* fields: two columns on wide screens (name+email, phone+order), everything else full width */
.relay-contact form { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.relay-contact form > * { grid-column:1 / -1; min-width:0; }
.relay-contact form > .contact-field:nth-of-type(-n+4) { grid-column:auto; }
.relay-contact .contact-field { display:block; margin:0; font-size:14px; font-weight:400; }
.relay-contact .contact-field span { display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:var(--rc-deep); }   /* owner: one size up */
.relay-contact .required-mark { display:inline; color:var(--rc-err); font-weight:600; }
.relay-contact input:not([type=file]), .relay-contact textarea { display:block; width:100%; box-sizing:border-box; border:1px solid var(--rc-line); border-radius:8px;
  background:#fff; color:var(--rc-ink); padding:10px 12px; font:inherit; font-size:15px; box-shadow:none; }
.relay-contact textarea { min-height:150px; resize:vertical; }
.relay-contact input:not([type=file]):focus, .relay-contact textarea:focus { border-color:var(--rc-gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--rc-gold) 25%, transparent); outline:none; }

/* files */
.relay-contact .contact-upload { border:0; padding:0; background:none; }
/* owner, 2026-10-12: a real drop zone — drag files onto it, or click it / "browse" */
.relay-contact .contact-drop { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:20px 16px; border:2px dashed #c9d3df; border-radius:10px; background:var(--rc-soft); cursor:pointer; transition:background-color .15s, border-color .15s; }
.relay-contact .contact-drop:hover { border-color:var(--rc-navy); }
.relay-contact .contact-drop.is-over { border-color:var(--rc-gold); background:#fff8e6; }
.relay-contact .contact-drop-icon { width:28px; height:28px; fill:var(--rc-navy); opacity:.75; }
.relay-contact .contact-drop-text { font-size:15px; font-weight:600; color:var(--rc-deep); }
.relay-contact .contact-browse { border:0; background:none; padding:0; font:inherit; font-weight:700; color:var(--rc-navy); text-decoration:underline; cursor:pointer; }
.relay-contact .contact-browse:disabled { color:var(--rc-gray); text-decoration:none; }
@media (prefers-reduced-motion:reduce) { .relay-contact .contact-drop { transition:none; } }
.relay-contact .contact-upload-label { display:block; font-size:14px; font-weight:600; color:var(--rc-deep); margin-bottom:8px; }
.relay-contact .contact-upload-label small { font-weight:400; color:var(--rc-gray); font-size:13px; }
.relay-contact .contact-upload-hint { margin:0; font-size:13px; color:var(--rc-gray); }
.relay-contact .contact-file-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }
.relay-contact .contact-add-files { border:1px solid var(--rc-navy); background:#fff; color:var(--rc-navy); border-radius:8px; padding:7px 14px; font:inherit; font-weight:600; font-size:13px; cursor:pointer; }
.relay-contact .contact-add-files:hover:not(:disabled) { background:var(--rc-navy); color:#fff; }
.relay-contact .contact-file-list { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.relay-contact .contact-file-list:empty { display:none; }
.relay-contact .contact-file { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e3e8ef; border-radius:8px; padding:6px 8px; min-width:0; }
.relay-contact .contact-file-thumb { flex:0 0 44px; width:44px; height:44px; border-radius:6px; object-fit:cover; background:#eef1f5; }
.relay-contact .contact-file-doc { display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--rc-navy); background:#e8eef7; }
.relay-contact .contact-file-name { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.relay-contact .contact-file-size { flex:0 0 auto; font-size:12px; color:var(--rc-gray); }
.relay-contact .contact-file-remove { flex:0 0 auto; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:var(--rc-gray); font-size:20px; line-height:1; cursor:pointer; }
.relay-contact .contact-file-remove:hover { background:#fde8e8; color:var(--rc-err); }

/* notes, status, send */
.relay-contact .contact-note { background:#fff8e6; border:1px solid #f3dc9b; color:#7a5a00; border-radius:8px; padding:10px 12px; font-size:13px; }
.relay-contact [role=status] { margin:0; min-height:1em; overflow-wrap:anywhere; font-size:14px; color:var(--rc-err); }
.relay-contact [role=status]:empty { display:none; }
/* owner 2026-10-12: working (loading/sending) and reassuring notes in normal text; the spinner shows work is happening; problems stay red */
.relay-contact [role=status].is-busy, .relay-contact [role=status].is-info { color:var(--rc-ink); }
.relay-contact [role=status].is-busy { display:flex; align-items:center; gap:10px; }
.relay-contact [role=status].is-busy::before { content:''; flex:0 0 18px; width:18px; height:18px; box-sizing:border-box; border:2px solid #c9d3df; border-top-color:var(--rc-navy); border-radius:50%; animation:rc-spin .8s linear infinite; }
@keyframes rc-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .relay-contact [role=status].is-busy::before { animation-duration:2.4s; } }
.relay-contact [data-retry] { justify-self:start; }
.relay-contact .contact-send { text-align:left; padding-top:6px; border-top:1px solid #eef1f5; }
.relay-contact button { font:inherit; cursor:pointer; }
.relay-contact button[type=submit] { border:0; border-radius:8px; color:#fff; background:var(--rc-navy); padding:11px 28px; font-weight:700; font-size:15px; }
.relay-contact button[type=submit]:hover:not(:disabled) { background:var(--rc-deep); }
.relay-contact button[data-retry] { border:1px solid var(--rc-line); background:#fff; color:var(--rc-ink); border-radius:8px; padding:6px 12px; font-size:13px; }
.relay-contact button:disabled { opacity:.6; cursor:not-allowed; }
.relay-contact .contact-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.relay-contact [data-challenge] { max-width:100%; overflow:hidden; }

/* thank-you */
.relay-contact .relay-contact-thanks { padding:6px 28px 4px; }   /* owner: set in from the card's edges */
.relay-contact .relay-contact-thanks:focus { outline:none; }
.relay-contact .contact-thanks-head { display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.relay-contact .contact-thanks-mark { flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:#e7f5ee; color:var(--rc-ok); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; }
.relay-contact .contact-thanks-head h2 { margin:2px 0 4px; font-size:20px; font-weight:800; color:var(--rc-deep); }
.relay-contact .contact-thanks-head p { margin:0; color:#4b5563; }
.relay-contact .relay-contact-thanks h3 { font-size:14px; font-weight:700; color:var(--rc-deep); margin:0 0 8px; text-transform:none; }
.relay-contact .contact-sent { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0 0 18px; padding:14px 16px; background:var(--rc-soft); border:1px solid #e3e8ef; border-radius:10px; }
.relay-contact .contact-sent dt { font-size:13px; font-weight:600; color:var(--rc-gray); }
.relay-contact .contact-sent dd { margin:0; overflow-wrap:anywhere; }
.relay-contact .contact-sent-message { white-space:pre-wrap; }
.relay-contact .contact-file-list-sent { margin:0; }
.relay-contact .contact-thanks-actions { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; }
.relay-contact .contact-button-secondary { border:1px solid var(--rc-navy); background:#fff; color:var(--rc-navy); border-radius:8px; padding:9px 16px; font-weight:600; }
.relay-contact .contact-button-secondary:hover { background:var(--rc-navy); color:#fff; }
.relay-contact .contact-button-link { border:0; background:none; color:var(--rc-navy); text-decoration:underline; padding:0; }
.relay-contact .contact-thanks-hint { margin:10px 0 0; font-size:13px; color:var(--rc-gray); }

/* the white card the site gives the main column (newhome.css styles only a div child — the old JotForm wrapper) */
#information-contact .nli-contact-main > .relay-contact { max-width:none; margin:0; background:#fff; border:1px solid #e3e8ef; border-radius:12px; padding:24px 28px 28px; box-sizing:border-box; }

@media (max-width:600px) {
  .relay-contact { padding:14px 0 24px; }
  #information-contact .nli-contact-main > .relay-contact { padding:18px 16px 22px; }
  .relay-contact .relay-contact-thanks { padding:4px 0; }
  .relay-contact h1 { font-size:20px; }
  .relay-contact form { grid-template-columns:1fr; }
  .relay-contact form > .contact-field:nth-of-type(-n+4) { grid-column:1 / -1; }
  .relay-contact .contact-sent { grid-template-columns:1fr; }
  .relay-contact button[type=submit] { width:100%; }
  .relay-contact [data-challenge] { display:flex; justify-content:center; }   /* the check box centred on phones (owner 2026-10-12) */
}