/* =========================================================
   Contact Us (contact/index) — Satphone dark theme.
   Two-column split mirroring the Sign In page (no radar beacon):
     Left  = "CONTACT / US" hero + orange divider + return-home button.
     Right = name, email, telephone, message + Submit button.
   Reuses the global --spc-* tokens from cart-drawer.css.
   ========================================================= */

.contact-index-index .page-wrapper {
  padding-top: 74px; min-height: 100vh; box-sizing: border-box;
  background: var(--spc-bg); color: var(--spc-fg);
}

/* ---------- Full-viewport grid at page-main ---------- */
.contact-index-index .page-main {
  max-width: none; width: 100%; margin: 0; padding: 0; color: var(--spc-fg);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
  min-height: calc(100vh - 74px);
}
.contact-index-index .page-main > a { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.contact-index-index .page-main > .page.messages,
.contact-index-index .page-main > .messages { grid-row: 1; grid-column: 1 / -1; margin: 0; }

/* ---------- LEFT: title hero (no radar) ---------- */
.contact-index-index .page-title-wrapper {
  grid-row: 2; grid-column: 1; margin: 0; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 3rem clamp(2rem, 6vw, 6rem);
}
.contact-index-index .page-title-wrapper .sp-login-hero {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.contact-index-index .page-title-wrapper .page-title {
  margin: 0; color: var(--spc-fg);
  font-family: 'Barlow', system-ui, sans-serif; text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 56px); font-weight: 600; letter-spacing: 2px; line-height: 1;
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 16px;
}
.contact-index-index .page-title-wrapper .page-title .sp-title-word { display: block; }
.contact-index-index .page-title-wrapper .page-title::after {
  content: ''; display: block; width: 88px; height: 4px; margin-top: 0; background: var(--spc-accent);
}

/* ---------- Return-home button under the divider ---------- */
.contact-index-index .page-title-wrapper .sp-return-home {
  margin-top: 2rem; align-self: flex-start; width: auto;
}
.contact-index-index .sp-return-home .sp-btn-arrow {
  font-size: 1.05em; line-height: 0; transition: transform .18s ease;
}
.contact-index-index .sp-return-home:hover .sp-btn-arrow { transform: translate(-2px, 0); }

/* ---------- RIGHT: form column ---------- */
.contact-index-index .page-main > .columns {
  grid-row: 2; grid-column: 2; min-width: 0; box-sizing: border-box;
  border-left: 1px solid var(--spc-line);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 3rem clamp(1.5rem, 4vw, 4rem);
}
.contact-index-index .columns,
.contact-index-index .column.main { max-width: none; width: 100%; margin: 0; padding: 0; }
.contact-index-index .column.main {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.contact-index-index .form.contact {
  display: flex; flex-direction: column;
  width: 100% !important; max-width: 520px !important; min-width: 0 !important;
  margin: 0 auto;
}

/* ---------- Fieldset ---------- */
.contact-index-index .fieldset { border: 0; margin: 0; padding: 0; }
.contact-index-index .fieldset > .legend,
.contact-index-index .fieldset > br,
.contact-index-index .field.note { display: none; }
.contact-index-index .fieldset[data-hasrequired]::after { display: none !important; content: none !important; }

/* ---------- Fields (labels hidden, placeholders shown) ---------- */
.contact-index-index .fieldset > .field { margin: 0 0 1rem; }
.contact-index-index .field > .label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); /* a11y-only */
}
.contact-index-index .field .control { width: 100%; position: relative; }
.contact-index-index .fieldset > .field > .control { width: 100% !important; }
.contact-index-index input[type="text"],
.contact-index-index input[type="email"],
.contact-index-index input[type="tel"] {
  width: 100%; height: 50px; box-sizing: border-box;
  background: var(--spc-bg-2); color: var(--spc-fg);
  border: 1px solid var(--spc-line); border-radius: 0; box-shadow: none;
  padding: 0 14px; font-size: .95rem;
}
.contact-index-index textarea {
  width: 100%; box-sizing: border-box; min-height: 140px; resize: vertical;
  background: var(--spc-bg-2); color: var(--spc-fg);
  border: 1px solid var(--spc-line); border-radius: 0; box-shadow: none;
  padding: 12px 14px; font-size: .95rem; font-family: inherit; line-height: 1.5;
}
.contact-index-index input:focus,
.contact-index-index textarea:focus { border-color: var(--spc-accent); outline: 0; box-shadow: none; }
.contact-index-index input::placeholder,
.contact-index-index textarea::placeholder { color: var(--spc-muted); }
.contact-index-index .field-tooltip { display: none; }
.contact-index-index div.mage-error { color: #f2a49c; font-size: .8rem; margin-top: 8px; }

/* ---------- First / Last name row ---------- */
.contact-index-index .sp-field-row { display: flex; gap: 8px; }
.contact-index-index .sp-field-row > .field { flex: 1 1 0; min-width: 0; margin: 0 0 1rem; }

/* ---------- Helper note beneath a field ---------- */
.contact-index-index .sp-field-note {
  margin: 8px 0 0; color: var(--spc-muted);
  font-size: .78rem; line-height: 1.5; letter-spacing: .01em;
}

/* ---------- Inquiry Type select ---------- */
.contact-index-index select.sp-select {
  width: 100%; height: 50px; box-sizing: border-box;
  background: var(--spc-bg-2); color: var(--spc-fg);
  border: 1px solid var(--spc-line); border-radius: 0; box-shadow: none;
  padding: 0 40px 0 14px; font-size: .95rem; font-family: inherit;
  appearance: none; -webkit-appearance: none;
  /* chevron drawn inline so no extra asset request */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238da2be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  cursor: pointer;
}
.contact-index-index select.sp-select:focus { border-color: var(--spc-accent); outline: 0; box-shadow: none; }
/* native dropdown list follows the OS, so keep the options legible on both */
.contact-index-index select.sp-select option { background: var(--spc-bg-2); color: var(--spc-fg); }

/* ---------- Attachment drop zone ---------- */
.contact-index-index .sp-dropzone {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 96px; padding: 18px 16px; box-sizing: border-box; text-align: center;
  background: var(--spc-bg-2); color: var(--spc-muted);
  border: 1px dashed var(--spc-line); border-radius: 0;
  font-size: .88rem; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.contact-index-index .sp-dropzone:hover { border-color: var(--spc-accent); color: var(--spc-fg); }
.contact-index-index .sp-dropzone.is-dragover {
  border-color: var(--spc-accent); color: var(--spc-fg);
  background: color-mix(in srgb, var(--spc-accent) 8%, var(--spc-bg-2));
}
.contact-index-index .sp-dropzone.has-file { border-style: solid; border-color: var(--spc-accent); color: var(--spc-fg); }
.contact-index-index .sp-dropzone.has-error { border-color: #f2544e; color: #f2a49c; }
/* the real input covers the zone so click + native drop both work */
.contact-index-index .sp-dropzone-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.contact-index-index .sp-dropzone-browse {
  color: var(--spc-accent); text-decoration: underline; text-underline-offset: 3px;
}
.contact-index-index .sp-dropzone-file { display: inline-flex; align-items: center; gap: .5em; }
.contact-index-index .sp-dropzone-clear {
  position: relative; z-index: 1; /* above the file input so it stays clickable */
  background: none; border: 0; padding: 0 0 0 .25em; margin: 0;
  color: var(--spc-muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.contact-index-index .sp-dropzone-clear:hover { color: var(--spc-accent); }

/* ---------- CAPTCHA: [code input][image] row ----------
   The captcha widget binds its reload button by delegation on
   #captcha-container-<formId> and refreshes .captcha-img via find() inside that
   same element, so both must stay where Magento put them. The image is styled
   into the row in place, and the visible reload control next to Submit is a
   proxy that clicks this (hidden) original. */
.contact-index-index .fieldset > .field.captcha { margin: 0 0 1rem; }
.contact-index-index .field.captcha > .label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.contact-index-index .control.captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* jQuery validate inserts the error straight after the input, which would wedge
   it between the code field and the image — send it full-width onto its own row
   so it reads beneath the fields like every other error on the page.
   Must be div.mage-error: validation also puts .mage-error on the input itself,
   and matching that would blow the row apart. */
.contact-index-index .control.captcha > div.mage-error {
  flex: 0 0 100%; order: 9; margin-top: 0; /* the 8px row-gap already spaces it */
}
/* explicit halves: a zero flex-basis still gets the input's padding + border added
   on top, which would make the code field ~30px wider than the image */
.contact-index-index .control.captcha > input { flex: 0 0 calc(50% - 4px); min-width: 0; }
.contact-index-index .control.captcha .nested { flex: 0 0 calc(50% - 4px); min-width: 0; }
.contact-index-index .field.captcha.no-label { margin: 0; }
/* margin-top:0 clears styles-m.css's `.control.captcha-image { margin-top: 10px }`,
   which otherwise pads this container to 60px and drops the image 5px below the
   code input (a flex item is a BFC, so the margin can't collapse away) */
.contact-index-index .control.captcha-image { display: block; width: 100%; margin-top: 0; }
.contact-index-index .captcha-img {
  display: block; width: 100%; height: 50px; object-fit: cover;
  border: 1px solid var(--spc-line); background: var(--spc-bg-2);
}
/* styles-l.css sets `.control.captcha-image .captcha-img { margin: 0 10px 10px 0 }`
   at the same specificity as the rule above AND loads after this file, so the
   selector depth has to be matched to clear those margins. */
.contact-index-index .control.captcha-image .captcha-img { margin-right: 0; margin-bottom: 0; }
.contact-index-index .control.captcha-image .captcha-reload { display: none !important; }
.contact-index-index .captcha-note { display: none; }
.contact-index-index .field.captcha.no-label.refreshing { opacity: .6; }

/* reload icon spins a little on hover, mirroring the arrow nudge on other buttons */
.contact-index-index .sp-reload-ico { font-size: 1.05em; line-height: 0; transition: transform .25s ease; }
.contact-index-index .sp-captcha-reload:hover .sp-reload-ico { transform: rotate(90deg); }

/* ---------- Actions row: [submit][reload] 50/50 ---------- */
.contact-index-index .actions-toolbar {
  display: flex; align-items: center; gap: 8px; margin: 0 !important;
}
.contact-index-index .actions-toolbar::before,
.contact-index-index .actions-toolbar::after { display: none !important; }
/* flatten the .primary wrapper so the button is a direct flex child and fills the row */
.contact-index-index .actions-toolbar .primary { display: contents; }
.contact-index-index .actions-toolbar .secondary { display: none; }
/* Exact halves: 520 container - 8px gap = 512, so 256 each.
   A zero flex-basis won't do it — Chrome adds each button's padding + border on
   top, and the submit carries 15px padding against the reload's 16px. And
   margin-right:0 clears Magento's stray 5px on the submit, which otherwise
   stacks on the toolbar gap (13px visual instead of 8px). */
.contact-index-index .actions-toolbar .action.submit {
  flex: 0 0 calc(50% - 4px); width: auto; min-width: 0; margin-right: 0;
}
.contact-index-index .actions-toolbar .sp-captcha-reload {
  flex: 0 0 calc(50% - 4px); min-width: 0;
}

/* ---------- Responsive: stack ---------- */
@media (max-width: 860px) {
  .contact-index-index .page-main { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .contact-index-index .page-main > .page-title-wrapper {
    grid-row: auto; grid-column: 1; padding: 2.5rem 1.5rem 1.25rem;
  }
  .contact-index-index .page-main > .columns {
    grid-row: auto; grid-column: 1; border-left: 0; border-top: 1px solid var(--spc-line);
    padding: 2rem 1.5rem 3rem;
  }
  .contact-index-index .form.contact { max-width: none !important; }
}