/* ============================================================
   Manar Studios: forms (Careers and Contact us).
   One set of fields for both. The page sets the colours through
   the --f-* variables: dark glass on Careers, white on Contact.
   The behaviour is in forms.js.
   ============================================================ */

.form{
  --f-ink:currentColor;
  --f-field:rgba(255,255,255,.05);
  --f-field-hover:rgba(255,255,255,.08);
  --f-edge:rgba(255,255,255,.1);
  --f-btn:#ECE9E3; --f-btn-ink:#121316;
  --f-ring:var(--blue);
  margin:0 auto; width:100%; max-width:620px;
  display:grid; grid-template-columns:1fr 1fr; gap:26px 18px;
  text-align:left;
}
.form > .field, .form > .choices, .form > .form__foot{ grid-column:1 / -1; }
.form > .field--half{ grid-column:auto; }
.form[hidden], .form__error[hidden]{ display:none; }

/* the honeypot: people never see it, bots fill it in */
.form__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.field{ display:flex; flex-direction:column; gap:10px; min-width:0; margin:0; padding:0; border:0; }
.field[hidden]{ display:none; }
.field__label, .field legend{
  padding:0; font-size:.94rem; font-weight:500; letter-spacing:-.005em; color:var(--f-ink);
  display:flex; justify-content:space-between; gap:12px;
}
.field__opt{ font-weight:300; }

.input{
  width:100%; min-width:0;
  padding:15px 18px; border:0; border-radius:14px;
  font:inherit; font-size:1rem; font-weight:400; letter-spacing:-.01em; color:var(--f-ink);
  background:var(--f-field);
  box-shadow:0 0 0 1px var(--f-edge) inset;
  transition:background .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.input::placeholder{ color:var(--f-ink); opacity:.4; }
.input:hover{ background:var(--f-field-hover); }
.input:focus{ outline:none; box-shadow:0 0 0 2px var(--f-ring) inset; }
.input:user-invalid{ box-shadow:0 0 0 1.5px #E5484D inset; }
textarea.input{ min-height:150px; resize:vertical; line-height:1.55; }
/* the native date control, calmed down to match */
.input[type="date"]{ min-height:52px; }
.input::-webkit-calendar-picker-indicator{ opacity:.6; cursor:pointer; }

/* ── yes / no: two soft pills, one chosen ── */
.choice{ display:inline-flex; gap:8px; }
.choice label{ position:relative; cursor:pointer; }
.choice input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.choice span{
  display:inline-flex; align-items:center; justify-content:center; min-width:84px;
  padding:12px 22px; border-radius:999px;
  font-size:.96rem; font-weight:400; color:var(--f-ink);
  background:var(--f-field); box-shadow:0 0 0 1px var(--f-edge) inset;
  transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.choice label:hover span{ background:var(--f-field-hover); }
.choice input:checked + span{ background:var(--f-btn); color:var(--f-btn-ink); box-shadow:none; font-weight:500; }
.choice input:focus-visible + span{ box-shadow:0 0 0 2px var(--f-ring); }
/* two yes/no questions share a row on wide screens */
.choices{ display:grid; grid-template-columns:1fr 1fr; gap:26px 18px; }

/* ── files: the real input sits invisibly over a quiet button ── */
.file{
  position:relative; display:flex; align-items:center; gap:16px;
  padding:10px 10px 10px 10px; border-radius:14px;
  background:var(--f-field); box-shadow:0 0 0 1px var(--f-edge) inset;
  transition:background .25s var(--ease), box-shadow .25s var(--ease);
}
.file:hover{ background:var(--f-field-hover); }
.file:focus-within{ box-shadow:0 0 0 2px var(--f-ring) inset; }
.file.is-bad{ box-shadow:0 0 0 1.5px #E5484D inset; }
.file input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.file__button{
  flex:none; padding:10px 18px; border-radius:10px;
  font-size:.92rem; font-weight:500; color:var(--f-btn-ink); background:var(--f-btn);
}
.file__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.95rem; font-weight:300; }
.file__hint{ margin:0; font-size:.86rem; font-weight:300; }

/* ── send ── */
.form__foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:10px; }
.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px; border:0; border-radius:999px; cursor:pointer;
  font:inherit; font-size:1rem; font-weight:500; letter-spacing:-.01em;
  color:var(--f-btn-ink); background:var(--f-btn);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.button:hover{ transform:translateY(-1px); }
.button:active{ transform:none; }
.button:disabled{ opacity:.55; cursor:progress; transform:none; }
.form__error{ margin:0; font-size:.94rem; font-weight:400; }

/* ── the thank-you that replaces the form ── */
.done{ margin:0; outline:none; }
.done[hidden]{ display:none; }
.done p{ margin:0; max-width:32em; font-size:clamp(1.1rem, 1.4vw, 1.25rem); font-weight:400; line-height:1.55; letter-spacing:-.012em; }
.done.is-in{ animation:done-in 1.2s var(--ease) both; }
@keyframes done-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@media (max-width: 640px){
  .form, .choices{ grid-template-columns:1fr; }
  .form > .field--half{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion: reduce){
  .input,.choice span,.file,.button{ transition:none; }
  .done.is-in{ animation:none; }
}