/*
 * STYLE-REDESIGN.CSS — Studrio Booth Pages 2–6 UI Redesign
 *
 * Load AFTER style.css and animations.css.
 * Overrides and extends layout, typography, and animation for Pages 2–6.
 *
 * Reference canvas: 1920 × 1080 (16:9).
 * All pixel values are expressed in vh/vw relative to the 1920×1080 kiosk
 * container so they scale correctly on any display.
 *
 * Design language:
 *   – Square-grid background on all workflow pages (Pages 2–6)
 *   – Studrio yellow (#F0C231 / #FFDD66) + white
 *   – NEXT button: gradient #fffbee → #ffdd66, radius 25px 0 25px 0
 *   – No progress bar, no BACK buttons on Pages 2–6
 *   – Timer: continuously spinning gray track + gray countdown stroke
 */

/* ══════════════════════════════════════════════════════════════════════════
 * 0. DESIGN TOKENS
 * ══════════════════════════════════════════════════════════════════════════ */
:root {
  --studrio-yellow:   #F0C231;
  --studrio-yellow-2: #FFDD66;
  --studrio-cream:    #FFFBEE;
  --studrio-black:    #1A1200;

  /* Grid background */
  --grid-size:        40px;
  --grid-color:       rgba(0, 0, 0, 0.055);

  /* NEXT button gradient */
  --next-grad-start:  #fffbee;
  --next-grad-end:    #ffdd66;
  --next-radius:      0;

  /* Kiosk timer: light track + Studrio yellow stroke */
  --timer-track-color:    #e0e0e0;
  --timer-stroke-color:   #F0C231;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 1. HIDE PROGRESS BAR ON ALL WORKFLOW PAGES (Pages 2–6)
 * ══════════════════════════════════════════════════════════════════════════ */

/* Hide the progress bar on every workflow page as per spec */
#kiosk-progress[data-active-page="setup"],
#kiosk-progress[data-active-page="frame"],
#kiosk-progress[data-active-page="shooting"],
#kiosk-progress[data-active-page="selection"],
#kiosk-progress[data-active-page="design"],
#kiosk-progress[data-active-page="printing"] {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Remove top-padding clearance that was reserved for the progress bar */
#page-setup,
#page-frame,
#page-shooting,
#page-selection,
#page-design,
#page-printing {
  padding-top: 2.8vh !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 2. SQUARE GRID BACKGROUND (Pages 2–6)
 * ══════════════════════════════════════════════════════════════════════════ */

#page-setup,
#page-frame,
#page-shooting,
#page-selection,
#page-design,
#page-printing {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px) !important;
  background-size: var(--grid-size) var(--grid-size) !important;
  background-position: top left !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 3. KIOSK TIMER — CONTINUOUSLY SPINNING + GRAY COLORS
 *    Timer ring spins independently of stroke-dashoffset countdown.
 *    The SVG ring element rotates; the progress arc counts down.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Override timer track and progress stroke to gray */
.kiosk-timer-track {
  stroke: var(--timer-track-color) !important;
}
.kiosk-timer-progress {
  stroke: var(--timer-stroke-color) !important;
}

/* The entire SVG (ring + arc) spins continuously */
.kiosk-timer-ring {
  animation: timerRingSpin 4s linear infinite;
  transform-origin: center center;
}

@keyframes timerRingSpin {
  from { transform: rotate(-90deg); }   /* start at 12 o'clock */
  to   { transform: rotate(270deg); }   /* full 360° rotation   */
}

/* Timer centered at top on Pages 4, 5; right-side on Pages 2, 3 */
.kiosk-timer[data-active-page="selection"],
.kiosk-timer[data-active-page="design"] {
  /* Centered at top: X=909/1920 ≈ 47.3vw, size 100px → 5.2vw */
  top:   2.8vh !important;
  left:  calc(50% - 2.6vw) !important;
  right: auto !important;
  bottom: auto !important;
  width:  5.2vw !important;
  height: 5.2vw !important;
}

/* Page 2 (Camera Mode): top-center, matching Pages 4 & 5 */
.kiosk-timer[data-active-page="setup"] {
  top:   2.8vh !important;
  left:  calc(50% - 2.6vw) !important;
  right: auto !important;
  bottom: auto !important;
  width:  5.2vw !important;
  height: 5.2vw !important;
}

/* Page 3: top-right (keep existing right positioning) */
.kiosk-timer[data-active-page="frame"],
.kiosk-timer[data-active-page="shooting"] {
  top:   2.8vh !important;
  right: 3vw !important;
  left:  auto !important;
  width: 5.2vw !important;
  height: 5.2vw !important;
}

/* Page 6: hide timer (spec says no separate countdown timer on print page) */
.kiosk-timer[data-active-page="printing"] {
  display: none !important;
}

/* Timer number font refinement */
.kiosk-timer-number {
  font-size: 2.6vh !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 4. SHARED PAGE HEADER STYLE (Pages 2–6)
 *    Each page has a large icon + title + subtitle in the top-left.
 * ══════════════════════════════════════════════════════════════════════════ */

.page-header-block {
  display: flex;
  align-items: flex-start;
  gap: 1.2vw;
  flex-shrink: 0;
  margin-bottom: 1.4vh;
  min-height: 0;
}

.page-header-icon {
  width: 3.75vw;   /* ~72px at 1920 */
  height: auto;
  flex-shrink: 0;
  margin-top: 0.2vh;
  object-fit: contain;
}

.page-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.3vh;
}

.page-header-title {
  font-size: 2.5vh;
  font-weight: 800;
  color: var(--studrio-black);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.page-header-subtitle {
  font-size: 1.55vh;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.01em;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 5. NEXT BUTTON — Studrio spec gradient + radius
 * ══════════════════════════════════════════════════════════════════════════ */

.btn-next-studrio {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  border-radius: var(--next-radius) !important;
  color: var(--studrio-black) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  overflow: hidden;
  position: relative;
}

.btn-next-studrio:not(:disabled) {
  background: #ffe165 !important;
  border: 1px solid #000000 !important;
}

.btn-next-studrio:hover:not(:disabled) {
  filter: brightness(0.96);
}

.btn-next-studrio:disabled {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* White→yellow fill animation overlay triggered by .fill-anim class */
.btn-next-studrio .btn-next-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffffff 0%, var(--studrio-yellow-2) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: none;
}

.btn-next-studrio.fill-anim .btn-next-fill {
  animation: nextBtnWhiteYellow 1.5s ease-in-out forwards;
}

@keyframes nextBtnWhiteYellow {
  0%   { transform: scaleX(0); opacity: 0.9; }
  60%  { transform: scaleX(1); opacity: 0.9; }
  100% { transform: scaleX(1); opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * 6. LEFT-TO-RIGHT PIXEL-GRID TRANSITION OVERLAY
 *    Used on: Page 2 → Page 3, Page 6 → Page 1
 *    Aligns with the square grid background.
 * ══════════════════════════════════════════════════════════════════════════ */

#pixelGridTransitionOverlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  display: none;
  overflow: hidden;
}

#pixelGridTransitionOverlay.active {
  display: block;
}

/* Individual pixel cells are injected by JS */
.pg-cell {
  position: absolute;
  background: #ffffff;
  opacity: 0;
  /* Each cell animates with a delay computed from its column position */
}


/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 2 — CAMERA MODE (page-setup redesign)
 * Reference: 1920×1080
 * Live View: W1156 × H772, X96, Y200
 * Controls on RIGHT side
 * ══════════════════════════════════════════════════════════════════════════ */

#page-setup {
  display: flex !important;
  flex-direction: column !important;
  padding: 2.8vh 2.2vw 2.2vh 2.2vw !important;
  gap: 0 !important;
  overflow: hidden !important;
}

/* Remove old .setup-layout grid and replace */
#page-setup .setup-layout {
  display: flex !important;
  flex-direction: row !important;
  gap: 1.6vw !important;
  flex: 1 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
}

/* Live view panel (left, ~60% width matching 1156/1920) */
#page-setup .preview-panel {
  flex: 0 0 60.2% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

#page-setup .frame-34 {
  /* Override old 4:3 — use 3:2 DSLR sensor ratio (2974:1984 ≈ 3:2) */
  aspect-ratio: 3 / 2 !important;
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Right-side controls column */
#page-setup .status-panel {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.4vh !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Hide legacy HOW-IT-WORKS box */
#page-setup .status-box {
  display: none !important;
}

