/* ============================================================
   Contact Us (Views/Contact/Index.cshtml).
   Loaded before spice-redesign.css, so anything overriding a shared class
   (.form-input/.form-label/.valid-error, already styled globally in
   spice-redesign.css for Login/Register) is prefixed with .contact-bg to
   win the cascade, same convention as certification.css/myaccount.css.
   ============================================================ */
.contact-bg {
  --ct-line: #e4e1d7;
  --ct-radius: var(--sm-radius-lg);
  --ct-shadow: 0 1px 2px rgba(16, 22, 20, 0.04), 0 6px 20px rgba(16, 22, 20, 0.05);
  background: var(--sm-cream);
  padding: 2em 0 3.5em;
  color: var(--sm-text);
}
.contact-bg a:focus-visible,
.contact-bg button:focus-visible { outline: 2px solid var(--sm-green); outline-offset: 2px; }

.contact-head { max-width: 60ch; margin-bottom: 1.75em; }
.contact-title { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--sm-text); text-wrap: balance; }
.contact-lede { margin: 0.6em 0 0; font-size: 1.02rem; line-height: 1.7; color: var(--sm-text-muted); }

.contact-flash {
  display: flex; align-items: center; gap: 0.6em; margin: 0 0 1.75em; padding: 0.9em 1.15em;
  background: #edf5f0; border: 1px solid #cfe5d8; border-radius: 12px;
  color: var(--sm-green); font-size: 0.95rem; font-weight: 600;
}
.contact-flash svg { flex: none; width: 20px; height: 20px; }

.contact-grid { display: grid; gap: 1.5em; align-items: start; }

/* Form card */
.contact-form-card {
  padding: 1.75em; background: #fff; border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius); box-shadow: var(--ct-shadow);
}
/* .form-input/.form-label/.valid-error/.add-to-basket-dark are already global,
   unscoped rules (spice-redesign.css) - only the row/field layout is local to this page. */
.contact-form { display: flex; flex-direction: column; gap: 1.1em; }
.contact-bg .form-flex { display: flex; flex-flow: row wrap; gap: 1em; }
.contact-bg .field-wrapper { flex: 1 1 100%; min-width: 0; }
.contact-bg .field-wrapper.half { flex-basis: calc(50% - 0.5em); }
.contact-errors.validation-summary-valid { display: none; }
.contact-errors.validation-summary-errors {
  margin-bottom: 1.25em; padding: 0.8em 1em; border-radius: 12px;
  background: #fce8e8; border: 1px solid #f6cfcd; color: #b3261e; font-size: 0.88rem;
}
.contact-errors ul { margin: 0; padding-left: 1.1em; }
.contact-recaptcha { margin: 0.4em 0 1.4em; }
.contact-form-card .add-to-basket-dark { width: auto; padding-left: 2em; padding-right: 2em; }

/* Details column: address/phone/email + map */
.contact-details { display: flex; flex-direction: column; gap: 1.5em; }
.contact-info-card {
  padding: 1.75em; background: #fff; border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius); box-shadow: var(--ct-shadow);
}
.contact-info-title { margin: 0 0 1.1em; font-size: 1.05rem; font-weight: 700; color: var(--sm-text); }
.contact-info-row { display: flex; align-items: flex-start; gap: 0.85em; }
.contact-info-row + .contact-info-row { margin-top: 1.1em; }
.contact-info-icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: 50%; background: #edf5f0; color: var(--sm-green);
}
.contact-info-icon svg { width: 19px; height: 19px; }
.contact-info-label { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sm-text-muted-2); }
.contact-info-value { margin: 0.25em 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--sm-text); }
.contact-info-value a { color: var(--sm-text); text-decoration: none; }
.contact-info-value a:hover { color: var(--sm-green); text-decoration: underline; text-underline-offset: 2px; }

.contact-map-card {
  overflow: hidden; background: #fff; border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius); box-shadow: var(--ct-shadow);
}
.contact-map-card iframe { display: block; width: 100%; height: 320px; border: 0; }

@media (min-width: 64em) {
  .contact-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .contact-form-card .add-to-basket-dark { align-self: flex-start; }
}
@media (max-width: 39.9375em) {
  .contact-title { font-size: 1.5rem; }
  .contact-form-card, .contact-info-card { padding: 1.35em; }
  .contact-bg .field-wrapper.half { flex-basis: 100%; }
}