/* ==========================================================================
   CONTACT (Local)
   Glass-morph, modern classy, aligned to Dexxtra vibe.
   Nav/Header is GLOBAL so this file contains NO top bar / brand / nav styling.
   ========================================================================== */

   

/* If your global :root already defines tokens, you can delete this entire :root.
   Keeping here for concept parity. */
:root{
  --bg:#050509;
  --fg:#F5F5F7;
  --muted:rgba(245,245,247,.72);
  --muted2:rgba(245,245,247,.52);
  --line:rgba(245,245,247,.12);
  --line2:rgba(245,245,247,.18);
  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --r: 22px;

  --gold:#E8C68B;
  --gold2: rgba(232,198,139,.18);
  --good: rgba(95, 255, 190, .16);
  --bad: rgba(255, 115, 115, .14);

  --max: 1120px;
  
}


/* 1) Make sure the field container is NOT pointer */
#contactForm .field,
#contactForm .field-title,
#contactForm .help{
  cursor: default;
}

/* 2) Inputs behave like inputs */
#contactForm input,
#contactForm textarea{
  cursor: text;
}

/* 2a) Override: checkboxes + radios are clickable, not text */
#contactForm input[type="checkbox"],
#contactForm input[type="radio"]{
  cursor: pointer;
}

/* 3) Only the dropdown itself becomes pointer */
#contactForm select{
  cursor: pointer;
}

body.dex-contact{
  min-height: 100vh;
}

body.dex-contact{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  overflow-x:hidden;
}

/* Background */
.bg{
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(1200px 700px at 70% 10%, rgba(232,198,139,.12), transparent 60%),
    radial-gradient(900px 500px at 20% 30%, rgba(175,199,227,.10), transparent 62%),
    radial-gradient(1100px 800px at 50% 90%, rgba(80,130,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(5,5,9,.65), rgba(5,5,9,.95));
}
.bg-grid{
  position:absolute; inset:0;
  opacity:.12;
  background-image:
    linear-gradient(to right, rgba(245,245,247,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,245,247,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(900px 500px at 50% 30%, black 35%, transparent 70%);
}
.bg-vignette{
  position:absolute; inset:-30%;
  background: radial-gradient(circle at 50% 35%, transparent 35%, rgba(0,0,0,.65) 75%);
  filter: blur(18px);
}


/* Layout */
.shell{
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 18px 50px;
  display:flex;
  flex-direction:column;
  gap: 18px;

  /* push the whole page down under the CONTACT pill */
  padding-top: clamp(34px, 6vh, 64px);
}


.glass{
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(245,245,247,.12);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
/* Hero (scoped + hardened against global collisions) */
body.dex-contact .hero{
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 16px;
  align-items: start;

  height: auto;
  min-height: 0;
}

body.dex-contact .hero h1{
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.3px;
  line-height: 1.08;
}

body.dex-contact .muted{
  color: var(--muted);
}

body.dex-contact .hero-left p{
  margin: 10px 0 0;
  line-height: 1.55;
}

body.dex-contact .hero-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;

  height: auto;
  min-height: 0;
}



/* Desktop only: push meta pills down */
@media (min-width: 981px){
  body.dex-contact .hero-meta{
    margin-top: 130px; /* was 14 */
  }
}

body.dex-contact .pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245,245,247,.14);
  background: rgba(5,5,9,.35);
  font-size: 12px;
  line-height: 1.2;

  height: auto;
  min-height: 0;
}




.pill b{ color: var(--fg); font-weight: 650; }

.lane-picker{ display:flex; flex-direction:column; gap: 8px; }
.label{ font-size: 12px; color: var(--muted2); }
.select-wrap{ position:relative; }
.select{
  width: 100%;
  appearance:none;
  background: rgba(5,5,9,.45);
  color: var(--fg);
  border: 1px solid rgba(245,245,247,.16);
  border-radius: 14px;
  padding: 12px 42px 12px 12px;
  font-size: 14px;
  outline:none;
}
.select:focus{
  border-color: rgba(232,198,139,.55);
  box-shadow: 0 0 0 5px rgba(232,198,139,.12);
}
.chev{
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(245,245,247,.62);
  pointer-events:none;
}
.lane-intro{ font-size: 13px; line-height: 1.4; }

.select-wrap,
.select-wrap .select,
.select-wrap .chev {
  cursor: pointer;
}

/* Whole pill becomes the click target */
.option-row .chip{
  cursor: pointer;
  user-select: none;
}

/* Make sure nothing inside flips you back to I-beam */
.option-row .chip *{
  cursor: pointer;
}

/* Optional: if your checkbox has weird spacing */
.option-row .chip input[type="checkbox"]{
  cursor: pointer;
}

.draft-toast{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(20,20,22,.92);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-size: 14px;
  line-height: 1.35;
}

.security-note{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(232,198,139,.18);
  background: rgba(232,198,139,.06);
  padding: 12px 12px;
}
.sec-title{ font-weight: 650; font-size: 13px; }
.sec-body{ margin-top: 6px; font-size: 12.5px; line-height: 1.4; }

/* Form */
.form-wrap{ padding: 18px 18px; }
.form-head{ display:flex; flex-direction:column; gap: 6px; margin-bottom: 10px; }
.form-head h2{ margin:0; font-size: 22px; letter-spacing:-.2px; }
.form-head p{ margin:0; }

.fields{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.field[data-field-id="environment"] .subfields{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: grid;
  gap: 12px;
}

.field{
  display:flex;
  flex-direction:column;
  gap: 7px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(245,245,247,.10);
  background: rgba(5,5,9,.30);
}
.field.full{ grid-column: 1 / -1; }
.field.compact{ padding: 10px 12px; }
.field-title{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; }
.field-title .name{ font-weight: 650; font-size: 13px; }
.field-title .req{ font-size: 11px; color: rgba(232,198,139,.9); }
.help{ font-size: 12px; color: var(--muted2); line-height: 1.35; }

.input, .textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(245,245,247,.14);
  background: rgba(5,5,9,.45);
  color: var(--fg);
  padding: 11px 12px;
  font-size: 14px;
  outline:none;
}
.textarea{ min-height: 112px; resize: vertical; }
.input:focus, .textarea:focus{
  border-color: rgba(232,198,139,.55);
  box-shadow: 0 0 0 5px rgba(232,198,139,.12);
}

.option-row{ display:flex; flex-wrap:wrap; gap: 8px; }
.chip{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245,245,247,.14);
  background: rgba(5,5,9,.35);
  font-size: 13px;
  user-select:none;
}
.chip input{ accent-color: var(--gold); }

