/* Order presentation shares the landing palette. Catalog, cropping and payment
   behaviour remain in the existing app.js and shared frame styles. */
#modal {
  --paper:var(--sale-white); --paper-strong:var(--sale-white);
  --paper-alt:#F5F5F4; --ink:var(--sale-ink); --ink-deep:var(--sale-ink);
  --muted:#64676A; --accent:#45677D; --accent-hover:#345267;
  --accent-soft:#EDF2F5; --hairline:#E1E2E2; --hairline-strong:#ABB9C2;
  --sand:#F1EBE3; --sand-ink:#75624F;
  --font:var(--sale-font);
  font-family:var(--sale-font); color:var(--ink); line-height:1.6;
  background:rgba(0,0,0,.42); padding:24px;
}
#modal .shell {
  width:min(1480px,100%); height:min(860px,calc(100dvh - 48px));
  max-height:calc(100dvh - 48px); border-radius:24px;
  grid-template-columns:minmax(0,.78fr) minmax(440px,1fr);
  box-shadow:0 24px 80px #00000030;
}
#modal .modal-preview { background:radial-gradient(ellipse at 25% 15%,#FAFAF9 0%,#EEEEED 65%,#DFDFDD 100%); padding:28px; gap:16px; }
#modal .order-wall { background:transparent; border-radius:16px; }
#modal .order-wall .room-bg, #modal .room-overlay { display:none; }
#modal .order-wall .order-frame { left:50%; top:50%; }
#modal .empty-preview .photo-window { background:#E2EBF0; }
#modal .frame-measure { --measure-color:var(--ink); }
#modal .modal-content { max-height:100%; min-width:0; overflow:hidden; }
#modal .top { padding:26px 32px 0; }
#modal .top h2 { margin:0; font-family:inherit; font-size:26px; font-weight:650; letter-spacing:-.035em; }
#modal .close { width:40px; height:40px; border:0; background:var(--paper-alt); font-size:24px; }
#modal .close:hover { background:var(--sale-line); }
#modal .progress { margin:20px 32px 0; gap:8px; }
#modal .progress span { height:4px; }
#modal .progress span.active { background:var(--accent); }
#modal .order-side-gallery { padding:18px 32px 0; gap:10px; }
#modal .multi-note { background:var(--paper-alt); border:0; border-radius:12px; font-size:13px; line-height:1.55; padding:12px 14px; }
#modal .step-scroll { flex:1; padding:24px 32px 28px; scrollbar-width:thin; scrollbar-color:#BDBDBD transparent; }
#modal .step h3 { font-family:inherit; font-size:21px; font-weight:650; letter-spacing:-.025em; margin:0 0 10px; }
#modal .step > p { font-size:14px; line-height:1.65; margin-bottom:16px; }
#modal .step > p.order-upload-help { font-size:12px; color:var(--muted); margin-top:-4px; }
#modal .step > p.size-description { font-style:normal; font-size:15px; line-height:1.6; color:var(--muted); margin-top:18px; }
#modal .delivery-estimate { background:var(--sand); color:var(--sand-ink); border-radius:10px; padding:11px 14px; }
#modal .option { font:inherit; color:inherit; padding:16px; border-radius:12px; background:var(--paper); }
#modal .option:hover { border-color:var(--accent); }
#modal .option strong { font-size:16px; font-weight:600; }
#modal .option span { font-size:13px; }
#modal .option.selected { background:var(--accent-soft); border-color:var(--accent); color:var(--ink); box-shadow:inset 0 0 0 1px var(--accent); }
#modal .option.selected span { color:var(--accent); }
#modal .option.disabled { opacity:1; color:var(--muted); background:var(--paper-alt); border-color:var(--hairline); }
#modal .option.disabled.selected { background:var(--accent-soft); color:var(--ink); border-color:var(--hairline-strong); box-shadow:none; }
#modal .option.disabled span { color:var(--muted); }
#modal .swatch { border-radius:8px; }
#modal .field > span, #modal .buyer-type > span { text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
#modal .field input, #modal .field textarea, #modal .field select { min-height:48px; font:inherit; font-size:16px; border-color:var(--hairline); padding:11px 13px; border-radius:10px; background:var(--paper); }
#modal .field input::placeholder, #modal .field textarea::placeholder { color:var(--muted); opacity:1; }
#modal .field input:focus, #modal .field textarea:focus, #modal .field select:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
#modal .form { gap:16px 14px; }
#modal .form-section-title { font-size:15px; font-weight:650; }
#modal .company-fields, #modal .gift-fields { padding:16px; border:0; border-radius:12px; }
#modal .print-check { border-radius:12px; padding:14px; background:var(--paper-alt); border-color:var(--hairline); }
#modal .buyer-type-options label { font-weight:600; min-height:46px; border-color:var(--hairline); }
#modal .buyer-type-options label:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
#modal .photographer-review { border:0; border-radius:12px; padding:14px 16px; }
#modal .discount-code-box { border:0; padding:16px; border-radius:12px; }
#modal .summary { margin-top:20px; }
#modal .summary .row { padding:12px 0; font-size:14px; }
#modal .summary .row > strong { max-width:70%; }
#modal .summary .row:last-child { font-size:22px; color:var(--ink); }
#modal .summary .row:last-child strong { font-weight:650; }
#modal .withdrawal-note { font-size:13px; line-height:1.6; }
#modal .actions { margin-top:auto; padding:18px 32px; background:var(--paper); }
#modal .btn { min-height:48px; padding:12px 24px; font-size:14px; border-radius:999px; font-weight:600; }
#modal .btn-primary { background:var(--accent); color:var(--paper); }
#modal .btn-primary:hover { background:var(--accent-hover); }
#modal .btn-ghost { border-color:var(--hairline); }
#modal .btn-ghost:hover { background:var(--paper-alt); }
#modal .btn:disabled { opacity:1; background:var(--paper-alt); color:var(--muted); border:1px solid var(--hairline); }
#modal .note { font-size:13px; line-height:1.55; }
#modal .crop-hint { font-size:13px; background:var(--paper); }
#modal .add-tile { background:var(--paper); border-color:#BDBDBD; border-radius:10px; }
#modal .gallery-discount-hint { background:var(--sand); border-color:transparent; }
#modal .thumb small, #modal .thumb .remove-thumb { background:rgba(0,0,0,.78); }
#modal .cart-summary-value.is-discount { color:var(--ink); }
#modal .cart-summary-cell.is-total { background:var(--sand); border-color:transparent; }
#modal .cart-summary-cell.is-total .cart-summary-label, #modal .cart-summary-included { color:var(--sand-ink); }
#modal .cart-summary-cell.is-total .cart-summary-value { color:var(--ink); font-size:18px; }
#modal .cart-summary-note { font-style:normal; }
#modal input[type="checkbox"], #modal input[type="radio"] { accent-color:var(--accent); }
#modal :is(button,summary,.option,[role="button"]):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#modal .buyer-type-options label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:3px; }
@media (min-width:601px) and (max-width:960px) {
  #modal .shell { grid-template-columns:minmax(0,.85fr) minmax(360px,1fr); }
  #modal .modal-preview { padding:16px; border-right:1px solid var(--hairline); border-bottom:0; }
  #modal .top { padding:20px 22px 0; }
  #modal .progress { margin-inline:22px; }
  #modal .order-side-gallery { padding-inline:22px; }
  #modal .step-scroll { padding:20px 22px; }
  #modal .actions { padding:16px 22px; }
}
@media (max-width:600px) {
  #modal { padding:0; }
  #modal .shell { height:auto; min-height:100dvh; max-height:none; border-radius:0; }
  #modal .modal-content { max-height:none; overflow:visible; }
  #modal .modal-preview { height:254px; min-height:254px; max-height:254px; padding:16px 18px 8px; gap:4px; border-right:0; }
  #modal .order-wall { background:transparent; border-radius:0; }
  #modal .modal-preview .note { font-size:12px; }
  #modal .crop-hint { background:transparent; }
  #modal .shell:has(.step[data-step="2"].active, .step[data-step="3"].active) .modal-preview { height:auto; min-height:0; max-height:none; padding:8px 18px 0; border-bottom:0; background:var(--paper); }
  #modal .top { padding:18px 18px 0; }
  #modal .top h2 { font-size:23px; }
  #modal .progress { margin:14px 18px 0; }
  #modal .progress span { height:auto; font-size:11px; gap:7px; }
  #modal .progress span.active { background:transparent; color:var(--accent); }
  #modal .progress span.active::before { background:var(--accent); }
  #modal .order-side-gallery { padding:12px 18px 0; }
  #modal .step-scroll { padding:20px 18px 24px; overflow:visible; }
  #modal .step h3 { font-size:20px; }
  #modal .step > p { font-size:14px; line-height:1.5; margin-bottom:12px; }
  #modal .option { padding:12px 8px; }
  #modal .colors .option strong { font-size:14px; }
  #modal .field > span { font-size:13px; }
  #modal .form { gap:14px; }
  #modal .actions { padding:12px 18px max(20px,env(safe-area-inset-bottom)); gap:8px; }
  #modal .actions .btn { padding:10px 12px; min-height:46px; }
  #modal .mobile-order-total strong { font-size:16px; }
  #modal .summary .row { font-size:13px; }
  #modal .summary .row:last-child { font-size:20px; }
  #modal .company-fields, #modal .gift-fields { padding:12px; }
  #modal .discount-code-box { padding:12px; gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  #modal .step.active { animation:none; }
}

/* Feedback remains visible while the native picker / image decoder precedes the modal. */
.landing-upload-feedback {
  position:fixed; z-index:2000; left:50%; bottom:24px; transform:translateX(-50%);
  width:max-content; max-width:calc(100vw - 32px); padding:14px 20px;
  border:1px solid #d5e1e8; border-radius:14px; background:#f2f7fa; color:#263e4c;
  box-shadow:0 8px 30px #00000018; font-size:15px; line-height:1.45; text-align:center;
}
.landing-upload-feedback[hidden] { display:none; }
.landing-upload-feedback.is-error { background:#fff4ef; border-color:#ecd6ca; color:#703d25; }