/* ==========================================================================
   TechRepo - Print & Delivery System Stylesheet
   Designed to seamlessly integrate with TechRepo Dark Obsidian / Light Crystal Design System
   ========================================================================== */

/* Theme color-scheme [data-theme] overrides only.
   :root color-scheme is declared in main.css - no override needed here. */

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}

/* Page Header & Hero */
.print-hero-section {
  padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem;
  text-align: center;
  position: relative;
}

.print-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-full);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: var(--primary-accessible);
  font-size: 0.825rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

/* FIX-BUG-18: Explicit icon size prevents stretch/shrink from max-width:100% global rule */
.print-badge-pill i,
.print-badge-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  max-width: none;
}

.print-hero-title {
  font-size: clamp(1.85rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}


/* BUG-FIX: Removed <br> from .print-hero-title; use display:block on the
   .gradient-text span so the subtitle line still breaks naturally on all screen sizes. */
.print-hero-title .gradient-text {
  display: block;
}
.print-hero-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}

/* Main Workspace (Steps 1-4, then the Order Summary BELOW them)
   One column on every screen size — on laptops the Order Summary used to sit in a 380px
   side column and left an empty strip under it; now it stacks under Step 4 exactly like
   on a phone. The column is centred and capped at 980px (about the widest the stacked
   layout already got on tablets) so the cards don't stretch edge-to-edge on big monitors.
   Below ~1040px the screen is narrower than the cap, so phones/tablets look as before. */
.print-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  max-width: 980px;
  margin: 0 auto 4rem;
}

.print-workspace-grid > * {
  min-width: 0;
}

/* BUG-FIX: .print-configurator-column & .print-summary-column referenced in HTML
   but never defined in CSS. Both are plain block containers; grid handles sizing. */
.print-configurator-column,
.print-summary-column {
  display: block;
  min-width: 0;
  width: 100%;
}

/* Card Container */
.print-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
  transition: border-color var(--transition-normal);
}

.print-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.print-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* FIX-BUG-07: Use --primary-accessible instead of --primary-500 for WCAG AA
   contrast on both light (#4F46E5 = 5.1:1) and dark (#818CF8 = 5.0:1) themes. */
.print-card-title i,
.print-card-title svg {
  color: var(--primary-accessible);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  max-width: none; /* BUG-FIX: global svg max-width:100% was squeezing card-title icons */
}

.print-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Step 1: Upload Dropzone */
/* FIX-BUG-11: 0.03 opacity is invisible on light-mode. Using CSS variable with fallback
   ensures theme-appropriate tinting. */
.dropzone-container {
  border: 2px dashed rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.04);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
}

.dropzone-container:hover,
.dropzone-container.drag-over {
  border-color: var(--primary-500);
  background: rgba(99, 102, 241, 0.08);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.dropzone-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--primary-accessible);
  font-size: 1.75rem;
  transition: transform var(--transition-normal);
}

/* BUG-20 FIX: Nested @supports inside a rule block requires CSS Nesting (Chrome 112+,
   Firefox 117+) — older browsers silently ignore it, losing the color-mix() enhancement.
   Moved to a top-level @supports block so it works correctly everywhere. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .dropzone-icon-wrap {
    border-color: color-mix(in srgb, currentColor 40%, transparent);
  }
}

.dropzone-container:hover .dropzone-icon-wrap {
  transform: scale(1.1) rotate(5deg);
}

.dropzone-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.dropzone-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.file-format-tags {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.format-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}


/* BUG-FIX: #files-summary-bar was inline-styled with display:none + justify-content/align-items.
   Properties like justify-content have no effect on display:none elements. When JS un-hides it
   via style.display or removeProperty('display'), these rules ensure correct flex layout. */
#files-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}
/* Uploaded Files List */
.uploaded-files-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}


/* Uploaded-file row (Step 1 list) and the rows of the "My Orders" list.
   FIX: this base rule was missing from the file (a stray PowerShell snippet had been pasted in its
   place), so every file card rendered unstyled - thumbnail, name, page badge and the delete button
   stacked one under another with no border or padding. Only the :hover rule below survived. */
.file-item-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
  padding: 0.85rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}


.file-item-card:hover {
  border-color: var(--border-medium);
  background: var(--bg-card-hover, rgba(28, 37, 56, 0.95));
  box-shadow: var(--shadow-sm);
}

