/* The last step belongs to the same restaurant as its menu and checkout. */
.restaurant-site .confirmation-order { animation:none; min-width:0; overflow:hidden; }
.confirmation-order .order-surface { overflow:hidden; }
.confirmation-order .panel-heading { min-height:36px; padding:5px 22px; }
.confirmation-order .panel-heading .small-label { font-size:7px; letter-spacing:1.3px; }
.confirmation-order .panel-close { width:30px; height:30px; flex-shrink:0; }
.confirmation-order .panel-close svg { width:14px; height:14px; }
.confirmation-order .confirmation-layout { flex:1; min-height:0; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); overflow:auto; scrollbar-width:thin; overscroll-behavior:contain; touch-action:pan-y pinch-zoom; -webkit-overflow-scrolling:touch; }
.confirmation-order .confirmation-visual { min-width:0; min-height:0; margin:0; position:relative; overflow:hidden; }
.confirmation-order .confirmation-visual img { display:block; height:100%; width:100%; object-fit:cover; }
.confirmation-order .confirmation-visual figcaption { position:absolute; inset:auto 20px 20px; color:var(--fg); font-size:7px; line-height:1.6; letter-spacing:1px; }
.confirmation-order .confirmation-main { min-width:0; padding:28px; align-self:center; }
.confirmation-order .confirmation-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--border); border-radius:50%; color:var(--accent); background:var(--surface); font-size:22px; margin-bottom:17px; }
.confirmation-order .confirmation-mark svg { width:21px; height:21px; }
.confirmation-order .confirmation-kicker { font-size:6px; line-height:1.6; letter-spacing:1.8px; text-transform:uppercase; color:var(--secondary); margin-bottom:10px; }
.confirmation-order .confirmation-title { font:400 39px/1.02 var(--display); white-space:pre-line; letter-spacing:-1.3px; }
.confirmation-order .confirmation-message { font-size:10px; line-height:1.6; color:var(--secondary); max-width:285px; margin-top:13px; }
.confirmation-order .confirmation-pickup { display:flex; flex-direction:column; gap:6px; padding:14px 0; margin:18px 0; border-block:1px solid var(--border); }
.confirmation-order .confirmation-pickup-label { font-size:6px; letter-spacing:1.3px; text-transform:uppercase; color:var(--secondary); }
.confirmation-order .confirmation-pickup strong { font-size:17px; font-weight:500; }
.confirmation-order .confirmation-pickup>span:last-child { font-size:8px; color:var(--secondary); }
.confirmation-order .restaurant-cta { min-height:34px; font-size:9px; padding:10px 13px; }
.confirmation-order .confirmation-disclosure { font-size:7px; line-height:1.5; margin-top:12px; color:var(--secondary); }

/* Editorial: a closing journal spread with a quiet pickup announcement. */
[data-theme=botanical] .confirmation-order { left:0; width:100%; border:0; box-shadow:none; }
[data-theme=botanical] .confirmation-order .panel-heading { margin:0 25px; padding-inline:0; border-bottom:3px double var(--border); }
[data-theme=botanical] .confirmation-order .confirmation-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:30px; padding:22px 25px; }
[data-theme=botanical] .confirmation-order .confirmation-visual { padding:6px 6px 28px; border:1px solid var(--border); }
[data-theme=botanical] .confirmation-order .confirmation-visual figcaption { inset:auto 8px 8px; font-size:5px; color:var(--secondary); }
[data-theme=botanical] .confirmation-order .confirmation-main { padding:12px 12px 12px 0; }
[data-theme=botanical] .confirmation-order .confirmation-title { font-style:italic; font-size:clamp(34px,4.7cqw,53px); }
[data-theme=botanical] .confirmation-order .confirmation-mark { border:0; background:none; width:auto; height:26px; place-items:start; font-size:28px; }
[data-theme=botanical] .confirmation-order .confirmation-pickup { border-top:3px double var(--border); }
[data-theme=botanical] .confirmation-order .confirmation-pickup strong { font:24px Georgia,serif; }

