/**
 * css/theme-photokiosk.css
 * Skin for the Photo Kiosk journey — same mechanism/variable convention as
 * theme-parties.css/theme-schools.css (--theme-* prefixed, read generically
 * by na- components; applied once via na_apply_journey_theme('photokiosk')).
 *
 * DELIBERATELY LIGHT, not a dark atmosphere theme like Xmas. Xmas/Parties are
 * a browsing occasion; this is a short, focused task someone does once,
 * often on a kiosk screen right after coming off a ride — legibility and
 * "get me to my photos fast" beat mood-setting. The look borrows from an
 * instant/Polaroid print instead: cream background, warm amber accent,
 * white cards with a deliberately thick bottom edge (the Polaroid "frame").
 */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap');

.theme-photokiosk {
  --theme-font: 'Quicksand', sans-serif;
  --theme-btn-bg: #e67e22;
  --theme-btn-color: #ffffff;
  --theme-border: #2b2b2b;
  --pb-cream: #fdf6ec;
  --pb-amber: #e67e22;
  --pb-amber-dk: #b8620f;

  background: var(--pb-cream);
  min-height: 100vh;
  font-family: var(--theme-font);
  color: #2b2b2b;
}

.theme-photokiosk h1, .theme-photokiosk h2, .theme-photokiosk h3 {
  font-weight: 700;
}
.theme-photokiosk h1 i {
  color: var(--theme-btn-bg);
}

/* ── Cards — the Polaroid treatment: white, a normal thin border on three
   sides, a noticeably thicker cream-coloured strip at the bottom, like the
   white border under an instant print. Subtle, not a literal photo frame —
   it should read as "this app has a personality" at a glance, not costume. */
.theme-photokiosk .card {
  border: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 10px solid var(--pb-cream);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .08);
}
.theme-photokiosk .na-panel-header {
  background-color: var(--theme-btn-bg);
  color: #fff;
  border-radius: 9px 9px 0 0;
}

/* ── Buttons ── */
.theme-photokiosk .btn-success,
.theme-photokiosk .btn-primary {
  --bs-btn-bg: var(--theme-btn-bg);
  --bs-btn-border-color: var(--theme-border);
  --bs-btn-color: var(--theme-btn-color);
  --bs-btn-hover-bg: var(--pb-amber-dk);
  --bs-btn-hover-border-color: var(--theme-border);
  --bs-btn-hover-color: var(--theme-btn-color);
}
.theme-photokiosk .btn-outline-secondary {
  --bs-btn-color: var(--theme-btn-bg);
  --bs-btn-border-color: var(--theme-btn-bg);
  --bs-btn-hover-bg: var(--theme-btn-bg);
  --bs-btn-hover-border-color: var(--theme-btn-bg);
  --bs-btn-hover-color: var(--theme-btn-color);
}
.theme-photokiosk .btn-success.na-btn-nav,
.theme-photokiosk .btn-outline-secondary.na-btn-nav {
  border-radius: 8px;
  font-weight: 700;
  padding: .65rem 1.85rem;
  letter-spacing: .01em;
  transition: box-shadow .2s, transform .1s;
}
.theme-photokiosk .btn-success.na-btn-nav:not(:disabled):hover {
  box-shadow: 0 6px 20px rgba(230, 126, 34, .35);
  transform: translateY(-1px);
}

/* ── Step pills ── */
.theme-photokiosk .na-step-pill-active {
  background: var(--theme-btn-bg);
  color: var(--theme-btn-color);
  border-color: var(--theme-border);
}
.theme-photokiosk .na-step-pill-link:hover {
  background: rgba(230, 126, 34, .12);
  color: var(--theme-btn-bg);
}
.theme-photokiosk .na-step-sep {
  color: var(--theme-btn-bg);
}

/* ── Small controls (qty steppers) ── */
.theme-photokiosk .na-vqc-dec,
.theme-photokiosk .na-vqc-inc {
  color: var(--theme-btn-bg);
  border-color: var(--theme-btn-bg);
}
.theme-photokiosk .na-vqc-dec:hover,
.theme-photokiosk .na-vqc-inc:hover {
  background: var(--theme-btn-bg);
  color: var(--theme-btn-color);
  border-color: var(--theme-border);
}
.theme-photokiosk input:focus,
.theme-photokiosk select:focus,
.theme-photokiosk textarea:focus {
  outline: none;
  border-color: var(--theme-btn-bg) !important;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, .22);
}

