/* AI Photographer embed: the customer flow (Start, Capture, Processing, Result, Delivery, Done).
   Loaded after embed.css. Brand tokens from 10-brand.md. Nothing here goes under 14px or under a 44px tap target. */
:root {
  --pb: #123F8C;          /* Passport Blue */
  --pb-dark: #0C2D68;
  --cta: #E9740F;         /* Shutter Orange: the paying button only */
  --cta-dark: #D2660A;
  --pass: #147A3F;
  --pass-soft: #E4F3EA;
  --amber: #D98E04;
  --amber-soft: #FBF1DC;
  --fail: #C8321F;
  --fail-soft: #FBE7E4;
  --ink2: #16213A;
  --canvas: #F4F6FA;
  --slate: #4B5568;
}

/* ---------- Start ---------- */
.flow-title { font-size: 28px; line-height: 1.12; }
.doc-picker { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.doc-picker .doc { flex: 0 0 auto; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; min-width: 128px; padding: 10px 14px 8px; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--white); cursor: pointer; text-align: left; }
.doc-picker .doc[aria-pressed="true"] { border-color: var(--pb); box-shadow: 0 0 0 2px #E3EAF7; }
.doc-picker .doc .lbl { font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--ink2); }
.doc-picker .doc .sub { font-size: 14px; color: var(--slate); }
.tag { display: inline-block; font-size: 14px; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: 999px; background: var(--pass-soft); color: var(--pass); white-space: nowrap; }
.doc-picker .doc .tag { margin-bottom: 2px; }
.chip .tag { margin-left: 6px; padding: 3px 7px; }
.spec-card { background: var(--white); border: 1.5px solid var(--rule); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.spec-card .h { font-size: 16px; }
.spec-rows { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 16px; }
.spec-rows dt { color: var(--slate); font-size: 14px; padding-top: 2px; }
.spec-rows dd { margin: 0; font-weight: 600; color: var(--ink2); }
.spec-src { font-size: 14px; color: var(--slate); }
.spec-src a { color: var(--pb); }
.price-under { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-under .big { font-size: 26px; }
.price-under .muted { font-size: 16px; }
.gchips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gchip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; border-radius: 999px; background: var(--pass-soft); color: var(--pass); font-size: 14px; font-weight: 600; line-height: 1.2; }
.gchip svg { flex: 0 0 auto; }
.newline { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--slate); text-align: center; }
.newline b { color: var(--ink2); font-weight: 600; }
.upload-alt { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--white); color: var(--ink2); font-weight: 600; font-size: 16px; cursor: pointer; }
.upload-alt:hover { background: var(--canvas); }
.start-primary { display: flex; flex-direction: column; gap: 10px; }
.lastfix { display: flex; gap: 10px; align-items: flex-start; background: var(--fail-soft); border: 1.5px solid #F0B9B1; border-radius: 12px; padding: 12px 14px; font-size: 16px; line-height: 1.35; }
.lastfix b { color: var(--fail); }

/* ---------- Capture ---------- */
/* The state line is embed.css's .pill (white, ink text; .ok turns it Pass Green). Only the additions live here. */
.cam .pill.wait .led { background: rgba(22, 33, 58, 0.35); border-color: rgba(22, 33, 58, 0.35); }
.hold-note { font-size: 14px; color: #fff; text-align: center; line-height: 1.3; font-family: var(--font-cam); font-weight: 700; text-shadow: var(--halo); }
.cam .shutter { transition: opacity 0.2s, box-shadow 0.2s; }
.cam .shutter.off { opacity: 0.5; }
.cam .shutter.off span { opacity: 0.3; }
.cam .shutter.ok { box-shadow: 0 0 0 1.5px var(--ink), inset 0 0 0 1.5px var(--ink), 0 0 0 6px rgba(20, 122, 63, 0.85), 0 0 26px rgba(20, 122, 63, 0.7); }
.cam .shutter.ok span { background: var(--pass); opacity: 1; }
.cam .shutter.hold span { transform: scale(0.8); transition: transform 0.7s; }
.cam .bar .title span.fix { color: #FFD9A8; font-weight: 700; max-width: 280px; line-height: 1.3; }

/* ---------- Processing ---------- */
.processing .counter { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pb); }
.processing .thumb { width: 220px; height: 220px; }
.step .ring { color: #fff; }
.step.done .ring { background: var(--pass); border-color: var(--pass); }
.step.active .ring { border-color: var(--pb); border-top-color: transparent; }
.processing .cancel { background: none; border: 0; color: var(--slate); text-decoration: underline; font-size: 14px; min-height: 44px; cursor: pointer; }

/* ---------- Result ---------- */
.result-head { display: flex; flex-direction: column; gap: 4px; }
.result-head .h { font-size: 26px; line-height: 1.15; }
.result-head .h.pass { color: var(--pass); }
.result-head .h.fail { color: var(--fail); }
.result-head .sub { font-size: 16px; color: var(--slate); }
.result-frame { position: relative; margin: 0 auto; width: 240px; height: 240px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--white); }
.result-frame.portrait { height: 300px; }
.result-frame img { width: 100%; height: 100%; object-fit: cover; }
.result-frame img.original { object-fit: contain; background: #0E1013; }
.result-frame .wm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.result-frame .wm span { transform: rotate(-30deg); font-size: 26px; font-weight: 700; color: rgba(22, 33, 58, 0.22); letter-spacing: 0.12em; }
.result-frame svg.dims { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.compare { display: flex; justify-content: center; gap: 0; margin: 0 auto; border: 1.5px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--white); width: 240px; }
.compare .seg { flex: 1; min-height: 44px; border: 0; background: transparent; font-weight: 600; font-size: 14px; color: var(--slate); cursor: pointer; }
.compare .seg[aria-pressed="true"] { background: var(--pb); color: #fff; }
.compare .seg:disabled { opacity: 0.5; cursor: default; }
.wm-line { font-size: 14px; color: var(--slate); text-align: center; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cpill { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.2; }
.cpill svg { flex: 0 0 16px; width: 16px; height: 16px; }
.cpill.ok { background: var(--pass-soft); color: var(--pass); }
.cpill.warn { background: var(--amber-soft); color: #7A5002; }
.cpill.no { background: var(--fail-soft); color: var(--fail); }
.checks-line { font-size: 14px; color: var(--slate); }
.fix-card { background: var(--fail-soft); border: 1.5px solid #F0B9B1; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.fix-card .h { font-size: 16px; color: var(--fail); }
.fix-card .item { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; line-height: 1.35; }
.fix-card .item svg { flex: 0 0 18px; margin-top: 2px; }
.warn-card .item { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; line-height: 1.35; }
.warn-card .item svg { flex: 0 0 18px; margin-top: 2px; }
.price-guarantee { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.price-guarantee .big { font-size: 24px; }
.price-guarantee .g { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--pass); font-weight: 600; }

.link-btn { background: none; border: 0; color: var(--pb); text-decoration: underline; font-size: 16px; min-height: 44px; cursor: pointer; padding: 0 8px; }

/* ---------- Delivery ---------- */
.deliv-row { display: flex; gap: 12px; align-items: center; background: var(--white); border: 1.5px solid var(--rule); border-radius: 12px; padding: 10px 12px; }
.deliv-row .mini { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); flex: 0 0 56px; }
.deliv-row .mini.portrait { height: 70px; }
.deliv-row .mini img { width: 100%; height: 100%; object-fit: cover; }
.deliv-row .body { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.deliv-row .body .muted { font-size: 14px; }
.choice .ready { font-size: 14px; color: var(--pass); font-weight: 600; }
.paybar .total { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.paybar .total b { font-size: 20px; }
.prints .choice .sub { color: var(--slate); }

/* Store rows on a narrow phone: the ready time drops under the name instead of squeezing it */
@media (max-width: 420px) {
  .store { flex-wrap: wrap; }
  .store .ready { flex: 0 0 100%; padding-left: 32px; white-space: normal; }
}

/* ---------- Done ---------- */
.done-tick { width: 52px; height: 52px; border-radius: 50%; background: var(--pass); display: flex; align-items: center; justify-content: center; }
.offer { background: var(--white); border: 1.5px solid var(--rule); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.offer .h { font-size: 16px; }
.offer .choice { border: 1.5px solid var(--rule); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; min-height: 48px; background: var(--white); }
.offer .choice .body { font-size: 16px; }
.offer .choice .desc { font-size: 14px; color: var(--slate); }

/* Desktop tweaks */
.desk-grid .doc-picker { flex-wrap: wrap; overflow: visible; }
.desk-grid .gchips { justify-content: flex-start; }
.desk-grid .newline { justify-content: flex-start; }
@media (max-width: 400px) {
  .result-frame, .compare { width: 220px; }
  .result-frame { height: 220px; }
  .result-frame.portrait { height: 275px; }
}