.file-thumbnail-box {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.file-thumbnail-box img,
.file-thumbnail-box canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-thumbnail-box i,
.file-thumbnail-box svg {
  color: var(--primary-accessible);
}

.file-details {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 0.925rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.file-meta-tags {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.785rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  flex-wrap: wrap;
}

.page-count-badge {
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary-accessible);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.file-actions-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-file-action {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-file-action:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Step 2: Print Options Grids */
.options-group {
  margin-bottom: 1.75rem;
}

.options-group-title {
  font-size: 0.925rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.options-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

.options-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

/* ISSUE-11 FIX: Removed duplicate narrow @media block that only covered
   .options-grid-2/.options-grid-3. The comprehensive @media (max-width: 640px)
   block near the bottom of the file already includes these rules. */

/* BUG-FIX: 3-column option cards were squeezed (~130px each) on 641-900px tablets
   because there was no mid-range breakpoint. Drop to 2-col at 768px. */
@media (max-width: 768px) {
  .options-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Radio Selection Pill Card */
.selection-card {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.05rem 1.15rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.selection-card:hover {
  border-color: rgba(99, 102, 241, 0.45);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  /* FIX-BUG-04: shadow now uses theme token (overridden below) — hard-coded dark rgba removed */
  box-shadow: var(--shadow-md);
}

/* FIX-BUG-05: Removed duplicate hard-coded box-shadow here; theme-aware shadow is
   applied by the later .selection-card.selected rule using var(--shadow-glow). */
.selection-card.selected {
  background: rgba(99, 102, 241, 0.08);
  border-color: var(--primary-500);
}

.selection-card.selected .selection-card-title {
  color: var(--primary-accessible);
}

.selection-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.selection-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.selection-price-tag {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--emerald-accessible, #10B981);
  background: rgba(16, 185, 129, 0.12);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.selection-card-desc {
  font-size: 0.785rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* FIX-BUG-08: --gradient-primary cyan end (#06B6D4) has only 2.4:1 contrast with white
   text at 0.65rem — WCAG AA fail. --gradient-button uses deeper #4F46E5→#0E7490 (5.4:1). */
.popular-badge-pill {
  position: absolute;
  top: -10px;
  right: 14px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--gradient-button);
  color: #ffffff;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* BUG-19 FIX: The hard-coded 200px first column caused the copies stepper to
   overflow or squash on 640-768px tablets (the grid hasn't gone single-column
   yet at those widths). Using min(200px, 100%) lets it shrink gracefully. */
.options-inputs-row {
  display: grid;
  grid-template-columns: min(200px, 100%) 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-top: 1rem;
}

.delivery-inputs-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}

@media (max-width: 640px) {
  .options-inputs-row,
  .delivery-inputs-row {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

/* Copies Stepper & Page Range Inputs */
.input-field-wrap {
  margin-bottom: 1.25rem;
}

.input-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.custom-text-input {
  width: 100%;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-size: 0.925rem;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.custom-text-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* BUG-FIX: select elements used as .custom-text-input had browser-default appearance
   bleeding through (especially iOS/Safari). Reset + add a consistent indigo chevron. */
select.custom-text-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
  padding-right: 2.5rem;
  cursor: pointer;
}

.stepper-control {
  display: inline-flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.stepper-btn {
  background: transparent;
  border: none;
  width: 40px;
  height: 40px;
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.stepper-btn:hover {
  background: var(--bg-tertiary);
  color: var(--primary-500);
}

.stepper-btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
}

.stepper-val {
  width: 50px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit; /* POLISH-1: inherit Plus Jakarta Sans */
  color: var(--text-primary);
  background: transparent;
  border: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper-val::-webkit-inner-spin-button,
.stepper-val::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Sticky Price Summary Card */
.sticky-summary-card {
  position: sticky;
  top: 88px; /* BUG-FIX: was 90px, aligned to navbar height + 16px gap */
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
}

.summary-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--border-medium);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.summary-row.total-row {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  padding-top: 0.5rem;
}

.summary-row.discount-row {
  color: var(--emerald-accessible, #10B981);
  font-weight: 600;
}

/* Coupon Box */
.coupon-box {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.coupon-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.85rem;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit; /* FIX-BUG-10: inherit Plus Jakarta Sans, not browser default */
  text-transform: uppercase;
  font-weight: 600;
}

/* FIX-BUG-09: Add glow ring to match .custom-text-input:focus UX consistency */
.coupon-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.coupon-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0 1rem;
  color: var(--text-primary);
  font-size: 0.825rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.coupon-input:focus-visible {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
} /* POLISH-3 */

.coupon-btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Primary Checkout Button */
.btn-checkout-primary {
  width: 100%;
  padding: 0.95rem 1.25rem;
  background: var(--gradient-button);
  border: none;
  border-radius: var(--radius-lg);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
  transition: all var(--transition-normal);
}

.btn-checkout-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(99, 102, 241, 0.6);
}

/* FIX-BUG-13: The button has a gradient background. White outline ensures maximum visibility
   on the button itself; the outer offset ring shows against the page. */
.btn-checkout-primary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.5);
}

.btn-checkout-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Trust Badges in Sidebar */
.trust-badges-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.trust-badge-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.785rem;
  color: var(--text-muted);
}

.trust-badge-item i,
.trust-badge-item svg {
  color: var(--emerald-accessible, #10B981);
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Step 4: UPI / Razorpay Notice Box */
/* FIX-BUG-12: Consistent vertical spacing; inline style on element will be removed from HTML */
.upi-qr-display-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  text-align: center;
  margin: 1.5rem 0;
}

/* Live Order Tracker Status Banner */
.track-status-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.track-status-banner.status-received,
.track-status-banner.status-pending {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--amber-accessible, #F59E0B);
}

.track-status-banner.status-printing,
.track-status-banner.status-accepted {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: var(--emerald-accessible, #10B981);
}

.track-status-banner.status-binding {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: var(--primary-accessible, #818CF8);
}

.track-status-banner.status-out_for_delivery {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: var(--purple-accessible, #A855F7); /* BUG-FIX: token so light-theme override applies */
}

.track-status-banner.status-delivered {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--emerald-accessible, #10B981);
}

.track-status-banner.status-cancelled {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--rose-accessible, #EF4444);
}

.track-status-banner.status-needs_review {
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: var(--amber-accessible, #F97316);
}

/* Admin Orders Table Buttons */
.btn-admin-accept {
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald-accessible, #10B981);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  font-size: 0.725rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
}

.btn-admin-accept i,
.btn-admin-accept svg {
  width: 13px;
  height: 13px;
}

.btn-admin-accept:hover {
  background: #047857;
  color: #ffffff;
  border-color: #047857;
}

.btn-admin-reject {
  background: rgba(239, 68, 68, 0.12);
  color: var(--rose-accessible, #EF4444);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  font-size: 0.725rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
}

.btn-admin-reject i,
.btn-admin-reject svg {
  width: 13px;
  height: 13px;
}

.btn-admin-reject:hover {
  background: #DC2626;
  color: #ffffff;
}

.admin-proof-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--emerald-accessible, #10B981);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
  text-decoration: none;
}

.admin-proof-link:hover {
  background: #047857;
  color: #ffffff;
}

/* Subtle Link Button ("Edit Pages") */
.btn-text-subtle {
  font-size: 0.75rem;
  color: var(--primary-accessible);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  padding: 2px 4px;
  border-radius: 4px;
  transition: opacity var(--transition-fast);
}

.btn-text-subtle:hover {
  opacity: 0.8;
}

.btn-text-subtle:focus-visible {
  outline: 2px solid var(--primary-accessible);
  outline-offset: 2px;
}

/* Danger Action Button */
.btn-danger {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #ffffff !important;
}

.btn-danger:hover {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
}

/* Order Success & Tracker Elements */
.order-success-header {
  text-align: center;
  margin-bottom: 2rem;
}

.order-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  border: 2px solid currentColor;
  color: var(--emerald-accessible, #10B981);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 2rem;
}

.order-success-icon i,
.order-success-icon svg {
  width: 36px;
  height: 36px;
}

.order-id-display {
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 800;
  color: var(--text-accent);
  margin: 0.5rem 0;
}

/* Timeline Stepper for Delivery Status */
.timeline-stepper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  margin: 2rem 0;
  padding-left: 2.5rem;
}

.timeline-stepper::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 14px;
  width: 3px;
  background: var(--border-medium);
}

.timeline-step-row {
  position: relative;
  display: flex;
  flex-direction: column;
}

.timeline-icon-dot {
  position: absolute;
  left: -2.5rem;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 2px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: all var(--transition-normal);
  z-index: 2;
}

.timeline-icon-dot i,
.timeline-icon-dot svg {
  width: 14px;
  height: 14px;
}

.timeline-step-row.completed .timeline-icon-dot {
  background: #10B981;
  border-color: #10B981;
  color: #ffffff;
}

.timeline-step-row.current .timeline-icon-dot {
  background: var(--primary-500);
  border-color: #818cf8;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* BUG-L7 FIX: No prefers-reduced-motion override existed — the pulse-ring animation kept firing
   for users with vestibular/motion disorders who set "Reduce Motion" in their OS settings.
   This override removes the animation and uses a static glow box-shadow as fallback. */
@media (prefers-reduced-motion: reduce) {
  .timeline-step-row.current .timeline-icon-dot {
    animation: none;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.4);
  }
}

.timeline-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.timeline-desc {
  font-size: 0.825rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* Delivery Partner & Time Box */
.rider-info-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.rider-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.25rem;
}

.rider-avatar i,
.rider-avatar svg {
  width: 24px;
  height: 24px;
}

/* Admin Orders Management Drawer / Modal */
.admin-badge-strip {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--amber-accessible, #F59E0B);
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-full);
  font-size: 0.785rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Dedicated Admin Metric Stat Cards */
.admin-stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--primary-500);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color var(--transition-fast);
}

.admin-stat-card:hover {
  border-color: var(--border-medium);
}

.admin-orders-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 1rem;
}

.admin-orders-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 700;
}

.admin-orders-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status-received { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
.status-printing { background: rgba(245, 158, 11, 0.15); color: var(--amber-accessible, #F59E0B); }
.status-binding { background: rgba(168, 85, 247, 0.15); color: var(--purple-accessible, #A855F7); } /* BUG-FIX */
.status-out_for_delivery { background: rgba(168, 85, 247, 0.15); color: var(--purple-accessible, #A855F7); } /* BUG-FIX: cyan badge had 2.4:1 contrast; matched to tracker banner colour */
.status-delivered { background: rgba(16, 185, 129, 0.15); color: var(--emerald-accessible, #10B981); }
.status-cancelled { background: rgba(239, 68, 68, 0.15); color: var(--rose-accessible, #EF4444); }
.status-needs_review { background: rgba(249, 115, 22, 0.15); color: var(--amber-accessible, #F97316); }

/* BUG-24 FIX: "not paid" and "payment pending" statuses had no CSS — the status-badge was
   invisible / unstyled. safeToken() strips spaces so 'not paid' → 'notpaid'. The JS in
   openMyOrdersList() now emits class="status-badge status-notpaid" / status-paymentpending.
   Also added status-accepted + status-pending used in order tracking. */
.status-notpaid { background: rgba(239, 68, 68, 0.15); color: var(--rose-accessible, #EF4444); }
.status-paymentpending { background: rgba(245, 158, 11, 0.15); color: var(--amber-accessible, #F59E0B); }
.status-accepted { background: rgba(16, 185, 129, 0.15); color: var(--emerald-accessible, #10B981); }
.status-pending { background: rgba(100, 116, 139, 0.15); color: #94A3B8; }


/* Admin — Print Service ON / OFF control ("Pause Service" / "Go Live") */
.service-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

.service-control[data-state="live"] {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
}

.service-control[data-state="paused"] {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
}

.service-control[data-state="error"] {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

.service-control-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 260px;
  min-width: 0;
}

.service-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}

.service-control[data-state="live"] .service-dot {
  background: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.service-control[data-state="paused"] .service-dot {
  background: #F59E0B;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22);
}

.service-control[data-state="error"] .service-dot {
  background: #EF4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

.service-control-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.service-control-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 0.15rem;
}

.service-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-icon);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.service-toggle-btn i,
.service-toggle-btn svg {
  width: 16px;
  height: 16px;
}

/* Service is LIVE -> the button pauses it */
.service-toggle-btn.is-pause {
  background: transparent;
  border-color: rgba(245, 158, 11, 0.65);
  color: var(--amber-accessible);
}

.service-toggle-btn.is-pause:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.14);
}

/* Service is PAUSED -> the button brings it back */
.service-toggle-btn.is-resume {
  background: #047857;
  border-color: #047857;
  color: #ffffff;
}

.service-toggle-btn.is-resume:hover:not(:disabled) {
  background: #065F46;
  border-color: #065F46;
}

.service-toggle-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.service-toggle-btn:focus-visible {
  outline: 2px solid var(--primary-accessible, #6366F1);
  outline-offset: 2px;
}

/* Modal Dialogs & Backdrops */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  /* ISSUE-05 FIX: Keep display:flex always + use visibility/pointer-events so
     the opacity transition actually plays. Swapping display from 'none'
     suppresses the fade-in animation because display is not animatable. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-normal, 250ms ease), visibility var(--transition-normal, 250ms ease); /* BUG-FIX: added fallback for browsers without CSS custom props */
}

.modal-backdrop.active,
.modal-backdrop[style*='display: flex'],
.modal-backdrop[style*='display:flex'] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Stack nested confirmation/action dialogs cleanly above the parent admin dashboard modal */
#admin-delivered-confirm-modal,
#admin-cancel-modal,
#admin-upi-settings-modal,
#price-change-confirm-modal {
  z-index: 100010;
}
#admin-delivered-confirm-modal .modal-card,
#admin-cancel-modal .modal-card,
#admin-upi-settings-modal .modal-card,
#price-change-confirm-modal .modal-card {
  z-index: 100011;
}

.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  width: 100%;
  max-width: 620px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 100000;
}

@keyframes modalPop {
  0% { transform: scale(0.92) translateY(12px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.modal-close-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.modal-close-btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.btn-file-action:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.dropzone-container:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-color: var(--primary-500);
}

.dropzone-container:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-color: var(--primary-500);
}

/* Floating Toast Notification System */
.admin-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card, rgba(14, 18, 27, 0.96));
  color: var(--text-primary, #F8FAFC);
  border: 1px solid var(--border-glow, rgba(99, 102, 241, 0.45));
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-lg, 18px);
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 100020;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px var(--primary-glow, rgba(99, 102, 241, 0.3));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  max-width: min(90vw, 520px);
  text-align: center;
  pointer-events: auto;
  animation: slideInToast 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: bottom 0.2s ease;
}

@keyframes slideInToast {
  0% { transform: translate(-50%, 20px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}

/* FIX: Light-mode dropzone background — slightly more visible tint */
[data-theme="light"] .dropzone-container {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.3);
}


/* BUG-FIX: Dark theme select chevron — indigo on very dark bg may be hard to see.
   Use a brighter --primary-accessible (#818CF8) for the arrow in dark mode. */
[data-theme="dark"] select.custom-text-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23818CF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}/* Print Viewport Optimization (Ctrl+P / Browser Print) */
@media print {
  /* Hide non-printable navigation, ambient, and submission controls */
  .site-header,
  .ambient-orb,
  #ambient-canvas,
  .site-footer,
  .nav-actions,
  .dropzone-container,
  .template-docs-section,
  .coupon-box,
  #apply-coupon-btn,
  .btn-checkout-primary,
  .modal-close-btn,
  .mobile-menu-toggle,
  .admin-toast,
  /* ISSUE-07 FIX: hide file summary bar when printing the page */
  #files-summary-bar {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 11pt;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* When an order tracking / summary modal is open during print, render cleanly */
  .modal-backdrop.active,
  .modal-backdrop[style*="display: flex"] {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
  }

  .modal-card {
    box-shadow: none !important;
    border: 1px solid #cbd5e1 !important;
    max-width: 100% !important;
    background: #ffffff !important;
    color: #0f172a !important;
  }

  .print-card,
  .sticky-summary-card {
    box-shadow: none !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    break-inside: avoid;
  }

  .print-workspace-grid {
    display: block !important;
  }
}

@media (max-width: 640px) {
  /* Stack options and delivery form inputs cleanly on phones */
  .options-grid-2,
  .options-grid-3,
  .options-inputs-row,
  .delivery-inputs-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* File summary wrap for mobile */
  #files-summary-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #files-summary-bar > div {
    flex-wrap: wrap;
    min-width: 0;
  }

  .coupon-input {
    min-width: 0;
  }

  .admin-toast {
    max-width: calc(100vw - 2rem);
    width: auto;
    font-size: 0.825rem;
    padding: 0.65rem 1rem;
    bottom: 1rem;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}


/* ==========================================================================
   READY-MADE DOCUMENTS (appended — nothing above this line was changed)
   Step 1 ke andar TechRepo ke apne documents (UP Scholarship B-Form, Front &
   Index page...) jo user ek click mein order mein add kar sakta hai.
   List/links: TEMPLATE_DOCS in scripts/print.js
   ========================================================================== */
.template-docs-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border-subtle);
}

.template-docs-head {
  margin-bottom: 0.85rem;
}

.template-docs-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.template-docs-title i,
.template-docs-title svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--primary-accessible); /* BUG-FIX: was --primary-500 which may fail WCAG AA at small size */
}

.template-docs-sub {
  font-size: 0.785rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.template-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.template-doc-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.9rem;
  min-width: 0;
  transition: all var(--transition-fast);
}

.template-doc-card:hover {
  border-color: var(--border-medium);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-sm);
}

.template-doc-top {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.template-doc-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-accessible);
}

.template-doc-icon i,
.template-doc-icon svg {
  width: 22px;
  height: 22px;
}

.template-doc-info {
  flex: 1;
  min-width: 0;
}

.template-doc-title {
  font-size: 0.925rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.template-doc-desc {
  font-size: 0.785rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.template-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 40px;
  padding: 0.55rem 1.15rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--gradient-button);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 4px 16px var(--primary-glow);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.template-add-btn i,
.template-add-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.template-add-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(99, 102, 241, 0.45);
}

.template-add-btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.template-add-btn:disabled {
  cursor: default;
}

.template-add-btn.is-loading {
  opacity: 0.8;
}

.template-add-btn.is-loading svg {
  animation: tpl-spin 1s linear infinite;
}

/* "Added" state: site ka --emerald-accessible token (dark/light dono mein sahi contrast) */
.template-add-btn.is-added {
  background: rgba(16, 185, 129, 0.12);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.4);
  color: var(--emerald-accessible);
}

@keyframes tpl-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .template-docs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Accessibility / checkout lock (added in the print-hub audit) ---------------------
   The option cards are role="radio" + tabindex="0", so keyboard users need a visible focus ring. */
.selection-card:focus-visible {
  outline: 3px solid var(--primary-accessible);
  outline-offset: 3px;
}

/* The four Step cards are set `inert` by print.js while an upload / payment is running, so the
   cart can't change between "price shown" and "order sent". This just makes that visible. */
.print-card[inert] {
  opacity: 0.7;
  pointer-events: none;
}

/* ==========================================================================
   Razorpay payment window: no white screen, site blurred behind it
   --------------------------------------------------------------------------
   Razorpay's checkout is an <iframe> with a light-only page inside, meant to be TRANSPARENT so its
   dim backdrop shows the site. This page declares `color-scheme: dark` for the dark theme (top of this
   file); when an iframe's colour scheme differs from the page's, the browser paints it with an OPAQUE
   canvas instead - i.e. a completely white screen. Pinning the container/iframe to `light` makes the
   two match again, so the iframe stays transparent. Only Razorpay's own elements are touched.
   ========================================================================== */
.razorpay-container,
.razorpay-container iframe,
iframe.razorpay-checkout-frame,
iframe[src*="razorpay"] {
  color-scheme: light;
}

/* Blur + dim layer that print.js shows while the payment window is open. It sits BELOW Razorpay's own
   container (z-index 1000000) and below the site's modals/toasts, but above the rest of the page. */
#pay-blur-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(8, 10, 16, 0.40);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

#pay-blur-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

[data-theme="light"] #pay-blur-overlay {
  background: rgba(15, 23, 42, 0.30);
}

/* Browsers without backdrop-filter can't blur, so dim a little more instead of showing a plain page. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #pay-blur-overlay {
    background: rgba(8, 10, 16, 0.62);
  }
  [data-theme="light"] #pay-blur-overlay {
    background: rgba(15, 23, 42, 0.52);
  }
}

/* BUG-21 FIX: @keyframes spin was missing — upload button and payment loader
   icon both set animation: spin 1s/1.5s linear infinite but the keyframe was
   never defined, so the spinner icon was frozen / not animating at all. */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@media print {
  #pay-blur-overlay {
    display: none !important;
  }
}

/* ==========================================================================
   Mobile menu button: ☰ turns into ✕ while the menu is open
   --------------------------------------------------------------------------
   print.html puts both icons inside the button; the inline script adds .is-open to the button
   whenever #nav-menu has .mobile-open (so it stays right even when other code closes the menu).
   Only the two icons are styled here — the button's own display / size / colours stay in
   main.css, so it still appears only at the widths where the hamburger menu is used.
   ========================================================================== */
.mobile-menu-toggle {
  position: relative;
}

.mobile-menu-toggle .menu-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-fast), transform var(--transition-normal);
}

/* closed: ☰ visible, ✕ hidden (turned and shrunk, ready to spin in) */
.mobile-menu-toggle .menu-icon-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

/* open: ✕ visible, ☰ hidden */
.mobile-menu-toggle.is-open .menu-icon-bars {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.mobile-menu-toggle.is-open .menu-icon-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-toggle .menu-icon {
    transition: none;
  }
}

/* ==========================================================================
   Admin Alerts Banner & Filter Toolbar (Issues #2 & #19)
   ========================================================================== */
#admin-alerts-banner {
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.15);
  margin-top: 1.25rem;
}

.admin-alert-item {
  background: var(--bg-card, rgba(30, 41, 59, 0.7));
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm, 6px);
  padding: 0.6rem 0.85rem;
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-alert-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.admin-toolbar input:focus,
.admin-toolbar select:focus {
  border-color: var(--primary-500, #6366f1); /* BUG-FIX: --primary is undefined; --primary-500 is the correct token */
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
  outline: none;
}

/* ==========================================================================
   UI/UX Polish & Bug Fixes Pass
   ========================================================================== */

/* FIX: Hero Perks Strip — 4 quick-stat tiles below the hero subtitle */
.hero-perks-strip {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  margin: 0 auto 0.25rem;
  max-width: 700px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.hero-perk-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  flex: 1 1 140px;
  border-right: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}

.hero-perk-item:last-child {
  border-right: none;
}

.hero-perk-item:hover {
  background: var(--bg-card-hover);
}

.hero-perk-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-accessible);
}

.hero-perk-icon i,
.hero-perk-icon svg {
  width: 18px;
  height: 18px;
}

.hero-perk-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}

.hero-perk-val span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 1px;
}

.hero-perk-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  line-height: 1.3;
}

@media (max-width: 600px) {
  .hero-perks-strip {
    border-radius: var(--radius-lg);
    gap: 0;
  }
  .hero-perk-item {
    padding: 0.65rem 0.9rem;
    flex: 1 1 120px;
    border-right: 1px solid var(--border-subtle);
    border-bottom: none;
  }
  .hero-perk-item:nth-child(2n) {
    border-right: none;
  }
  .hero-perk-item:nth-child(n+3) {
    border-top: 1px solid var(--border-subtle);
  }
  .hero-perk-val {
    font-size: 1rem;
  }
}

/* FIX: the Step 1-4 cards sit inside .print-configurator-column (a plain block, no gap), so the grid gap
   does NOT separate them - they need their own margin. (The old value `1.5` had no unit and was ignored.) */
.print-workspace-grid .print-card {
  margin-bottom: 1.5rem;
}

/* FIX: scroll-margin-top so when JS scrolls to a step card it isn't hidden under navbar */
.print-card {
  scroll-margin-top: 96px;
}

/* FIX: selection-card hover shadow use theme token */
.selection-card:hover {
  box-shadow: var(--shadow-md);
}

/* FIX: selection-card.selected shadow use theme token for glow part */
.selection-card.selected {
  box-shadow: 0 0 0 1px var(--primary-500), var(--shadow-glow);
}

/* The badge pill overhangs the card's top edge (top: -10px) and ends well above the title row,
   so cards with a badge must NOT get extra top padding - it pushed their titles lower than the
   titles of the other cards in the same row. */

/* FIX: Ensure grids with selection cards that have overhanging badges have top space */
.options-group .options-grid-2,
.options-group .options-grid-3 {
  padding-top: 0.5rem;
}

/* FIX: service-control loading state */
.service-control[data-state="loading"] {
  border-color: var(--border-subtle);
  background: var(--bg-secondary);
  opacity: 0.85;
}

.service-control[data-state="loading"] .service-dot {
  background: var(--text-muted);
  animation: pulse-dot 1.2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* FIX: Admin table row hover highlight */
.admin-orders-table tbody tr:hover {
  background: var(--bg-card-hover);
  transition: background var(--transition-fast);
}

/* FIX: Admin table first cell padding to avoid content touching edge */
.admin-orders-table th:first-child,
.admin-orders-table td:first-child {
  padding-left: 1.25rem;
}

/* FIX: Admin table cell line-height */
.admin-orders-table td {
  line-height: 1.45;
  vertical-align: top;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* FIX: Admin table smaller th font size on narrow screens */
@media (max-width: 900px) {
  .admin-orders-table {
    font-size: 0.8rem;
  }
  .admin-orders-table th {
    font-size: 0.75rem;
    padding: 0.65rem 0.75rem;
  }
}

/* FIX: status-badge white-space nowrap to prevent wrapping */
.status-badge {
  white-space: nowrap;
}

/* FIX: Total row gets a separator from other rows */
.summary-row.total-row {
  margin-top: 0.35rem;
  border-top: 1px dashed var(--border-medium);
  padding-top: 0.85rem;
}

/* FIX: Textarea min-height for admin cancel modal */
textarea.custom-text-input {
  min-height: 80px;
  resize: vertical;
  line-height: 1.55;
}

/* FIX: modal-card gets default max-height + scroll so it never overflows viewport */
.modal-card {
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
}

/* Prevent double scroll on modals that already set overflow-y: auto inline */
.modal-card[style*="overflow-y"] {
  max-height: revert;
}

/* FIX: Coupon button hover uses accessible gradient to ensure contrast on light mode */
.coupon-btn:hover {
  background: var(--gradient-button);
  border-color: transparent;
  color: #ffffff;
}

/* FIX: doc-format-tip uses proper CSS variables */
.doc-format-tip {
  background: var(--bg-secondary) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-muted) !important;
}

/* FIX: options-group-title vertical spacing at bottom */
.options-group:last-child {
  margin-bottom: 0;
}

/* FIX: Improve summary card total amount readability */
#sum-total-amount {
  font-size: 1.45rem;
  font-weight: 900;
  background: var(--gradient-text);
  color: var(--primary-accessible); /* BUG-FIX: fallback when gradient text-clip fails */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* BUG-FIX: gradient text uses -webkit-text-fill-color: transparent which makes the text
   invisible if background-clip fails (old Safari, some Firefox versions, print mode).
   Add a color fallback that shows in those cases. */
#sum-total-amount {
  color: var(--primary-accessible); /* fallback when gradient-clip is unsupported */
}

/* FIX: page count badge in summary title */
#sum-pages {
  font-size: 0.78rem;
  white-space: nowrap;
}

/* FIX: Dropzone tip icon sizing */
.doc-format-tip i,
.doc-format-tip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* FIX: payment box icon size */
.upi-qr-display-box .lucide {
  width: 28px;
  height: 28px;
}

/* FIX: My orders list items spacing */
#my-orders-list > * + * {
  margin-top: 0.75rem;
}

/* FIX: Admin toolbar responsive wrap behavior */
@media (max-width: 560px) {
  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-toolbar > div:first-child {
    flex-direction: column;
  }
  #admin-search-input {
    width: 100%;
  }
  #admin-status-filter {
    min-width: 0;
    width: 100%;
  }
}