/* Camera controls: Zoom In / Zoom Out / Mirror pills */
#page-setup .zoom-controls {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1.5px solid rgba(240, 194, 49, 0.22) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(8px) !important;
  padding: 1.4vh 1.2vw !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8vh !important;
}

#page-setup .zoom-label {
  font-size: 1.2vh !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  margin-bottom: 0.4vh !important;
}

/* Camera control buttons (Zoom In, Zoom Out, Mirror) — full-width pills */
#page-setup .zoom-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8vh !important;
}

#page-setup .zoom-buttons .btn {
  width: 100% !important;
  flex: none !important;
  border-radius: 12px 0 12px 0 !important;
  font-size: 1.45vh !important;
  font-weight: 700 !important;
  padding: 1.2vh 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6vw !important;
  background: #ffffff !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  position: relative;
  overflow: hidden;
}

#page-setup .zoom-buttons .btn .ctrl-icon {
  width: 1.6vw;
  height: auto;
  object-fit: contain;
  opacity: 0.75;
}

#page-setup .zoom-buttons .btn:hover {
  background: var(--studrio-cream) !important;
  border-color: var(--studrio-yellow) !important;
}

#page-setup .zoom-buttons .btn.active {
  background: var(--studrio-yellow) !important;
  border-color: var(--studrio-yellow) !important;
  color: var(--studrio-black) !important;
}

/* Nav row: NEXT only (no BACK on Pages 2–6) */
#page-setup .nav-row {
  flex-shrink: 0 !important;
  justify-content: flex-end !important;
  gap: 0.8vw !important;
  margin-top: auto !important;
}

/* Hide the BACK button on Page 2 */
#btnBackFromSetup {
  display: none !important;
}

/* Photo Taking label + icon below NEXT */
.setup-next-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5vh;
}

.setup-photo-hint {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 1.15vh;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.setup-photo-hint img {
  width: 1.3vw;
  height: auto;
  opacity: 0.55;
}


/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 3 — PHOTO TAKING (page-shooting)
 *  – Grid background
 *  – Blinking red recording dot beside "Photo Taking"
 *  – Taken-photo thumbnails inside the existing dark right side panel
 *  – Instructional text below "Look at the camera"
 *  – 4×6 pose overlay (preview-only)
 *
 * Works with the real HTML structure:
 *   .shooting-topbar → .shooting-fullscreen-layout
 *     .shooting-side-panel.shooting-side-left
 *     .shooting-preview-frame (center live view)
 *     .shooting-side-panel.shooting-side-right → .shooting-photos-taken
 *   .shooting-look-text
 * ══════════════════════════════════════════════════════════════════════════ */

#page-shooting,
#page-flipbook-shoot {
  display: flex !important;
  flex-direction: column !important;
  /* Minor Fix: top margin-gap above the live view, matching the existing
     bottom margin-gap — both restored to the .page base's vertical
     padding value (2.2vh) so the live view no longer sits fully flush at
     the top only. Horizontal padding stays 0 so the side panels still
     reach the left/right edges. */
  padding: 2.2vh 0 !important;
}

/* Topbar: keep centered look */
#page-shooting .shooting-topbar {
  flex-shrink: 0;
}

/* Full-screen layout: now the only child of #page-shooting (the top bar and
   "Look at the camera" text have been removed), so it must fill the entire
   page with no leftover gaps where those elements used to sit. Flipbook
   Video Taking (#page-flipbook-shoot) uses the exact same shell, so it
   gets the same fullscreen treatment for parity. */
#page-shooting .shooting-fullscreen-layout,
#page-flipbook-shoot .shooting-fullscreen-layout {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Suppress the injected duplicate label from animations.js */
.shooting-side-taken-label { display: none !important; }

/* Blinking red recording dot (beside "Photo Taking") — already in style.css,
   just ensure the redesign color matches */
.shooting-rec-dot {
  background: #e03030 !important;
}

/* "Look at the camera" bottom text */
#page-shooting .shooting-look-text {
  height: 4.5vh !important;
  font-size: 1.6vh !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  letter-spacing: 0.03em !important;
  flex-shrink: 0;
}

/* Pose overlay (4×6 only — preview frame overlay) */
.pose-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  display: none;
}
.pose-overlay.visible {
  display: block;
}
/* Grid of pose boxes */
.pose-overlay-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  padding: 2%;
}
.pose-box {
  border: 2px dashed rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pose-box-num {
  font-size: 2.5vh;
  font-weight: 800;
  color: rgba(255,255,255,0.5);
}


/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 4 — PHOTO SELECTION (page-selection)
 * Reference: 1920×1080
 * Selection Grid: 1142×756, X96, Y217
 * Strip preview: X1307/1397, Y215
 * Timer centered top
 * ══════════════════════════════════════════════════════════════════════════ */

#page-selection {
  display: flex !important;
  flex-direction: column !important;
  padding: 2.8vh 2.2vw 2.2vh 2.2vw !important;
}