.divider{
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(245,245,247,.10);
  margin: 8px 0;
  border-radius: 999px;
}

.note{
  grid-column: 1 / -1;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(245,245,247,.10);
  background: rgba(232,198,139,.05);
}
.note b{ color: var(--fg); }
.note .muted{ color: rgba(245,245,247,.72); }

/* Package cards */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.card{
  position:relative;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(245,245,247,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(5,5,9,.22));
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  min-height: 170px;
}
.card:hover{ transform: translateY(-1px); border-color: rgba(232,198,139,.26); }
.card.selected{
  border-color: rgba(232,198,139,.62);
  box-shadow: 0 0 0 6px rgba(232,198,139,.11), var(--shadow);
}
.card input{ position:absolute; opacity:0; pointer-events:none; }
.card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap: 10px; }
.card-name{ font-weight: 750; font-size: 16px; letter-spacing:.1px; }
.card-price{ font-weight: 750; color: rgba(232,198,139,.95); }
.card-tag{ margin-top: 4px; font-size: 12px; color: var(--muted); font-style: italic; }
.card-desc{ margin-top: 10px; font-size: 12.5px; color: rgba(245,245,247,.74); line-height: 1.4; }
.card-chips{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 12px; }
.card-chip{
  font-size: 11px;
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(245,245,247,.14);
  background: rgba(5,5,9,.35);
  color: rgba(245,245,247,.8);
}

/* Actions */
.actions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
}
.btn{
  border: 1px solid rgba(245,245,247,.16);
  background: rgba(5,5,9,.35);
  color: var(--fg);
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 650;
  letter-spacing:.15px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.btn:hover{ border-color: rgba(232,198,139,.28); }
.btn.primary{
  border-color: rgba(232,198,139,.58);
  background: rgba(232,198,139,.10);
}
.btn.ghost{ background: rgba(5,5,9,.22); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn-spinner{
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(245,245,247,.25);
  border-top-color: rgba(232,198,139,.85);
  display:none;
  animation: spin .9s linear infinite;
}
.btn.loading .btn-spinner{ display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.actions-meta{ font-size: 12px; }

#resetBtn.armed{
  box-shadow: 0 0 0 1px rgba(232,198,139,.55), 0 0 18px rgba(232,198,139,.22);
}

/* Honeypot hidden */
.hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Result */
.result{ margin-top: 14px; }
.result-card{
  border-radius: 18px;
  border: 1px solid rgba(232,198,139,.20);
  background: rgba(232,198,139,.06);
  padding: 14px 14px;
}
.result-title{ font-weight: 800; }
.result-text{ margin-top: 6px; font-size: 13px; line-height:1.4; }
.result-actions{ margin-top: 12px; display:flex; gap: 10px; flex-wrap:wrap; }

.foot{ font-size: 12px; text-align:center; padding: 8px 0 0; }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .fields{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
}


/* ==========================================================================
   MOBILE PATCH (Top / Hero)
   Purpose: stop overlap, stack clean, make pills + lane picker behave.
   Drop this at the very bottom of contact local css so it wins.
   ========================================================================== */

@media (max-width: 520px){

  /* Give the whole page a little breathing room on mobile */
  body.dex-contact .shell{
    padding-top: 14px;
  }

  /* Force hero to single column and tighten spacing */
  body.dex-contact .hero{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  /* Keep header copy from getting too huge on small screens */
  body.dex-contact .hero h1{
    font-size: 28px;
    line-height: 1.06;
  }

  /* Make meta pills wrap clean and never overflow */
  body.dex-contact .hero-meta{
    gap: 8px;
  }
  body.dex-contact .pill{
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }

  /* Lane picker: full width, no weird compression */
  body.dex-contact .lane-picker{
    width: 100%;
  }
  body.dex-contact .select{
    width: 100%;
  }

  /* Security note: keep it from collapsing or overlaying */
  body.dex-contact .security-note{
    margin-top: 10px;
  }

  /* If any global styles are forcing weird positioning, neutralize it here */
  body.dex-contact .hero-left,
  body.dex-contact .hero-right{
    min-width: 0;
  }
}

@media (max-width: 520px){
  body.dex-contact .shell{
    padding-top: 60px;
  }
}