/* FIX: Print workspace summary column — remove position:sticky on very small screens where it causes visual glitches */
@media (max-width: 480px) {
  .sticky-summary-card {
    position: relative;
    top: 0;
  }
}

/* FIX: WhatsApp button in tracker — better tap target on mobile */
#track-wa-btn {
  min-height: 42px;
  white-space: nowrap;
}

/* FIX: modal-card animation respects reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .modal-card {
    animation: none;
  }
  .hero-perk-item {
    transition: none;
  }
  .template-add-btn {
    transition: none;
  }
}

/* FIX: Delivery speed selection cards have appropriate min-height */
#delivery-speed-section .selection-card {
  min-height: 90px;
}

/* FIX: admin cancel modal textarea label color */
#admin-cancel-reason-input {
  color: var(--text-primary);
  background: var(--bg-input);
}

/* FIX: Price change modal amount highlight */
#price-change-new-amount {
  font-weight: 900;
}

/* FIX: Copy-ID monospace in admin alerts */
#admin-alerts-list code {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.75rem;
}


/* ==========================================================================
   Browser-verified fixes (layout at 320-390px, icon shrink, light-theme contrast)
   ========================================================================== */

/* Icons were squeezed (down to ~12px) when a title row ran out of room - SVG icons were allowed to shrink. */
.print-card svg,
.sticky-summary-card svg,
.modal-card svg {
  flex-shrink: 0;
}