/* Title on the left, live selection counter on the right (opposite side). */
#page-selection .sb-page-header {
  justify-content: space-between !important;
}

/* Override the selection-layout to match reference coordinates:
   selection grid ≈ 59.5% of 1920, strip ≈ rest */
#page-selection .selection-layout {
  grid-template-columns: 59.5% 1fr !important;
  gap: 1.8vw !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* Selection grid: tight grid, zero gaps, equal cells.
   grid-auto-rows is a fixed 33.3333% (not 1fr) and overflow scrolls
   vertically instead of shrinking cells as more than 9 shots are taken —
   see the longer explanation on the base .selection-grid rule in style.css. */
#page-selection .selection-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 33.3333% !important;
  gap: 0 !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  touch-action: pan-y !important;
  align-items: stretch !important;
}
#page-selection .selection-grid::-webkit-scrollbar { display: none !important; }

/* Photo cards: no gap, no border-radius at seam */
#page-selection .selection-grid .photo-card {
  border-radius: 0 !important;
  border: 0 !important;           /* seams are provided by the grid bg color */
  outline: 0.5px solid rgba(200,200,200,0.35);
  outline-offset: -0.5px;
}

/* Override the base selected style for selection page — use inset shadow for clean multi-photo grid */
#page-selection .selection-grid .photo-card.selected {
  box-shadow: inset 0 0 0 3px var(--studrio-yellow) !important;
  outline: none !important;
}

/* Selection number badge style (from animations.css .photo-card-order-badge) */
/* Square, flush to the top-right corner, Studrio selection yellow.
   Minor Fix: moved from top-left to top-right, and text color changed
   to black (was inheriting animations.css's white) for legibility
   against the light yellow background. */
.photo-card-order-badge {
  top:           0        !important;
  left:          auto     !important;
  right:         0        !important;
  border-radius: 0        !important;
  background:    #ffe165  !important;
  color:         #1a1a1a  !important;
}

/* Photo darkening on selection */
#page-selection .photo-card.selected img {
  filter: brightness(0.72) !important;
  transition: filter 0.25s ease !important;
}

/* When all 4 selected: radial yellow glow animation on the grid */
#page-selection .selection-grid.all-selected {
  animation: selectionGlow 1.2s ease-out forwards;
}

@keyframes selectionGlow {
  0%   { box-shadow: inset 0 0 0 0 rgba(240, 194, 49, 0);  }
  40%  { box-shadow: inset 0 0 60px 20px rgba(255, 221, 102, 0.45); }
  100% { box-shadow: inset 0 0 80px 30px rgba(255, 255, 255, 0.15); }
}

/* Selection preview panel — right side */
#page-selection .selection-preview-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 1vh !important;
  min-height: 0 !important;
  padding-top: 0 !important;
}

/* Remove the margin-top that was compensating for the old timer */
#page-selection .selection-preview-panel .strip-preview-wrap {
  margin-top: 0 !important;
}

/* NEXT button on Page 4 */
#btnNextFromSelection {
  border-radius: var(--next-radius) !important;
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  color: var(--studrio-black) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
  position: relative !important;
}
#btnNextFromSelection:not(:disabled) {
  background: #ffe165 !important;
  border: 1px solid #000000 !important;
}

/* Hide BACK button on Page 4 — none existed but guard it */
#btnBackFromSelection { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 5 — FRAME DESIGN (page-design)
 * Minimal overrides only — layout and swatches are handled by style.css.
 * Only the NEXT button style and filter-col visibility are set here.
 * ══════════════════════════════════════════════════════════════════════════ */

/* NEXT button on Page 5 */
#btnNextFromDesign {
  border-radius: var(--next-radius) !important;
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  color: var(--studrio-black) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
  position: relative !important;
}
#btnNextFromDesign:not(:disabled) {
  background: #ffe165 !important;
  border: 1px solid #000000 !important;
}

/* Keep filter column hidden (admin-only feature) */
#page-design .design-filters-col {
  display: none !important;
}

/* Preview column fills freed space when filter col is hidden */
#page-design .design-preview-col {
  flex: 1 !important;
}

/* Strip preview wrap: remove legacy timer margin-top compensation */
#page-design .strip-preview-wrap {
  margin-top: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 6 — PRINT & QR (page-printing)
 * Reference: 1920×1080
 * 2×6 Strip: 255×765, X833, Y208
 * 4×6 Strip: 503×755, X709, Y217
 * QR Code: 188×188, X1426.75, Y439.09
 * DONE button: X1616.06, Y915.63, radius 25px 0 25px 0
 * ══════════════════════════════════════════════════════════════════════════ */

#page-printing {
  display: flex !important;
  flex-direction: column !important;
  padding: 2.8vh 2.2vw 2.2vh 2.2vw !important;
}

/* Override the heading to use page-header-block style */
.printing-heading {
  display: none !important;
}

/* Printing layout: left strip + right QR/status */
.printing-layout,
.printing-layout-v2 {
  grid-template-columns: 1fr 0.55fr !important;
  gap: 2vw !important;
  flex: 1 !important;
  min-height: 0 !important;
  align-items: center !important;
}

/* Wave/tide yellow overlay that appears when printing starts */
#printWaveOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#printWaveOverlay.active {
  opacity: 1;
}

.print-wave {
  position: absolute;
  bottom: -60%;
  left: -20%;
  width: 140%;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 221, 102, 0.18) 40%,
    rgba(255, 221, 102, 0.35) 70%,
    rgba(255, 221, 102, 0.22) 100%
  );
  animation: waveTide 6s ease-in-out infinite alternate;
  transform-origin: bottom center;
  border-radius: 50% 55% 45% 50% / 30% 30% 20% 25%;
}

@keyframes waveTide {
  0%   { bottom: -60%; transform: scaleX(1.05) rotate(-2deg); }
  50%  { bottom: -35%; transform: scaleX(1.0)  rotate(0deg); }
  100% { bottom: -20%; transform: scaleX(0.98) rotate(2deg); }
}

