/* ──────────────────────────────────────────────────────────────────────────
   1000ants — Support page styles
   Built only on the :root tokens from style.css. Load AFTER pages.css.
   ────────────────────────────────────────────────────────────────────────── */

/* Status pill in the hero */
.sup-status{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:28px;padding:8px 16px;border-radius:100px;
  border:1px solid var(--border);background:var(--white);
  font-size:13px;color:var(--muted);font-weight:500;
}
.sup-status-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:pulse 2s infinite;
}
.sup-status-stamp{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--muted-2);letter-spacing:.04em;
}

/* FAQ search + category chips
   NOTE: every interactive element on this page is armoured with !important
   against the Hello Elementor parent theme / Elementor button + form styles,
   exactly like the .faq-q fix at the bottom of style.css. */
.sup-search{position:relative;margin-top:36px}
.sup-search svg{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted-2);pointer-events:none;z-index:2;
}
.a1000-landing .sup-search-input,
.sup-search-input{
  width:100% !important;
  padding:15px 18px 15px 48px !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  background:var(--white) !important;
  font-family:'DM Sans',sans-serif !important;
  font-size:16px !important;color:var(--ink) !important;
  outline:none !important;box-shadow:none !important;
  transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
.a1000-landing .sup-search-input:focus,
.sup-search-input:focus{
  border-color:var(--blue) !important;
  box-shadow:0 0 0 4px rgba(0,76,237,0.08) !important;
  outline:none !important;
}
.sup-search-input::-webkit-search-cancel-button{-webkit-appearance:none}

.sup-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.a1000-landing .sup-chip,
.sup-chip{
  display:inline-flex !important;align-items:center !important;
  padding:7px 14px !important;
  border:1px solid var(--border) !important;
  border-radius:99px !important;
  background:var(--white) !important;background-color:var(--white) !important;
  color:var(--muted) !important;
  font-family:'DM Sans',sans-serif !important;font-size:13px !important;font-weight:500 !important;
  line-height:1.4 !important;letter-spacing:normal !important;text-transform:none !important;
  cursor:pointer;transition:all .15s;
  box-shadow:none !important;outline:none !important;
  -webkit-appearance:none;appearance:none;
}
.a1000-landing .sup-chip:hover,
.sup-chip:hover{
  border-color:var(--blue-border) !important;color:var(--blue) !important;
  background:var(--white) !important;background-color:var(--white) !important;
}
.a1000-landing .sup-chip:focus,
.a1000-landing .sup-chip:focus-visible,
.a1000-landing .sup-chip:active,
.sup-chip:focus,.sup-chip:focus-visible,.sup-chip:active{
  outline:none !important;box-shadow:none !important;
}
.a1000-landing .sup-chip.is-active,
.sup-chip.is-active{
  background:var(--blue-pale) !important;background-color:var(--blue-pale) !important;
  border-color:var(--blue-border) !important;color:var(--blue) !important;
}

/* FAQ row: small category label above the question */
.faq .faq-list .sup-q-body{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
.sup-q-cat{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--muted-2);font-weight:500;
}
.sup-empty{
  display:none;margin-top:32px;font-size:15px;color:var(--muted);line-height:1.75;
}

/* ── CONTACT ───────────────────────────────────────────────────────────────*/
.sup-contact{background:var(--white);padding:100px 2rem;scroll-margin-top:80px}
.sup-contact-inner{max-width:820px;margin:0 auto}
.sup-contact .section-sub{margin-top:20px}

.sup-form{
  margin-top:40px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:36px;
  display:flex;flex-direction:column;gap:20px;
}
.sup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sup-field{display:flex;flex-direction:column;gap:8px}
.sup-label{font-size:13px;font-weight:600;color:var(--ink-3)}
.sup-req{color:var(--blue)}
.sup-opt{color:var(--muted-2);font-weight:400}

.a1000-landing .sup-form input[type=text],
.a1000-landing .sup-form input[type=email],
.a1000-landing .sup-form input[type=tel],
.a1000-landing .sup-form select,
.a1000-landing .sup-form textarea,
.sup-form input[type=text],
.sup-form input[type=email],
.sup-form input[type=tel],
.sup-form select,
.sup-form textarea{
  width:100% !important;padding:13px 15px !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  background:var(--white) !important;background-color:var(--white) !important;
  font-family:'DM Sans',sans-serif !important;font-size:15px !important;color:var(--ink) !important;
  outline:none !important;box-shadow:none !important;
  transition:border-color .15s, box-shadow .15s;
}
.a1000-landing .sup-form textarea,
.sup-form textarea{padding:14px 15px !important;line-height:1.6 !important;resize:vertical}
.a1000-landing .sup-form input:focus,
.a1000-landing .sup-form select:focus,
.a1000-landing .sup-form textarea:focus,
.sup-form input:focus,
.sup-form select:focus,
.sup-form textarea:focus{
  border-color:var(--blue) !important;
  box-shadow:0 0 0 4px rgba(0,76,237,0.08) !important;
  outline:none !important;
}
.a1000-landing .sup-select,
.sup-select{
  appearance:none !important;-webkit-appearance:none !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7590' stroke-width='2' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat:no-repeat !important;background-position:right 14px center !important;background-size:16px !important;
}

/* Urgency segmented control */
.sup-seg{
  display:flex;gap:6px;padding:4px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
}
.a1000-landing .sup-seg button,
.sup-seg button{
  flex:1 !important;padding:9px 6px !important;
  border:none !important;border-radius:7px !important;
  background:transparent !important;background-color:transparent !important;
  font-family:'DM Sans',sans-serif !important;font-size:13px !important;font-weight:500 !important;
  line-height:1.4 !important;letter-spacing:normal !important;text-transform:none !important;
  color:var(--muted) !important;
  cursor:pointer;transition:all .15s;
  box-shadow:none !important;outline:none !important;
  -webkit-appearance:none;appearance:none;
}
.a1000-landing .sup-seg button:hover,
.sup-seg button:hover{
  color:var(--blue) !important;
  background:transparent !important;background-color:transparent !important;
}
.a1000-landing .sup-seg button:focus,
.a1000-landing .sup-seg button:focus-visible,
.a1000-landing .sup-seg button:active,
.sup-seg button:focus,.sup-seg button:focus-visible,.sup-seg button:active{
  outline:none !important;box-shadow:none !important;
}
.a1000-landing .sup-seg button.is-active,
.sup-seg button.is-active{
  background:var(--white) !important;background-color:var(--white) !important;
  color:var(--blue) !important;
  box-shadow:0 1px 3px rgba(10,15,30,0.10) !important;
}

/* Screenshot dropzone */
.sup-file{
  display:flex;align-items:center;gap:14px;padding:16px;
  border:1px dashed var(--border-2);border-radius:var(--radius);background:var(--white);
  cursor:pointer;transition:border-color .15s;
}
.sup-file:hover{border-color:var(--blue)}
.sup-file-icon{
  width:36px;height:36px;border-radius:9px;background:var(--blue-pale);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue);
}
.sup-file-icon svg{width:18px;height:18px}
.sup-file-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.sup-file-name{font-size:14px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.sup-file-hint{font-size:12.5px;color:var(--muted-2)}
.sup-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* Consent + actions */
.sup-consent{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.a1000-landing .sup-consent input[type=checkbox],
.sup-consent input[type=checkbox]{
  width:16px !important;height:16px !important;margin-top:3px !important;
  accent-color:var(--blue);flex-shrink:0;
  box-shadow:none !important;outline:none !important;
}
.sup-consent span{font-size:13.5px;color:var(--muted);line-height:1.6}
.sup-consent a{color:var(--blue);font-weight:500}
.sup-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:4px}

/* Honeypot — must stay invisible but focusable-free */
.sup-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Success state */
.sup-success{
  margin-top:40px;border:1px solid var(--blue-border);
  background:linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
  border-radius:var(--radius-xl);padding:48px;
  display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;
}
.sup-success-icon{
  width:56px;height:56px;border-radius:50%;background:var(--green-light);
  display:flex;align-items:center;justify-content:center;color:var(--green);
}
.sup-success-icon svg{width:26px;height:26px}
.sup-success-title{
  font-size:28px;font-weight:600;letter-spacing:-0.8px;line-height:1.25;
  color:var(--ink);max-width:560px;
}
.sup-success p{font-size:15px;color:var(--muted);line-height:1.7;max-width:520px}
.sup-success a{color:var(--blue);font-weight:500}

@media(max-width:640px){
  .sup-grid{grid-template-columns:1fr}
  .sup-form{padding:24px}
  .sup-contact{padding:80px 1rem}
  .sup-success{padding:32px 24px}
}