.print-card-header > div:first-child {
  flex: 1 1 min(260px, 100%);
  min-width: 0;
}



.summary-row > span:first-child {
  flex-shrink: 0;
}

.summary-row > strong {
  text-align: right;
}

/* Back button: icon-only on small phones so the navbar (logo + theme + admin + Back + menu) still fits
   for staff accounts. Inline padding on the button needs !important to be overridden. */
@media (max-width: 380px) {
  #back-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0 !important;
  }

  #back-btn span {
    display: none;
  }
}

/* Light theme: these colours (bright blue / purple / slate) were too faint on the pale badge backgrounds. */
[data-theme="light"] .track-status-banner.status-out_for_delivery {
  color: #7E22CE;
}

[data-theme="light"] .status-badge.status-received {
  color: #1D4ED8;
}

[data-theme="light"] .status-badge.status-binding {
  color: #7E22CE;
}

[data-theme="light"] .status-badge.status-out_for_delivery {
  color: #7E22CE; /* POLISH-2: #06B6D4 cyan is 2.8:1 on light bg - use deep purple */
}

[data-theme="light"] .status-badge.status-pending {
  color: #475569;
}

/* BUG-FIX: --purple-accessible token for light theme (raw #A855F7 is only 3.1:1 on white badge bg) */
[data-theme="light"] {
  --purple-accessible: #7E22CE; /* deep purple: 7.4:1 on light badge backgrounds */
}