/* Uploading / printing status text — under page header */
.print-status-line {
  font-size: 1.4vh;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Props reminder — readable pill centered below the video frame.
   The pill is absolutely positioned relative to .printing-video-frame
   (see style.css) so it floats just beneath the strip preview.
   We override the legacy tiny font here and ensure it is always legible. */
.printing-props-note {
  font-size: 1.3vh !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.01em !important;
}

/* When the note is a direct child of the video column (HTML placement),
   center it below the frame with good contrast. */
.printing-video-col > .printing-props-note {
  position: relative !important;
  margin-top: 1vh !important;
  background: rgba(15, 15, 15, 0.55) !important;
  border-radius: 999px !important;
  padding: 0.45vh 1.6vw !important;
  width: max-content !important;
  align-self: center !important;
  color: rgba(255,255,255,0.82) !important;
  font-size: 1.25vh !important;
}

/* DONE button: white bg + yellow border, radius 25px 0 25px 0 */
.printing-done-btn {
  border-radius: var(--next-radius) !important;
}

/* DONE button: white/black until printing starts (handled by existing .ready class logic) */
/* When .ready: 1px black border, #ffe165 background */
.printing-done-btn.ready {
  background: #ffe165 !important;
  border: 1px solid #000000 !important;
  color: var(--studrio-black) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

/* QR column: ensure proper layout */
.printing-qr-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.4vh !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 2: QR TICKETING (page-frame) — REMOVE BACK BUTTON
 * ══════════════════════════════════════════════════════════════════════════ */
#btnBackFromFrame {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 6: PRINT & QR — REMOVE DONE BUTTON
 * The Done button previously let a guest advance/cancel while printing was
 * still in progress. Printing now runs to completion automatically and the
 * kiosk returns home on its own via the 30s QR countdown (see app.js), so
 * the corner action row (icon + label + button) built around that button
 * is removed for this page only — other pages' identical corner UI is
 * untouched.
 * ══════════════════════════════════════════════════════════════════════════ */
#page-printing .sb-next-corner {
  display: none !important;
}

/* Post-print countdown shown next to the QR code, counting down the 30s
   before the kiosk automatically returns to the home screen. */
.qr-countdown {
  font-size: 1.3vh;
  font-weight: 600;
  color: var(--studrio-black, #1a1a1a);
  letter-spacing: 0.02em;
  text-align: center;
}

/* Full-screen white fade used when the 30s countdown ends and the kiosk
   returns to the home screen. */
.white-fade-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.6s ease;
}
/* Applied briefly to #page-printing during _fadeToWhiteThenReset() so it
   snaps to invisible instantly (no fade) instead of racing the white
   overlay's own fade-out — see app.js. */
.page-force-hidden {
  transition: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.white-fade-overlay.active {
  opacity: 1;
  pointer-events: all;
}


/* ══════════════════════════════════════════════════════════════════════════
 * TRANSITION: NEXT button fade — keep only strip + NEXT visible
 *   Used on: Page 4 → Page 5, Page 5 → Page 6
 * ══════════════════════════════════════════════════════════════════════════ */

.page-transitioning-out > *:not(.strip-keep-visible):not(.nav-row):not(.btn-next-studrio) {
  transition: opacity 0.55s ease;
  pointer-events: none;
}

.page.transition-fade-other .page-transitioning-out > *:not(.keep-for-transition) {
  opacity: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
 * STRIP CENTER TRANSITION — strip moves to center before page transition
 * ══════════════════════════════════════════════════════════════════════════ */

.strip-centering-transition {
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * FRAME SIZE: Page 2 (old page-frame) — remove BACK, keep style
 * ══════════════════════════════════════════════════════════════════════════ */
#page-frame .nav-row {
  justify-content: flex-end !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * MISC OVERRIDES
 * ══════════════════════════════════════════════════════════════════════════ */

/* Ensure NEXT buttons on selection + design pages get the Studrio nav style */
#page-selection .nav-row .btn-primary,
#page-design .nav-row .btn-primary {
  border-radius: var(--next-radius) !important;
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  color: var(--studrio-black) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
#page-selection .nav-row .btn-primary:not(:disabled),
#page-design .nav-row .btn-primary:not(:disabled) {
  background: #ffe165 !important;
  border: 1px solid #000000 !important;
}

/* Restore pointer events during transitions */
.page.active {
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
 * PRINT & QR STATUS DISPLAY
 * ══════════════════════════════════════════════════════════════════════════ */

.print-upload-status-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4vh;
  flex-shrink: 0;
}

.print-upload-status-row {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 1.3vh;
  color: var(--text-dim);
  font-weight: 600;
}

.print-status-dot {
  width: 0.7vh;
  height: 0.7vh;
  border-radius: 50%;
  background: var(--studrio-yellow);
  flex-shrink: 0;
  animation: pulse 1.2s ease-in-out infinite;
}

.print-status-dot.done {
  background: var(--ok);
  animation: none;
}

.print-status-dot.idle {
  background: var(--border);
  animation: none;
}


/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 3 — SHOOTING LEFT PANEL: controls + "Photos Taken" centered
 * ══════════════════════════════════════════════════════════════════════════ */

/* Hide per-group labels (Zoom / Mirror / Filter) — single "Camera Mode"
   label is used instead. Guard kept for any JS that might inject them. */
.shooting-ctrl-label {
  display: none !important;
}

/* Left panel: fixed width, column-flex, content centered vertically.
   Flipbook Video Taking (#page-flipbook-shoot) reuses the identical
   .shooting-side-left markup as Page 3, so it gets the exact same
   layout/placement here too. */
#page-shooting .shooting-side-left,
#page-flipbook-shoot .shooting-side-left {
  width: 14vw !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;  /* vertically center the whole group */
  padding: 2vh 0.9vw !important;
  gap: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}
#page-shooting .shooting-side-left::-webkit-scrollbar,
#page-flipbook-shoot .shooting-side-left::-webkit-scrollbar { display: none; }

/* Minor Fix: Photos Taken counter moved from the right panel into this
   (left) panel — sits above the "Camera Mode" label, centered like
   everything else in this panel. Base text styling (.photos-taken-label/
   .photos-taken-count) is unscoped in style.css so it's unaffected by the
   move; this just adds the spacing this panel needs. */
#page-shooting .shooting-side-left .shooting-photos-taken {
  width: 100% !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  margin-bottom: 1.8vh !important;
}

/* "Camera Mode" label — sits above the buttons, dim uppercase like "Photos Taken" */
.shooting-cam-mode-label {
  font-size: 1.05vh;
  font-weight: 700;
  /* Was rgba(255,255,255,0.50) — panel background is now white, see
     .shooting-side-left above. */
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 1.2vh;
}

/* Control groups: stacked, full width */
#page-shooting .shooting-side-left .shooting-ctrl-group,
#page-flipbook-shoot .shooting-side-left .shooting-ctrl-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6vh;
  flex-shrink: 0;
}

