/* ============================================================================
   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;
  border: 3px dashed #FF2E7A;
  background: #FFF4ED;
  border-radius: 16px;
  padding: 28px 16px;
  box-shadow: 0 0 0 0 rgba(255,46,122,0.35);
}
.shop-app .upload-dropzone.dragover { border-color: #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) {
  .shop-app .upload-dropzone:not(.has-files):not(.dragover) {
    animation: dzGlow 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 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;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 16px 40px -12px rgba(17,24,39,0.18);
  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; }
.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; }
@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: #F8FAFC; 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: #8B8B96;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.po-seg-btn.active { background: #fff; color: #FF7A00; 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 {
  position: sticky; bottom: 78px;
  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 ---------------- */
.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 { font-size: 0.74rem; color: #A1A1AA; font-weight: 600; }

/* ---------------- 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;
  padding: 24px;
}
.preview-lightbox.open { display: flex; }
.preview-lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.preview-lightbox-close {
  position: absolute; top: 20px; right: 20px;
  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;
}
.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; }
.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; }

/* ---------------- 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); }