/* ==========================================================================
   Print Hub UI audit fixes (appended). Small in-place edits elsewhere in this
   file are limited to: toast z-index, modal vh fallback, button gradient/hover
   contrast, appearance:textfield.
   ========================================================================== */

/* 1. iOS Safari zooms the page when a field with font-size < 16px gets focus.
      .custom-text-input (0.925rem) / .coupon-input (0.85rem) / the admin inline sizes beat
      main.css's `input { font-size: 16px }` rule, so phones zoomed in on every tap. */
@media (max-width: 767px) {
  .custom-text-input,
  .coupon-input,
  .admin-toolbar input,
  .admin-toolbar select,
  .admin-orders-table select {
    font-size: 16px !important;
  }
}

/* 2. Admin toolbar: search box and status filter now share one height
      (text used to be clipped in the 38px box, and the select was 45px). */
.admin-toolbar .custom-text-input {
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}

/* 3. Copies field: keyboard focus ring inside the overflow:hidden stepper
      (inset, so it is not clipped - same approach as .stepper-btn:focus-visible). */
.stepper-val:focus {
  outline: none;
}

.stepper-val:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* 4. Placeholder text: browsers use different greys (too faint on the light theme). */
.custom-text-input::placeholder,
.coupon-input::placeholder {
  color: var(--text-muted);
  opacity: 0.9;
}

