/* ============================================================
   SMOCELL — Flow pages (Sell / Repair / Activate / Unlock)
   Product-configurator UX, not a form.
   ============================================================ */

.flow-page {
  padding-top: clamp(6.5rem, 5.5rem + 4vw, 9rem);
  padding-bottom: var(--section-pad-sm);
  min-height: 100vh;
}

.flow-head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.flow-head h1 { font-size: var(--t-h1); }
.flow-head .t-lead { margin-top: var(--space-4); }

/* ---------- Progress rail ---------- */

.flow-progress {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.flow-progress li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  position: relative;
  transition: color var(--motion-normal) var(--ease-out), background-color var(--motion-normal) var(--ease-out);
}
.flow-progress li .p-num { font-weight: 600; }
.flow-progress li::after {
  content: "";
  width: clamp(12px, 3vw, 32px);
  height: 1px;
  background: var(--c-line-strong);
  margin-left: var(--space-2);
}
.flow-progress li:last-child::after { display: none; }
.flow-progress li.is-current { color: var(--c-ink); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.flow-progress li.is-current .p-num { color: var(--c-accent-ink); }
.flow-progress li.is-done { color: var(--c-accent-ink); }
.flow-progress li.is-done::after { background: var(--c-accent); }

@media (max-width: 640px) {
  .flow-progress li .p-name { display: none; }
  .flow-progress li.is-current .p-name { display: inline; }
}

/* ---------- Layout ---------- */

.flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
  gap: clamp(2rem, 1.5rem + 3vw, 5rem);
  align-items: start;
}
.flow-aside { position: sticky; top: 96px; }
@media (max-width: 980px) {
  .flow-grid { grid-template-columns: 1fr; }
  .flow-aside { position: static; order: -1; }
}

/* ---------- Steps ---------- */

.flow-steps { position: relative; }
.flow-step {
  display: none;
  animation: step-in var(--motion-slow) var(--ease-out);
}
.flow-step.is-active { display: block; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.flow-step > h2 { font-size: var(--t-h3); margin-bottom: var(--space-2); }
.flow-step > .step-sub { color: var(--c-ink-3); font-size: var(--t-small); margin-bottom: var(--space-6); }

.step-group { margin-bottom: var(--space-6); }
.step-group > .t-label { display: block; margin-bottom: var(--space-3); }

/* Option grids */
.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.opt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.opt-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .opt-grid, .opt-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .opt-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Brand tiles */
.opt--brand { align-items: center; text-align: center; padding: var(--space-5); gap: var(--space-3); }
.opt--brand .brand-logo { height: 30px; display: grid; place-items: center; color: var(--c-ink); }
.opt--brand .brand-logo svg { height: 26px; width: auto; }

/* Pill options (storage etc.) */
.opt--pill { min-height: 52px; flex-direction: row; align-items: center; justify-content: center; text-align: center; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); }
.opt--pill .opt-check { position: static; width: 18px; height: 18px; margin-left: var(--space-2); }

/* Condition options with descriptions */
.opt--cond { padding: var(--space-5); }
.opt--cond .opt-sub { max-width: 46ch; }

/* ---------- Flow nav ---------- */

.flow-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-line);
}
.flow-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 550;
  font-size: var(--t-small);
  color: var(--c-ink-2);
  min-height: 44px;
  transition: color var(--motion-fast) var(--ease-out);
}
.flow-back:hover { color: var(--c-ink); }
.flow-back[hidden] { display: none; }

/* ---------- Summary card ---------- */

.summary-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.summary-visual {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0, 205, 189, 0.08) 0%, transparent 60%),
    var(--c-bg-soft);
  display: grid;
  place-items: center;
  padding: var(--space-6);
}
.summary-visual .device { --device-w: 110px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 16px 32px rgba(8,9,10,0.22); }
.summary-visual--img { padding: 0; }
.summary-visual--img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.summary-body { padding: var(--space-5); }
.summary-body h2 {
  font-size: var(--t-h4);
  min-height: 1.4em;
}
.summary-rows { margin-top: var(--space-4); display: grid; }
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--c-line);
  font-size: var(--t-small);
}
.summary-row dt { color: var(--c-ink-3); }
.summary-row dd { margin: 0; font-weight: 570; text-align: right; transition: color var(--motion-fast) var(--ease-out); }
.summary-row dd:empty::after, .summary-row dd[data-empty]::after { content: "—"; color: var(--c-ink-3); font-weight: 400; }
.summary-row dd.just-set { color: var(--c-accent-ink); }
.summary-note {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  font-size: var(--t-micro);
  line-height: 1.5;
}
@media (max-width: 980px) {
  .summary-visual { display: none; }
  .summary-card { border-radius: var(--radius-md); }
  .summary-body { padding: var(--space-4); }
  .summary-body h2 { min-height: 0; }
  .summary-rows { grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); }
  .summary-note { display: none; }
}

