/* ============================================================================
   CloudPrint — shop.php "bold" theme
   Swiggy/Zomato-inspired: energetic gradient header, chunky Baloo 2 headlines,
   hard black borders with offset drop-shadows instead of soft glass shadows,
   color-coded step tracker, glowing gradient CTA with hover-lift. Scoped to
   shop.php only — the rest of the site keeps its calmer SaaS look.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

body.shop-app {
  background: #F8FAFC;
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  margin: 0;
  overflow-x: hidden;
}

.shop-app .navbar { display: none; }

.shop-app .page-wrap {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: #F8FAFC;
  padding-bottom: 186px;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ---------------- Header sheet: energetic gradient, hard bottom edge ---------------- */
.shop-app-header {
  background: linear-gradient(180deg, #FF7A00 0%, #FF2E7A 55%, #8A00D4 100%);
  padding: 18px 20px 30px;
  border-radius: 0 0 28px 28px;
  color: #fff;
  position: relative;
}
.shop-app-header .top-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.shop-app-header .brand-mark-sm {
  width: 46px; height: 46px; border-radius: 13px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem;
  border: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35), 0 4px 14px rgba(0,0,0,0.18);
  overflow: hidden;
  padding: 5px;
}
.shop-app-header .brand-mark-sm img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-app-header .brand-name-sm { font-weight: 800; font-size: 1.05rem; font-family: 'Baloo 2', sans-serif; }
.header-icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 1.5px solid rgba(255,255,255,0.32);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex: 0 0 auto;
  transition: transform 0.15s ease, background 0.15s ease;
}
.header-icon-btn:active { transform: scale(0.92); background: rgba(255,255,255,0.28); }