/* 5. "Payment hua lekin confirm nahi hua?" button is created by print.js with .btn-primary
      (white-space: nowrap + overflow: hidden), so on phones its long label was cut off. */
#verify-payment-btn {
  white-space: normal;
  height: auto;
  line-height: 1.35;
  padding: 0.65rem 1rem;
  text-align: center;
}

.summary-row { gap: 0.75rem }

/* ==========================================================================
   Modal centering (appended)
   ========================================================================== */

/* A modal taller than the screen had its top cut off (align-items:center) and unreachable by scrolling.
   flex-start + auto margins = still centred when it fits, scrollable from the top when it doesn't. */
.modal-backdrop {
  align-items: flex-start;
}

.modal-card {
  margin: auto;
}

/* ==========================================================================
   Final UI/UX Polish Fixes (print-hub audit, appended)
   ========================================================================== */

/* 1. Light theme: .service-toggle-btn.is-resume — dark green bg (#047857) with
      white text has sufficient contrast (7.3:1). But hover (#065F46) is even darker,
      which is fine. No change needed. */

/* 2. Light theme: .btn-admin-accept:hover hardcoded #047857 — correct (7.3:1 on white).
      Ensure border-color also updates on hover (was missing): */
.btn-admin-reject:hover {
  border-color: #DC2626;
}