/* ═══════════════════════════════════════════════════════════════════════
   The three-panel editor (photokiosk/select.php + photokiosk_editor.js) —
   package picker (top-left) / photo thumbnails (top-right) / frame canvas
   (bottom), the layout asked for directly. Kept in this theme file rather
   than newapp.css: nothing else in the app has a canvas-based editor, so
   there is no shared convention yet to slot this into — if a second journey
   ever needs one, promote the structural (non-colour) rules to newapp.css
   then, not speculatively now.
   ═══════════════════════════════════════════════════════════════════════ */

.na-pk-editor-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem;
}
@media (max-width: 991px) {
  .na-pk-editor-top { grid-template-columns: 1fr; }
}

.na-pk-thumbs-panel {
  max-height: 340px;
  overflow-y: auto;
}
.na-pk-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.na-pk-thumb {
  border: 2px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  overflow: hidden;
  cursor: grab;
  background: #fff;
  padding: 0;
  aspect-ratio: 1;
  touch-action: manipulation;
}
.na-pk-thumb:active { cursor: grabbing; }
.na-pk-thumb.na-pk-thumb-staged {
  border-color: var(--theme-btn-bg);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, .25);
}
.na-pk-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* so drag events fire on the button, not the <img> */
}

.na-pk-frames-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.na-pk-frame-copy {
  border: 1px dashed rgba(0, 0, 0, .15);
  border-radius: 10px;
  padding: 10px;
}
.na-pk-frame-copy-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pb-amber-dk);
  margin-bottom: 6px;
}
.na-pk-frame {
  border: 2px solid rgba(0, 0, 0, .18);
  border-radius: 8px;
  background: repeating-conic-gradient(#f3f3f3 0% 25%, #fff 0% 50%) 50% / 14px 14px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 8px 8px 0;
}
.na-pk-frame.na-pk-frame-dragover {
  border-color: var(--theme-btn-bg);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, .3);
}
.na-pk-frame.na-pk-frame-active {
  border-color: var(--theme-btn-bg);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, .3);
}
.na-pk-frame canvas { display: block; max-width: 100%; }
.na-pk-frame-label {
  position: absolute;
  bottom: 2px;
  left: 4px;
  right: 4px;
  font-size: .62rem;
  background: rgba(255, 255, 255, .82);
  border-radius: 4px;
  padding: 1px 4px;
  pointer-events: none;
  color: #2b2b2b;
}
.na-pk-frame-empty-icon {
  color: rgba(0, 0, 0, .25);
  font-size: 1.4rem;
}

.na-pk-tool-btn.active {
  background: var(--theme-btn-bg);
  color: #fff;
  border-color: var(--theme-btn-bg);
}

/* ═══════════════════════════════════════════════════════════════════════
   The kiosk entry screen (photokiosk/index.php, office-IP path).

   Sized for a wall-mounted touchscreen used by someone standing up with a
   finger, not a mouse — every target here is comfortably past the ~44px
   minimum for touch, and the reference readout is deliberately huge so a
   parent can check the digits from arm's length before committing.
   ═══════════════════════════════════════════════════════════════════════ */

.na-pk-kiosk {
  /* Grows on a real kiosk display, stays sane on a laptop or tablet. */
  max-width: clamp(420px, 46vh, 600px);
  margin: 0 auto;
  padding: 1rem 0 2rem;
}
.na-pk-kiosk-icon {
  font-size: 3rem;
  color: var(--theme-btn-bg);
}
.na-pk-kiosk-title {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 700;
  margin: .5rem 0 .25rem;
}
.na-pk-kiosk-sub {
  font-size: 1.05rem;
  color: #6b6257;
  margin-bottom: 1.5rem;
}
.na-pk-kiosk-error {
  font-size: 1.05rem;
  text-align: center;
}

/* The reference readout. Monospace + wide tracking so 6 vs 8 vs B is
   unambiguous at a glance — this is the number someone reads back off a
   wristband, and a misread digit is a failed lookup they can't explain. */