/* Cinema: a photographic inset, dark canvas and a gold outlined invitation. */
[data-theme=night] .confirmation-order { left:6%; right:6%; top:calc(var(--header-height) + 4px); bottom:20px; width:auto; border:1px solid #a9977166; background:#1c251e; box-shadow:0 20px 50px #0005; }
[data-theme=night] .confirmation-order .panel-heading { border:0; padding:6px 20px; }
[data-theme=night] .confirmation-order .confirmation-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#0e1914d9,transparent 80%); }
[data-theme=night] .confirmation-order .confirmation-visual img { filter:brightness(.7); }
[data-theme=night] .confirmation-order .confirmation-visual figcaption { color:#f4eee2; z-index:1; font:italic 22px/1.2 Georgia,serif; letter-spacing:-.4px; }
[data-theme=night] .confirmation-order .confirmation-main { padding:25px; }
[data-theme=night] .confirmation-order .confirmation-mark { background:none; border-color:var(--accent); }
[data-theme=night] .confirmation-order .confirmation-kicker { color:var(--accent); }
[data-theme=night] .confirmation-order .confirmation-title { font-style:italic; }
[data-theme=night] .confirmation-order .confirmation-pickup strong { color:var(--accent); font:22px Georgia,serif; }
[data-theme=night] .confirmation-order .restaurant-cta { background:none; color:var(--accent); border:1px solid var(--accent); }

/* Poster: a punchy red order ticket, with the dish on its yellow stub. */
[data-theme=playful] .confirmation-order { left:0; right:0; width:100%; top:calc(var(--header-height) + 13px); border:2px solid var(--fg); border-bottom:0; box-shadow:0 -12px 40px #40170622; }
[data-theme=playful] .confirmation-order .panel-heading { border-bottom:2px solid var(--fg); padding:4px 20px; }
[data-theme=playful] .confirmation-order .confirmation-layout { grid-template-columns:minmax(0,.7fr) minmax(0,1fr); }
[data-theme=playful] .confirmation-order .confirmation-visual { margin:22px; border:3px solid var(--fg); box-shadow:5px 5px 0 var(--fg); }
[data-theme=playful] .confirmation-order .confirmation-visual figcaption { inset:auto 0 0; background:var(--fg); color:var(--canvas); padding:12px; font-weight:800; text-transform:uppercase; }
[data-theme=playful] .confirmation-order .confirmation-main { align-self:stretch; padding:27px; background:var(--fg); color:var(--canvas); display:flex; flex-direction:column; justify-content:center; }
[data-theme=playful] .confirmation-order .confirmation-mark { background:var(--canvas); border:0; color:var(--fg); transform:rotate(-9deg); border-radius:0; width:37px; height:37px; margin-bottom:14px; }
[data-theme=playful] .confirmation-order .confirmation-kicker,
[data-theme=playful] .confirmation-order .confirmation-message,
[data-theme=playful] .confirmation-order .confirmation-pickup-label,
[data-theme=playful] .confirmation-order .confirmation-pickup>span:last-child,
[data-theme=playful] .confirmation-order .confirmation-disclosure { color:var(--canvas); }
[data-theme=playful] .confirmation-order .confirmation-title { font:900 clamp(34px,5.2cqw,59px)/.9 Arial,sans-serif; text-transform:uppercase; letter-spacing:-2px; }
[data-theme=playful] .confirmation-order .confirmation-pickup { border:0; border-block:1px dashed var(--canvas); }
[data-theme=playful] .confirmation-order .confirmation-pickup strong { font-weight:800; font-size:21px; }
[data-theme=playful] .confirmation-order .restaurant-cta { background:var(--canvas); color:var(--fg); font-weight:800; align-self:flex-start; border-radius:0; }

/* Gallery: a small, image-led thank-you card in a quiet side drawer. */
[data-theme=minimal] .confirmation-order { width:350px; max-width:94%; background:#faf9f6; box-shadow:-10px 0 35px #21332411; }
[data-theme=minimal] .confirmation-order .panel-heading { border:0; padding:5px 23px; }
[data-theme=minimal] .confirmation-order .confirmation-layout { display:block; }
[data-theme=minimal] .confirmation-order .confirmation-visual { height:clamp(70px,calc(var(--preview-height) - 410px),180px); margin:0 23px; }
[data-theme=minimal] .confirmation-order .confirmation-visual figcaption { display:none; }
[data-theme=minimal] .confirmation-order .confirmation-main { padding:22px 24px; }
[data-theme=minimal] .confirmation-order .confirmation-mark { display:none; }
[data-theme=minimal] .confirmation-order .confirmation-title { font:italic 34px/1.05 Georgia,serif; }
[data-theme=minimal] .confirmation-order .confirmation-pickup { padding:13px 0; margin:17px 0; }
[data-theme=minimal] .confirmation-order .restaurant-cta { background:none; color:var(--fg); border-bottom:1px solid var(--fg); padding:5px 0; }

/* Bistro: a centered paper receipt with no photography. */
[data-theme=bistro] .confirmation-order { width:370px; max-width:90%; left:50%; right:auto; top:17px; bottom:17px; transform:translateX(-50%); border:4px double var(--fg); box-shadow:0 12px 35px #31101444; }
[data-theme=bistro] .confirmation-order .panel-heading { justify-content:center; border-bottom:1px dashed var(--border); padding:5px 20px; }
[data-theme=bistro] .confirmation-order .panel-close { position:absolute; right:9px; }
[data-theme=bistro] .confirmation-order .confirmation-layout { display:flex; flex-direction:column; }
[data-theme=bistro] .confirmation-order .confirmation-visual { display:none; }
[data-theme=bistro] .confirmation-order .confirmation-main { width:100%; text-align:center; padding:27px; margin-block:auto; flex-shrink:0; }
[data-theme=bistro] .confirmation-order .confirmation-mark { margin-inline:auto; background:none; border:3px double var(--fg); }
[data-theme=bistro] .confirmation-order .confirmation-kicker { letter-spacing:1.2px; }
[data-theme=bistro] .confirmation-order .confirmation-title { font:italic 39px/1.02 Georgia,serif; }
[data-theme=bistro] .confirmation-order .confirmation-message { font:italic 12px/1.6 Georgia,serif; margin-inline:auto; }
[data-theme=bistro] .confirmation-order .confirmation-pickup { border-block:1px dashed var(--border); margin-block:22px; }
[data-theme=bistro] .confirmation-order .confirmation-pickup strong { font:23px Georgia,serif; }
[data-theme=bistro] .confirmation-order .restaurant-cta { justify-content:center; }

/* Shop: a warm product image beside a storefront collection card. */
[data-theme=market] .confirmation-order { left:var(--sidebar-width); top:0; width:calc(100% - var(--sidebar-width)); border:0; box-shadow:none; }
[data-theme=market] .confirmation-order .panel-heading { padding:6px 24px; }
[data-theme=market] .confirmation-order .confirmation-layout { grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:23px; padding:23px; }
[data-theme=market] .confirmation-order .confirmation-visual { border-radius:7px; }
[data-theme=market] .confirmation-order .confirmation-visual figcaption { inset:auto 13px 13px; padding:9px 12px; background:var(--surface); border-radius:4px; font-size:7px; letter-spacing:0; }
[data-theme=market] .confirmation-order .confirmation-main { padding:25px; background:var(--surface); border-radius:7px; }
[data-theme=market] .confirmation-order .confirmation-mark { background:var(--fg); color:var(--surface); border:0; border-radius:7px; }
[data-theme=market] .confirmation-order .confirmation-title { font:800 35px/.99 Arial,sans-serif; letter-spacing:-1.5px; }
[data-theme=market] .confirmation-order .confirmation-pickup { padding:15px; border:0; border-radius:5px; background:var(--canvas); }
[data-theme=market] .confirmation-order .restaurant-cta { width:100%; justify-content:space-between; }

@container(max-width:650px) {
  .confirmation-order .confirmation-main { padding:22px; }
  .confirmation-order .confirmation-title { font-size:32px; }
  .confirmation-order .confirmation-message { font-size:9px; }
  [data-theme=botanical] .confirmation-order .confirmation-layout { gap:20px; padding:18px; }
  [data-theme=night] .confirmation-order { left:3%; right:3%; }
  [data-theme=playful] .confirmation-order .confirmation-visual { margin:17px; }
  [data-theme=playful] .confirmation-order .confirmation-main { padding:20px; }
  [data-theme=market] .confirmation-order .confirmation-layout { gap:14px; padding:16px; }
  [data-theme=market] .confirmation-order .confirmation-main { padding:18px; }
}

@container(max-width:480px) {
  .restaurant-site .confirmation-order { left:0; right:0; width:100%; max-width:none; top:var(--header-height); bottom:0; transform:none; }
  .confirmation-order .panel-heading { min-height:32px; padding:2px 17px; }
  .confirmation-order .confirmation-layout { display:block; }
  .confirmation-order .confirmation-visual { height:clamp(45px,calc(var(--preview-height) - 390px),105px); }
  .confirmation-order .confirmation-visual figcaption { inset:auto 13px 10px; font-size:5px; }
  .confirmation-order .confirmation-main { padding:15px 20px; }
  .confirmation-order .confirmation-mark { width:27px; height:27px; font-size:16px; margin-bottom:10px; }
  .confirmation-order .confirmation-mark svg { width:16px; height:16px; }
  .confirmation-order .confirmation-kicker { font-size:5px; margin-bottom:7px; letter-spacing:1.2px; }
  .confirmation-order .confirmation-title { font-size:31px; letter-spacing:-.8px; }
  .confirmation-order .confirmation-message { font-size:9px; line-height:1.5; margin-top:9px; }
  .confirmation-order .confirmation-pickup { padding:10px 0; margin:12px 0; gap:4px; }
  .confirmation-order .confirmation-pickup strong { font-size:16px; }
  .confirmation-order .restaurant-cta { font-size:9px; min-height:33px; padding:9px 12px; }
  .confirmation-order .confirmation-disclosure { margin-top:9px; font-size:7px; }
  [data-theme=botanical] .confirmation-order .panel-heading { margin-inline:17px; }
  [data-theme=botanical] .confirmation-order .confirmation-layout { display:block; padding:12px 17px 15px; }
  [data-theme=botanical] .confirmation-order .confirmation-visual { height:clamp(45px,calc(var(--preview-height) - 400px),110px); padding:4px; }
  [data-theme=botanical] .confirmation-order .confirmation-visual figcaption { display:none; }
  [data-theme=botanical] .confirmation-order .confirmation-main { padding:14px 0 0; }
  [data-theme=botanical] .confirmation-order .confirmation-mark { display:none; }
  [data-theme=botanical] .confirmation-order .confirmation-title { font-size:34px; }
  [data-theme=botanical] .confirmation-order .confirmation-pickup strong { font-size:21px; }
  [data-theme=night] .confirmation-order { left:10px; right:10px; top:calc(var(--header-height) + 9px); bottom:12px; width:calc(100% - 20px); }
  [data-theme=night] .confirmation-order .panel-heading { padding:2px 16px; }
  [data-theme=night] .confirmation-order .confirmation-visual { height:clamp(42px,calc(var(--preview-height) - 410px),92px); }
  [data-theme=night] .confirmation-order .confirmation-visual figcaption { font-size:14px; }
  [data-theme=night] .confirmation-order .confirmation-main { padding:14px 18px; }
  [data-theme=night] .confirmation-order .confirmation-mark { display:none; }
  [data-theme=night] .confirmation-order .confirmation-pickup strong { font-size:19px; }
  [data-theme=playful] .confirmation-order { top:calc(var(--header-height) + 10px); }
  [data-theme=playful] .confirmation-order .panel-heading { padding:2px 16px; }
  [data-theme=playful] .confirmation-order .confirmation-visual { display:none; }
  [data-theme=playful] .confirmation-order .confirmation-main { min-height:100%; padding:19px; }
  [data-theme=playful] .confirmation-order .confirmation-mark { width:31px; height:31px; margin-bottom:13px; }
  [data-theme=playful] .confirmation-order .confirmation-title { font-size:43px; letter-spacing:-1.8px; }
  [data-theme=playful] .confirmation-order .confirmation-pickup strong { font-size:20px; }
  [data-theme=minimal] .confirmation-order { left:auto; width:94%; }
  [data-theme=minimal] .confirmation-order .panel-heading { padding:2px 20px; }
  [data-theme=minimal] .confirmation-order .confirmation-visual { height:clamp(58px,calc(var(--preview-height) - 385px),130px); margin:0 20px; }
  [data-theme=minimal] .confirmation-order .confirmation-main { padding:17px 21px; }
  [data-theme=minimal] .confirmation-order .confirmation-title { font-size:31px; }
  [data-theme=minimal] .confirmation-order .confirmation-pickup { padding:10px 0; margin:12px 0; }
  [data-theme=bistro] .confirmation-order { left:12px; right:12px; width:calc(100% - 24px); top:12px; bottom:12px; }
  [data-theme=bistro] .confirmation-order .panel-heading { padding:2px 16px; }
  [data-theme=bistro] .confirmation-order .confirmation-layout { display:flex; }
  [data-theme=bistro] .confirmation-order .confirmation-main { padding:22px; }
  [data-theme=bistro] .confirmation-order .confirmation-mark { width:38px; height:38px; margin-bottom:16px; }
  [data-theme=bistro] .confirmation-order .confirmation-title { font-size:37px; }
  [data-theme=bistro] .confirmation-order .confirmation-message { font-size:11px; }
  [data-theme=bistro] .confirmation-order .confirmation-pickup { margin:17px 0; }
  [data-theme=bistro] .confirmation-order .confirmation-pickup strong { font-size:22px; }
  [data-theme=market] .confirmation-order .panel-heading { padding:2px 17px; }
  [data-theme=market] .confirmation-order .confirmation-layout { display:block; padding:12px 15px 15px; }
  [data-theme=market] .confirmation-order .confirmation-visual { height:clamp(48px,calc(var(--preview-height) - 402px),100px); margin-bottom:12px; }
  [data-theme=market] .confirmation-order .confirmation-visual figcaption { inset:auto 8px 8px; padding:5px 8px; font-size:5px; }
  [data-theme=market] .confirmation-order .confirmation-main { padding:16px; }
  [data-theme=market] .confirmation-order .confirmation-mark { display:none; }
  [data-theme=market] .confirmation-order .confirmation-title { font-size:29px; letter-spacing:-1px; }
  [data-theme=market] .confirmation-order .confirmation-pickup { padding:11px; }
}