/* ============================================================================
   SYSMarshal — Contact page
   Loaded only by Themes/Flexo/Views/Common/ContactUs.cshtml.

   Everything is scoped under .sm-contact so it cannot bleed into the rest of the
   store, and the palette matches the /docs and /faq pages so the three read as
   one site. Served with the site-wide "public,max-age=31536000" static-file
   header, so it is downloaded once and then cached.

   Replaces the stock Flexo contact layout, which expected a two-column
   .contact-left + .contact-right pair while the view only ever rendered
   .contact-left — leaving the form floating in half a page with the other half
   empty.
   ============================================================================ */

.sm-contact {
  --bg: #070a0f;
  --bg-2: #0a0f17;
  --panel: #10161f;
  --panel-2: #141c27;
  --border: rgba(255,255,255,.07);
  --border-2: rgba(255,255,255,.12);
  --accent: #4ab2f1;
  --accent-2: #22d3ee;
  --text: #c2cdd8;
  --text-dim: #8a96a6;
  --text-faint: #5d6877;
  --green: #22c55e;
  --red: #ef4444;
  --heading: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  background: var(--bg);
  color: var(--text);
  font-family: var(--heading);
  font-size: 15px;
  line-height: 1.7;
}

.sm-contact *,
.sm-contact *::before,
.sm-contact *::after { box-sizing: border-box; }

.sm-contact a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- HERO ---- */
.sm-ct-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(1100px 400px at 70% -20%, rgba(74,178,241,.16), transparent 60%),
    radial-gradient(700px 320px at 0% 10%, rgba(34,211,238,.09), transparent 60%),
    var(--bg-2);
  padding: 54px 30px 42px;
}

/* Faint grid, masked so it fades out rather than ending in a hard edge. */
.sm-ct-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0/54px 54px,
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0/54px 54px;
  -webkit-mask-image: radial-gradient(900px 400px at 60% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(900px 400px at 60% 0%, #000 30%, transparent 78%);
}

.sm-ct-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.sm-ct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.sm-ct-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(34,197,94,.16);
}

.sm-ct-hero h1 {
  font-weight: 800;
  color: #fff;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  text-transform: none;
}

.sm-ct-hero h1 .grad {
  background: linear-gradient(90deg,#9ad6ff,#4ab2f1 60%,#22d3ee);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.sm-ct-hero p {
  color: #b8c3d0;
  font-size: 17px;
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------- BODY ---- */
/* The width/padding here are stated defensively. styles.css contains, inside
   @media all and (min-width:992px):

     .contact-page .topic-block,
     .contact-page .page-body { width: 50%; padding-left:15px; padding-right:15px }

   which is how the stock .contact-left / .contact-right split was built. While
   this grid still carried those class names it computed to 660px inside a
   1320px container - half the page, columns of 359px and 244px. The view no
   longer uses either class, and these declarations win on source order if
   anyone puts them back (equal specificity, this file loads after styles.css). */
.sm-ct-body {
  width: auto;
  max-width: 1140px;
  margin: 0 auto;
  padding: 46px 30px 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: 26px;
  align-items: start;
}

/* --------------------------------------------------------------- CARDS ---- */
.sm-ct-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 30px 30px;
}

.sm-ct-card-head { margin-bottom: 22px; }

.sm-ct-card-head h2 {
  font-family: var(--heading);
  font-weight: 700;
  color: #fff;
  font-size: 19px;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  text-transform: none;
}

.sm-ct-card-head p {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0;
}

/* --------------------------------------------------------------- FORM ----- */
/* The markup below is nopCommerce's — asp-for, nop-required, nop-captcha and the
   validation spans all keep their generated class names, so these selectors
   target what the tag helpers actually emit. Do not rename them. */

.sm-contact .form-fields { padding: 0; }

.sm-contact .inputs {
  position: relative;
  margin: 0 0 18px;
}

/* Label and the required marker share one line; the field below is forced onto
   its own by display:block + width:100% further down. inline-block rather than
   absolute positioning, so the asterisk sits with the field NAME (where it is
   read as part of it, including by screen readers) instead of floating loose in
   the margin as it did before. */
.sm-contact .inputs label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 8px;
  vertical-align: middle;
}

.sm-contact .inputs input[type="text"],
.sm-contact .inputs input[type="email"],
.sm-contact .inputs input,
.sm-contact .inputs textarea {
  display: block;
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  padding: 0 16px;
  height: 48px;
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
}