#page-shooting .shooting-side-left .filter-group,
#page-flipbook-shoot .shooting-side-left .filter-group {
  margin-top: 1vh;
}

/* Camera control buttons.
 * Square corners, black text/border throughout:
 *   inactive: white background, black border
 *   active:   #ffe165 background, black border
 * Icon invert filter (previously needed to show icons on the old dark
 * panel) is removed below — icons render in their native color, which
 * reads correctly against both the white (inactive) and yellow (active)
 * button backgrounds. */
#page-shooting .shooting-side-left .sb-control-btn,
#page-flipbook-shoot .shooting-side-left .sb-control-btn {
  width: 100% !important;
  padding: 1.1vh 1vw !important;
  border-radius: 0 !important;
  font-size: 1.35vh !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.7vw !important;
  background: #ffffff !important;
  border: 1.5px solid #000000 !important;
  color: #000000 !important;
  transition: background 0.14s ease, border-color 0.14s ease !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#page-shooting .shooting-side-left .sb-control-btn img,
#page-flipbook-shoot .shooting-side-left .sb-control-btn img {
  width: 2vh !important;
  height: 2vh !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
}

#page-shooting .shooting-side-left .sb-control-btn:hover,
#page-flipbook-shoot .shooting-side-left .sb-control-btn:hover {
  background: #fff8dc !important;
  border-color: #000000 !important;
}

/* Active / selected state: black border, Studrio-yellow #ffe165 fill */
#page-shooting .shooting-side-left .sb-control-btn.active,
#page-flipbook-shoot .shooting-side-left .sb-control-btn.active {
  background: #ffe165 !important;
  border-color: #000000 !important;
  color: #000000 !important;
}
#page-shooting .shooting-side-left .sb-control-btn.active img,
#page-flipbook-shoot .shooting-side-left .sb-control-btn.active img {
  filter: none !important;
  opacity: 1 !important;
}

/* Filter chip + toggle button — currently hidden from the guest UI
   (.filter-group has display:none in index.html) but kept in sync with
   the same square-corner/black-on-white(active: #ffe165) scheme above,
   since it's a button living in the same panel. */
.filter-status-chip {
  display: flex;
  align-items: center;
  gap: 0.4vw;
  padding: 0.55vh 0.7vw;
  border-radius: 0;
  background: #ffffff;
  border: 1.5px solid #000000;
  font-size: 1.1vh;
  font-weight: 600;
  color: #000000;
  width: 100%;
  margin-bottom: 0.4vh;
}
.filter-status-chip .filter-dot {
  width: 0.7vh;
  height: 0.7vh;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}
.filter-status-chip:not(.no-filter) .filter-dot { background: #F0C231; }
.filter-status-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filter-toggle-btn {
  width: 100% !important;
  padding: 0.9vh 0.8vw !important;
  border-radius: 0 !important;
  font-size: 1.2vh !important;
  font-weight: 600 !important;
  background: #ffffff !important;
  border: 1.5px solid #000000 !important;
  color: #000000 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.14s ease !important;
}
.filter-toggle-btn:not(:disabled):hover {
  background: #ffe165 !important;
  border-color: #000000 !important;
  color: #000000 !important;
}
.filter-toggle-btn:disabled { opacity: 0.38 !important; cursor: not-allowed !important; }

/* Right panel: Photos Taken centered in middle */
#page-shooting .shooting-side-right {
  width: 13vw !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;   /* vertically center "Photos Taken" */
  padding: 2vh 0.8vw !important;
  gap: 0.7vh !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}
#page-shooting .shooting-side-right::-webkit-scrollbar { display: none; }

/* Flipbook Video Taking's right panel ("Video 1/3") previously had no
   page-specific override at all here and just inherited the old dark
   .shooting-side-panel background from style.css — give it the same
   white background as Photo Taking's right panel above. */
#page-flipbook-shoot .shooting-side-right {
  background: #ffffff !important;
}

/* Counter block: don't push to bottom — let justify-content:center handle it */
#page-shooting .shooting-side-right .shooting-photos-taken {
  margin-top: 0 !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  width: 100% !important;
}

/* Thumbnails above counter (injected by animations.js) push down naturally;
   the counter stays roughly centered as they accumulate */
#page-shooting .shooting-side-right .shooting-taken-thumb {
  /* keep existing style.css thumbnail styles; ensure they don't push counter */
  flex-shrink: 0;
}

/* Suppress injected duplicate "Photos Taken" label from animations.js */
.shooting-side-taken-label { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 2 — TEMPLATE CAROUSEL: fade/slide-in animation
 * Triggered by adding .animating to #templateCarouselTrack in app.js
 * ══════════════════════════════════════════════════════════════════════════ */

@keyframes templateCardFadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* When the track gets .animating, each direct child card staggers in */
.template-carousel-track.animating > .template-card,
.template-carousel-track.animating > .template-empty-msg {
  animation: templateCardFadeSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger each of the 5 visible cards */
.template-carousel-track.animating > .template-card:nth-child(1) { animation-delay: 0ms;  }
.template-carousel-track.animating > .template-card:nth-child(2) { animation-delay: 35ms; }
.template-carousel-track.animating > .template-card:nth-child(3) { animation-delay: 70ms; }
.template-carousel-track.animating > .template-card:nth-child(4) { animation-delay: 105ms; }
.template-carousel-track.animating > .template-card:nth-child(5) { animation-delay: 140ms; }


/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 2 — "Coming Soon" empty state (replaces generic "No templates" text)
 * ══════════════════════════════════════════════════════════════════════════ */

.template-empty-msg.template-coming-soon {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vh;
  width: 100%;
  height: 100%;
  padding: 4vh 2vw;
  text-align: center;
}

.template-coming-soon-icon {
  font-size: 4vh;
  line-height: 1;
  display: block;
  animation: comingSoonPulse 2.4s ease-in-out infinite;
}

@keyframes comingSoonPulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(1.12); opacity: 0.75; }
}