.na-pk-kiosk-input {
  display: block;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(2rem, 7vw, 2.75rem);
  letter-spacing: .12em;
  text-align: center;
  padding: .6rem .5rem;
  border: 3px solid var(--theme-btn-bg);
  border-radius: 12px;
  background: #fff;
  color: #2b2b2b;
}
.na-pk-kiosk-input::placeholder { color: rgba(0, 0, 0, .18); }
.na-pk-kiosk-input:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(230, 126, 34, .25);
}

.na-pk-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 1.1rem 0;
}
.na-pk-key {
  font-size: clamp(1.9rem, 3.2vh, 2.6rem);
  font-weight: 600;
  min-height: clamp(72px, 8vh, 104px);
  border: 2px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  background: #fff;
  color: #2b2b2b;
  /* No tap-highlight flash, no accidental text selection from a fast
     double-tap, no 300ms delay. */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
  transition: transform .06s, background-color .12s;
}
.na-pk-key:active {
  background: var(--theme-btn-bg);
  color: #fff;
  transform: scale(.96);
}
.na-pk-key-alt {
  font-size: 1.4rem;
  color: var(--pb-amber-dk);
  background: rgba(230, 126, 34, .08);
}

.na-pk-kiosk-go {
  display: block;
  width: 100%;
  min-height: clamp(68px, 7.5vh, 96px);
  font-size: clamp(1.3rem, 2.4vh, 1.7rem);
  font-weight: 700;
  color: #fff;
  background: var(--theme-btn-bg);
  border: 2px solid var(--theme-border);
  border-radius: 12px;
  touch-action: manipulation;
}
.na-pk-kiosk-go:disabled { opacity: .65; }

.na-pk-kiosk-foot {
  text-align: center;
  margin: 1.25rem 0 0;
  font-size: .9rem;
  color: #6b6257;
}

/* The dash hint + Clear, sitting between the readout and the keypad. Clear is
   deliberately small and secondary: it wipes everything, and at a kiosk the
   common correction is one wrong digit (backspace), not a full restart. */
.na-pk-kiosk-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .5rem .15rem 0;
  font-size: .85rem;
  color: #6b6257;
}
.na-pk-clear {
  border: none;
  background: none;
  /* Was 52x30 — below both the 44px (Apple) and 48px (Material) touch
     minimums, and a miss-tap here wipes the whole code. Secondary in WEIGHT
     now, not in hit area. */
  min-height: 48px;
  min-width: 88px;
  padding: .5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pb-amber-dk);
  text-decoration: underline;
  touch-action: manipulation;
}

/* DEV ONLY — the check-digit helper on the kiosk screen. Deliberately ugly:
   it must never be mistaken for something a customer is meant to see, and if
   it ever appears on live that is a bug worth noticing immediately. */
.na-pk-devhint {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .45rem;
  border: 1px dashed #b8620f;
  border-radius: 4px;
  background: #fff3cd;
  color: #7a4a06;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  font-weight: 700;
}

/* "Your pack: 1 x A4 Portrait (210x297mm), 4 x Passport (35x45mm)" — the frames
   below are drawn to scale, but nobody should have to measure them by eye. */
.na-pk-contents {
  font-size: .95rem;
  padding: .6rem .85rem;
  background: rgba(230, 126, 34, .08);
  border-left: 4px solid var(--theme-btn-bg);
  border-radius: 6px;
}
.na-pk-scale-note {
  display: inline-block;
  margin-left: .5rem;
  font-size: .75rem;
  font-style: italic;
  color: #6b6257;
}
/* Physical size on each frame, under its name. Small and quiet — it is
   reassurance, not the main label. */
