/* Miracle v3 — merchant registration form. OWNER: MCL-SITE-REFERRAL-001-T10 (spec W7, D15).
   Mobile-first, min-width only, chassis breakpoints only (621/851). Tokens from base.css.
   D15: big inputs, one section per screen, every optional field visibly marked. */

.mr-head { gap:var(--s3); margin-bottom:var(--s5); }
.mr-head h1 { font-size:clamp(2rem,1.6rem + 2vw,3rem); }

.mr-form { max-width:none; gap:var(--s5); }
.mr-form input[type=text], .mr-form input[type=email], .mr-form input[type=tel],
.mr-form select, .mr-form textarea {
  font-size:1.0625rem; min-height:52px; padding:12px 14px; width:100%; max-width:100%;
}
.mr-form textarea { min-height:84px; resize:vertical; }
.mr-form .field > label, .mr-label, .mr-choice > legend {
  font-family:var(--heading); font-size:.9375rem; font-weight:700; color:var(--ink);
}
.mr-opt {
  font-family:var(--body); font-weight:500; font-size:.8125rem; color:var(--muted);
  margin-left:4px; text-transform:lowercase;
}
.mr-opt::before { content:"("; } .mr-opt::after { content:")"; }

/* progress + help, visible on every step */
.mr-bar { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; justify-content:space-between; min-width:0; }
.mr-progress { list-style:none; display:flex; gap:var(--s2); margin:0; padding:0; flex-wrap:wrap; min-width:0; }
.mr-progress > li {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 6px;
  border-radius:var(--r-pill); background:var(--surface-2); color:var(--muted);
  font-family:var(--heading); font-weight:700; font-size:.8125rem; min-width:0;
}
.mr-progress__n {
  display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--surface); color:var(--ink-2); font-size:.75rem;
}
.mr-progress > li[data-state="current"] { background:var(--deep); color:var(--cream); }
.mr-progress > li[data-state="current"] .mr-progress__n { background:var(--mint); color:var(--ink); }
.mr-progress > li[data-state="done"] .mr-progress__n { background:var(--mint); color:var(--ink); }
.mr-help { white-space:normal; text-align:center; max-width:100%; }

.mr-step { display:flex; flex-direction:column; gap:var(--s4); min-width:0; }
.mr-step > h2 { font-size:clamp(1.5rem,1.3rem + 1vw,2rem); outline:none; }
.mr-subhead { margin-top:var(--s5); font-size:1.25rem; }

.mr-restored { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; padding:var(--s3) var(--s4);
  border-radius:var(--r-xs); background:var(--surface-2); }
.mr-linkbtn { background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--deep);
  text-decoration:underline; text-underline-offset:3px; align-self:flex-start; }

/* radios and checkboxes: whole row is the tap target (>= 48px) */
.mr-choice { border:0; margin:0; padding:0; min-width:0; }
.mr-choice > legend { padding:0; margin-bottom:6px; }
.mr-radio {
  display:flex; gap:var(--s3); align-items:center; min-height:52px; padding:10px 14px;
  border:1px solid var(--line); border-radius:var(--r-xs); background:var(--surface);
  font-size:1rem; color:var(--ink); cursor:pointer; min-width:0;
}
.mr-radio + .mr-radio { margin-top:var(--s2); }
.mr-radio input { width:20px; height:20px; flex:none; accent-color:var(--teal); }
.mr-radio:has(input:checked) { border-color:var(--teal); background:var(--surface-2); }