.template-coming-soon-text {
  font-size: 2.6vh;
  font-weight: 800;
  color: var(--text, #1c1e21);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.template-coming-soon-sub {
  font-size: 1.4vh;
  font-weight: 500;
  color: var(--text-dim, #6b7280);
  letter-spacing: 0.01em;
}



/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 3 — PREP COUNTDOWN OVERLAY (shown inside live view before shooting)
 * The HTML (.prep-countdown-overlay) exists in index.html and shooting.js
 * toggles .show on it, but no CSS existed for it anywhere.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Ensure the preview frame is a positioning context for all overlays */
#shootingPreviewFrame,
#flipbookPreviewFrame {
  position: relative !important;
}

/*
 * 4×6 templates: fixed-width portrait preview box, centered in the
 * available space between the two side panels. Overrides the default
 * flex:1 fill (used for other frame types) so the frame's WIDTH never
 * stretches — height is left at 100% of its normal Photo Taking row.
 *
 * Minor Fix: this used to hardcode height:1080px (the full kiosk-canvas
 * height), which is taller than .shooting-fullscreen-layout's actual
 * available height (the row sits below the page's own top padding/timer
 * header, so it never actually gets the full 1080px). That mismatch —
 * combined with object-fit:cover on the fixed 812×1080 box below — is
 * what zoomed/cropped the live view for 4×6. Height now just follows the
 * row's real height (height:100%, same as the regular/2×6 preview frame
 * gets via flex:1 stretch), so 4×6 keeps its own narrower width but the
 * same, correct, non-cropped height as ordinary Photo Taking.
 */
#shootingPreviewFrame[data-frame="4x6"] {
  flex: none;
  width: 812px;
  height: 100%;
  margin: 0 auto;
  align-self: center;
}

/* Video/live-image element sized to match the 4×6 frame exactly (rather
   than inheriting the generic 100%/100% from the base #shootingVideo,
   #shootingImg rule) — same box, stated explicitly per spec. Minor Fix:
   height is now 100% (of the corrected box above) instead of a hardcoded
   1080px, so it no longer forces object-fit:cover to crop/zoom into an
   overly tall box. */
#shootingPreviewFrame[data-frame="4x6"] #shootingVideo,
#shootingPreviewFrame[data-frame="4x6"] #shootingImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * With the 4×6 preview frame now a narrow fixed-size box instead of
 * flex:1, the two side panels' old fixed 12vw width would leave a big
 * empty gap (grid-bg showing through) between them and the frame. Give
 * them the leftover horizontal space instead so the row tiles edge to
 * edge with no gaps — panel content stays centered as before, only the
 * panel width changes. Scoped to the 4×6 session only via :has(); other
 * frame types keep the existing fixed-width side panels untouched.
 */
#page-shooting .shooting-fullscreen-layout:has(#shootingPreviewFrame[data-frame="4x6"]) .shooting-side-panel {
  flex: 1 1 auto;
  width: auto;
}

.prep-countdown-overlay {
  position: absolute;
  inset: 0;
  display: none;              /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 5;                 /* above countdown-overlay (z:4) */
}

/* ── Per-shot countdown overlay (8→0 during each capture) ───────────────────
 * shooting.js controls visibility of #countdownOverlay via display:none/block
 * or opacity. We ensure its z-index, positioning, and number styles are
 * always correct so the overlay renders cleanly once the "Get Ready" screen
 * is dismissed (prep overlay removes .show → display:none, revealing this).
 *
 * We deliberately do NOT override display here — shooting.js owns that.
 */
.countdown-overlay {
  position: absolute !important;
  inset: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 4 !important;         /* below prep overlay (5), above video (1) */
}

/* When the overlay is visible (shooting.js sets display:flex or display:block),
   the number must be large and high-contrast. #flipbookCountdownNumber is
   the flipbook video-taking page's equivalent of #countdownNumber — it
   had no matching CSS at all before, so it fell back to the tiny, dim
   default from style.css (font-size:14vh, opacity:0.6). */
#countdownNumber,
#flipbookCountdownNumber {
  font-size: 22vh !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  text-shadow: 0 0 60px rgba(0,0,0,0.9), 0 4px 24px rgba(0,0,0,0.7) !important;
  letter-spacing: -0.04em !important;
  font-family: var(--font-number, sans-serif) !important;
  user-select: none !important;
}

/* shooting.js adds .show to reveal it */
.prep-countdown-overlay.show {
  display: flex;
}

.prep-countdown-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5vh;
  text-align: center;
}

.prep-countdown-label {
  font-size: 2.2vh;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

.prep-countdown-number {
  font-size: 18vh;
  font-weight: 800;
  font-family: var(--font-number, sans-serif);
  color: #ffffff;
  line-height: 0.9;
  text-shadow: 0 0 40px rgba(0,0,0,0.8), 0 2px 16px rgba(0,0,0,0.6);
  letter-spacing: -0.03em;
}

/* Pop animation (shooting.js toggles .prep-pop on the number element) */
.prep-countdown-number.prep-pop {
  animation: prepNumberPop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes prepNumberPop {
  0%   { transform: scale(1.35); opacity: 0.6; }
  60%  { transform: scale(0.94); opacity: 1;   }
  100% { transform: scale(1);    opacity: 1;   }
}


/* ══════════════════════════════════════════════════════════════════════════
 * PAGE 2 — TEMPLATE SELECTION layout (all classes missing from prior builds)
 * ══════════════════════════════════════════════════════════════════════════ */

/* Page root */
#page-template {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Main layout column: fills height after the page header */
.template-main-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-height: 0;
  gap: 1.4vh;
  /* bottom pad clears the absolutely-positioned NEXT button */
  padding: 1.2vh 3vw 8vh 3vw;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Category pill tabs ────────────────────────────────────────────────── */
.template-category-tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.7vw;
  flex-shrink: 0;
  width: 100%;
}

.template-cat-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8vh 2.0vw;
  border-radius: 0;
  border: 1px solid #000000;
  background: #ffffff;
  color: #000000;
  font-size: 1.45vh;
  font-weight: 600;
  font-family: var(--font-ui, sans-serif);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}
.template-cat-tab:hover {
  background: #fffbee;
  border-color: #000000;
}
.template-cat-tab.active {
  background: #ffe165;
  border-color: #000000;
  color: #000000;
}