.na-pk-frame-size {
  display: block;
  font-size: .58rem;
  opacity: .75;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE WORKSPACE (photokiosk/select.php): rebuilt 2026-09-10.

   Four full-width bands, in the order the sale actually happens:

     ┌──────────────────────────────────────────────┐
     │ 1  your choices     → → →                    │  big, scrolls
     │    all your photos  → → →                    │  small, scrolls
     │    [ Suggest the best value pack ]           │
     ├──────────────────────────────────────────────┤
     │ 2  ( Add effects ) ( Fit to your prints )    │  tabs, one canvas
     │            canvas          tools             │
     ├───────────────────────────────┬──────────────┤
     │ 3  your prints  → → →         │  basket      │  2/3 and 1/3
     └───────────────────────────────┴──────────────┘

   Full width throughout, because every one of these is a row of pictures
   being compared with each other, and a column would let you see three of
   them at a time.

   BUILT FOR A TOUCHSCREEN AND A MOUSE AT ONCE. Nothing here reveals itself
   on hover, every target clears 44px, and every sideways strip carries real
   arrows. See .na-pk-scroller.
   ═══════════════════════════════════════════════════════════════════════ */

.na-pk-page { max-width: 1600px; }
.na-pk-app { display: flex; flex-direction: column; gap: 1rem; }
.na-pk-band { margin: 0; }

/* ── Sideways strips ──────────────────────────────────────────────────────
   The arrows are not decoration and not a touch fallback: they are how the
   half of the audience on a mouse moves a strip that shows no scrollbar. They
   fade out when there is nothing to scroll, so the control never lies. */
.na-pk-scroller {
  position: relative;
  display: flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
}
.na-pk-scroll-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* Snap so a swipe lands on a whole tile rather than halfway across one. */
  scroll-snap-type: x proximity;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}
