/* Quronic — Contact Us page (v1.7.3)
   Loaded only on the [quronic_contact] page. Sits inside the existing
   .qrn-account-page shell (quronic-account.css) for the outer chrome
   (back link, background, theme colours) and defines its own
   .qrn-contact-* classes for the intro + form so it can never collide
   with styles from any other page. */

.qrn-contact{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;
  margin-top:12px;
}
@media (max-width:900px){
  .qrn-contact{grid-template-columns:1fr;gap:32px}
}

.qrn-contact__eyebrow{
  display:inline-block;font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--qrn-acct-page-accent);margin-bottom:16px;
}
.qrn-contact__intro h1{
  font:600 clamp(30px,4.2vw,46px)/1.12 'Space Grotesk',sans-serif;letter-spacing:-.03em;
  margin:0 0 14px;color:var(--qrn-acct-page-text);
}
.qrn-contact__intro h1 em{font-style:normal;color:var(--qrn-acct-page-accent)}
.qrn-contact__intro p{
  margin:0 0 26px;color:var(--qrn-acct-page-muted);font:400 15px/1.7 'Inter',sans-serif;max-width:440px;
}
.qrn-contact__meta{
  display:flex;align-items:baseline;gap:10px;padding:12px 0;
  border-top:1px solid var(--qrn-acct-page-border);
}
.qrn-contact__meta span{
  font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--qrn-acct-page-muted);min-width:56px;
}
.qrn-contact__meta a{
  font:500 14px 'Inter',sans-serif;color:var(--qrn-acct-page-text);text-decoration:none;
}
.qrn-contact__meta a:hover{color:var(--qrn-acct-page-accent)}

.qrn-contact__panel{
  background:var(--qrn-acct-page-bg);border:1px solid var(--qrn-acct-page-border);
  border-radius:18px;padding:32px;position:relative;
}
[data-theme="dark"] .qrn-contact__panel{background:rgba(255,255,255,.02)}

.qrn-contact-form__row{margin-bottom:18px}
.qrn-contact-form__row label{
  display:block;margin-bottom:7px;font:600 11px 'Inter',sans-serif;letter-spacing:.03em;
  text-transform:uppercase;color:var(--qrn-acct-page-muted);
}
.qrn-contact-form__row input,
.qrn-contact-form__row select{
  width:100%;box-sizing:border-box;padding:13px 14px;border-radius:10px;
  border:1px solid var(--qrn-acct-page-border);background:transparent;
  color:var(--qrn-acct-page-text);font:400 14px 'Inter',sans-serif;
  transition:border-color .15s,box-shadow .15s;
}
.qrn-contact-form__row select{cursor:pointer}
/* v1.7.6: the select itself inherits the theme's light text colour, but a
   native <option> list always renders on the browser's own (usually white)
   dropdown surface, not the page background — without this, dark-theme text
   stayed light-on-white and was unreadable. Forces a fixed light
   background + dark text on the option list itself, same pattern already
   used for the enquiry-form dropdowns in quronic-lead-form.css. */
.qrn-contact-form__row select option{background:#fff;color:#14161C}
.qrn-contact-form__row input:focus,
.qrn-contact-form__row select:focus{
  outline:none;border-color:var(--qrn-acct-page-accent);
  box-shadow:0 0 0 3px rgba(184,134,60,.15);
}
.qrn-contact-form__row input::placeholder{color:var(--qrn-acct-page-muted);opacity:.7}
.qrn-contact-form__row.is-invalid input,
.qrn-contact-form__row.is-invalid select{border-color:#C4483A}

/* Honeypot — hidden from real visitors, left in the tab/DOM flow so bots
   that auto-fill every field still get caught. */
.qrn-contact-form__hp{
  position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;
}

.qrn-contact-form__notice{
  margin:0 0 16px;padding:12px 14px;border-radius:10px;font:500 13px/1.5 'Inter',sans-serif;
  background:rgba(196,72,58,.1);border:1px solid rgba(196,72,58,.3);color:#C4483A;
}

.qrn-contact-form__submit{
  width:100%;padding:14px 20px;border:0;border-radius:10px;cursor:pointer;
  background:var(--qrn-acct-page-text);color:var(--qrn-acct-page-bg);
  font:600 14px 'Inter',sans-serif;letter-spacing:.01em;transition:opacity .15s,transform .15s;
}
.qrn-contact-form__submit:hover{opacity:.88}
.qrn-contact-form__submit:active{transform:translateY(1px)}
.qrn-contact-form__submit:disabled{opacity:.6;cursor:progress}

.qrn-contact-form__fineprint{
  margin:14px 0 0;text-align:center;font:400 12px/1.5 'Inter',sans-serif;color:var(--qrn-acct-page-muted);
}

.qrn-contact-form__success{text-align:center;padding:26px 6px}
.qrn-contact-form__success-icon{
  width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  background:var(--qrn-acct-page-accent);color:#14161C;font:700 22px/52px 'Inter',sans-serif;
}
.qrn-contact-form__success h3{
  margin:0 0 8px;font:600 20px 'Space Grotesk',sans-serif;color:var(--qrn-acct-page-text);
}
.qrn-contact-form__success p{margin:0;color:var(--qrn-acct-page-muted);font:400 14px/1.6 'Inter',sans-serif}