/* 3. .file-thumbnail-box — max-width:100% global rule on img/svg could stretch
      the thumbnail. Constrain it explicitly. */
.file-thumbnail-box img,
.file-thumbnail-box canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: unset; /* override global img{max-width:100%; height:auto} */
}

/* 4. Delivery speed cards at 641–768px: with options-grid-3 dropping to 2-col,
      the third card (Morning) would be full-width alone. Keep it centred. */
@media (max-width: 768px) {
  #delivery-speed-section .options-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 5. .options-group padding-top — already applied in mid-audit section.
      Extra: ensure .popular-badge-pill does not overflow its grid cell on 2-col layout. */
.popular-badge-pill {
  max-width: calc(100% - 28px); /* 14px right offset each side */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 6. Light mode: coupon status message — if colour is set via JS inline style,
      it already uses CSS tokens. But the container div default color was missing.
      Ensure it inherits body color (not transparent) before JS sets it. */
#coupon-status-msg {
  color: var(--text-muted);
}

/* 7. Focus ring on stepper-btn — the button is inside overflow:hidden container.
      Use outline-offset: -2px so ring is visible without overflow. Already done
      in main section. Verify it persists: no duplicate needed. */

/* 8. .admin-orders-table — sticky header row on scroll (improves usability) */
.admin-orders-table thead tr {
  position: sticky;
  top: 0;
  z-index: 1;
}
.admin-orders-table thead th {
  background: var(--bg-secondary);
}

/* 9. Track modal icon — .order-success-icon uses border: 2px solid currentColor.
      On light theme color: var(--emerald-accessible) = #065F46 which is correct.
      But the circle is 72px, and a 2px border may look too thin. Increase to 2.5px. */
.order-success-icon {
  border-width: 2.5px;
}

/* 10. .rider-avatar gradient background — uses --gradient-primary which has cyan end
       (#06B6D4). The white icon on the lighter cyan part may fail contrast at 4.5:1.
       Override to use --gradient-button (darker, 5.4:1 guaranteed). */
.rider-avatar {
  background: var(--gradient-button);
}

/* 11. Smooth scroll on the page itself is set globally in main.css, but modals
       that overflow need their own smooth scroll for better UX. */
.modal-card {
  scroll-behavior: smooth;
}

/* 12. Print media — ensure the #pay-blur-overlay is hidden in the existing print block */
/* ==========================================================================
   STEP-BY-STEP ORDER WIZARD   (1 Upload -> 2 Options -> 3 Delivery -> 4 Review & Pay)
   --------------------------------------------------------------------------
   print.js adds `.wizard-active` to `.print-workspace-grid` and `.wizard-hidden` to every
   card that is not the current step. Everything below is scoped to that, so if print.js ever
   fails to start the wizard the page simply falls back to the old all-cards-in-one-page layout.
   ========================================================================== */

/* Hidden until the wizard is switched on */
.wizard-stepper,
.wizard-nav,
.wizard-review {
  display: none;
}

.print-workspace-grid.wizard-active .wizard-stepper { display: block; }
.print-workspace-grid.wizard-active .wizard-nav     { display: flex; }
.print-workspace-grid.wizard-active .wizard-review  { display: block; }

/* Only the current step is on screen */
.print-workspace-grid.wizard-active .wizard-hidden,
.wizard-nav .wizard-off {
  display: none !important;
}

/* The summary is no longer a side column that follows the scroll; on the last step it just sits
   under the review, so it must not stick over the Back button below it. */
.print-workspace-grid.wizard-active .sticky-summary-card {
  position: relative;
  top: 0;
}
.print-workspace-grid.wizard-active .print-summary-column {
  margin-bottom: 1.25rem;
}

/* ---- Progress stepper ---------------------------------------------------- */
.wizard-stepper {
  margin: 0 0 1.75rem;
  scroll-margin-top: 96px;
}

.wizard-stepper-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wizard-step-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

/* connector line from the previous dot to this one */
.wizard-step-item + .wizard-step-item::before {
  content: '';
  position: absolute;
  top: 17px;
  left: -50%;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--border-medium);
  transition: background var(--transition-normal);
}

.wizard-step-item.is-done::before,
.wizard-step-item.is-active::before {
  background: var(--primary-500);
}

.wizard-step-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--text-muted);
  cursor: default;
}

.wizard-step-btn:not(:disabled):not([aria-current="step"]) {
  cursor: pointer;
}

.wizard-step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-secondary);
  border: 2px solid var(--border-medium);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 800;
  transition: background var(--transition-normal), border-color var(--transition-normal),
              box-shadow var(--transition-normal), transform var(--transition-fast);
}

.wizard-step-dot i,
.wizard-step-dot svg {
  display: none;
  width: 18px;
  height: 18px;
  stroke-width: 3;
}

.wizard-step-item.is-active .wizard-step-dot {
  background: var(--gradient-button);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 0 0 4px var(--primary-glow);
}

.wizard-step-item.is-done .wizard-step-dot {
  background: var(--emerald-500);
  border-color: transparent;
  color: #ffffff;
}

