/* Contact form: replaces the old pricing cards in #services.
   Visitors pick what they need from Webnixian's offerings and send an
   enquiry. Layout: intro column (left) + form card (right); stacks on
   tablet/mobile. Colours/fonts follow the site: cream card #dfdece,
   brand yellow #ffff23, TR3A headings, Neue Montreal body. */

.wx-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(24px, 3.5vw, 64px);
  align-items: start;
}
.wx-contact-intro { position: sticky; top: clamp(24px, 6vh, 72px); }
.wx-contact-direct {
  display: flex;
  flex-flow: column;
  gap: 10px;
  margin-top: clamp(20px, 2.2vw, 36px);
  font-size: clamp(0.85rem, 0.95vw, 1.05rem);
}
.wx-contact-direct a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #000;
  text-decoration: none;
  width: fit-content;
}
.wx-contact-direct a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wx-contact-direct-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #ffff23;
  flex: none;
}
.wx-contact-direct-icon svg { width: 16px; height: 16px; }

/* Form card */
.wx-contact-card {
  background: #dfdece;
  border-radius: clamp(10px, 0.9vw, 16px);
  padding: clamp(20px, 2.4vw, 44px);
}
.wx-form { display: flex; flex-flow: column; gap: clamp(18px, 1.6vw, 28px); margin: 0; }
.wx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.2vw, 20px); }
.wx-field { display: flex; flex-flow: column; gap: 8px; min-width: 0; }
.wx-field-label,
.wx-fieldset legend {
  font-family: Ppneuemontreal, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.72rem, 0.8vw, 0.9rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #000;
  padding: 0;
}
.wx-field-label .wx-opt { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.6; }
.wx-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  color: #000;
  background: #f4f3e9;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 50px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wx-input::placeholder { color: rgba(0, 0, 0, 0.42); }
.wx-input:focus { outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(255, 255, 35, 0.9); }
textarea.wx-input { min-height: 130px; resize: vertical; }
select.wx-input {
  appearance: none;
  -webkit-appearance: none;
  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='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
  cursor: pointer;
}

/* Service chips (multi-select checkboxes styled as pills) */
.wx-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wx-fieldset legend { margin-bottom: 12px; }
.wx-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.wx-chip { position: relative; }
.wx-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.wx-chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #f4f3e9;
  color: #000;
  font-size: clamp(0.85rem, 0.9vw, 1rem);
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.wx-chip span::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
.wx-chip:hover span { border-color: #000; }
.wx-chip input:checked + span { background: #ffff23; border-color: #000; }
.wx-chip input:checked + span::before {
  border-color: #000;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23ffff23' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.wx-chip input:focus-visible + span { outline: 2px solid #000; outline-offset: 2px; }
.wx-fieldset.is-invalid .wx-chip span { border-color: #b00020; }

/* Honeypot (spam trap) — hidden from people, visible to bots. */
.wx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Submit row */
.wx-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.wx-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 10px;
  background: #ffff23;
  color: #000;
  font-family: Ppneuemontreal, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.wx-submit:hover { background: #000; color: #ffff23; }
.wx-submit:active { transform: translateY(1px); }
.wx-submit:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.wx-submit[disabled] { opacity: 0.6; cursor: progress; }
.wx-form-note { margin: 0; font-size: clamp(0.78rem, 0.8vw, 0.9rem); opacity: 0.65; }
.wx-form-status { margin: 0; font-size: clamp(0.9rem, 0.95vw, 1.02rem); font-weight: 600; }
.wx-form-status:empty { display: none; }
.wx-form-status.is-ok { color: #1f5f00; }
.wx-form-status.is-err { color: #b00020; }

/* Transition fix: the template's 10vw bottom padding here stacked on the CTA's
   10vw top padding (~20vw dead gap). Trim ours; CTA keeps its own spacing. */
.sevice_section.wx-contact-section { padding-bottom: 4vw; }

/* Tablet + mobile: stack the intro above the form. */
@media screen and (max-width: 991px) {
  .wx-contact-grid { grid-template-columns: 1fr; }
  .wx-contact-intro { position: static; }
  /* 44px minimum tap targets for the direct-contact links on touch layouts */
  .wx-contact-direct a { min-height: 44px; }
  .sevice_section.wx-contact-section { padding-bottom: clamp(2rem, 8vw, 4rem); }
}
@media screen and (max-width: 767px) {
  .wx-contact-grid { margin-top: 0; }
  .wx-form-row { grid-template-columns: 1fr; }
  /* Chips two per row (long labels span both columns) instead of a tall
     single column; rounded-rect so wrapped text still looks tidy. */
  .wx-chips { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 8px; }
  .wx-chip:nth-child(3), .wx-chip:nth-child(7) { grid-column: 1 / -1; }
  .wx-chip span { font-size: 14px; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 22px; }
  .wx-submit { width: 100%; }
  .wx-input { font-size: 16px; } /* prevents iOS zoom-on-focus */
}