.na-pk-scroll-track > * { scroll-snap-align: start; flex: 0 0 auto; }
.na-pk-scroll-btn {
  flex: 0 0 auto;
  width: 38px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 9px;
  background: #fff;
  color: #444;
  font-size: 1.1rem;
  cursor: pointer;
  /* Present but inert when the strip fits, rather than appearing and
     disappearing as the content changes and shifting everything sideways. */
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s;
}
.na-pk-scroller-active .na-pk-scroll-btn { opacity: 1; visibility: visible; }
.na-pk-scroll-btn:disabled { opacity: .3; cursor: default; }
.na-pk-scroll-btn:not(:disabled):hover { background: #f3f0ec; }

/* ── Band 1: the photos ─────────────────────────────────────────────────── */
.na-pk-photos-body { display: flex; flex-direction: column; gap: .75rem; }
.na-pk-row { min-width: 0; }
.na-pk-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}
.na-pk-row-title { font-size: .85rem; font-weight: 700; color: #5b524a; }
.na-pk-row-note { font-size: .78rem; color: #6b6257; }

/* The chosen row is deliberately the bigger one. It is the customer's own
   gallery of what they have decided on, and it should feel like a promotion
   when a photo arrives in it. */
.na-pk-chosen-row { padding: .5rem .25rem; background: rgba(230, 126, 34, .07); border-radius: 10px; }
.na-pk-track-chosen .na-pk-photo { width: 170px; }
.na-pk-track-library .na-pk-photo { width: 104px; }

/* BEFORE ANYTHING IS PICKED, the library is the whole screen's job, so it is
   drawn at roughly two and a half times the size it settles at. Nothing else is
   competing for the space yet � there is no chosen row and nothing on the
   canvas � and a wall of small thumbnails is a worse way to recognise your own
   child than a handful of big ones.
   The first pick is what shrinks them, which also makes the first tap visibly
   do something to the whole screen rather than only to one tile. */
.na-pk-nothing-picked .na-pk-track-library .na-pk-photo { width: 260px; }
.na-pk-photo { transition: width .22s ease; }

.na-pk-photo {
  position: relative;
  border-radius: 10px;
  /* A tap must never select the image or raise the OS image menu: both make
     a press-and-hold feel like something went wrong. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.na-pk-photo-hit {
  display: block;
  width: 100%;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
}
.na-pk-photo-hit img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  pointer-events: none;
}
.na-pk-photo-chosen .na-pk-photo-hit { border-color: #198754; }
.na-pk-photo-active .na-pk-photo-hit {
  border-color: var(--theme-btn-bg);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, .3);
}

/* The tick is an INDICATOR, not a button: removing is the ✕, which is a
   separate target so the two can never be confused under a thumb. */
.na-pk-photo-tick {
  position: absolute;
  left: 6px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: #198754;
  color: #fff;
  font-size: .8rem;
  pointer-events: none;
}
.na-pk-photo-chosen .na-pk-photo-tick { display: grid; }

.na-pk-photo-used {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(25, 135, 84, .92);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  pointer-events: none;
}
.na-pk-photo-fx {
  position: absolute;
  right: 6px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(111, 66, 193, .92);
  color: #fff;
  font-size: .7rem;
  pointer-events: none;
}

.na-pk-photo-remove,
.na-pk-photo-zoom {
  position: absolute;
  top: 4px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: .75rem;
  cursor: pointer;
}
.na-pk-photo-remove { right: 4px; background: rgba(176, 42, 42, .85); }
.na-pk-photo-zoom { right: 4px; }
/* Both present at once only in the chosen row, so they sit side by side there. */
.na-pk-photo-chosen .na-pk-photo-zoom { right: 38px; }
.na-pk-photo-remove:hover { background: rgba(176, 42, 42, 1); }
.na-pk-photo-zoom:hover { background: rgba(0, 0, 0, .8); }

.na-pk-library-empty { align-self: center; padding: 1rem; color: #8a8078; font-size: .85rem; }

/* ── Band 2: the pack ─────────────────────────────────────────────────────
   One button, deliberately the largest thing on the screen after the photos.
   This is the moment the order is made. */
.na-pk-packbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: .25rem;
  border-top: 1px dashed rgba(0, 0, 0, .1);
}
.na-pk-suggest-btn { min-height: 56px; font-weight: 700; }
.na-pk-packbar-state { font-size: .9rem; color: #5b524a; cursor: pointer; }
.na-pk-overpick { color: #b02a2a; font-weight: 600; }

/* ── Band 3: the working area ─────────────────────────────────────────────
   Effects and Assign are tabs over ONE canvas: they act on the same picture,
   customers move between them constantly, and two canvases side by side would
   leave neither big enough to judge a photograph by. */
.na-pk-work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.na-pk-tabs { display: flex; gap: .35rem; }
.na-pk-tab {
  padding: .5rem .95rem;
  min-height: 44px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 9px;
  background: #fff;
  color: #5b524a;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
}
.na-pk-tab.active {
  background: var(--theme-btn-bg);
  border-color: var(--theme-btn-bg);
  color: #fff;
}
.na-pk-work-hint { color: #6b6257; }

.na-pk-stage-body { min-height: 320px; }
.na-pk-stage-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 280px;
  color: #8a8078;
  text-align: center;
}
.na-pk-stage-empty i { font-size: 2rem; color: var(--theme-btn-bg); opacity: .55; }

.na-pk-stage-live { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.na-pk-canvas-col { display: flex; flex-direction: column; gap: .5rem; align-items: center; flex: 0 0 auto; }
.na-pk-canvas-wrap {
  border: 2px dashed rgba(0, 0, 0, .15);
  border-radius: 8px;
  overflow: hidden;
  background: repeating-conic-gradient(#f3f3f3 0% 25%, #fff 0% 50%) 50% / 14px 14px;
  /* The pan and pinch handlers own every gesture inside the canvas. Without
     this the browser scrolls the page instead of moving the photo. */
  touch-action: none;
  cursor: grab;
}
.na-pk-canvas-wrap:active { cursor: grabbing; }
.na-pk-canvas-wrap canvas { display: block; }

.na-pk-zoombar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.na-pk-zoom-label { min-width: 3.4em; text-align: center; font-size: .82rem; font-variant-numeric: tabular-nums; }
.na-pk-drag-hint { font-size: .75rem; color: #8a8078; }

.na-pk-tools-col { flex: 1 1 300px; min-width: 260px; }
.na-pk-tools { display: flex; flex-direction: column; gap: .8rem; }
.na-pk-toolgroup { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.na-pk-toolgroup-label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a8078; }
.na-pk-toolgroup-note { text-transform: none; letter-spacing: 0; font-weight: 400; font-style: italic; }
.na-pk-toolrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.na-pk-toolrow-main { margin-top: .35rem; padding-top: .6rem; border-top: 1px solid rgba(0, 0, 0, .08); }
.na-pk-tools .btn { min-height: 46px; }
.na-pk-tool-btn.active {
  background: var(--theme-btn-bg);
  border-color: var(--theme-btn-bg);
  color: #fff;
}

/* Which print is being filled, above its own tools, so the two are never
   read apart from each other. */
.na-pk-assign-target {
  padding: .45rem .7rem;
  background: rgba(230, 126, 34, .1);
  border-left: 4px solid var(--theme-btn-bg);
  border-radius: 6px;
  font-size: .92rem;
}

/* "Save this look" earns attention only once something has actually changed. */
@keyframes naPkPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .5); }
  50%      { box-shadow: 0 0 0 7px rgba(25, 135, 84, 0); }
}
.na-pk-pulse { animation: naPkPulse 1.8s ease-out infinite; }

/* ── Backdrop / border pickers ────────────────────────────────────────────
   Scrolls sideways rather than wrapping: the artwork has to be big enough to
   recognise at a glance (you are choosing a PICTURE, not reading a label), and
   wrapping a growing library of them would push the commit button off a kiosk
   screen. */
.na-pk-artrow { align-items: flex-start; }
.na-pk-art-btn {
  width: 82px;
  padding: 3px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1.1;
}
.na-pk-art-btn img,
.na-pk-art-none {
  display: block;
  width: 100%;
  height: 54px;
  object-fit: cover;
  border-radius: 7px;
  background: #f1f1f1;
}
.na-pk-art-none { display: grid; place-items: center; color: #999; font-size: 1.2rem; }
.na-pk-art-label {
  display: block;
  margin-top: 3px;
  font-size: .66rem;
  color: #555;
  /* One line, clipped: two-line labels make the strip jump about as you scroll. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.na-pk-art-btn.active { border-color: var(--theme-accent, #0d6efd); }
.na-pk-art-btn.active .na-pk-art-label { color: var(--theme-accent, #0d6efd); font-weight: 600; }

/* Turns the ARTWORK, not the photo. Stacked, so the pair costs one thumbnail's
   width rather than pushing the artwork along the strip. */
.na-pk-artrow-rotate { display: flex; flex-direction: column; gap: 2px; align-self: flex-start; }
.na-pk-art-rotate {
  width: 34px;
  height: 33px;
  padding: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 7px;
  color: #444;
  cursor: pointer;
}
.na-pk-art-rotate:disabled { opacity: .35; cursor: default; }

/* ── Band 4: prints and basket, one line ──────────────────────────────────
   Two thirds and one third. A strip of prints is SCANNED, so it needs width; a
   basket is read once, so it does not. */
.na-pk-bottom {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 1rem;
  align-items: start;
}
.na-pk-prints { margin: 0; }
.na-pk-prints-body { padding: .6rem .5rem; }
.na-pk-frames-track { align-items: flex-end; min-height: 132px; }
.na-pk-basket { display: flex; flex-direction: column; }

/* One print. The box is to scale; the whole tile is the touch target, which is
   why the name sits inside the button rather than under it. */
.na-pk-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.na-pk-tile:hover { background: rgba(230, 126, 34, .06); }
.na-pk-tile-active { border-color: var(--theme-btn-bg); background: rgba(230, 126, 34, .1); }

.na-pk-tile-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0, 0, 0, .2);
  border-radius: 4px;
  background: repeating-conic-gradient(#f3f3f3 0% 25%, #fff 0% 50%) 50% / 12px 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.na-pk-tile-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.na-pk-tile-filled .na-pk-tile-box { border-color: #198754; }

.na-pk-tile-meta { line-height: 1.15; text-align: center; }
.na-pk-tile-name { display: block; font-size: .72rem; font-weight: 600; }
.na-pk-tile-size { display: block; font-size: .62rem; opacity: .7; }
.na-pk-frame-copy-label {
  align-self: center;
  writing-mode: vertical-rl;
  font-size: .65rem;
  color: #8a8078;
  text-transform: uppercase;
}

/* Why the print strip is empty. A screen that renders nothing when
   configuration is incomplete looks broken and teaches nobody anything: this
   says which of the two problems it is. */
.na-pk-frames-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .4rem;
  padding: 1rem .75rem;
  color: #8a8078;
  width: 100%;
}
.na-pk-frames-empty i { font-size: 1.6rem; color: var(--theme-btn-bg); opacity: .6; }

/* ── Press and hold ───────────────────────────────────────────────────────
   One overlay reused for every photo: a node per thumbnail would mean a
   hundred full-size images in the document on a busy visit. */
.na-pk-peek {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: 4vmin;
  background: rgba(0, 0, 0, .88);
}
.na-pk-peek[hidden] { display: none; }
.na-pk-peek img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.na-pk-peek-close { color: #fff; font-size: .95rem; }

/* ── The pack chooser ─────────────────────────────────────────────────────
   Cards, not rows: the packs are being compared with each other, and a
   comparison wants them side by side. */
.na-pk-packs-lede { font-size: .95rem; color: #5b524a; }
.na-pk-pack-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem;
}
.na-pk-pack {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .85rem;
  border: 2px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  background: #fff;
}
.na-pk-pack[hidden] { display: none; }
.na-pk-pack-recommended {
  border-color: #198754;
  box-shadow: 0 0 0 4px rgba(25, 135, 84, .12);
}
.na-pk-pack-is-current { border-color: var(--theme-btn-bg); background: rgba(230, 126, 34, .06); }
.na-pk-pack-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.na-pk-pack-name { font-weight: 700; }
.na-pk-pack-price { font-weight: 700; font-size: 1.1rem; }
.na-pk-pack-count { font-size: .82rem; color: #6b6257; }
.na-pk-pack-shapes { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; min-height: 40px; }
.na-pk-pack-badges { display: flex; flex-direction: column; gap: .2rem; min-height: 1.2rem; }
.na-pk-pack-best { font-size: .78rem; font-weight: 700; color: #198754; }
.na-pk-pack-extra { font-size: .78rem; font-weight: 600; color: #198754; }
.na-pk-pack-current { font-size: .78rem; font-weight: 700; color: var(--theme-btn-bg); }
.na-pk-pack-choose { margin-top: auto; min-height: 46px; }
.na-pk-pack-best[hidden], .na-pk-pack-extra[hidden], .na-pk-pack-current[hidden] { display: none !important; }

/* Pack shapes, drawn to true relative scale from the pack's own formats, so
   "Bundle 2" is read as four little prints and one big one rather than a name. */
.na-pk-mini { display: flex; align-items: flex-end; gap: 2px; }
.na-pk-mini-box {
  display: block;
  border: 1px solid rgba(0, 0, 0, .35);
  border-radius: 2px;
  background: repeating-conic-gradient(#f3f3f3 0% 25%, #fff 0% 50%) 50% / 6px 6px;
}
.na-pk-mini-qty { font-size: .62rem; color: #666; line-height: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   PORTRAIT: the shape this is actually built for.

   The booth runs on a tall kiosk screen, the McDonald's order-point shape.
   Everything above also has to work in landscape, because the same page is
   used on a laptop at home and by staff checking an order.

   Keyed on ORIENTATION, not width, and that distinction is the whole point: a
   1080x1920 kiosk is 1080 CSS pixels wide, comfortably past any sensible width
   breakpoint, so a width query hands a portrait screen the landscape layout,
   exactly the wrong way round.
   ═══════════════════════════════════════════════════════════════════════ */
@media (orientation: portrait) {
  /* Canvas above, tools beneath: never side by side, which would squeeze the
     print into a column narrower than the buttons next to it. */
  .na-pk-stage-live { flex-direction: column; align-items: stretch; }
  .na-pk-canvas-col { align-self: center; }
  .na-pk-tools-col { width: 100%; min-width: 0; }

  /* Reachable. A kiosk is used standing up with one hand, and the row that
     commits a print is the one that must never need a careful press. */
  .na-pk-tools .btn { min-height: 56px; }
  .na-pk-tab { min-height: 52px; }

  /* Prints and basket stack: 260px of basket beside a strip of prints costs a
     quarter of the width of a portrait screen. */
  .na-pk-bottom { grid-template-columns: 1fr; }

  .na-pk-track-chosen .na-pk-photo { width: 150px; }
  .na-pk-track-library .na-pk-photo { width: 96px; }
  .na-pk-nothing-picked .na-pk-track-library .na-pk-photo { width: 240px; }
}

/* Narrow phones: a real case for the at-home half of the audience. */
@media (max-width: 575px) {
  .na-pk-bottom { grid-template-columns: 1fr; }
  .na-pk-track-chosen .na-pk-photo { width: 132px; }
  .na-pk-track-library .na-pk-photo { width: 88px; }
  .na-pk-nothing-picked .na-pk-track-library .na-pk-photo { width: 220px; }
  .na-pk-suggest-btn { width: 100%; }
}

/* Nobody is animating anything at somebody who asked us not to. */
@media (prefers-reduced-motion: reduce) {
  .na-pk-pulse { animation: none; }
  .na-pk-scroll-track { scroll-behavior: auto; }
}