.wizard-step-item.is-done .wizard-step-num { display: none; }
.wizard-step-item.is-done .wizard-step-dot i,
.wizard-step-item.is-done .wizard-step-dot svg { display: block; }

.wizard-step-btn:not(:disabled):not([aria-current="step"]):hover .wizard-step-dot {
  transform: scale(1.08);
}

.wizard-step-btn:focus-visible { outline: none; }
.wizard-step-btn:focus-visible .wizard-step-dot {
  outline: 3px solid var(--primary-accessible);
  outline-offset: 3px;
}

.wizard-step-label {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.wizard-step-item.is-active .wizard-step-label { color: var(--text-primary); }
.wizard-step-item.is-done .wizard-step-label   { color: var(--text-secondary); }

/* ---- Back / total / Continue bar ----------------------------------------- */
.wizard-nav {
  position: sticky;
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  z-index: 30;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding: 0.7rem 0.8rem;
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Last step: the same sticky bar, with Back + the real "Confirm & Order" button (print.js moves
   #btn-main-checkout in here, next to Back, on this step only). The total is not repeated here because
   the button text already says "Confirm & Order (₹...)". */
.wizard-nav.is-final {
  justify-content: flex-start;
}

/* "Confirm & Order" inside the bar: same size and look as Continue on steps 1-3 */
.wizard-nav .btn-checkout-primary {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  font-size: 0.95rem;
  line-height: 1.25;
  text-align: center;
}

.wizard-nav .btn-checkout-primary svg,
.wizard-nav .btn-checkout-primary i { width: 18px; height: 18px; flex-shrink: 0; }

.wizard-nav-total {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35rem;
  line-height: 1.2;
}

.wizard-nav-total strong {
  order: -1;
  flex: 0 0 100%;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
}

.wizard-nav-total-label,
.wizard-nav-total small {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.wizard-nav-total small::before { content: '\00b7\00a0'; }

.wizard-btn-back {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
}

.wizard-btn-back svg,
.wizard-btn-back i { width: 16px; height: 16px; }

.wizard-btn-next {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--gradient-button);
  color: #ffffff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
  transition: all var(--transition-normal);
}

.wizard-btn-next svg,
.wizard-btn-next i { width: 18px; height: 18px; }

.wizard-btn-next:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(99, 102, 241, 0.6);
}

.wizard-btn-next:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.5);
}

.wizard-btn-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* The Back / Continue bar sticks to the bottom of the screen. Without this, a field the student taps
   (keyboard open) or tabs to can already be "inside the screen" yet sit UNDER the bar, so the browser
   never scrolls it. scroll-padding makes the browser keep focused fields clear of the bar.
   (print.js adds .wizard-on to <html> only when the wizard is running.) */
html.wizard-on {
  scroll-padding-bottom: 96px;
}

/* The "Read this site in Hindi?" popup (scripts/translate.js) opens at the bottom-left. While the step
   bar is showing, keep it just ABOVE the bar instead of on top of its Back button / total. */
html.wizard-on #tr-popup {
  bottom: calc(max(0.75rem, env(safe-area-inset-bottom, 0px)) + 5.75rem);
}

/* While an upload / payment runs, print.js sets `inert` on these (same idea as .print-card[inert]) */
.wizard-nav[inert],
.wizard-stepper[inert] {
  opacity: 0.6;
  pointer-events: none;
}

/* On the last step the pay button already dims itself (and shows the progress text) while busy, so only
   the Back button is dimmed here - otherwise the button would be dimmed twice and be hard to read. */
.wizard-nav.is-final[inert] { opacity: 1; }
.wizard-nav.is-final[inert] .wizard-btn-back { opacity: 0.6; }

/* ---- Step change animation ------------------------------------------------ */
@keyframes wizardEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.print-workspace-grid.wizard-active .wizard-enter {
  animation: wizardEnter 0.38s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* the card title gets focus (screen readers) after a step change; no ring needed for that */
.print-card-title[tabindex="-1"]:focus { outline: none; }

/* ---- "Review your order" recap on the last step ---------------------------- */
.wizard-review {
  margin: 0 0 1.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  overflow: hidden;
}

.wizard-review-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wizard-review-head svg,
.wizard-review-head i { width: 16px; height: 16px; }

.wizard-review-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
}

.wizard-review-row + .wizard-review-row { border-top: 1px solid var(--border-subtle); }

.wizard-review-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--gradient-card-glow);
  color: var(--primary-accessible);
}

.wizard-review-icon svg,
.wizard-review-icon i { width: 17px; height: 17px; }

.wizard-review-body { flex: 1 1 0; min-width: 0; }

.wizard-review-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.wizard-review-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
}

.wizard-review-text {
  margin-top: 0.15rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.wizard-review-text strong { color: var(--text-primary); font-weight: 700; }

.wizard-review-edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.7rem;
  background: none;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--primary-accessible);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.wizard-review-edit svg,
.wizard-review-edit i { width: 13px; height: 13px; }

.wizard-review-edit:hover { background: var(--primary-glow); }

.wizard-review-edit:focus-visible {
  outline: 2px solid var(--primary-accessible);
  outline-offset: 2px;
}

/* ---- Small screens ---------------------------------------------------------- */
@media (max-width: 480px) {
  .wizard-step-dot { width: 32px; height: 32px; font-size: 0.8rem; }
  .wizard-step-item + .wizard-step-item::before { top: 15px; }
  .wizard-step-label { font-size: 0.7rem; }

  .wizard-nav { gap: 0.5rem; padding: 0.6rem; }
  .wizard-btn-back { padding: 0.6rem 0.8rem; }
  .wizard-btn-next { padding: 0.65rem 1rem; font-size: 0.88rem; }
  .wizard-nav .btn-checkout-primary { padding: 0.65rem 1rem; font-size: 0.88rem; }
  .wizard-nav-total strong { font-size: 1.05rem; }

}

@media (max-width: 380px) {
  .wizard-nav-total small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .print-workspace-grid.wizard-active .wizard-enter { animation: none; }
  .wizard-step-dot,
  .wizard-step-item + .wizard-step-item::before,
  .wizard-btn-next { transition: none; }
}

@media print {
  .wizard-stepper,
  .wizard-nav { display: none !important; }
}