.sm-contact .inputs textarea {
  height: auto;
  min-height: 170px;
  padding: 14px 16px;
  line-height: 1.6;
  resize: vertical;
}

.sm-contact .inputs input::placeholder,
.sm-contact .inputs textarea::placeholder { color: var(--text-faint); }

.sm-contact .inputs input:focus,
.sm-contact .inputs textarea:focus {
  border-color: var(--accent);
  background: rgba(74,178,241,.05);
  box-shadow: 0 0 0 3px rgba(74,178,241,.12);
}

.sm-contact .inputs .required {
  display: inline-block;
  margin: 0 0 8px 5px;
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
}

.sm-contact .field-validation-error,
.sm-contact .message-error,
.sm-contact .message-failure {
  display: block;
  color: #fca5a5;
  font-size: 13px;
  margin-top: 7px;
}

.sm-contact .message-error:empty { display: none; }

.sm-contact .captcha-box {
  margin: 4px 0 22px;
  /* reCAPTCHA renders a fixed-width iframe; let it shrink on narrow screens
     rather than push the card wider than its column. */
  max-width: 100%;
  overflow: hidden;
}

.sm-contact .buttons {
  text-align: left;
  margin: 0;
}

.sm-contact .button-1.contact-us-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 200px;
  padding: 14px 26px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #04111c;
  font-family: var(--heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, transform .18s;
}

.sm-contact .button-1.contact-us-button:hover {
  background: #7cc6f5;
  transform: translateY(-1px);
}

.sm-contact .button-1.contact-us-button:active { transform: none; }

/* ------------------------------------------------------------- SUCCESS ---- */
.sm-ct-result {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid rgba(34,197,94,.35);
  border-radius: 12px;
  background: rgba(34,197,94,.07);
  color: #d4f5df;
  font-size: 15px;
}

.sm-ct-result svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--green);
  margin-top: 1px;
}

/* ---------------------------------------------------------------- RAIL ---- */
.sm-ct-rail {
  display: grid;
  gap: 14px;
}

.sm-ct-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .18s, background .18s, transform .18s;
}

a.sm-ct-item:hover {
  border-color: rgba(74,178,241,.45);
  background: var(--panel-2);
  transform: translateY(-1px);
}

.sm-ct-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(74,178,241,.1);
  border: 1px solid rgba(74,178,241,.22);
  color: var(--accent);
}

.sm-ct-ico svg { width: 18px; height: 18px; }

.sm-ct-item-text { min-width: 0; }

.sm-ct-item-text strong {
  display: block;
  color: #e6edf3;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 3px;
}

.sm-ct-item-text span {
  display: block;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  /* Long addresses and URLs must wrap rather than widen the rail. */
  overflow-wrap: anywhere;
}

.sm-ct-item-text .val {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
}

/* Company block — rendered only when the store actually has the details. */
.sm-ct-org {
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.sm-ct-org h3 {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin: 0 0 10px;
}

.sm-ct-org p {
  margin: 0 0 4px;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.6;
}

.sm-ct-org p.name { color: #e6edf3; font-weight: 600; }

/* ------------------------------------------------------------- TOPIC ------ */
/* Admin-editable intro, from the "ContactUs" topic. The stock theme gives
   .topic-block a border and margins, so an EMPTY topic rendered as two stray
   horizontal rules above the form. Strip the chrome: with no content this now
   occupies no space, and with content it inherits the card styling below. */
.sm-contact .topic-block {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.sm-contact .topic-block:not(:empty) { margin-bottom: 22px; }

.sm-contact .topic-block-title h2 {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  text-transform: none;
  letter-spacing: -.01em;
}

.sm-contact .topic-block p {
  color: var(--text-dim);
  font-size: 14.5px;
  margin: 0 0 10px;
}

.sm-contact .topic-block a { color: var(--accent); text-decoration: underline; }

/* ---------------------------------------------------------- RESPONSIVE ---- */
@media (max-width: 940px) {
  .sm-ct-body {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 34px 20px 70px;
  }
}

@media (max-width: 640px) {
  .sm-ct-hero { padding: 38px 20px 32px; }
  .sm-ct-card { padding: 22px 20px 24px; }
  .sm-contact .button-1.contact-us-button { width: 100%; }
}

/* The captcha iframe is 304px wide and cannot be reflowed; scale it down on the
   narrowest screens so it never forces a horizontal scrollbar on the page. */
@media (max-width: 380px) {
  .sm-contact .captcha-box {
    transform: scale(.88);
    transform-origin: left top;
  }
}