/* ═══════════════════════════════════════════════════════════════════════
   MOTUS WEDDINGS — Inquiry Form Styles
   Linked from all pages that embed the inquiry form.
════════════════════════════════════════════════════════════════════════ */

/* Scoped to .mq-wrap so nothing bleeds into the host page */
.mq-wrap *,
.mq-wrap *::before,
.mq-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.mq-section {
  background: #0d0b09;
  padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 48px);
  position: relative;
}

/* When inside the Super 8 background wrapper, section bg goes transparent */
.s8-bg-wrap .mq-section {
  background: transparent;
}

/* Subtle texture overlay */
.mq-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,157,102,.07) 0%, transparent 70%);
  pointer-events: none;
}

.mq-wrap {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.50);
  border-radius: 6px;
  padding: clamp(32px, 5vw, 60px) clamp(24px, 5vw, 56px);
  border: 1px solid rgba(201, 157, 102, 0.10);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Header ── */
.mq-eyebrow {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #C99D66;
  margin-bottom: 16px;
}

.mq-title {
  font-family: 'Playfair Display SC', Georgia, serif;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 400;
  color: #F0EBE0;
  line-height: 1.2;
  margin-bottom: 14px;
}

.mq-sub {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: rgba(240,235,224,.6);
  line-height: 1.6;
  margin-bottom: 48px;
  max-width: 560px;
}

/* ── Form shell ── */
#mq-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

/* Full-width override */
.mq-full { grid-column: 1 / -1; }

/* ── Field group ── */
.mq-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mq-label {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(201,157,102,.85);
}

.mq-label .mq-req {
  color: #C99D66;
  margin-left: 2px;
}

/* ── Inputs, selects, textarea ── */
.mq-input,
.mq-select,
.mq-textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,157,102,.22);
  border-radius: 3px;
  color: #F0EBE0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 300;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
}

.mq-input::placeholder,
.mq-textarea::placeholder { color: rgba(240,235,224,.3); }

.mq-input:focus,
.mq-select:focus,
.mq-textarea:focus {
  border-color: rgba(201,157,102,.65);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(201,157,102,.08);
}

/* Error state */
.mq-input.mq-err,
.mq-select.mq-err,
.mq-textarea.mq-err {
  border-color: rgba(220,80,60,.55);
  box-shadow: 0 0 0 3px rgba(220,80,60,.08);
}

.mq-error-msg {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  color: rgba(220,100,80,.9);
  min-height: 14px;
  display: none;
}
.mq-error-msg.show { display: block; }

/* Select arrow */
.mq-select-wrap {
  position: relative;
}
.mq-select-wrap::after {
  content: '›';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  color: rgba(201,157,102,.6);
  font-size: 16px;
  pointer-events: none;
  line-height: 1;
}
.mq-select { padding-right: 36px; cursor: pointer; }

/* Select options */
.mq-select option {
  background: #1a1612;
  color: #F0EBE0;
}

/* Textarea */
.mq-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

/* ── Date input — remove native chrome ── */
input[type="date"].mq-input::-webkit-calendar-picker-indicator {
  filter: invert(.5) sepia(1) saturate(2) hue-rotate(5deg);
  cursor: pointer;
  opacity: .6;
}
input[type="date"].mq-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ── Multi-select checkboxes ── */
.mq-checks-label {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(201,157,102,.85);
  margin-bottom: 10px;
  display: block;
}

.mq-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.mq-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.mq-check-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid rgba(201,157,102,.35);
  border-radius: 2px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  position: relative;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
}

.mq-check-item input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #7a5a28 0%, #b58a37 25%, #e0c067 50%, #b58a37 100%);
  border-color: transparent;
}

.mq-check-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 8px;
  border: 2px solid #111;
  border-top: none;
  border-left: none;
  transform: rotate(43deg);
}

.mq-check-item span {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(240,235,224,.72);
}

.mq-check-item:hover span { color: rgba(240,235,224,.95); }
.mq-check-item:hover input[type="checkbox"] { border-color: rgba(201,157,102,.65); }

/* ── T&C checkbox ── */
.mq-tc-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: rgba(201,157,102,.05);
  border: 1px solid rgba(201,157,102,.15);
  border-radius: 4px;
}

.mq-tc-wrap input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid rgba(201,157,102,.4);
  border-radius: 2px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  position: relative;
  margin-top: 1px;
  transition: border-color .2s, background .2s;
}

.mq-tc-wrap input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #7a5a28 0%, #b58a37 25%, #e0c067 50%, #b58a37 100%);
  border-color: transparent;
}

.mq-tc-wrap input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: 2px solid #111;
  border-top: none;
  border-left: none;
  transform: rotate(43deg);
}

.mq-tc-text {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(240,235,224,.55);
  line-height: 1.6;
}

.mq-tc-text a {
  color: #C99D66;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mq-tc-text a:hover { color: #e0c067; }

.mq-tc-wrap.mq-tc-err { border-color: rgba(220,80,60,.45); }

/* ── Submit button ── */
.mq-submit-wrap {
  text-align: center;
  padding-top: 8px;
}

.mq-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #7a5a28 0%, #b58a37 25%, #e0c067 50%, #f5e18c 75%, #b58a37 100%);
  background-size: 200% 200%;
  color: #111;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: none;
  border-radius: 3px;
  padding: 16px 48px;
  cursor: pointer;
  transition: background-position .4s, opacity .2s, transform .15s;
  min-width: 240px;
  justify-content: center;
}

.mq-btn:hover {
  background-position: 100% 100%;
  transform: translateY(-1px);
}

.mq-btn:active { transform: translateY(0); }

.mq-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.mq-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0,0,0,.2);
  border-top-color: #111;
  border-radius: 50%;
  animation: mq-spin .7s linear infinite;
  display: none;
}

.mq-btn.loading .mq-btn-spinner { display: block; }
.mq-btn.loading .mq-btn-text { opacity: .7; }

@keyframes mq-spin { to { transform: rotate(360deg); } }

/* ── Success / Error banners ── */
.mq-banner {
  display: none;
  padding: 20px 24px;
  border-radius: 4px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  margin-top: 24px;
}

.mq-banner.show { display: block; }

.mq-banner-success {
  background: rgba(100,180,120,.1);
  border: 1px solid rgba(100,180,120,.3);
  color: rgba(160,220,170,.9);
}

.mq-banner-error {
  background: rgba(220,80,60,.08);
  border: 1px solid rgba(220,80,60,.3);
  color: rgba(240,140,120,.9);
}

.mq-banner strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-family: 'Courier Prime', 'Courier New', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}

/* ── Divider ── */
.mq-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(201,157,102,.1);
  margin: 4px 0;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  #mq-form { grid-template-columns: 1fr; }
  .mq-full { grid-column: 1; }
  .mq-btn { width: 100%; }
}