/* ---------- Mobile sticky CTA ---------- */

.flow-cta-bar {
  display: none;
}
@media (max-width: 980px) {
  .flow-cta-bar {
    display: flex;
    gap: var(--space-3);
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-dock);
    padding: var(--space-3) var(--layout-gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 248, 250, 0.85);
    -webkit-backdrop-filter: blur(var(--blur-nav));
    backdrop-filter: blur(var(--blur-nav));
    border-top: 1px solid var(--c-line);
  }
  .flow-cta-bar .btn { flex: 1; }
  .flow-page { padding-bottom: 120px; }
  .flow-nav .flow-continue { display: none; }
}

/* ---------- Review / contact step ---------- */

.review-list { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.review-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.review-item .r-label { font-size: var(--t-small); color: var(--c-ink-3); }
.review-item .r-value { font-weight: 580; text-align: right; }
.review-item button {
  font-size: var(--t-micro);
  color: var(--c-accent-ink);
  font-weight: 600;
  min-height: 44px;
  padding-inline: var(--space-2);
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.contact-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Buying policy / eligibility ---------- */

.policy-box {
  border: 1px solid var(--c-line-strong);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.policy-box .t-label { display: block; margin-bottom: var(--space-2); }
.policy-box p { font-size: var(--t-small); color: var(--c-ink-2); margin-bottom: var(--space-2); }
.policy-box ul {
  line-height: 1.55;
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--space-1);
  font-size: var(--t-small);
  color: var(--c-ink-2);
}
.policy-box li::marker { color: var(--c-accent-ink); }

.confirm-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
  margin-bottom: var(--space-5);
}
.confirm-row:hover { border-color: var(--c-ink); }
.confirm-row.has-error { border-color: var(--c-danger); background: var(--c-danger-soft); }
.confirm-row:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); }
.confirm-row input {
  appearance: none;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 2px solid var(--c-line-strong);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--motion-fast) var(--ease-out);
}
.confirm-row input:checked {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.confirm-row input:checked::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2.4px solid var(--c-dark);
  border-bottom: 2.4px solid var(--c-dark);
  transform: rotate(-45deg) translateY(-1px);
}
.confirm-row span { font-size: var(--t-small); line-height: 1.5; }
.policy-error { display: none; font-size: var(--t-small); color: var(--c-danger); margin: calc(-1 * var(--space-4)) 0 var(--space-5); }
.policy-error.is-visible { display: block; }

/* ---------- IMEI help disclosure ---------- */

.imei-help {
  margin-top: var(--space-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  font-size: var(--t-small);
}
.imei-help summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-weight: 570;
  color: var(--c-accent-ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}
.imei-help summary::-webkit-details-marker { display: none; }
.imei-help summary::before {
  content: "?";
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 700;
}
.imei-help[open] summary { border-bottom: 1px solid var(--c-line); }
.imei-help-body { padding: var(--space-4); display: grid; gap: var(--space-3); color: var(--c-ink-2); }
.imei-help-body ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.imei-help-body code {
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  border-radius: 6px;
  padding: 1px 7px;
  letter-spacing: 0.08em;
}

/* ---------- Success state ---------- */

.flow-success { text-align: center; padding: var(--space-8) 0; }
.success-mark {
  width: 72px; height: 72px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-dark);
  display: grid;
  place-items: center;
}
.success-mark svg { width: 30px; height: 30px; }
@keyframes pop-in {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.flow-success .success-mark { animation: pop-in 500ms var(--ease-spring); }
.flow-success h2 { font-size: var(--t-h2); margin-bottom: var(--space-3); }
.flow-success p { color: var(--c-ink-2); max-width: 44ch; margin-inline: auto; }
.flow-success .hero-actions { justify-content: center; }

/* ---------- Repair zone picker ---------- */

.zone-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-6); align-items: center; }
.zone-phone { position: relative; max-width: 240px; margin-inline: auto; width: 100%; }
.zone-phone svg { width: 100%; height: auto; }
.zone-phone .z {
  cursor: pointer;
  fill: transparent;
  stroke: transparent;
  transition: fill var(--motion-fast) var(--ease-out), stroke var(--motion-fast) var(--ease-out);
}
.zone-phone .z:hover { fill: rgba(0, 205, 189, 0.10); stroke: var(--c-accent); }
.zone-phone .z.is-selected { fill: rgba(0, 205, 189, 0.18); stroke: var(--c-accent); stroke-width: 2; }
@media (max-width: 720px) {
  .zone-picker { grid-template-columns: 1fr; }
  .zone-phone { max-width: 170px; }
}