/* ══════════════════════════════════════════════════════════
   زاگرس — فرم همکاری با ما (/join)
   Tokens, type and buttons all come from /styles.css; this file
   only adds the form itself. Nothing here redefines a colour —
   every value is one of the site's variables, so the page follows
   the same day/night switch as the rest of the site.
   ══════════════════════════════════════════════════════════ */

.joinpage { background: var(--ground); }

.join { padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5rem); }

/* The form column and the aside stack on phones and sit side by side once
   there is room for a comfortable measure next to them. */
.join__shell {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 60rem) {
  .join__shell { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .join__intro { grid-column: 1 / -1; }
}

.join__intro { max-width: 46ch; }
.join__title {
  margin: .5rem 0 0;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.join__lede { margin: .85rem 0 0; color: var(--muted); line-height: 1.9; }

/* ── Card ───────────────────────────────────────────────── */
.jcard {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, .9rem + 1vw, 1.75rem);
}

.jcard__head {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.4rem;
}
.jprog { display: flex; gap: .3rem; flex: 1; }
.jprog i {
  height: 4px;
  flex: 1;
  border-radius: 99px;
  background: var(--line);
  transition: background .3s ease;
}
.jprog i.is-on { background: var(--accent); }
.jcard__count { font-size: .78rem; font-weight: 700; color: var(--muted); }

/* ── Steps ──────────────────────────────────────────────── */
.jstep { display: none; }
.jstep.is-active { display: block; }
.jstep__t { margin: 0; font-size: 1.2rem; font-weight: 750; }
.jstep__h { margin: .2rem 0 1.35rem; font-size: .86rem; color: var(--muted); line-height: 1.7; }

/* ── Fields ─────────────────────────────────────────────── */
.jf { margin-bottom: 1.05rem; }
.jf > label {
  display: block;
  margin-bottom: .38rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
}
.req { color: #C0453A; }
:root[data-theme='dark'] .req { color: #E0796D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .req { color: #E0796D; }
}

.jrow { display: grid; gap: 0 .7rem; grid-template-columns: 1fr; }
@media (min-width: 26rem) { .jrow { grid-template-columns: 1fr 1fr; } }

/* One ruleset for every control, so a select never sits a pixel off an input
   next to it. */
.jf input[type='text'],
.jf input[type='tel'],
.jf textarea,
.jf select,
.jdate select {
  width: 100%;
  min-height: 2.85rem;
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.6;
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.jf textarea { min-height: 4.6rem; resize: vertical; }
.jf select, .jdate select {
  /* The caret is drawn here rather than left to the OS, which puts it on the
     wrong side in an RTL document on some Android builds. Its grey is fixed
     rather than tokenised — an SVG data URI cannot read a CSS variable — and
     chosen to sit between the two themes' muted shades so it reads on both. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23808f8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 2 4.5 4 4.5-4'/%3E%3C/svg%3E");
  background-size: .7rem .5rem;
  background-position: left .75rem center;
  background-repeat: no-repeat;
  padding-inline-start: 1.9rem;
  cursor: pointer;
}
.jf input:focus,
.jf textarea:focus,
.jf select:focus,
.jdate select:focus,
.jplate:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.jf input::placeholder, .jf textarea::placeholder { color: var(--muted); opacity: .65; }
.jf input[dir='ltr'] { text-align: left; }

.jf.is-bad input,
.jf.is-bad textarea,
.jf.is-bad select,
.jf.is-bad .jdate select,
.jf.is-bad .jplate { border-color: #C0453A; }

.jerr {
  margin: .3rem 0 0;
  font-size: .78rem;
  line-height: 1.6;
  color: #C0453A;
  min-height: 0;
}
.jerr:empty { display: none; }
:root[data-theme='dark'] .jerr { color: #E0796D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .jerr { color: #E0796D; }
}
.jerr--form {
  margin-top: 1rem;
  padding: .7rem .85rem;
  border-radius: 10px;
  background: color-mix(in srgb, #C0453A 10%, transparent);
  font-weight: 600;
}
.jnote { margin: .35rem 0 0; font-size: .76rem; color: var(--muted); line-height: 1.6; }
.jok {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .4rem 0 0;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
}
.jok::before {
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--accent);
  /* The tick is drawn in the mask so it takes the accent from the theme
     instead of being a second colour to keep in step. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7 10 17l-5-5'/%3E%3C/svg%3E") center / .8rem no-repeat,
          linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7 10 17l-5-5'/%3E%3C/svg%3E") center / .8rem no-repeat,
        linear-gradient(#000, #000);
  mask-composite: exclude;
}

/* A proven phone number and its code are both done being edited. */
.jf.is-locked input { opacity: .7; pointer-events: none; }
.jf.is-locked .jbtn { display: none; }

/* ── Jalali date, as three selects ──────────────────────── */
.jdate { display: grid; gap: .35rem; grid-template-columns: 1.05fr 1.35fr .85fr; }
.jdate--ym { grid-template-columns: 1fr 1.4fr; }
.jdate select { padding-inline: 1.55rem .45rem; font-size: .88rem; text-align: center; }

/* ── OTP ────────────────────────────────────────────────── */
.jotp__row { display: flex; gap: .5rem; align-items: stretch; }
.jotp__row input { flex: 1; }
.jotp__row .jbtn { flex: 0 0 auto; margin: 0; min-height: 2.85rem; white-space: nowrap; }
input.jotp {
  text-align: center;
  letter-spacing: .5em;
  font-size: 1.15rem;
  font-weight: 700;
  padding-inline-start: .75rem;
}

/* ── Radio picker ───────────────────────────────────────── */
.jpick { display: grid; gap: .5rem; }
.jpick__opt {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.jpick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.jpick__opt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.jpick__opt:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.jpick__dot {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .28rem;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--raised);
  transition: border-width .15s ease, border-color .15s ease;
}
.jpick__opt.is-on .jpick__dot { border: 5px solid var(--accent); }
.jpick__body b { display: block; font-size: .92rem; font-weight: 700; line-height: 1.6; }
.jpick__body > span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.6; }

/* ── Plate ──────────────────────────────────────────────── */
/* Drawn as the plate itself, the same graphic the admin panel uses, so what
   someone types looks like what they are holding. */
.jplate {
  display: flex;
  align-items: stretch;
  height: 3.1rem;
  max-width: 19rem;
  border: 2px solid #0f172a;
  border-radius: 9px;
  background: #ffffff;
  overflow: hidden;
}
.jplate__ir {
  flex: 0 0 auto;
  width: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  background: linear-gradient(180deg, #124aae, #0b3179);
  color: #fff;
  font-size: .38rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.jplate__flag {
  display: flex;
  flex-direction: column;
  width: .85rem;
  height: .58rem;
  border-radius: 1px;
  overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .5);
}
.jplate__flag i { flex: 1; }
.jplate__flag i:nth-child(1) { background: #239f40; }
.jplate__flag i:nth-child(2) { background: #fff; }
.jplate__flag i:nth-child(3) { background: #da0000; }
.jplate__main {
  flex: 1;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
}
.jplate__region {
  flex: 0 0 auto;
  width: 3.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-inline-start: 2px solid #0f172a;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
}
.jplate__region > span { font-size: .5rem; color: #475569; line-height: 1; }
/* The plate is a white object in both themes — a night-mode license plate is
   not a thing — so its fields keep dark ink on it whatever the page is doing. */
.jplate input,
.jplate select {
  min-height: 0;
  height: 100%;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  cursor: text;
}
.jplate select { cursor: pointer; font-size: 1.05rem; }
.jplate input:focus, .jplate select:focus {
  outline: none;
  background: #fff;
  box-shadow: inset 0 -2px 0 0 rgba(15, 23, 42, .35);
}
.jplate input::placeholder { color: #cbd5e1; font-weight: 400; }
.jplate__main input:first-child { flex: 0 0 4rem; }
.jplate__main select { flex: 0 0 3rem; }
.jplate__main input:last-child { flex: 0 0 4.6rem; }
.jplate__region input { height: auto; font-size: .95rem; }

/* ── Uploads ────────────────────────────────────────────── */
.jup { display: grid; gap: .55rem; }
.jupitem {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.jupitem input[type='file'] { position: absolute; opacity: 0; width: 0; height: 0; }
.jupitem:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.jupitem.is-done {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
.jupitem.is-bad { border-color: #C0453A; border-style: solid; }
.jupitem__ic {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--raised);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  overflow: hidden;
}
.jupitem.is-done .jupitem__ic { color: var(--accent); border-color: transparent; }
.jupitem__ic svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Once a photo is picked, the tile becomes a thumbnail of it — the only
   confirmation that matters is seeing the card you just photographed. */
.jupitem__ic img { width: 100%; height: 100%; object-fit: cover; }
.jupitem__body { min-width: 0; flex: 1; }
.jupitem__body b { display: block; font-size: .87rem; font-weight: 700; line-height: 1.5; }
.jupitem__body span {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jupitem__x { flex: 0 0 auto; font-size: .75rem; font-weight: 700; color: var(--muted); }
.jupitem.is-done .jupitem__x { color: var(--accent); }

/* ── Buttons ────────────────────────────────────────────── */
.jbtn {
  display: block;
  width: 100%;
  margin-top: 1.2rem;
  padding: .85rem 1rem;
  border: 1px solid transparent;
  border-radius: 11px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .18s ease, background .18s ease;
}
.jbtn:hover { transform: translateY(-1px); }
.jbtn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.jbtn--solid { background: var(--accent); color: #fff; }
:root[data-theme='dark'] .jbtn--solid { color: #05201E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .jbtn--solid { color: #05201E; }
}
.jbtn--ghost { background: transparent; border-color: var(--accent); color: var(--accent); }
.jbtn--quiet { margin-top: .55rem; background: transparent; color: var(--muted); font-weight: 600; }
.jbtn--quiet:hover { color: var(--ink); }
/* The «ارسال کد» button sits inside a field row, not under one. */
.jotp__row .jbtn { width: auto; padding-inline: 1rem; font-size: .85rem; }

.jlegal { margin: .9rem 0 0; font-size: .74rem; color: var(--muted); line-height: 1.7; text-align: center; }

/* ── Done ───────────────────────────────────────────────── */
.jdone { text-align: center; }
.jtick {
  width: 3.6rem;
  height: 3.6rem;
  margin: .25rem auto 1rem;
  border-radius: 50%;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  color: var(--accent);
}
.jtick svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jdone__t { margin: 0; font-size: 1.25rem; font-weight: 780; }
.jdone__h { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); }
.jcode {
  margin: 1rem auto .4rem;
  max-width: 14rem;
  padding: .75rem;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .2em;
  direction: ltr;
}
.jdone__link { margin: 0; font-size: .76rem; color: var(--muted); line-height: 1.9; }
.jdone__url { display: inline-block; font-weight: 700; color: var(--ink); }

.jtl { margin: 1.4rem 0 .5rem; padding: 0; list-style: none; text-align: start; }
.jtl li {
  position: relative;
  padding-inline-start: 1.5rem;
  padding-block: .35rem;
  color: var(--muted);
}
.jtl li b { display: block; font-size: .87rem; font-weight: 650; line-height: 1.6; }
.jtl li span { display: block; font-size: .76rem; line-height: 1.6; }
.jtl li::before {
  content: '';
  position: absolute;
  inset-inline-start: .28rem;
  top: .82rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--line);
}
.jtl li::after {
  content: '';
  position: absolute;
  inset-inline-start: .53rem;
  top: 1.5rem;
  bottom: -.35rem;
  width: 1px;
  background: var(--line);
}
.jtl li:last-child::after { display: none; }
.jtl li.is-on { color: var(--ink); }
.jtl li.is-on::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Aside ──────────────────────────────────────────────── */
.jaside {
  padding: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--surface);
}
.jaside__t { margin: 0 0 .9rem; font-size: 1rem; font-weight: 750; }
.jaside__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.jaside__list li { padding-inline-start: .85rem; border-inline-start: 2px solid var(--figure); }
.jaside__list b { display: block; font-size: .87rem; font-weight: 700; line-height: 1.6; }
.jaside__list span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.7; }
.jaside__note {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.85;
}

@media (prefers-reduced-motion: reduce) {
  .jbtn:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}