/* ── Carousel: arrow | track-outer | arrow ─────────────────────────────── */
.template-carousel-wrap {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 1vw;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Prev / Next arrow buttons */
.template-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4vh;
  min-width: 4vh;
  border-radius: 50%;
  border: 1.5px solid var(--border, #e4e5e8);
  background: #ffffff;
  color: var(--text, #1c1e21);
  font-size: 2.4vh;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  transition: background 0.14s ease, border-color 0.14s ease;
  line-height: 1;
  padding: 0;
  aspect-ratio: 1;
}
.template-carousel-arrow:hover:not(:disabled) {
  background: #fffbee;
  border-color: #F0C231;
}
.template-carousel-arrow:disabled {
  opacity: 0.30;
  cursor: not-allowed;
}

/* Track outer: clips the 5-card row, fills available space between arrows */
.template-carousel-track-outer {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

/* Track: 5 cards side by side, no wrapping */
.template-carousel-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.8vw;
  width: 100%;
  height: 100%;
}

/* ── Template card: each occupies exactly 1/5 of the visible track ──────── */
.template-card {
  flex: 0 0 calc((100% - 4 * 0.8vw) / 5);
  width:  calc((100% - 4 * 0.8vw) / 5);
  min-width: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6vh;
  padding: 1.0vh 0.5vw 0.8vh 0.5vw;

  /* Card is a layout-only wrapper now — no box/background/border of its own.
     The visual boundary lives directly on .template-card-thumb below. */
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition: none;
  box-sizing: border-box;
}
.template-card:hover {
  border: none;
  background: transparent;
  box-shadow: none;
}
/* Selected / active: no styling on the card itself — the glow + enlarge
   are applied directly to .template-card-thumb (see below) so the effect
   hugs the uploaded template image rather than an outer container. */
.template-card.active,
.template-card.selected {
  border: none !important;
  background: transparent !important;
  z-index: 5;
}

/* Thumbnail: object-fit:contain so 2×6 tall strips show their full height.
   1px black stroke sits directly on the image — this is the only visible
   boundary around each uploaded template now that the card box is gone. */
.template-card-thumb {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: contain;
  display: block;
  border: 1px solid #000000;
  border-radius: 0;
  background: transparent;
  transform-origin: center center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

/* Selected: #ffe165 glow behind the template + 20% enlarge */
.template-card.active .template-card-thumb,
.template-card.selected .template-card-thumb {
  transform: scale(1.2);
  animation: template-card-glow 1.8s ease-in-out infinite !important;
}

/* UI FIX: the 20% scale-up above doesn't take up layout space (transforms
   never do), so the enlarged thumb's ~10% overflow at its bottom edge sits
   visually on top of .template-card-label directly below it, covering the
   title. Push the label down and above the thumb (z-index) only while its
   card is active/selected, so it clears the overlap and stays fully
   visible. */
.template-card.active .template-card-label,
.template-card.selected .template-card-label {
  margin-top: 4vh;
  position: relative;
  z-index: 6;
  transition: margin-top 0.25s ease;
}

/* Label below thumbnail */
.template-card-label {
  font-size: 1.1vh;
  font-weight: 600;
  color: var(--text, #1c1e21);
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.2;
  flex-shrink: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.2vw;
}

/* Format size badge (2×6 / 4×6) — top-right of card */
.template-size-badge {
  position: absolute;
  top: 0.5vh;
  right: 0.4vw;
  padding: 0.2vh 0.45vw;
  border-radius: 5px;
  font-size: 0.9vh;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
}
.template-size-badge--2-6 {
  /* Solid white backing so the label is legible over any thumbnail image */
  background: #ffffff;
  color: #a07000;
  border: 1px solid rgba(240, 194, 49, 0.70);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.template-size-badge--4-6 {
  /* Solid white backing so the label is legible over any thumbnail image */
  background: #ffffff;
  color: #1a5fa0;
  border: 1px solid rgba(80, 160, 240, 0.60);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ── Selected template info bar ─────────────────────────────────────────── */
.template-selected-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2vw;
  flex-shrink: 0;
  /* +20% from 0.6vh 2vw */
  padding: 0.72vh 2.4vw;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border, #e4e5e8);
  border-radius: 999px;
  /* +20% from 3.6vh */
  min-height: 4.32vh;
}
.template-selected-name {
  /* +20% from 1.35vh */
  font-size: 1.62vh;
  font-weight: 700;
  color: var(--text, #1c1e21);
  letter-spacing: 0.01em;
  display: inline-block; /* required for the transform in the swap animation below */
}

/* Fade/slide swap animation, played by app.js's _setSelectedName() every
   time the selected-template name text actually changes (i.e. switching
   between templates), so the title doesn't just hard-cut to new text. */
@keyframes templateSelectedNameSwap {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.template-selected-name.name-swap {
  animation: templateSelectedNameSwap 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.template-selected-size {
  font-size: 1.2vh;
  font-weight: 500;
  color: var(--text-dim, #6b7280);
  letter-spacing: 0.02em;
}

/* Empty / Coming Soon state */
.template-empty-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.6vh;
  color: var(--text-dim, #6b7280);
  font-weight: 500;
  text-align: center;
  padding: 4vh 0;
}


/* ══════════════════════════════════════════════════════════════════════════
 * UI FIXES — injected header/status blocks + template card aspect ratio
 * ══════════════════════════════════════════════════════════════════════════ */

/* 1. Remove the JS-injected .page-header-block from Photo Taking,
      Photo Selection, and Print & QR.
      The .sb-page-header blocks already in the HTML remain untouched. */
#page-shooting  .page-header-block,
#page-selection .page-header-block,
#page-printing  .page-header-block {
  display: none !important;
}

/* 2. Remove the JS-injected .print-upload-status-wrap from Print & QR. */
#page-printing .print-upload-status-wrap {
  display: none !important;
}

/* 3. Ensure "PHOTO X" number labels on selection grid photos are hidden.
      .photo-card-badge is already display:none in style.css; this guards
      against any load-order or specificity edge-cases. */
.photo-card-badge {
  display: none !important;
}

/* 4. Template Selection card aspect-ratio fix.
 *
 *    Goal  : all cards share the same height (fill the carousel track),
 *            while each card's width reflects its thumbnail's natural
 *            aspect ratio — so a 2×6 strip card stays narrower than
 *            a 4×6 card.  No stretching, no cropping.
 *
 *    Before: cards used flex: 0 0 calc((100% - 4*0.8vw)/5), forcing
 *            five equal-width columns regardless of image ratio.
 *            The thumb used width:100% + object-fit:contain, which
 *            letterboxed narrow 2×6 images inside a wide box.
 *
 *    After : cards shrink to the width their thumbnail naturally needs
 *            at the track's fixed height.  The thumb is sized by height
 *            (height:100% on the image area, width:auto) so it drives
 *            the card's intrinsic width.  object-fit:contain is kept as
 *            a fallback for images that haven't loaded yet.
 */

/* Override equal-width flex-basis; let the card width be content-driven */
.template-card {
  flex: 0 0 auto !important;
  width: auto    !important;
  min-width: 0   !important;
  /* height:100% is inherited from align-items:stretch on the track */
}

/* Thumbnail: fill the card's height, let width follow the image ratio.
   min-width:0 prevents the img from overflowing in Firefox flex contexts. */
.template-card-thumb {
  height:    100%  !important;
  width:     auto  !important;
  flex:      0 0 auto !important;   /* don't grow/shrink the img itself */
  min-width: 0     !important;
  max-width: none  !important;
  object-fit: contain !important;   /* letterbox only if image is odd-sized */
}

/* ══════════════════════════════════════════════════════════════════════════
 * UI FIXES BATCH 2 — Template carousel, pose overlay, counter card
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Template carousel: swipeable horizontal scroll ─────────────────────── */
/*
 * The outer track wrapper becomes a touch-scrollable flex row.
 * Cards keep their auto-width from the previous fix; scrolling reveals them.
 * JS in animations-redesign.js adds pointer-drag support on top.
 *
 * touch-action: pan-x — tells the browser this element handles horizontal
 * panning itself; prevents Chrome/Electron from consuming touch events for
 * page scroll before the element can handle them, which was causing swipe
 * gestures to be ignored entirely on touchscreen kiosks.
 */
.template-carousel-track-outer {
  overflow-x: auto      !important;
  overflow-y: hidden    !important;
  /* Vertical padding so a selected card's 20% enlarge + glow (both applied
     to .template-card-thumb) has room to render without being clipped by
     overflow-y: hidden above. Cards/thumbs stretch to 100% of this box's
     *content* height (box-sizing: border-box), so the padding shrinks the
     unscaled thumb just enough that scale(1.2) still fits inside the
     unchanged outer box. */
  padding: 7vh 0 !important;
  /* No scroll-snap — snapping fights momentum and makes drags feel stiff.
     Arrow buttons scroll by one card width via smooth scrollBy() in JS. */
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;   /* Firefox */
  touch-action: pan-x   !important;   /* allow horizontal swipe; block vertical steal */
}
.template-carousel-track-outer::-webkit-scrollbar {
  display: none !important;           /* Chrome / Safari / Electron */
}

/* Track: no longer clips at 5 cards — shows all and scrolls */
.template-carousel-track {
  flex-wrap:  nowrap    !important;
  width:      max-content !important; /* expands to hold all cards */
  height:     100%      !important;
  min-width:  100%      !important;   /* fill outer at minimum */
}

/*
 * Cards: no scroll-snap (removed — snap fought momentum, felt stiff)
 *
 * Extra horizontal margin is added on .active/.selected below so the
 * enlarged card (scale(1.2) on .template-card-thumb) gets breathing room
 * on both sides instead of visually overlapping its neighbors — the
 * outer .template-card box isn't affected by that transform (transforms
 * don't take up layout space), so without this margin the neighboring
 * cards stayed put right up against the now-larger thumbnail.
 */
.template-card {
  /* Slightly smaller: reduce vertical padding so cards feel less cramped */
  padding: 0.6vh 0.5vw 0.5vh 0.5vw !important;
  transition:
    border-color 0.18s ease,
    background   0.18s ease,
    box-shadow   0.18s ease,
    margin       0.25s ease !important;
}
.template-card.active,
.template-card.selected {
  /* ~half of the thumb's 20% scale overflow on each side, plus a little
     extra for the glow halo. Uses vh (not vw) because these cards are
     sized by height (height:100%, width:auto), so their rendered width —
     and therefore how far the scaled-up thumb overflows — scales with
     viewport height, not width. */
  margin-left:  3vh !important;
  margin-right: 3vh !important;
}

/*
 * Glow pulse keyframe — box-shadow breathes between a tight inner ring
 * and a wider soft halo, both in the #ffe165 selection yellow. Applied to
 * .template-card-thumb (see above), so the glow sits directly behind the
 * enlarged template image rather than an outer card box. The static
 * transform: scale(1.2) set alongside this animation is untouched by it,
 * since transform isn't one of the animated properties.
 */
@keyframes template-card-glow {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(255, 225, 101, 0.75),
      0 0 18px 6px rgba(255, 225, 101, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255, 225, 101, 1),
      0 0 32px 12px rgba(255, 225, 101, 0.55);
  }
}

/*
 * NOTE: an older fix attempt here suppressed the .animating entrance
 * animation from replaying on selection via a `data-selecting` attribute
 * set by animations-redesign.js. That was working around app.js's
 * _selectTemplate() rebuilding the whole track on every tap. app.js no
 * longer does that — selecting a template only toggles the .active class
 * on the existing card elements (see _selectTemplate() in app.js), so
 * .animating is never (re)triggered by a selection in the first place and
 * that suppression rule/hook is no longer needed. Removed.
 */


/* ── Pose overlay (1/2/3/4 grid) — hide entirely ──────────────────────── */
/*
 * The .pose-overlay div (with pose-box 1–4) is injected by
 * animations-redesign.js _ensurePoseOverlay(). Hide it unconditionally.
 * .pose-overlay-4x6 (index.html inline) is already display:none there;
 * this guards against both.
 */
.pose-overlay,
#poseOverlay4x6 {
  display: none !important;
}


/* ── Selection counter card complete: Studrio yellow (not orange gradient) ─*/
/*
 * animations.css section 14 uses an amber→gold gradient for the "complete"
 * state. Override with the flat Studrio yellow to match the brand.
 */
.selection-counter-card.complete {
  background: #ffe165 !important;
}
/* animations.css sets border-color to amber with !important — force black,
   in both the default and complete states, per spec. */
.selection-counter-card {
  border-color: #000000 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 * UI FIX — Carousel centering and height
 *
 * Goals
 *   1. Centre .template-carousel-wrap both horizontally and vertically
 *      within .template-main-layout.
 *   2. Comfortable carousel container height.
 *
 * Note: overflow values are kept at their natural defaults here.
 * The active card glow is implemented purely via box-shadow animation
 * (no transform: scale), so no ancestor overflow changes are required.
 * ══════════════════════════════════════════════════════════════════════════ */

/* 1 + 2 — main layout: centre children vertically */
.template-main-layout {
  justify-content: center !important;   /* was flex-start — now centres vertically */
}

/* 3 — carousel wrap: comfortable height */
.template-carousel-wrap {
  align-items: center   !important;   /* centre cards on the cross axis */
  flex:        0 0 auto !important;   /* don't stretch to fill; use explicit size */
  height:      56vh     !important;   /* comfortable height; tweak as needed */
  min-height:  32vh     !important;
}

/* 4 — track outer: keep horizontal scroll, clip vertical as normal */
.template-carousel-track-outer {
  overflow-x: auto    !important;   /* horizontal scroll unchanged */
  align-self: stretch !important;   /* fill the wrap's content area */
  touch-action: pan-x !important;   /* preserve swipe (already set above, repeated for specificity) */
}