/* repeatable cards */
.mr-cards { display:flex; flex-direction:column; gap:var(--s4); min-width:0; }
.mr-card { display:flex; flex-direction:column; gap:var(--s4); margin:0; min-width:0; border:1px solid var(--line); }
.mr-card__title { font-family:var(--heading); font-weight:800; font-size:1.0625rem; padding:0 6px; }
/* Round 6 (Amit 2026-10-29): "Offer 1 · Discount", "Offer 2 · Extra discount". */
.mr-card__kind::before { content:"\00B7\00A0"; }
.mr-card__kind[hidden] { display:none; }
.mr-add { align-self:flex-start; white-space:normal; }
/* Round 3: paste many branches at once (reuses .mr-tip). */
.mr-bulk > p, .mr-bulk > .field, .mr-bulk > .button { margin:var(--s3) 0 0; }
.mr-bulk > .button { display:inline-flex; }
.mr-bulk textarea { width:100%; min-width:0; font-family:inherit; }
.mr-remove { color:#8C441A; }
.mr-two { display:grid; grid-template-columns:1fr; gap:var(--s4); min-width:0; }
.mr-two > * { min-width:0; }
.mr-scope-pick { margin-top:var(--s3); display:flex; flex-direction:column; gap:6px; min-width:0; }
.mr-checks { display:flex; flex-direction:column; gap:var(--s2); }
.mr-participates { font-size:.9375rem; }
/* Round 4: offer builder. The preview is the exact details text that is sent. */
.mr-preview { margin:0; padding:var(--s3); border-radius:var(--r-xs); background:var(--surface-2); font-size:.9375rem; overflow-wrap:anywhere; }
.mr-preview strong { color:var(--ink); }
.mr-hours-note { margin-top:calc(-1 * var(--s2)); }

/* Maps tip (D15: inline, 3 images, no Maps API) */
.mr-tip { border:1px solid var(--line); border-radius:var(--r-xs); background:var(--surface); padding:var(--s3) var(--s4); min-width:0; }
.mr-tip > summary { cursor:pointer; font-family:var(--heading); font-weight:700; color:var(--deep); min-height:32px; }
.mr-tip__steps { margin:var(--s4) 0 var(--s3); padding:0; list-style:none; display:grid; gap:var(--s4); grid-template-columns:1fr; counter-reset:tip; }
.mr-tip__steps > li { display:flex; flex-direction:column; gap:var(--s2); min-width:0; counter-increment:tip; font-size:.9375rem; }
.mr-tip__steps > li > span::before { content:counter(tip) ". "; font-weight:700; }
.mr-tip__steps img { width:100%; max-width:320px; height:auto; border-radius:var(--r-xs); border:1px solid var(--line); }

/* phone = country picker + number */
.mr-phone { display:grid; grid-template-columns:1fr; gap:var(--s3); min-width:0; }
.mr-phone > * { min-width:0; }

/* photos */
.mr-file { font-size:1rem; max-width:100%; min-height:48px; }
.mr-photo-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
.mr-photo-list:empty { display:none; }
.mr-photo { display:flex; flex-direction:column; gap:6px; min-width:0; padding:var(--s2); border:1px solid var(--line); border-radius:var(--r-xs); background:var(--surface); }
.mr-photo canvas { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:6px; background:var(--surface-2); }
.mr-photo__name { font-size:.75rem; color:var(--muted); overflow-wrap:anywhere; }

.mr-consents { display:flex; flex-direction:column; gap:var(--s3); }
.mr-consents .consent { font-size:.9375rem; }
.mr-consents .consent input[type=checkbox] { width:22px; height:22px; }
.mr-consents .consent a, .m-controller a { color:var(--deep); text-decoration:underline; text-underline-offset:3px; }

.mr-nav { display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between; align-items:center; }
.mr-next { flex:1 1 12rem; }
.mr-later { display:flex; flex-direction:column; gap:var(--s2); }
.mr-form[aria-busy="true"] .mr-nav button { opacity:.7; cursor:progress; }

.mr-done { display:flex; flex-direction:column; gap:var(--s4); align-items:flex-start; padding:var(--s6) 0; outline:none; }

.field-error { font-size:.875rem; line-height:1.55; margin:0; color:#8C441A; font-weight:600; }
.field-error::before { content:"\26A0\FE0E"; margin-right:6px; }

/* country picker (copied from join.css, same component) */
.cc { position:relative; min-width:0; }
.cc .cc__input {
  padding-right:36px; text-overflow:ellipsis; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px; background-repeat:no-repeat;
}
.cc .cc__input:focus { cursor:text; }
.cc__list {
  position:absolute; z-index:30; left:0; top:calc(100% + 4px); width:100%;
  max-height:min(18rem, 55vh); overflow-y:auto; overscroll-behavior:contain;
  margin:0; padding:4px; list-style:none;
  background:var(--surface); border:1px solid #BFDCD1; border-radius:var(--r-xs); box-shadow:var(--shadow-2);
}
.cc__option { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3);
  min-height:44px; padding:10px 12px; border-radius:6px; cursor:pointer; font-size:.9375rem; line-height:1.35; color:var(--ink); }
.cc__option[data-active] { background:var(--surface-3); }
.cc__option[aria-selected="true"] .cc__name { font-weight:700; }
.cc__name { min-width:0; overflow-wrap:anywhere; }
.cc__dial { flex:none; color:var(--muted); font-variant-numeric:tabular-nums; }
.cc__empty { position:absolute; z-index:30; left:0; top:calc(100% + 4px); width:100%; margin:0;
  padding:12px; font-size:.8125rem; color:var(--muted);
  background:var(--surface); border:1px solid #BFDCD1; border-radius:var(--r-xs); }

@media (min-width:621px) {
  .mr-phone { grid-template-columns:minmax(0,13rem) minmax(0,1fr); }
  .cc__list, .cc__empty { width:max(100%, 18rem); }
  .mr-two { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .mr-tip__steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mr-photo-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.mr-form, .mr-done, .mr-step > h2 { scroll-margin-top:88px; }