/* ---------------- Header action row: notification + compact rewards pill, ---------------- */
/* ---------------- perfectly aligned and never competing for visual weight. ---------------- */
.header-actions-row {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-rewards-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* A solid-ish translucent fill (not a bright gradient) so white text
     always has enough contrast — an earlier version used a two-layer
     gradient-border trick whose bright midpoint bled through the middle
     of the pill on real devices, washing the text out to illegible. */
  background: rgba(255,255,255,0.24);
  border: 1.5px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.header-rewards-pill:active { transform: scale(0.94); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.header-rewards-pill .hrp-icon { font-size: 0.86rem; line-height: 1; }
.header-rewards-pill .hrp-coin-badge {
  background: #fff;
  color: #B34700;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  line-height: 1.4;
}

.shop-app-header h1 {
  font-family: 'Baloo 2', 'Segoe UI', sans-serif;
  font-size: 1.6rem; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em;
  text-shadow: 0 2px 0 rgba(0,0,0,0.12);
}
.shop-app-header .shop-loc-sm {
  font-size: 0.84rem; color: rgba(255,255,255,0.88); font-weight: 600; margin-bottom: 12px;
}

/* ---------------- Location row (own row, Zepto/Swiggy-style small map thumbnail + address) ---------------- */
.loc-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.shop-location-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  width: 84px;
  background: #fff;
  border-radius: 16px;
  padding: 10px 6px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.shop-location-box:active { transform: scale(0.94); }
.shop-location-box svg { width: 22px; height: 22px; }
.shop-location-box .loc-label {
  font-size: 0.58rem; font-weight: 800; color: #111827; text-align: center; line-height: 1.15; white-space: nowrap;
}
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  padding: 6px 14px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 800;
  color: #111827;
  border: 2px solid #111827;
}
.status-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.status-chip.open .dot { background: #16A34A; }
.status-chip.closed .dot { background: #DC2626; }

/* ---------------- Trust badges row (Fast Service / Secure / Trusted) in the header ---------------- */
.header-trust-badges { display: flex; gap: 12px; padding: 0 2px; flex-wrap: wrap; }
.header-trust-badges .htb-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.64rem; font-weight: 600;
  color: rgba(255,255,255,0.88);
}
.header-trust-badges .htb-item svg { flex: 0 0 auto; width: 11px; height: 11px; }

/* ---------------- Workflow card: Scan -> Upload -> Pay -> Print, icon nodes + dashed lines ---------------- */
.workflow-card {
  background: #fff;
  margin: 14px 16px 18px;
  border-radius: 20px;
  padding: 18px 16px 14px;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 10px 24px -10px rgba(17,24,39,0.16);
  position: relative; z-index: 5;
}
.workflow-track { display: flex; align-items: flex-start; }
.wf-node {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 0 0 auto; width: 54px;
}
.wf-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #F1F5F9; color: #A1A1AA;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.wf-icon svg { width: 16px; height: 16px; }
.wf-node.done .wf-icon {
  background: linear-gradient(120deg, #FF7A00 0%, #FF2E7A 55%, #8A00D4 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(209,0,200,0.3);
}
.wf-label { font-size: 0.64rem; font-weight: 700; color: #A1A1AA; }
.wf-node.done .wf-label { color: #FF2E7A; font-weight: 800; }
.wf-line {
  flex: 1;
  height: 2px;
  margin-top: 19px;
  background-image: repeating-linear-gradient(90deg, #D4D4D8 0, #D4D4D8 4px, transparent 4px, transparent 9px);
}

/* ---------------- Quick-service swipe pagination dots ---------------- */
.qs-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 18px; }
.qs-dots .qs-dot { width: 6px; height: 6px; border-radius: 50%; background: #E4E4E7; }
.qs-dots .qs-dot.active { width: 16px; border-radius: 4px; background: linear-gradient(120deg, #FF7A00, #8A00D4); }

/* ---------------- Trust row: bold color-coded icon circles ---------------- */
.trust-row {
  display: flex; justify-content: center;
  gap: 6px;
  margin: 4px 16px 20px;
  background: #fff; border-radius: 18px;
  padding: 16px 10px;
  border: 1.5px solid #E4E4E7;
  position: relative; z-index: 5;
  animation: trustRowIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes trustRowIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.trust-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1;
  min-width: 0;
  animation: trustItemIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.trust-item:nth-child(1) { animation-delay: 0.05s; }
.trust-item:nth-child(2) { animation-delay: 0.15s; }
.trust-item:nth-child(3) { animation-delay: 0.25s; }
@keyframes trustItemIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}
.trust-item .ic {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
.trust-item:active .ic { transform: scale(0.9); }
.trust-item:nth-child(1) .ic { background: #DCFCE7; color: #15803D; }
.trust-item:nth-child(2) .ic { background: #FFE0EC; color: #D100C8; }
.trust-item:nth-child(3) .ic { background: #FFE9F5; color: #A100A8; }
.trust-item span { font-size: 0.65rem; font-weight: 700; color: #27272A; text-align: center; line-height: 1.25; }
.trust-div { width: 1px; align-self: stretch; margin: 4px 0; background: #E4E4E7; flex: 0 0 auto; }

/* ---------------- Promo slider: PhonePe-style large hero banner strip ---------------- */
.promo-slider-wrap { margin: 0 16px 18px; }
.promo-slider {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 20px;
}
.promo-slider::-webkit-scrollbar { display: none; }
.promo-slide {
  scroll-snap-align: start;
  flex: 0 0 100%;
  position: relative;
  overflow: hidden;
  min-height: 148px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 2.5px solid #111827;
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: 4px 4px 0 #111827;
}
.promo-slide.slide-1 { background: linear-gradient(135deg, #FF7A00 0%, #FF2E7A 100%); }
.promo-slide.slide-2 { background: linear-gradient(135deg, #FF2E7A 0%, #D100C8 100%); }
.promo-slide.slide-3 { background: linear-gradient(135deg, #D100C8 0%, #D100C8 100%); }

.promo-content { position: relative; z-index: 2; max-width: 68%; }
.promo-title {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1.15;
  color: #fff; margin-bottom: 8px; text-shadow: 0 2px 0 rgba(0,0,0,0.1);
}
.promo-sub { font-size: 0.8rem; color: rgba(255,255,255,0.88); font-weight: 600; line-height: 1.35; }

.promo-illustration {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 2px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  backdrop-filter: blur(4px);
}

.promo-sparkle {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,0.14);
}
.promo-sparkle.s1 { width: 90px; height: 90px; top: -30px; right: 30px; }
.promo-sparkle.s2 { width: 50px; height: 50px; bottom: -20px; right: 90px; }

.promo-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.promo-dot { width: 7px; height: 7px; border-radius: 50%; background: #E4E4E7; border: 1.5px solid #111827; transition: all 0.25s ease; }
.promo-dot.active { background: #FF2E7A; width: 20px; border-radius: 4px; }

/* ---------------- Content cards: hard border + offset shadow ---------------- */
.shop-app .panel-card {
  background: #fff;
  border: 1px solid rgba(17,24,39,0.07);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 10px 24px -10px rgba(17,24,39,0.14);
  margin: 0 0 18px;
  padding: 18px;
}
.shop-app .panel-card h2 {
  font-family: 'Baloo 2', 'Segoe UI', sans-serif;
  font-size: 1.05rem; font-weight: 700; color: #111827;
}
.shop-app .panel-card .sub { color: #71717A; font-size: 0.82rem; font-weight: 500; }

.section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #FFE0EC; color: #D100C8;
  border: 2px solid #111827;
  font-family: 'Baloo 2', sans-serif;
  font-size: 0.76rem; font-weight: 800;
  margin-right: 8px;
}

/* ---------------- Upload dropzone: bold dashed purple, chunky ---------------- */
.shop-app .upload-dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px;
  /* Owning the border outright here (rather than leaving it to whatever
     the page's base styles set) so it shows the same way at every
     screen width — it had been disappearing on wider viewports where
     that other rule doesn't apply. */
  border: 3px dashed #FF2E7A;
  background: transparent;
  border-radius: 16px;
  padding: 28px 16px;
  box-shadow: none;
}
.shop-app .upload-dropzone.dragover { border: 3px dashed #D100C8; background: #FFE9F5; }
.shop-app .upload-dropzone svg { color: #FF2E7A; }
.shop-app .upload-dropzone .primary-text { font-weight: 800; font-size: 0.94rem; color: #27272A; font-family: 'Baloo 2', sans-serif; }
.shop-app .upload-dropzone .secondary-text { font-size: 0.78rem; color: #A1A1AA; font-weight: 600; }

/* Idle "waiting for a file" state — an animated gradient "Upload Files" pill
   with a soft glowing halo behind it, plus small filetype chips underneath,
   so the empty upload area reads as an active, inviting drop target. Both
   disappear once files are chosen (.has-files) so the state doesn't compete
   with the "N files selected" text, and everything respects
   prefers-reduced-motion. No layout shift: the glow is an absolutely
   positioned pseudo/element that never affects box size, and nothing here
   animates width/height/padding. */
.shop-app .upload-dropzone .dz-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF7A00, #FF2E7A 55%, #D100C8);
  color: #fff; font-weight: 800; font-size: 0.92rem;
  font-family: 'Baloo 2', sans-serif;
  box-shadow: 0 6px 18px -4px rgba(209,0,200,0.45);
  margin-bottom: 12px;
  isolation: isolate;
  overflow: hidden;
}
.shop-app .upload-dropzone .dz-pill svg { color: #fff; flex-shrink: 0; }
/* Diagonal shine sweeping across the pill — a clear, legible "tap here"
   cue that stays inside the button's own shape (no blurred halo around
   it). Purely visual: a ::after clipped to the pill via overflow:hidden
   above, so it can never affect layout or spill onto the page. */
.shop-app .upload-dropzone .dz-pill::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
}
.shop-app .upload-dropzone .dz-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 10px;
}
.shop-app .upload-dropzone .dz-chip {
  font-size: 0.68rem; font-weight: 700; color: #71717A;
  background: #fff; border: 1px solid rgba(17,24,39,0.1);
  border-radius: 999px; padding: 4px 11px;
}
.shop-app .upload-dropzone.has-files .dz-pill,
.shop-app .upload-dropzone.has-files .dz-chip-row { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Border color gently cycles between the two brand pinks — no shadow
     this time (that was the pulsing halo that got removed), just the
     line itself breathing a little so the empty dropzone still reads as
     "waiting for you," not static/dead. */
  .shop-app .upload-dropzone:not(.has-files):not(.dragover) {
    animation: dzBorderPulse 2.6s ease-in-out infinite;
  }
  .shop-app .upload-dropzone:not(.has-files):not(.dragover) .dz-pill {
    animation: dzPillPulse 2.6s ease-in-out infinite;
  }
  .shop-app .upload-dropzone:not(.has-files):not(.dragover) .dz-pill::after {
    animation: dzPillShine 2.6s ease-in-out infinite;
  }
}
@keyframes dzBorderPulse {
  0%, 100% { border-color: #FF2E7A; }
  50% { border-color: #D100C8; }
}
@keyframes dzGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,0,0.22); border-color: #FF2E7A; }
  50% { box-shadow: 0 0 0 10px rgba(255,46,122,0); border-color: #D100C8; }
}
@keyframes dzPillPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes dzPillShine {
  0%, 40% { left: -60%; }
  70%, 100% { left: 130%; }
}

/* ================================================================
   Print Editor: single-card stepper (Upload -> Edit -> Options ->
   Preview -> Pay). Deliberately a different visual register from the
   bold-border/hard-shadow "poster" style used elsewhere on this page —
   this is the actual working surface where someone spends the most
   time, so it leans toward soft depth, restrained color, and motion
   instead of the flat playful-app look.
   ================================================================ */
.editor-card {
  background: #fff;
  border: 1px solid rgba(17,24,39,0.06);
  border-radius: 26px;
  margin: 0 16px 18px;
  overflow: hidden;
}
.editor-stepper {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, #F8FAFC 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(17,24,39,0.06);
}
.editor-step {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  flex: 1; position: relative;
}
.editor-step .es-circle {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.78rem;
  background: #F8FAFC; color: #B4B4BC;
  border: none;
  box-shadow: inset 0 0 0 1.5px rgba(17,24,39,0.08);
  transition: all 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.editor-step.done .es-circle {
  background: linear-gradient(135deg, #16A34A, #15803D);
  color: #fff; box-shadow: 0 3px 10px -2px rgba(22,163,74,0.5);
}
.editor-step .es-num { display: block; }
.editor-step .es-check { display: none; }
.editor-step.done .es-num { display: none; }
.editor-step.done .es-check { display: block; animation: esCheckIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes esCheckIn { from { transform: scale(0); } to { transform: scale(1); } }
.editor-step.active .es-circle {
  background: linear-gradient(135deg, #FF7A00, #8A00D4);
  color: #fff; box-shadow: 0 3px 12px -2px rgba(255,122,0,0.55);
  transform: scale(1.12);
}
.editor-step .es-label { font-size: 0.63rem; font-weight: 600; color: #A8A8B3; letter-spacing: 0.01em; transition: color 0.25s ease; }
.editor-step.active .es-label { color: #111827; font-weight: 700; }
/* The customer-facing flow is now just two screens — Order details
   (Upload + Edit + Options + Preview, all shown together) and Pay — so
   the middle three pills (Edit / Options / Preview) no longer correspond
   to anything separately reachable and are hidden rather than shown as
   fake intermediate steps. The connector line is suppressed too since it
   was drawn assuming an unbroken run of visible pills. */
#editor-stepper .editor-step[data-step-indicator="2"],
#editor-stepper .editor-step[data-step-indicator="3"],
#editor-stepper .editor-step[data-step-indicator="4"] { display: none; }
.editor-step::after { display: none; }
.editor-step::after {
  content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px;
  background: #ECECF0; z-index: -1; border-radius: 2px;
}
.editor-step:last-child::after { display: none; }
.editor-step.done::after { background: linear-gradient(90deg, #16A34A, #22C55E); }

.editor-step-panel {
  display: none; padding: 24px 20px 90px;
  animation: editorStepIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.editor-step-panel.active { display: block; }
/* Upload (1) and Options (3) are no longer the last thing on screen —
   Preview (4) always follows them in the merged "Order details" view —
   so their old 90px bottom reserve (sized for a bottom action bar that
   used to sit right under whichever single panel was showing) is
   dropped in favor of a small, normal gap between sections. Preview
   keeps the full 90px since it's still the section right before the
   real bottom nav. */
.editor-step-panel[data-step-panel="1"],
.editor-step-panel[data-step-panel="3"] {
  padding-bottom: 10px;
}
@keyframes editorStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.editor-step-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 5px; color: #111827; }
.editor-step-sub { font-size: 0.83rem; color: #8B8B96; margin-bottom: 20px; line-height: 1.5; }

.editor-bottom-nav {
  display: flex; gap: 10px; padding: 14px 20px;
  border-top: 1px solid rgba(17,24,39,0.06);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
}
.editor-bottom-nav .btn { flex: 1; min-height: 52px; border-radius: 15px; font-size: 0.95rem; font-weight: 700; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.editor-bottom-nav .btn:active:not(:disabled) { transform: scale(0.97); }
.editor-bottom-nav #submit-btn:not(:disabled) {
  background: linear-gradient(135deg, #FF7A00 0%, #8A00D4 55%, #D100C8 100%);
  border: none; color: #fff;
  box-shadow: 0 6px 20px -6px rgba(255,122,0,0.55);
}
.editor-bottom-nav #editor-prev-btn {
  flex: 0 0 auto; padding: 0 20px;
  background: #F8FAFC; border: none; color: #52525B;
}

/* ---------------- Edit step: canvas + toolbar ---------------- */
.edit-canvas-stage {
  position: relative;
  width: 100%; max-height: 62vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #F8FAFC, #F8FAFC);
  border: 1px solid rgba(17,24,39,0.07); border-radius: 20px;
  overflow: hidden; margin-bottom: 16px;
  box-shadow: inset 0 1px 3px rgba(17,24,39,0.05);
}
.edit-canvas-stage canvas { max-width: 100%; max-height: 62vh; display: block; touch-action: none; border-radius: 12px; }
.edit-file-tabs { display: flex; gap: 9px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; }
.edit-file-tabs-launcher {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.edit-file-tabs-launcher .edit-file-tab {
  width: 100%; height: 120px; border-radius: 16px;
}
.edit-file-tab {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 13px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; position: relative;
  box-shadow: 0 1px 4px rgba(17,24,39,0.1);
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.edit-file-tab.active { border-color: #FF7A00; transform: translateY(-2px) scale(1.04); box-shadow: 0 4px 12px -2px rgba(255,122,0,0.4); }
.edit-file-tab:active { transform: scale(0.93); }
.edit-file-tab img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edit-file-tab .eft-badge { position: absolute; bottom: 0; right: 0; background: rgba(17,24,39,0.75); backdrop-filter: blur(2px); color: #fff; font-size: 0.54rem; font-weight: 700; padding: 1px 5px; border-top-left-radius: 7px; }

.edit-toolbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 16px; }
.edit-tool-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 12px 4px; border: none; border-radius: 15px; background: #F8FAFC;
  font-size: 0.64rem; font-weight: 600; color: #52525B; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,0.05);
  transition: all 0.2s ease;
}
.edit-tool-btn:active { transform: scale(0.95); }
.edit-tool-btn.active {
  background: linear-gradient(135deg, #FDF0FF, #F5E0FF);
  box-shadow: inset 0 0 0 1.5px #FF7A00;
  color: #FF7A00;
}
.edit-tool-btn svg, .edit-tool-btn .eti { font-size: 1.15rem; }

.edit-sliders {
  display: none; padding: 18px; background: linear-gradient(180deg, #F8FAFC, #F8FAFC);
  border-radius: 18px; margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,0.05);
}
.edit-sliders.open { display: block; animation: editorStepIn 0.3s ease; }
.edit-slider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.edit-slider-row:last-child { margin-bottom: 0; }
.edit-slider-row label { flex: 0 0 88px; font-size: 0.75rem; font-weight: 600; color: #6B6B76; }
.edit-slider-row input[type=range] {
  flex: 1; -webkit-appearance: none; height: 4px; border-radius: 4px;
  background: #E4E4EA; outline: none;
}
.edit-slider-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #FF7A00; box-shadow: 0 2px 6px rgba(255,122,0,0.5); cursor: pointer;
  border: 2.5px solid #fff;
}
.edit-slider-row .esr-val { flex: 0 0 34px; text-align: right; font-size: 0.74rem; font-weight: 700; color: #FF7A00; }

.edit-pdf-note {
  padding: 16px; background: linear-gradient(135deg, #FFF6EE, #FFEDDC); border: none; border-radius: 16px;
  font-size: 0.81rem; color: #B34700; margin-bottom: 14px; line-height: 1.5;
}

.po-paper-copies-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.po-paper-block { flex: 1 1 auto; min-width: 0; }
.po-copies-block { flex: 0 0 auto; }
.po-paper-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.po-paper-strip::-webkit-scrollbar { display: none; }
.po-paper-strip .po-paper-card { flex: 0 0 auto; min-width: 64px; padding: 10px 14px; }

/* ---------------- Print Options: doc preview, cards, segmented tabs, sticky summary ---------------- */
.po-doc-preview {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; margin-bottom: 18px;
  background: linear-gradient(135deg, #F8FAFC, #F8FAFC);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,0.05);
}
.po-doc-thumb {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px;
  overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; box-shadow: 0 1px 4px rgba(17,24,39,0.12);
}
.po-doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.po-doc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-doc-name { font-weight: 700; font-size: 0.86rem; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-doc-count { font-size: 0.76rem; color: #8B8B96; font-weight: 600; }

.opt-cards-4 { grid-template-columns: repeat(4, 1fr); }
.po-paper-card { padding: 12px 4px; }
.po-paper-icon { font-size: 1.3rem; }

.po-large-cards { grid-template-columns: 1fr 1fr; }
.po-large-cards-3.opt-cards { grid-template-columns: 1fr 1fr 1fr; }
.po-large-card { padding: 20px 10px; min-height: 92px; gap: 8px; }
.po-large-card .opt-card-icon { font-size: 1.8rem; }
.po-large-card .opt-card-label { font-size: 0.86rem; font-weight: 800; }
/* Pages-per-sheet has exactly 3 options — po-large-cards-3 (above) keeps
   them all on one row. Without it they inherited the 2-column grid used
   for 2-option groups (sides, etc.), which left "4-up" stranded alone on
   its own row with a big empty gap next to it — looked broken rather
   than intentional even though it worked fine functionally. */
.po-large-cards-3 .po-large-card { padding: 16px 6px; min-height: 84px; }
.po-large-cards-3 .po-large-card .opt-card-icon { font-size: 1.5rem; }
.po-large-cards-3 .po-large-card .opt-card-label { font-size: 0.78rem; }
@media (max-width: 380px) {
  /* Very narrow phones: 3-across gets cramped, so it drops back to a
     2-column wrap rather than squeezing text — still no orphaned single
     card on its own row since 1-up+2-up pair up and 4-up sits alone only
     as an unavoidable remainder of an odd count, same as any 3-item grid
     would at this width. */
  .po-large-cards-3.opt-cards { grid-template-columns: 1fr 1fr; }
}

.po-auto-tag {
  display: inline-block; font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
  color: #FF7A00; background: #FDF0FF; padding: 2px 8px; border-radius: 999px; margin-left: 6px;
}

.po-flip-hint {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(135deg, #FFF4ED, #FFE9F5);
  font-size: 0.78rem; color: #D100C8; font-weight: 600;
  animation: editorStepIn 0.25s ease;
}

.po-segmented {
  display: flex; background: #F1F1F4; border: 1.5px solid rgba(17,24,39,0.08);
  border-radius: 13px; padding: 4px; gap: 2px;
}
.po-seg-btn {
  flex: 1; padding: 10px 6px; border: none; border-radius: 10px; background: transparent;
  font-size: 0.78rem; font-weight: 700; color: #52525B;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.po-seg-btn.active { background: #fff; color: #FF2E7A; box-shadow: 0 2px 6px rgba(17,24,39,0.12); }
.po-page-input {
  width: 100%; margin-top: 10px; padding: 12px 14px; font-size: 0.88rem;
  border-radius: 12px; border: 1.5px solid rgba(17,24,39,0.12); background: #fff;
}
.po-page-note { font-size: 0.76rem; color: #8B8B96; margin-top: 8px; font-weight: 600; }

.po-sticky-summary {
  /* No longer actually sticky: Options now sits in the middle of one
     continuous scroll (Upload → Options → Preview → Continue), with
     Preview's own total right below it, so a bottom:78px sticky bar here
     would float up and overlap that content instead of the old single
     full-screen Options step it was designed for. Keeps its look, just
     in normal flow. */
  margin-top: 22px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 -4px 24px rgba(17,24,39,0.14), 0 0 0 1px rgba(17,24,39,0.06);
}
.po-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.86rem; font-weight: 700; color: #111827; }
.po-summary-mini { font-size: 0.72rem; font-weight: 600; color: #8B8B96; margin-top: 4px; }
.po-summary-mini span { text-transform: uppercase; letter-spacing: 0.02em; }
.po-summary-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(17,24,39,0.1);
  font-size: 1rem; font-weight: 800; color: #FF7A00;
}

/* ---------------- Preview step ---------------- */
.preview-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 18px; }
.preview-summary-item {
  background: linear-gradient(180deg, #F8FAFC, #F8FAFC);
  border: none; border-radius: 16px; padding: 14px;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,0.05);
}
.preview-summary-item .psi-label { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #A8A8B3; margin-bottom: 5px; }
.preview-summary-item .psi-value { font-size: 0.98rem; font-weight: 800; color: #111827; }

/* Cards nested inside the editor (Your details, Reward coins, Payment,
   price box) get the same soft/premium treatment as their container,
   instead of the bold poster-style border used elsewhere on this page. */
.editor-card .panel-card {
  border: 1px solid rgba(17,24,39,0.06);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 6px 16px -8px rgba(17,24,39,0.12);
  padding: 18px;
  margin-bottom: 16px;
}
.editor-card .panel-card h2 { font-size: 0.95rem; font-weight: 800; color: #111827; }
.editor-card .opt-card { border-radius: 16px; }
.editor-card .opt-select, .editor-card .stepper { border-radius: 13px; }

/* ================================================================
   FULL-SCREEN EDITOR — opens automatically on Step 2, takes over the
   whole viewport (fixed, above everything) so the document itself
   fills ~85% of the screen instead of sitting in a small embedded box.
   ================================================================ */
.fs-editor {
  display: none;
  position: fixed; inset: 0;
  background: #EFEFF3;
  z-index: 2000;
  flex-direction: column;
}
.fs-editor.open { display: flex; animation: fsFadeIn 0.25s ease; }
@keyframes fsFadeIn { from { opacity: 0; } to { opacity: 1; } }

.fs-editor-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px calc(14px + env(safe-area-inset-top));
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(17,24,39,0.08);
  backdrop-filter: blur(10px);
  flex: 0 0 auto;
}
.fs-topbar-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(17,24,39,0.06); color: #111827;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease;
}
.fs-topbar-btn:active { transform: scale(0.88); background: rgba(17,24,39,0.12); }
.fs-topbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.fs-doc-name { color: #111827; font-size: 0.86rem; font-weight: 700; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-zoom-pct { color: #71717A; font-size: 0.7rem; font-weight: 600; transition: color 0.2s ease; }
.fs-topbar-done {
  padding: 11px 22px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, #FF7A00, #8A00D4); color: #fff;
  font-weight: 800; font-size: 0.86rem; flex-shrink: 0;
  box-shadow: 0 4px 14px -2px rgba(99,102,241,0.5);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fs-topbar-done:active { transform: scale(0.93); }

.fs-editor-tabs {
  display: flex; gap: 8px; overflow-x: auto; flex: 0 0 auto;
  padding: 10px 14px; background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(17,24,39,0.06);
}

.fs-editor-stage {
  flex: 1 1 auto;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  min-height: 0;
  touch-action: none;
  /* This area represents the printable page — keep it clean white so it
     never suggests a colour that isn't actually part of the document. */
  background: #fff;
}
.fs-zoom-wrap {
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 100%; max-height: 100%;
}
.fs-zoom-wrap canvas {
  max-width: 85vw; max-height: 100%; display: block; touch-action: none;
  border-radius: 8px; box-shadow: 0 2px 14px rgba(17,24,39,0.14);
  border: 1px solid rgba(17,24,39,0.08);
  animation: fsCanvasIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fsCanvasIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
.fs-pdf-note { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); margin: 0; }

.edit-word-preview-wrap { display: none; flex-direction: column; width: 100%; height: 100%; overflow: hidden; }
.edit-word-preview-note {
  flex: 0 0 auto; padding: 12px 16px; background: linear-gradient(135deg, #FFF6EE, #FFEDDC); border: none;
  font-size: 0.78rem; color: #B34700; line-height: 1.45;
}
.edit-word-preview {
  flex: 1 1 auto; overflow: auto; background: #E8E8EC; padding: 16px 12px 32px;
  -webkit-overflow-scrolling: touch; box-sizing: border-box;
}
.edit-word-preview-loading { text-align: center; padding: 40px 20px; color: #8A8A94; font-size: 0.86rem; }
/* The actual scaling happens via a JS-computed transform:scale() on
   .docx-wrapper (see fsRenderWordPreview) so the page shrinks visually
   without re-wrapping any text — max-width alone would squeeze the
   real page width down and force text to reflow into a much narrower
   column at full font size, which is what was happening before this. */
.edit-word-preview-scaled-outer { overflow: hidden; }
.edit-word-preview .docx-wrapper { padding: 0 !important; background: transparent !important; }

/* Zoom bar sits BELOW the stage as its own row so it never covers the
   image/document — previously an overlay pinned over the bottom-right
   corner of the canvas, which hid part of the document on small screens. */
.fs-zoom-bar {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: 0 0 auto;
  padding: 8px 14px;
  background: rgba(255,255,255,0.96);
  border-top: 1px solid rgba(17,24,39,0.06);
}
.fs-zoom-bar button {
  min-width: 44px; height: 40px; padding: 0 14px; border-radius: 999px; border: none;
  background: #F1F1F5; color: #111827; font-size: 0.95rem; font-weight: 700;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease;
}
.fs-zoom-bar button:active { transform: scale(0.92); background: #E4E4E9; }
.fs-zoom-bar button:nth-child(2) {
  background: linear-gradient(135deg, #FFF0E5, #FFE3F2); color: #FF2E7A;
  min-width: 64px; font-size: 0.78rem; font-weight: 800;
}

.fs-editor-toolbar {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.98);
  border-top: 1px solid rgba(17,24,39,0.08);
  flex: 0 0 auto;
  scrollbar-width: none;
}
.fs-editor-toolbar::-webkit-scrollbar { display: none; }
.fs-tool-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  flex: 0 0 auto; min-width: 66px;
  padding: 8px 6px 6px; border: none; border-radius: 16px; background: transparent;
  color: #71717A; font-size: 0.64rem; font-weight: 600;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}
.fs-tool-btn svg {
  width: 40px; height: 40px; padding: 9px; box-sizing: border-box;
  border-radius: 50%; background: rgba(17,24,39,0.05);
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fs-tool-btn.active { color: #FF2E7A; }
.fs-tool-btn.active svg {
  background: linear-gradient(135deg, #FF7A00, #8A00D4);
  color: #fff;
  box-shadow: 0 4px 14px -2px rgba(99,102,241,0.6);
  transform: scale(1.08);
}
.fs-tool-btn:active { transform: scale(0.9); }
.fs-tool-btn:active svg { transform: scale(0.88); }

.fs-tool-panel {
  display: none;
  background: #fff;
  border-radius: 26px 26px 0 0;
  padding: 10px 20px calc(16px + env(safe-area-inset-bottom));
  animation: fsPanelUp 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
  max-height: 46vh; overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.25);
}
.fs-tool-panel::before {
  content: ''; display: block; width: 36px; height: 4px; border-radius: 4px;
  background: #E4E4E7; margin: 0 auto 14px;
}
.fs-tool-panel.open { display: block; }
@keyframes fsPanelUp { from { transform: translateY(100%); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
.fs-tool-panel-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.02rem; margin-bottom: 14px; color: #111827; }
.fs-tool-panel-actions { display: flex; gap: 10px; margin-top: 18px; }
.fs-tool-panel-actions .btn { flex: 1; min-height: 50px; border-radius: 15px; font-weight: 700; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fs-tool-panel-actions .btn:active { transform: scale(0.95); }

.fs-crop-presets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.fs-preset-btn {
  flex: 0 0 auto; padding: 11px 18px; border-radius: 13px;
  border: 1.5px solid rgba(17,24,39,0.1); background: #F8FAFC; color: #27272A;
  font-size: 0.82rem; font-weight: 700; white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fs-preset-btn.active { border-color: #FF7A00; background: linear-gradient(135deg, #FDF0FF, #F5E0FF); color: #FF7A00; box-shadow: 0 3px 10px -3px rgba(255,122,0,0.35); }
.fs-preset-btn:active { transform: scale(0.94); }
.fs-rotate-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fs-rotate-btn-row .fs-preset-btn { flex: 1 1 calc(50% - 4px); text-align: center; }

/* ---------------- Manual crop modal ---------------- */
.crop-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(17,24,39,0.96);
  z-index: 1000;
  flex-direction: column;
}
.crop-modal.open { display: flex; }
.crop-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  color: #fff; font-weight: 800; font-size: 0.95rem;
}
.crop-modal-counter { font-size: 0.76rem; font-weight: 600; color: rgba(255,255,255,0.6); }
.crop-modal-stage {
  flex: 1;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.crop-modal-stage img {
  max-width: 100%; max-height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.crop-box {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.55);
  cursor: move;
  touch-action: none;
}
.crop-box::before, .crop-box::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
  pointer-events: none;
}
.crop-handle {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px;
  background: #fff;
  border: 2px solid #FF7A00;
  border-radius: 50%;
  touch-action: none;
}
.crop-handle[data-handle="tl"] { top: 0; left: 0; cursor: nwse-resize; }
.crop-handle[data-handle="tr"] { top: 0; right: 0; margin-right: -13px; cursor: nesw-resize; }
.crop-handle[data-handle="bl"] { bottom: 0; left: 0; margin-bottom: -13px; cursor: nesw-resize; }
.crop-handle[data-handle="br"] { bottom: 0; right: 0; margin-bottom: -13px; margin-right: -13px; cursor: nwse-resize; }
.crop-modal-actions {
  display: flex; gap: 10px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
}
.crop-modal-actions .btn { flex: 1; }
.crop-modal-actions .btn-ghost { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); }

/* ---------------- Scan Documents: camera-capture option for walk-in customers ---------------- */
.scan-doc-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px;
  color: #A1A1AA; font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
}
.scan-doc-divider::before, .scan-doc-divider::after {
  content: ''; flex: 1; height: 1px; background: #E4E4E7;
}
.scan-doc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto;
  padding: 12px 28px;
  border: 2px solid #111827;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-size: 0.9rem; font-weight: 800;
  box-shadow: 3px 3px 0 #111827;
  cursor: pointer;
}
.scan-doc-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #111827; }
.scan-doc-hint {
  font-size: 0.74rem; color: #A1A1AA; font-weight: 600;
  margin-top: 8px; padding: 0 12px;
}

/* ---------------- File validation error banner ---------------- */
.file-error-banner {
  background: #FFE9F5; border: 2px solid #D100C8; color: #A100A8;
  border-radius: 12px; padding: 10px 14px; font-size: 0.8rem; font-weight: 700; margin-top: 10px;
  animation: cp-fade-in 0.25s ease;
}
.file-error-banner div + div { margin-top: 3px; }

/* ---------------- File card carousel: bold bordered cards ---------------- */
/* Base rules below are the pre-existing desktop/tablet presentation
   (untouched) — a horizontal, one-card-at-a-time swipe carousel with a
   tall (320px) thumbnail. They still apply as-is at widths above 480px.
   The #step-upload mobile media query further down is the only place
   that changes the layout, and it only fires at phone widths. */
.file-carousel-wrap { margin-top: 14px; }
.file-carousel {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 8px; scrollbar-width: none;
}
.file-carousel::-webkit-scrollbar { display: none; }

.file-card {
  scroll-snap-align: start;
  flex: 0 0 92%; max-width: 420px;
  background: #fff;
  border: 1px solid rgba(17,24,39,0.06);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 12px 30px -10px rgba(17,24,39,0.16);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  animation: cp-card-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cp-card-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cp-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.file-card-thumb {
  width: 100%; height: 320px;
  border-radius: 14px;
  object-fit: contain;
  object-position: center top;
  background: #F8FAFC;
  border: 1px solid rgba(17,24,39,0.08);
  cursor: zoom-in;
}
.file-card-thumb-icon { display: flex; align-items: center; justify-content: center; color: #FF2E7A; background: #FFF4ED; }
.file-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file-card-body .name { font-weight: 700; font-size: 0.85rem; color: #27272A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card-body .size, .file-card-body .meta { font-size: 0.74rem; color: #A1A1AA; font-weight: 600; }

/* New sub-elements added to the file card (status pill, "use as ID card"
   checkbox, the secondary "duplicate copies" link, and the image-only
   Edit action). Kept as small, self-contained rules — not a layout
   change — so they render sensibly at every width, including the
   untouched desktop carousel above. */
#step-upload .fc-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.64rem; font-weight: 800; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; width: fit-content; margin-top: 2px;
}
#step-upload .fc-status-ready { color: #15803D; background: #DCFCE7; }
#step-upload .fc-status-processing { color: #6B00A8; background: #F3E8FF; }
#step-upload .fc-status-processing .fc-status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #6B00A8;
  animation: statusPulse 1s ease-in-out infinite;
}
#step-upload .fc-status-failed { color: #DC2626; background: #FEE2E2; }

#step-upload .fc-combine-check {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: #6B00A8; font-weight: 600;
  margin-top: 2px; cursor: pointer;
}
#step-upload .fc-combine-check input { width: 14px; height: 14px; flex-shrink: 0; }

#step-upload .fc-link-btn {
  align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; color: #6B00A8;
  background: none; border: none; padding: 2px 0;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

#step-upload .fc-btn.edit {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #FF7A00, #FF2E7A 60%, #D100C8);
}
#step-upload .fc-btn.edit:active { background: linear-gradient(135deg, #FF7A00, #FF2E7A 60%, #D100C8); }

/* ---------------- File grid: compact tiles + one expandable detail panel ----------------
   Replaces the old one-full-card-per-file list. A grid of small square
   tiles (thumbnail + name only) scales to any number of files without
   turning the page into a mile of scrolling — 30 files is ~6 short rows
   instead of 30 stacked cards. Tapping a tile expands ONE full detail
   panel (pages, replace, duplicate-copies, etc. — unchanged from
   before) directly beneath it, via grid-column:1/-1, which needs no
   media query since CSS Grid's auto-fill already adapts the column
   count to whatever width it has, mobile or desktop. */
#step-upload .file-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  overflow: visible;
}
#step-upload .file-tile { cursor: pointer; }
#step-upload .file-tile-thumb-wrap {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 12px; overflow: hidden;
  background: #F8FAFC; border: 1.5px solid rgba(17,24,39,0.08);
}
#step-upload .file-tile.expanded .file-tile-thumb-wrap { border-color: #FF7A00; }
#step-upload .file-tile-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
#step-upload .file-tile-thumb-icon { display: flex; align-items: center; justify-content: center; color: #FF2E7A; background: #FFF4ED; }
#step-upload .ft-status-dot {
  position: absolute; top: 4px; left: 4px; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid #fff;
}
#step-upload .ft-status-dot.processing { background: #6B00A8; animation: statusPulse 1s ease-in-out infinite; }
#step-upload .ft-status-dot.failed { background: #DC2626; }
#step-upload .ft-range-badge {
  position: absolute; top: 4px; right: 4px;
  max-width: calc(100% - 10px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.56rem; font-weight: 800; text-transform: uppercase;
  color: #fff; background: rgba(107,0,168,0.85);
  padding: 2px 5px; border-radius: 999px;
}
#step-upload .ft-combine-toggle {
  position: absolute; top: 3px; right: 3px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #fff; padding: 0;
  font-size: 1.15rem; line-height: 26px; text-align: center;
  background: rgba(17,24,39,0.6);
  filter: grayscale(1); opacity: 0.9;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
#step-upload .ft-combine-toggle.active {
  background: #6B00A8; border-color: #fff;
  filter: none; opacity: 1;
  box-shadow: 0 0 0 3px rgba(107,0,168,0.4);
}
#step-upload .ft-remove, #step-upload .ft-edit {
  position: absolute; bottom: 3px; width: 20px; height: 20px; border-radius: 50%;
  border: none; font-size: 0.6rem; line-height: 20px; text-align: center; padding: 0;
  background: rgba(17,24,39,0.65); color: #fff;
}
#step-upload .ft-remove { right: 3px; }
#step-upload .ft-edit { left: 3px; background: linear-gradient(135deg, #FF7A00, #FF2E7A 60%, #D100C8); }
#step-upload .file-tile-name {
  margin-top: 4px; font-size: 0.64rem; font-weight: 600; color: #52525B;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
/* The one expanded file's full detail panel — spans every column so it
   drops onto its own full-width row directly under the tile that
   opened it, same as before content/handler-wise. */
#step-upload .file-card-detail {
  grid-column: 1 / -1;
  border-radius: 14px;
  padding: 10px;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(17,24,39,0.05);
  position: relative;
}
#step-upload .fc-collapse-btn {
  display: block; margin: 0 0 6px; padding: 0;
  border: none; background: none; color: #6B00A8;
  font-size: 0.72rem; font-weight: 700; cursor: pointer;
}
#step-upload .file-card-detail .file-card-top { display: flex; align-items: flex-start; gap: 10px; }
#step-upload .file-card-detail .file-card-thumb {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover; object-position: center top;
}
#step-upload .file-card-detail .file-card-thumb-icon svg { width: 22px; height: 22px; }
#step-upload .file-card-detail .file-card-body { flex: 1; padding-top: 1px; gap: 3px; }
#step-upload .file-card-detail .file-card-body .name { font-size: 0.82rem; }
/* Consistent 12px rhythm between every section of the expanded card —
   name/meta row, pages row, page-range block, action buttons — instead
   of the near-zero margins that made "Pages", "Pages to print", and the
   buttons all crowd together with no visual grouping. */
#step-upload .file-card-detail .file-card-pages { margin-top: 12px; }
#step-upload .file-card-detail .file-card-page-range {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(17,24,39,0.07);
}
#step-upload .file-card-detail .file-card-page-range .pr-heading {
  flex-basis: 100%; margin-bottom: 2px;
}
#step-upload .file-card-detail .file-card-actions { margin-top: 12px; }
#step-upload .file-card-detail .fc-btn { padding: 9px; font-size: 0.74rem; border-radius: 10px; }
#step-upload .file-card-detail .fc-link-btn { margin-top: 8px; }
/* The heavy 2px black borders on the Pages input / Auto pill are a
   leftover from an older, bolder visual style — they stood out badly
   next to the soft thin borders everywhere else in this card. */
#step-upload .file-card-detail .file-card-pages input[type=number] {
  border: 1.5px solid rgba(17,24,39,0.16);
}
#step-upload .file-card-detail .auto-tag {
  border: none;
}
/* No more per-card swipe pagination in a grid. */
#step-upload .carousel-nav { display: none; }

/* ---------------- Mobile-only touches (360–430px phones) ----------------
   Just the dropzone shrinking once files exist — everything else above
   already adapts to width on its own via CSS Grid. ---------------- */
@media (max-width: 480px) {
  #step-upload .file-carousel-wrap { margin-top: 10px; }
  /* Once files are selected the dropzone's job shrinks to "tap to add
     more" — less padding here means Print Options sits closer beneath
     the file list instead of the page growing unnecessarily long. */
  #step-upload .upload-dropzone.has-files { padding: 14px 16px; }
}

/* ---------------- Full-screen tap-to-enlarge preview ---------------- */
.preview-lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(17,24,39,0.92);
  z-index: 999;
  align-items: center; justify-content: center;
}
.preview-lightbox.open { display: flex; }
.preview-lightbox-track {
  display: flex;
  width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.preview-lightbox-track::-webkit-scrollbar { display: none; }
.preview-lightbox-track img {
  flex: 0 0 100%;
  width: 100%; height: 100%;
  scroll-snap-align: center;
  object-fit: contain;
  padding: 24px;
  box-sizing: border-box;
  background: transparent;
}
.preview-lightbox-close {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 2px solid #111827;
  font-size: 1.1rem; font-weight: 800; color: #111827;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.preview-lightbox-counter {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 0.8rem; font-weight: 700;
  padding: 6px 14px; border-radius: 999px;
}
.preview-lightbox-spinner {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.85rem; font-weight: 700;
  background: rgba(17,24,39,0.4);
  pointer-events: none;
}

.file-card-pages { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.file-card-pages label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #52525B; font-weight: 700; }
.file-card-pages input[type=number] { width: 56px; padding: 6px 8px; font-size: 0.85rem; border-radius: 8px; border: 2px solid #111827; background: #fff; }
.page-detecting { font-size: 0.72rem; color: #A1A1AA; font-weight: 700; font-style: italic; white-space: nowrap; }
.auto-tag {
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
  color: #15803D; background: #DCFCE7; padding: 2px 7px; border-radius: 999px;
  border: 1.5px solid #111827;
}
.estimate-tag {
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
  color: #92400E; background: #FEF3C7; padding: 2px 7px; border-radius: 999px;
  border: 1.5px solid #111827;
}
/* Per-file processing status badges — queued / processing / failed. "Ready"
   has no badge, it just shows the normal page-count field. These reflect
   entry.status, set by the bounded processing queue (see enqueueProcessing
   in shop.php) so a customer with 30-40 files always sees, per file, exactly
   where it stands instead of one shared spinner for the whole batch. */
.file-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.file-status-badge.status-queued { color: #A1A1AA; }
.file-status-badge.status-processing { color: #6B00A8; }
.file-status-badge.status-processing .status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #6B00A8;
  animation: statusPulse 1s ease-in-out infinite;
}
@keyframes statusPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.file-status-badge.status-failed { color: #DC2626; }
.file-card.file-card-failed { border-color: #DC2626; background: #FEF2F2; }
.fc-btn.retry { background: #FEE2E2; border-color: #DC2626; color: #991B1B; }

.file-card-page-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.file-card-page-range .pr-radio { display: flex; align-items: center; gap: 4px; font-size: 0.74rem; color: #52525B; font-weight: 700; white-space: nowrap; }
.file-card-page-range .pr-radio input { width: 14px; height: 14px; }
.file-card-page-range .pr-input {
  width: 100%; margin-top: 2px; padding: 6px 8px; font-size: 0.78rem;
  border-radius: 8px; border: 2px solid #111827; background: #fff;
}
.file-card-page-range .pr-input.pr-invalid { border-color: #DC2626; background: #FEF2F2; }

.file-card-actions { display: flex; gap: 8px; margin-top: auto; }
.fc-btn {
  flex: 1; padding: 11px; border-radius: 12px; font-size: 0.78rem; font-weight: 700;
  text-align: center; border: 1px solid rgba(17,24,39,0.1); background: #F8FAFC; color: #27272A;
  transition: transform 0.15s ease, background 0.15s ease;
}
.fc-btn:active { transform: scale(0.96); background: #F8FAFC; }
.fc-btn.remove { color: #A100A8; background: #FFE9F5; }

.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; }
.carousel-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: #fff;
  display: flex; align-items: center; justify-content: center; color: #27272A; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(17,24,39,0.12);
  transition: transform 0.15s ease;
}
.carousel-btn:active { transform: scale(0.92); }
.carousel-dots { display: flex; gap: 5px; }
.carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: #E4E4E7; border: 1.5px solid #111827; transition: all 0.2s ease; }
.carousel-dot.active { background: #D100C8; width: 18px; border-radius: 4px; }

/* ---------------- Form fields: chunky filled inputs ---------------- */
.shop-app .field input,
.shop-app .field select {
  background: #F8FAFC;
  border: 2px solid #E4E4E7;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.shop-app .field input:focus,
.shop-app .field select:focus {
  border-color: #FF7A00;
  background: #fff;
  outline: none;
  box-shadow: none;
}
.shop-app .field label { color: #52525B; font-size: 0.78rem; font-weight: 700; }

/* ---------------- Payment method: bold selectable cards ---------------- */
.shop-app .pay-choice { flex-direction: column; gap: 10px; }
.shop-app .pay-choice label {
  flex-direction: row; align-items: center; gap: 12px;
  background: #fff; border: 2.5px solid #111827; border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 3px 3px 0 #111827;
}
.shop-app .pay-choice label:has(input:checked) {
  background: #FFE0EC; border-color: #FF2E7A;
  box-shadow: 3px 3px 0 #FF2E7A;
}
.shop-app .pay-choice .pay-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: #FFF4ED; color: #FF2E7A;
  border: 2px solid #111827;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.shop-app .pay-choice .pay-radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid #111827;
  margin-left: auto; flex-shrink: 0;
  position: relative;
}
.shop-app .pay-choice label:has(input:checked) .pay-radio { border-color: #FF2E7A; }
.shop-app .pay-choice label:has(input:checked) .pay-radio::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #FF2E7A;
}
.shop-app .pay-choice .pay-title { font-size: 0.92rem; font-weight: 800; color: #111827; font-family: 'Baloo 2', sans-serif; }
.shop-app .pay-choice .pay-sub { font-size: 0.76rem; color: #A1A1AA; font-weight: 600; }

/* ---------------- Price breakdown: festive yellow highlight ---------------- */
.shop-app #price-box {
  background: #FFF4ED !important;
  border: 2.5px solid #111827 !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 #111827;
}
.shop-app .price-breakdown-row { color: #71717A; font-weight: 600; }
/* The base row layout (display:flex; justify-content:space-between) comes
   from main.css, but it never accounted for long, unbreakable filenames
   (uploaded scan/screenshot names especially) — those just overflowed
   the row and pushed the price off the edge of the card instead of
   wrapping. Force a shrinkable left column and a fixed-width, never-wrapping
   price column instead. */
.shop-app .price-breakdown-row {
  display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px;
}
.shop-app .price-breakdown-row > span:first-child {
  flex: 1 1 auto; min-width: 0;
  overflow-wrap: anywhere; word-break: break-word;
}
.shop-app .price-breakdown-row > span:last-child {
  flex: 0 0 auto; white-space: nowrap;
}
.shop-app .price-breakdown-row.total {
  border-top: 2px dashed #111827;
  color: #111827;
}
.shop-app .price-breakdown-row.total span:last-child {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.4rem; font-weight: 800; color: #D100C8;
}

/* ---------------- Upload progress bar + spinner ---------------- */
.upload-progress-track { height: 10px; border-radius: 999px; background: #E4E4E7; border: 2px solid #111827; overflow: hidden; }
.upload-progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #FF7A00, #D100C8);
  transition: width 0.25s ease;
}
.upload-progress-label { font-size: 0.76rem; color: #71717A; margin-top: 6px; text-align: center; font-weight: 700; }

.upload-spinner {
  width: 14px; height: 14px; display: inline-block; margin-right: 7px; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%;
  animation: cp-spin 0.7s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* ---------------- Sticky bottom bar: bold glowing CTA ---------------- */
.shop-app .mobile-sticky-bar {
  position: fixed; left: 8px; right: 8px; bottom: 74px;
  max-width: 464px; margin: 0 auto;
  background: #fff;
  border: 2px solid #111827;
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow: 3px 3px 0 #111827;
  z-index: 100;
  display: flex; align-items: center; gap: 14px;
}
.shop-app .mobile-sticky-bar .bar-total { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.shop-app .mobile-sticky-bar .bar-total .label { font-size: 0.66rem; color: #A1A1AA; font-weight: 700; }
.shop-app .mobile-sticky-bar .bar-total .amount { font-size: 1.1rem; font-weight: 800; color: #111827; font-family: 'Baloo 2', sans-serif; }

/* ---------------- Premium glass bottom nav bar with raised center Scan button ---------------- */
.app-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 480px; margin: 0 auto;
  height: 68px;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid rgba(17,24,39,0.08);
  box-shadow: 0 -8px 24px rgba(17,24,39,0.08);
  display: flex; align-items: center; justify-content: space-around;
  z-index: 101;
}
.app-bottom-nav .abn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: #A1A1AA;
  text-decoration: none;
  font-size: 0.67rem; font-weight: 700;
  flex: 1;
  padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
}
.app-bottom-nav .abn-item .abn-icon-wrap {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #A1A1AA;
  transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease;
}
.app-bottom-nav .abn-item .abn-icon-wrap svg { stroke: currentColor; transition: stroke 0.2s ease; }
.app-bottom-nav .abn-item .abn-label-text { transition: color 0.2s ease, opacity 0.2s ease; }
.app-bottom-nav .abn-item:active .abn-icon-wrap { transform: scale(0.88); }

.app-bottom-nav .abn-item.abn-active .abn-icon-wrap {
  background: linear-gradient(120deg, #FF7A00 0%, #FF2E7A 55%, #8A00D4 100%);
  box-shadow: 0 4px 10px rgba(209,0,200,0.28);
  color: #fff;
}
.app-bottom-nav .abn-item.abn-active .abn-label-text {
  background: linear-gradient(120deg, #FF7A00 0%, #FF2E7A 55%, #8A00D4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* Kept in the normal flex flow, not absolutely positioned — this only
   correctly centers Scan when the total item count is fixed at 5 (2
   before, Scan, 2 after). To guarantee that without ever leaving lopsided
   spacing when a plan hides "Store" (2 before + 1 after would otherwise
   drift Scan off-center, or leave uneven gaps immediately around it), the
   hidden slot is rendered as an invisible placeholder of identical size
   rather than removed outright — see .abn-placeholder below and the
   corresponding markup in shop.php/services.php/support.php/stationery.php.
   That keeps the flex item count constant at 5 always, so simple even
   distribution keeps Scan exactly centered with symmetric gaps on both
   sides, regardless of which plan features are enabled. */
.app-bottom-nav .abn-scan-btn {
  display: flex; flex-direction: column; align-items: center;
  flex: 1;
  border: none;
  background: transparent;
  margin-top: -26px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-bottom-nav .abn-placeholder { visibility: hidden; pointer-events: none; }
.app-bottom-nav .abn-scan-circle {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(120deg, #FF7A00 0%, #FF2E7A 55%, #8A00D4 100%);
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(209,0,200,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.app-bottom-nav .abn-scan-label {
  font-size: 0.68rem; font-weight: 800; color: #FF7A00;
  margin-top: 3px;
}
.app-bottom-nav .abn-scan-btn:active .abn-scan-circle { transform: scale(0.92); box-shadow: 0 2px 8px rgba(209,0,200,0.35); }

.shop-app .btn-primary {
  background: linear-gradient(120deg, #FF7A00, #D100C8);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 0.92rem;
  border-radius: 12px;
  border: 2px solid #111827;
  box-shadow: 3px 3px 0 #111827;
  flex: 1; padding: 10px 18px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.shop-app .btn-primary:not(:disabled):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #111827;
}
.shop-app .btn-primary:disabled {
  background: #E4E4E7; color: #A1A1AA; box-shadow: 3px 3px 0 #A1A1AA; border-color: #A1A1AA;
}

/* Floating WhatsApp button: shop.php has a fixed bottom bar the shared
   partial's default position doesn't know about, so it's lifted clear of
   it here rather than overlapping — same button, page-specific offset. */
.shop-app .wa-fab { bottom: 146px; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35); }
@media (min-width: 481px) {
  .shop-app .wa-fab { bottom: 84px; }
}

@media (min-width: 481px) {
  .shop-app .page-wrap { box-shadow: 0 0 40px rgba(0,0,0,0.06); }
}

@media (min-width: 768px) {
  .carousel-nav { display: none; }
}

/* ---------------- Print options: card-based selectors + copies stepper ---------------- */
.opt-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.opt-row-2col .opt-block { margin-bottom: 0; }
.opt-block { margin-bottom: 14px; }
.opt-block:last-child { margin-bottom: 0; }
.opt-label {
  display: block;
  font-size: 0.82rem; font-weight: 800; color: #27272A;
  margin-bottom: 6px;
}
.opt-select {
  width: 100%; padding: 13px 14px; font-size: 0.92rem;
  border-radius: 12px; border: 1.5px solid rgba(17,24,39,0.12); background: #fff;
}
.opt-hidden-field { display: none; }

.stepper {
  display: inline-flex; align-items: center; gap: 0;
  border: 1.5px solid rgba(17,24,39,0.12); border-radius: 14px; overflow: hidden;
  background: #fff;
}
.stepper-btn {
  width: 46px; height: 46px;
  border: none; background: #FDF0FF; color: #FF7A00;
  font-size: 1.3rem; font-weight: 800; line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.stepper-btn:active { background: #F5E0FF; }
.stepper-value {
  min-width: 42px; text-align: center;
  font-size: 1.05rem; font-weight: 800; color: #111827;
}

.opt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 14px 8px;
  min-height: 64px;
  border: 1.5px solid rgba(17,24,39,0.1); border-radius: 14px;
  background: #F8FAFC;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.opt-card:active { transform: scale(0.97); }
.opt-card.selected {
  border-color: #FF7A00;
  background: #FDF0FF;
  box-shadow: 0 4px 12px -4px rgba(255,122,0,0.35);
}
.opt-card.disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: #F1F1F4;
  border-color: rgba(17,24,39,0.08);
  pointer-events: none;
}
.opt-card.disabled .opt-card-icon,
.opt-card.disabled .opt-card-label { color: #A1A1AA; }
.opt-card-unavailable-tag {
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
  color: #A1A1AA; letter-spacing: 0.02em;
}
.opt-card-icon {
  font-size: 1.2rem; line-height: 1;
  color: #52525B;
}
.opt-card.selected .opt-card-icon { color: #FF7A00; }
.opt-card-icon-bw { color: #52525B; }
.opt-card-icon-color { color: #FF2E7A; }
.opt-card.selected .opt-card-icon-color { color: #FF2E7A; }
.opt-card-label {
  font-size: 0.8rem; font-weight: 800; color: #27272A;
}
.opt-card-sub {
  font-size: 0.68rem; font-weight: 700; color: #71717A;
}
.opt-card.selected .opt-card-sub { color: #FF7A00; }

/* ---------------- Compact Print Options additions ----------------
   Full-width copies stepper (Options now leads with this, matching a
   prominent "Number of copies" row), the pages-per-sheet card grid
   (replacing the old plain <select>), and the "More options" toggle that
   tucks paper size / pages-per-sheet / page range / extras out of the
   way so the options screen is short by default. */
.po-copies-block-full { margin-bottom: 18px; }
.stepper-full {
  display: flex; width: 100%;
}
.stepper-full .stepper-btn { flex: 0 0 52px; height: 52px; font-size: 1.5rem; }
.stepper-full .stepper-value { flex: 1; font-size: 1.15rem; }

.po-pps-cards.opt-cards-4 { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.po-pps-card { padding: 12px 4px; min-height: 68px; }
.po-pps-icon {
  display: flex; align-items: center; justify-content: center;
}
.po-pps-card .opt-card-label { font-size: 0.68rem; }
@media (max-width: 380px) {
  .po-pps-cards.opt-cards-4 { grid-template-columns: repeat(3, 1fr); }
}

.po-advanced-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; margin: 4px 0 18px;
  border: none; border-radius: 14px;
  background: #F8FAFC; color: #52525B;
  font-size: 0.88rem; font-weight: 700;
  cursor: pointer;
}
.po-advanced-toggle:active { background: #F1F1F4; }
.po-advanced-toggle svg { color: #8B8B96; flex-shrink: 0; }
#po-advanced > .opt-block:first-child,
#po-advanced > .po-paper-copies-row:first-child { margin-top: 0; }

/* ---------------- Quick service icons (above the upload section) ----------------
   Horizontally scrollable row of white rounded-corner card boxes — one
   per service, icon over label inside each card — matching the original
   PrintNiq storefront card style. The next card always peeks in from the
   edge as a natural invitation to keep scrolling. */
.quick-services {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin: 18px 0 6px;
  padding: 2px 16px 6px;
  box-sizing: border-box;
}
.quick-services::-webkit-scrollbar { display: none; }
.quick-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  width: 94px;
  min-height: 100px;
  scroll-snap-align: start;
  text-decoration: none;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(17,24,39,0.06);
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 10px 22px -10px rgba(17,24,39,0.18);
  padding: 16px 8px;
  box-sizing: border-box;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.quick-service-item:active {
  transform: scale(0.96);
  box-shadow: 0 1px 2px rgba(17,24,39,0.05);
}
.quick-service-item .qs-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-service-item .qs-icon {
  font-size: 1.9rem;
  line-height: 1;
}
.quick-service-item .qs-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #27272A;
  text-align: center;
  line-height: 1.2;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (max-width: 360px) {
  .quick-services { gap: 10px; padding: 2px 12px 6px; }
  .quick-service-item { width: 82px; min-height: 92px; padding: 12px 6px; }
  .quick-service-item .qs-icon { font-size: 1.4rem; }
  .quick-service-item .qs-label { font-size: 0.62rem; }
}

/* ---------------- Service slider (merchant-managed banners) ----------------
   Fully responsive: width is always the viewport-safe container width minus
   its own side margins (never a fixed px), height comes purely from
   aspect-ratio (with a padding-top fallback for older WebKit that doesn't
   support the aspect-ratio property) so the box can never grow taller than
   its content or overflow past the edge of the screen, and every image is
   object-fit:cover so it's always cropped-to-fit rather than stretched. */
.shop-slider {
  margin: 0 16px 18px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}
.shop-slider-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.shop-slider-track::-webkit-scrollbar { display: none; }
.shop-slider-slide {
  flex: 0 0 100%;
  min-width: 0;
  max-width: 100%;
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 16 / 8;
  display: block;
  text-decoration: none;
  box-sizing: border-box;
}
/* aspect-ratio fallback for browsers that don't support it (Safari <15) —
   without this the slide would collapse to 0 height and the image inside
   would have nothing to size against. */
@supports not (aspect-ratio: 16 / 8) {
  .shop-slider-slide { height: 0; padding-bottom: 50%; }
  .shop-slider-slide img { position: absolute; top: 0; left: 0; }
}
.shop-slider-slide img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.shop-slider-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
  color: #fff; font-weight: 700; font-size: 0.86rem;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.shop-slider-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.shop-slider-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: #D4D4D8; transition: background 0.2s ease, width 0.2s ease;
}
.shop-slider-dots span.active { background: #FF7A00; width: 16px; border-radius: 4px; }

/* On wider screens (tablet/desktop) a 2:1 banner gets visually very tall
   relative to the rest of the (still 480px-capped) page — a slightly
   shorter ratio there keeps it proportionate without ever letting it
   overflow the container. */
@media (min-width: 480px) {
  .shop-slider-slide { aspect-ratio: 21 / 8; }
  @supports not (aspect-ratio: 21 / 8) {
    .shop-slider-slide { padding-bottom: 38%; }
  }
}

/* ============================================================================
   Services page (services.php) — modern rounded cards with icons, and
   Support page (support.php) — action cards + FAQ accordion.
   Shares the same .shop-app shell, header and .app-bottom-nav as shop.php.
   ========================================================================= */

.subpage-header {
  padding-bottom: 22px !important;
}
.subpage-header .subpage-title {
  font-family: 'Baloo 2', 'Segoe UI', sans-serif;
  font-size: 1.3rem; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em;
}
.subpage-header .subpage-sub {
  font-size: 0.82rem; color: rgba(255,255,255,0.88); font-weight: 600;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 16px 20px;
}
.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(17,24,39,0.07);
  border-radius: 18px;
  padding: 16px 14px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 10px 24px -10px rgba(17,24,39,0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.service-card:active { transform: translateY(1px) scale(0.98); box-shadow: 0 1px 2px rgba(17,24,39,0.06); }
.service-card-icon {
  width: 42px; height: 42px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: linear-gradient(135deg, rgba(255,122,0,0.12), rgba(209,0,200,0.12));
}
.service-card-label { font-weight: 800; font-size: 0.86rem; color: #111827; line-height: 1.2; }
.service-card-tag { font-size: 0.7rem; color: #71717A; font-weight: 500; line-height: 1.3; }

/* ---------------- Support page ---------------- */
.support-list {
  margin: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.support-action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(17,24,39,0.07);
  border-radius: 18px;
  padding: 14px 16px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 10px 24px -10px rgba(17,24,39,0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.support-action-card:active { transform: scale(0.98); }
.support-action-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  color: #fff;
}
.support-action-icon.wa { background: #25D366; }
.support-action-icon.call { background: linear-gradient(120deg, #FF7A00 0%, #FF2E7A 55%, #8A00D4 100%); }
.support-action-title { font-weight: 800; font-size: 0.88rem; color: #111827; }
.support-action-sub { font-size: 0.76rem; color: #71717A; font-weight: 500; margin-top: 2px; }
.support-action-arrow { margin-left: auto; color: #D4D4D8; flex: 0 0 auto; }

.support-section-title {
  font-family: 'Baloo 2', 'Segoe UI', sans-serif;
  font-size: 1rem; font-weight: 700; color: #111827;
  margin: 22px 16px 10px;
}
.faq-list {
  margin: 0 16px 16px;
  background: #fff;
  border: 1px solid rgba(17,24,39,0.07);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 10px 24px -10px rgba(17,24,39,0.14);
  overflow: hidden;
}
.faq-item { border-bottom: 1px solid rgba(17,24,39,0.06); }
.faq-item:last-child { border-bottom: none; }
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: none; border: none; text-align: left;
  padding: 14px 16px;
  font-size: 0.84rem; font-weight: 700; color: #111827;
  cursor: pointer;
}
.faq-question .faq-chevron { flex: 0 0 auto; transition: transform 0.2s ease; color: #A1A1AA; }
.faq-item.open .faq-question .faq-chevron { transform: rotate(180deg); color: #FF7A00; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding: 0 16px;
  font-size: 0.8rem; color: #71717A; line-height: 1.5; font-weight: 500;
}
.faq-item.open .faq-answer { max-height: 240px; padding: 0 16px 16px; }

.help-guide-strip {
  margin: 0 16px 4px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.help-guide-strip::-webkit-scrollbar { display: none; }
.help-guide-step {
  flex: 0 0 auto;
  width: 110px;
  background: #fff;
  border: 1px solid rgba(17,24,39,0.07);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 10px 24px -10px rgba(17,24,39,0.14);
}
.help-guide-step .hgs-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(120deg, #FF7A00 0%, #FF2E7A 55%, #8A00D4 100%);
  color: #fff; font-size: 0.68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.help-guide-step .hgs-label { font-size: 0.72rem; font-weight: 700; color: #111827; line-height: 1.3; }

/* ============================================================================
   Stationery Store (stationery.php) — real product cards (image-forward,
   like a proper storefront) with qty steppers, a sticky cart bar, and a
   checkout modal sheet.
   ========================================================================= */
.st-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 16px 20px;
}
.st-item-card {
  background: #fff;
  border: 1px solid rgba(17,24,39,0.07);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 10px 24px -10px rgba(17,24,39,0.14);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.st-item-card.st-in-cart {
  border-color: #8A00D4;
  box-shadow: 0 0 0 2px rgba(138,0,212,0.18), 0 10px 24px -10px rgba(17,24,39,0.14);
}
.st-item-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, rgba(255,122,0,0.08), rgba(138,0,212,0.08));
  display: flex; align-items: center; justify-content: center;
}
.st-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-item-photo-fallback { font-size: 2.4rem; }
.st-item-in-cart-badge {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(120deg, #FF7A00 0%, #FF2E7A 55%, #8A00D4 100%);
  color: #fff; font-size: 0.6rem; font-weight: 800;
  padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(17,24,39,0.2);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.st-item-card.st-in-cart .st-item-in-cart-badge { opacity: 1; transform: translateY(0); }
.st-item-body { padding: 10px 12px 12px; }
.st-item-name { font-size: 0.82rem; font-weight: 800; color: #111827; line-height: 1.25; }
.st-item-desc { font-size: 0.7rem; color: #71717A; margin-top: 2px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-item-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 6px; }
.st-item-price { font-weight: 800; font-size: 0.88rem; color: #111827; flex-shrink: 0; }

.st-qty-stepper {
  display: flex; align-items: center; gap: 8px;
  background: #F4F4F5; border-radius: 999px; padding: 3px 4px;
}
.st-qty-btn {
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: #fff; box-shadow: 0 1px 2px rgba(17,24,39,0.15);
  font-size: 0.95rem; font-weight: 800; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #111827;
}
.st-qty-val { font-size: 0.82rem; font-weight: 800; min-width: 14px; text-align: center; }

#st-cart-bar {
  position: fixed; left: 0; right: 0; bottom: 72px;
  max-width: 480px; margin: 0 auto;
  background: #fff;
  border-top: 1px solid rgba(17,24,39,0.08);
  box-shadow: 0 -8px 24px rgba(17,24,39,0.12);
  border-radius: 18px 18px 0 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  z-index: 90;
}
.st-cart-summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.86rem; font-weight: 700; color: #111827; }
#st-cart-total { color: #8A00D4; font-family: var(--font-display); }

.st-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(17,24,39,0.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.st-modal-sheet {
  width: 100%; max-width: 480px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto; overflow-x: hidden;
}
.st-modal-sheet * { box-sizing: border-box; max-width: 100%; }

/* ---------------- Stationery Store: toolbar, category sections, discount pricing, Add->stepper ---------------- */
.st-toolbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid rgba(17,24,39,0.12);
  border-radius: 10px; padding: 8px 14px;
  font-size: 0.8rem; font-weight: 700; color: #111827;
}
.st-toolbar-btn:active { background: #F4F4F5; }
#st-sort-select {
  display: none; width: 100%; margin-top: 10px;
  padding: 9px 12px; border-radius: 10px; border: 1.5px solid rgba(17,24,39,0.12);
  font-size: 0.84rem; font-weight: 600; background: #fff;
}
.st-chip {
  border: 1.5px solid rgba(17,24,39,0.12); background: #fff;
  border-radius: 999px; padding: 6px 14px;
  font-size: 0.78rem; font-weight: 700; color: #71717A;
}
.st-chip.active { background: linear-gradient(120deg, #FF7A00 0%, #FF2E7A 55%, #8A00D4 100%); color: #fff; border-color: transparent; }

.st-category-section { margin: 0 16px 4px; }
.st-category-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; padding: 14px 2px 6px;
  font-size: 0.98rem; font-weight: 800; color: #111827; text-align: left;
}
.st-category-count { font-size: 0.72rem; font-weight: 700; color: #A1A1AA; margin-left: 6px; }
.st-category-chevron { transition: transform 0.2s ease; color: #A1A1AA; }
.st-category-section.st-collapsed .st-category-chevron { transform: rotate(-90deg); }
.st-category-section.st-collapsed .st-grid { display: none; }
.st-category-section .st-grid { margin-left: 0; margin-right: 0; }

.st-item-discount-badge {
  position: absolute; top: 8px; left: 8px;
  background: #16A34A; color: #fff;
  font-size: 0.6rem; font-weight: 800;
  padding: 3px 7px; border-radius: 999px;
}
.st-item-compare-price {
  font-size: 0.72rem; color: #A1A1AA; text-decoration: line-through;
  margin-left: 6px;
}

.st-add-control { flex-shrink: 0; }
.st-add-btn {
  border: 1.5px solid #8A00D4; background: #fff; color: #8A00D4;
  border-radius: 999px; padding: 6px 16px;
  font-size: 0.76rem; font-weight: 800;
}
.st-add-btn:active { background: rgba(138,0,212,0.08); }