/* ============================================
   STANDARDIZED MODAL SYSTEM
   Based on Cleanup Warning Modal Design
   ============================================ */

/* Modal Overlay - Standardized z-index and glassmorphism */
.modal-overlay-standard {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

@media (min-width: 640px) {
  .modal-overlay-standard {
    padding: 1.5rem;
  }
}

/* Note: Notification system moved to enhanced-undo-system.css */
/* Using heartbeat-success-notification, undo-success-notification classes */

/* Animation for notifications */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}

/* --- Updated glassmorphism for reveal date input in step 4 --- */
#revealDate.input-glass {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  color: white !important;
  transition: all 0.3s ease !important;
  font-size: 0.95rem !important;
  max-width: 600px !important;
  box-shadow: none !important;
}
#revealDate.input-glass:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15) !important;
}

/* Fix date input calendar icon visibility on mobile */
input[type="date"] {
  /* Use none appearance but add custom calendar icon */
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 12px) center !important;
  background-size: 18px 18px !important;
  padding-right: 40px !important;
}

/* Style the native calendar picker indicator */
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  margin: 0;
  color: transparent;
  z-index: 2;
}

/* Mobile-specific improvements for better visibility and positioning */
@media (max-width: 768px) {
  input[type="date"] {
    background-position: calc(100% - 12px) center !important;
    background-size: 20px 20px !important;
    padding-right: 40px !important;
    min-height: 48px !important; /* Ensure touch target size */
  }
  
  input[type="date"]::-webkit-calendar-picker-indicator {
    right: 10px;
    width: 20px;
    height: 20px;
    z-index: 3;
  }
  
  /* Ensure date input shows placeholder-like text when empty */
  input[type="date"]:invalid {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  
  input[type="date"]:invalid:before {
    content: attr(placeholder) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-right: 0.5em;
  }
  
  /* CRITICAL FIX: Ensure all modals are properly centered and visible on mobile */
  #validation-modal,
  #success-modal,
  #edit-success-modal,
  #loading-overlay,
  .modal-overlay-standard {
    z-index: 99999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* CRITICAL FIX: Modal content should be vertically centered with padding */
  #validation-modal > div,
  #success-modal > div,
  #edit-success-modal > div {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1rem !important;
  }
  
  /* CRITICAL FIX: Modal glass cards should have max height and scroll */
  #validation-modal .glass-card,
  #validation-modal .backdrop-blur-md,
  #success-modal .glass-card,
  #edit-success-modal .glass-card {
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: auto !important;
  }
  
  /* Currency modal gets special mobile treatment - simpler structure */
  #currency-modal {
    display: none !important;
  }
  
  #currency-modal:not(.hidden) {
    display: flex !important;
  }
  
  #currency-modal .glass-card {
    max-width: calc(100vw - 2rem) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Purchase Form Specific Styles - Matching Admin Page */

/* Platform checkbox base styles - hover effects removed */
#ebook-dimensions label[class*="hover:"],
#cover-dimensions-section label[class*="hover:"] {
  opacity: 1 !important;
  z-index: 10 !important;
  position: relative !important;
}

/* Multi-step form styling */
.form-step {
  transition: opacity 0.3s ease-in-out;
}

/* Heartbeat/Cleanup Modal Icon Size Increase */
#heartbeat-timeout-modal .w-8.h-8,
#heartbeat-cleanup-success-modal .w-8.h-8 {
  width: 3rem !important;
  height: 3rem !important;
}
#heartbeat-timeout-modal svg.w-5.h-5,
#heartbeat-cleanup-success-modal svg.w-5.h-5 {
  width: 2.25rem !important;
  height: 2.25rem !important;
}
#heartbeat-timeout-modal svg.w-3.h-3,
#heartbeat-cleanup-success-modal svg.w-3.h-3 {
  width: 1.1rem !important;
  height: 1.1rem !important;
}

/* Existing Files Modal Icon Size Increase */
#existing-files-modal .w-6.h-6,
#existing-files-modal .w-5.h-5 {
  width: 2rem !important;
  height: 2rem !important;
}

.form-step.hidden {
  display: none;
}

/* Step indicators - comprehensive white color styling */
.step-indicator {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: white !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Enhanced step indicators - comprehensive white color styling for all states */
.step-indicator,
#step-1-indicator,
#step-2-indicator,
#step-3-indicator {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Step labels transition */
.step-indicator + span {
  transition: all 0.3s ease !important;
}

/* JavaScript-generated step indicator classes */
.w-8.h-8.rounded-full.bg-white\/20.text-white,
.w-8.h-8.rounded-full.bg-white\/15.text-white,
.w-8.h-8.rounded-full.bg-white\/10.text-white\/60 {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Step indicator states - comprehensive overrides */
.step-indicator.completed {
  background: rgba(34, 197, 94, 0.9) !important; /* Green background for completed */
  color: white !important; /* Keep icon/number white, not green */
  border: 1px solid rgba(34, 197, 94, 1) !important; /* Green border */
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5) !important; /* Green glow */
}

.step-indicator.completed svg {
  color: white !important; /* Keep checkmark white, not green */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.step-indicator.active,
.bg-white\/15.text-white {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  position: relative;
  z-index: 1;
}

.step-indicator.future,
.bg-white\/10.text-white\/60 {
  background: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Add subtle styling to the connecting lines */
.shadow-glow {
  background: rgba(255, 255, 255, 0.8) !important;
  height: 1px !important;
}

/* Connecting lines between steps - ensure white */
.w-12.h-\[1px\].bg-white\/70.shadow-glow {
  background: rgba(255, 255, 255, 0.8) !important;
}

/* Service selection cards - admin page styling */
.service-option {
  transition: all 0.3s ease;
}

/* Toggle Button Styles for Service Selection */
.toggle-button-container {
  transition: all 0.3s ease;
}

.toggle-button-container:not(.disabled):hover .toggle-button {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}

.toggle-button-container.active .toggle-button {
  border-color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.toggle-button-container.disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.toggle-button-container.disabled .toggle-button {
  opacity: 0.6;
  background: rgba(0, 0, 0, 0.2);
}

/* Toggle Indicator Styles */
.toggle-indicator {
  width: 24px;
  height: 14px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 2px;
  flex-shrink: 0;
}

/* Heartbeat Timeout Modal UI Improvements */
#heartbeat-timeout-modal .flex.gap-3 {
  margin-top: 2.25rem !important; /* More space above buttons */
}
#heartbeat-timeout-modal button {
  min-width: 120px !important;
  width: 48% !important;
  max-width: 180px !important;
}
#heartbeat-timeout-modal .text-amber-300 strong,
#heartbeat-timeout-modal .text-amber-300 span {
  font-size: 0.85em !important;
}

/* Desktop only: Make note section smaller to fit 2 lines */
@media (min-width: 768px) {
  #heartbeat-timeout-modal .bg-amber-500\/10 {
    padding: 0.375rem 0.5rem !important;
    margin-top: 0.25rem !important;
  }
  #heartbeat-timeout-modal .text-amber-300 {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }
  #heartbeat-timeout-modal .text-amber-300 svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
    margin-top: 0.125rem !important;
  }
}

#heartbeat-cleanup-success-modal .flex.flex-col.gap-1 {
  margin-top: 2.25rem !important; /* More space above button */
}
#heartbeat-cleanup-success-modal button {
  min-width: 160px !important;
  width: 95% !important;
  max-width: 320px !important;
}
#heartbeat-cleanup-success-modal .text-blue-300 strong,
#heartbeat-cleanup-success-modal .text-blue-300 span {
  font-size: 0.85em !important;
}

.toggle-indicator.disabled {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.toggle-circle {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-indicator.disabled .toggle-circle {
  background: rgba(255, 255, 255, 0.5);
}

/* Active toggle state */
.toggle-button-container.active .toggle-indicator {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: rgba(102, 126, 234, 0.6);
}

.toggle-button-container.active .toggle-circle {
  transform: translateX(10px);
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Error state for validation */
.toggle-button-container.border-red-500 .toggle-button {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444;
}

/* Specific styles for Series Continuation toggle */
.series-toggle-container {
  transition: all 0.3s ease;
}

.series-toggle-container:not(.disabled):hover .toggle-button {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}

.series-toggle-container.active .toggle-button {
  border-color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.series-toggle-container.active .toggle-indicator {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: rgba(102, 126, 234, 0.6);
}

.series-toggle-container.active .toggle-circle {
  transform: translateX(10px);
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Specific styles for Major Revisions toggle */
.major-revisions-toggle-container {
  transition: all 0.3s ease;
}

.major-revisions-toggle-container:not(.disabled):hover .toggle-button {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}

.major-revisions-toggle-container.active .toggle-button {
  border-color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.major-revisions-toggle-container.active .toggle-indicator {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: rgba(102, 126, 234, 0.6);
}

.major-revisions-toggle-container.active .toggle-circle {
  transform: translateX(10px);
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Dark overlay for unavailable services */
.toggle-button .absolute.inset-0 {
  z-index: 1;
}

.toggle-button .relative {
  z-index: 2;
}

/* Animation for toggle indicator */
@keyframes toggle-on {
  0% { transform: translateX(0); }
  100% { transform: translateX(10px); }
}

@keyframes toggle-off {
  0% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/* NUCLEAR STICKY PANEL SYSTEM - MAXIMUM OVERRIDE POWER */
.sticky,
div.sticky,
div.sticky.top-8,
*[class*="sticky"],
.lg\:col-span-1 .sticky,
.lg\:col-span-1 > .sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 2rem !important;
  /* Force remove any constraints that break sticky */
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  /* Ensure proper stacking and behavior */
  z-index: 999 !important;
  /* Remove any transforms or contain that break sticky */
  transform: none !important;
  contain: none !important;
  will-change: auto !important;
  isolation: auto !important;
  perspective: none !important;
  transform-style: flat !important;
  /* Force display and width */
  display: block !important;
  width: auto !important;
  /* Remove transitions that can interfere */
  transition: none !important;
}

/* Override Tailwind's top-8 class specifically for sticky panels */
.sticky.top-8 {
  top: 2rem !important;
}

/* Ultra-specific override to beat Tailwind CSS specificity */
div.sticky.top-8,
.sticky[class*="top-8"],
*[class*="sticky"][class*="top-8"] {
  position: sticky !important;
  top: 2rem !important;
  z-index: 5 !important;
}

/* Additional browser-specific sticky fixes */
.sticky {
  /* Ensure sticky works across browsers */
  -webkit-position: sticky !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  /* Prevent transform issues */
  will-change: auto !important;
}

/* CRITICAL: Fix ALL parent containers that could break sticky */
.grid.grid-cols-1.lg\:grid-cols-3,
.lg\:col-span-1,
.lg\:col-span-2,
main,
body,
html {
  overflow: visible !important;
  contain: none !important;
  transform-style: flat !important;
  perspective: none !important;
  isolation: auto !important;
}

/* Fix the main grid container specifically */
.grid.grid-cols-1.lg\:grid-cols-3.gap-8 {
  overflow: visible !important;
  contain: none !important;
}

/* Ensure right column doesn't break sticky */
.lg\:col-span-1 {
  overflow: visible !important;
  contain: none !important;
  position: relative !important;
}

/* CRITICAL FIX: Ensure page containers don't break sticky */
.page-transition-container {
  overflow: visible !important; /* Override any overflow:hidden that breaks sticky */
  overflow-x: clip !important; /* ✅ FIX: Changed from hidden to clip - keeps horizontal scroll prevention */
}

/* Ensure sticky works within page transitions */
body.has-sticky-elements .page-transition-container {
  overflow-y: visible !important;
}

/* ULTRA-AGGRESSIVE PARENT CONTAINER FIXES FOR STICKY */

/* Force ALL parent containers to support sticky positioning */
body, html, main, section, div {
  /* Remove any properties that break sticky positioning */
  contain: none !important;
  transform: none !important;
}

/* Specific grid container fixes */
.grid.grid-cols-1.lg\\:grid-cols-3,
.grid,
*[class*="grid-cols"] {
  /* Ensure grid container doesn't constrain sticky behavior */
  overflow: visible !important;
  /* Align items to start so sticky can work properly */
  align-items: start !important;
  /* Remove any height constraints */
  min-height: 0 !important;
  height: auto !important;
}

/* Force the main container to have proper overflow */
main.max-w-5xl,
main {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  contain: none !important;
  transform: none !important;
}

/* Right column (sticky container) - FORCE proper behavior */
.lg\\:col-span-1,
*[class*="col-span-1"] {
  /* Ensure the sticky container column has proper height */
  min-height: 200vh !important; /* Force massive height for sticky to work */
  overflow: visible !important;
  /* Ensure sticky elements can position properly */
  position: relative !important;
  contain: none !important;
  transform: none !important;
}

/* Left column (form container) - ensure it drives the height */
.lg\\:col-span-2,
*[class*="col-span-2"] {
  overflow: visible !important;
  contain: none !important;
  transform: none !important;
}

/* Purchase section container */
.purchase,
section.purchase {
  overflow: visible !important;
  contain: none !important;
  transform: none !important;
}

/* Mobile responsive fix - sticky becomes static */
@media (max-width: 1023px) {
  .lg\\:col-span-1,
  *[class*="col-span-1"] {
    min-height: auto !important;
  }
  
  /* Force sticky panel to be static on mobile */
  .sticky,
  div.sticky,
  div.sticky.top-8,
  *[class*="sticky"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    z-index: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Fixed positioning fallback styling */
.sticky.is-stuck-fixed {
  position: fixed !important;
  top: 32px !important;
  z-index: 999 !important;
  /* REMOVED: Dark box-shadow effect */
  transition: all 0.2s ease-in-out !important;
}

/* Boundary state styling - when panel stops before FAQ */
.sticky.is-at-boundary {
  position: absolute !important;
  z-index: 5 !important;
  /* REMOVED: Dark box-shadow effect */
  transition: all 0.2s ease-in-out !important;
}

/* CSS sticky boundary state */
.sticky.at-css-boundary {
  position: absolute !important;
  z-index: 5 !important;
  /* REMOVED: Dark box-shadow effect */
  transition: all 0.2s ease-in-out !important;
}

/* NO INTERNAL SCROLLBARS - Panel follows page scroll naturally */
.sticky,
.sticky.smart-positioned,
.sticky.is-stuck-fixed,
.sticky.at-css-boundary {
  /* Force remove any scrollbars */
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  /* Smooth positioning transitions */
  transition: top 0.3s ease-out, position 0.2s ease-in-out !important;
}



/* Hide any scrollbars that might appear */
.sticky::-webkit-scrollbar,
.sticky *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

.sticky,
.sticky * {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* Internet Explorer and Edge */
}

/* Ensure fixed fallback works on all devices */
@media (max-width: 768px) {
  .sticky.is-stuck-fixed {
    top: 16px !important;
  }
}

@media (max-width: 480px) {
  .sticky.is-stuck-fixed {
    top: 8px !important;
  }
}

/* Ensure parent containers don't break sticky positioning */
main {
  /* Remove any transforms or containment that could break sticky */
  transform: none !important;
  contain: none !important;
}

/* Ensure grid container doesn't break sticky */
.grid {
  /* Remove any containment that could break sticky positioning */
  contain: none !important;
}

/* Enhanced FAQ section with proper spacing to prevent overlap */
.faq-section {
  /* Creates a stronger stacking context that stops sticky elements */
  position: relative;
  z-index: 10;
  /* Increased padding for better separation */
  padding-top: 4rem;
  margin-top: 4rem;
  /* Ensure FAQ section is always above sticky elements */
  /* REMOVED: Dark background and backdrop filter effects */
}

/* Purchase section container improvements */
.purchase {
  position: relative;
  /* REMOVED: contain: layout style - this breaks sticky positioning! */
  /* Sticky elements need to reference the viewport, not be contained */
}

/* Sticky boundary state styling - for visual feedback only */
.sticky.approaching-boundary {
  /* Smooth transition when approaching boundaries */
  transition: all 0.3s ease-in-out;
  /* REMOVED: White glow visual indicator */
}

/* Enhanced responsive sticky behavior for tablets */
@media (max-width: 1024px) and (min-width: 769px) {
  .sticky {
    position: sticky !important;
    top: 1.5rem !important;
    /* Remove max-height to allow natural page scroll following */
  }
  
  .sticky.top-8 {
    top: 1.5rem !important;
  }
  
  .faq-section {
    padding-top: 3rem;
    margin-top: 3rem;
  }
}

/* Standard mobile devices */
@media (max-width: 768px) {
  .sticky {
    position: sticky !important;
    top: 1rem !important;
    z-index: 5 !important;
    margin-bottom: 2rem;
  }
  
  .sticky.top-8 {
    top: 1rem !important;
  }
}

/* Ultra-small mobile devices */
@media (max-width: 480px) {
  .sticky {
    position: sticky !important;
    top: 0.5rem !important;
    /* Remove max-height to allow natural page scroll following */
    margin-bottom: 1rem;
  }
  
  .sticky.top-8 {
    top: 0.5rem !important;
  }
  
  .faq-section {
    padding-top: 1.5rem;
    margin-top: 2rem;
  }
}

/* Glass container text colors */
.glass-card,
.glass-container {
  color: rgba(255, 255, 255, 0.9) !important;
}

.glass-card h3,
.glass-container h3 {
  color: white !important;
  font-weight: 600 !important;
}

.glass-card .text-sm,
.glass-container .text-sm,
.glass-card .helper-text,
.glass-container .helper-text {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Order summary text colors */
#product-summary,
.glass-card[id*="summary"] {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Price text colors */
#product-old-price,
.text-red-500.line-through,
.text-red-600.line-through {
  color: #dc2626 !important; /* text-red-600 */
}

/* Sale price specific override for backdrop-blur containers */
.backdrop-blur-md .text-red-600.line-through,
[class*="backdrop-blur-md"] .text-red-600.line-through,
.backdrop-blur-md.bg-white\/5 .text-red-600.line-through {
  color: #dc2626 !important; /* Ensure red color overrides backdrop-blur text rules */
}

/* Order total section text colors */
.backdrop-blur-md.bg-white\/5 .text-white\/90,
.backdrop-blur-md.bg-white\/5 .text-white\/80,
.backdrop-blur-md.bg-white\/5 .text-white {
  color: rgba(255, 255, 255, 0.9) !important;
}

.backdrop-blur-md.bg-white\/5 .text-xs {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Secure order section text colors */
[class*="backdrop-blur-md"] .text-white {
  color: white !important;
}

[class*="backdrop-blur-md"] .text-xs.text-white\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Validation message styling */
.validation-message {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  color: #EF4444;
}

/* Publishing rights section - admin page styling */
input[name="publishingRights"]:checked + div {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3) !important;
}

input[name="publishingRights"]:hover + div {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.05);
}

/* Checkbox and radio styling - admin page theme */
.form-checkbox, .form-radio {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Radio button styling */
.form-radio {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-radio:checked {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  position: relative;
}

.form-radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
}

.form-radio:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* Enhanced checkbox styling */
.form-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-checkbox:checked {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  position: relative;
}

.form-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.form-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* Form validation styles */
.border-red-500 {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444;
}

/* Enhanced validation border styles - override glassmorphism protection */
input.border-red-500,
textarea.border-red-500,
input.input-glass.border-red-500,
textarea.input-glass.border-red-500,
.input-glass.border-red-500 {
  border: 2px solid #EF4444 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444, 0 2px 12px rgba(239, 68, 68, 0.15) !important;
}

/* Validation border on focus state */
input.border-red-500:focus,
textarea.border-red-500:focus,
input.input-glass.border-red-500:focus,
textarea.input-glass.border-red-500:focus,
.input-glass.border-red-500:focus {
  border: 2px solid #EF4444 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444, 0 0 0 3px rgba(239, 68, 68, 0.1), 0 2px 12px rgba(239, 68, 68, 0.15) !important;
}

/* Validation border on active state */
input.border-red-500:active,
textarea.border-red-500:active,
input.input-glass.border-red-500:active,
textarea.input-glass.border-red-500:active,
.input-glass.border-red-500:active {
  border: 2px solid #EF4444 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444, 0 2px 12px rgba(239, 68, 68, 0.15) !important;
}

/* Validation border for autofill states */
input.border-red-500:-webkit-autofill,
input.border-red-500:-webkit-autofill:hover,
input.border-red-500:-webkit-autofill:focus,
input.border-red-500:-webkit-autofill:active,
textarea.border-red-500:-webkit-autofill,
textarea.border-red-500:-webkit-autofill:hover,
textarea.border-red-500:-webkit-autofill:focus,
textarea.border-red-500:-webkit-autofill:active,
input.input-glass.border-red-500:-webkit-autofill,
input.input-glass.border-red-500:-webkit-autofill:hover,
input.input-glass.border-red-500:-webkit-autofill:focus,
input.input-glass.border-red-500:-webkit-autofill:active,
textarea.input-glass.border-red-500:-webkit-autofill,
textarea.input-glass.border-red-500:-webkit-autofill:hover,
textarea.input-glass.border-red-500:-webkit-autofill:focus,
textarea.input-glass.border-red-500:-webkit-autofill:active {
  border: 2px solid #EF4444 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444, 0 0 0 1000px rgba(255, 255, 255, 0.015) inset !important;
}

/* Loading animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Modal animations */
/* Center success modal and loading overlay */
#success-modal, #loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  z-index: 99999;
}

#success-modal .backdrop-blur-md,
#loading-overlay .text-center {
  margin: auto;
  /* Ensure modal content is centered */
}

/* Currency Modal Centering */
#currency-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  z-index: 100001 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Only show when explicitly visible (not hidden) */
#currency-modal:not(.hidden) {
  display: flex !important;
}

#currency-modal .glass-card {
  position: relative !important;
  max-width: 28rem !important;
  width: 100% !important;
  max-height: 90vh !important;
  margin: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  transform: none !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* File Upload Error Modal Styles - Glassmorphism Theme */
#file-upload-error-modal {
  z-index: 9999;
  animation: fadeIn 0.3s ease-out;
}

#file-upload-error-modal .relative {
  animation: slideIn 0.3s ease-out;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#file-upload-error-modal button {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

#file-upload-error-modal button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile responsiveness for modal */
@media (max-width: 768px) {
  #file-upload-error-modal .relative {
    margin: 1rem;
    padding: 1.5rem;
    max-width: calc(100vw - 2rem);
  }
  
  #file-upload-error-modal h3 {
    font-size: 1.125rem;
  }
  
  #file-upload-error-modal p {
    font-size: 0.875rem;
  }
}

/* Ensure modal content is properly styled */
#file-upload-error-modal .bg-red-500\/20 {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

#file-upload-error-modal .text-red-400 {
  color: rgb(248, 113, 113);
}

/* Responsive enhancements */
@media (max-width: 768px) {
  .glass-container {
    margin: 0 1rem;
    padding: 1.5rem;
  }
  
  .sticky {
    /* Mobile sticky: follows page scroll like desktop */
    position: sticky !important;
    top: 1rem !important;
    /* Remove max-height to allow natural content flow */
    /* Add margin for better spacing */
    margin-bottom: 2rem;
  }
  
  /* Override Tailwind classes on mobile */
  .sticky.top-8 {
    top: 1rem !important;
  }
  
  /* Enhanced FAQ section spacing on mobile */
  .faq-section {
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    /* REMOVED: Dark gradient background and backdrop filter */
    border-radius: 1rem 1rem 0 0;
    /* Ensure it's always above sticky content */
    z-index: 15;
    position: relative;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
    justify-content: center;
    /* Make buttons more compact on mobile */
    padding: 0.65rem 1.5rem;
    font-size: 0.875rem;
  }

  /* Mobile navigation adjustments */
/* Mobile navigation styles removed - using main glassmorphism.css for consistency */
  
  /* File upload display improvements for mobile - Less aggressive truncation */
  #file-items .truncate,
  #pdf-file-items .truncate {
    max-width: calc(100vw - 120px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Mobile responsive centering for steps indicator */
@media (max-width: 640px) {
  /* Ensure steps indicator is centered on mobile */
  .flex.flex-col.sm\:flex-row.justify-between {
    align-items: center !important;
  }
  
  /* Center the step indicator container specifically */
  .flex.items-center.space-x-2.text-sm.relative.mx-auto {
    justify-self: center !important;
    margin: 0 auto !important;
  }
  
  /* Ensure back button stays left-aligned */
  .btn-secondary.self-start {
    align-self: flex-start !important;
  }
}

/* Additional mobile centering support */
@media (max-width: 480px) {
  /* For very small screens, ensure proper spacing */
  .flex.flex-col.sm\:flex-row.justify-between.items-center.gap-4 {
    gap: 1rem !important;
  }
  
  /* Ensure step indicator has proper spacing on very small screens */
  .flex.items-center.space-x-2.text-sm.relative.mx-auto.sm\:mx-0 {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Make buttons even more compact on very small screens */
  .btn-primary, .btn-secondary {
    padding: 0.55rem 1.2rem;
    font-size: 0.8rem;
  }
  
  /* Further optimize file name display for small screens - Less aggressive */
  #file-items .truncate,
  #pdf-file-items .truncate {
    max-width: calc(100vw - 140px);
  }
  
  /* Improve button layout for step navigation */
  .flex.justify-between button {
    flex: 1;
    max-width: 45%;
  }
    .flex.justify-end button {
    min-width: 120px;
  }
}

/* Ultra small screens - additional optimizations */
@media (max-width: 360px) {
  /* Further compact buttons for ultra small screens */
  .btn-primary, .btn-secondary {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }
  
  /* Ultra compact file name display - Less aggressive */
  #file-items .truncate,
  #pdf-file-items .truncate {
    max-width: calc(100vw - 120px);
  }
  
  /* Ensure navigation buttons don't overlap */
  .flex.justify-between {
    gap: 0.5rem;
  }
  
  .flex.justify-between button {
    flex: 1;
    max-width: 42%;
  }
}

/* Header glass effect removed - using main glassmorphism.css for consistency */

/* File upload container improvements */
#file-items, #pdf-file-items {
  .space-y-2 > * {
    overflow: hidden;
  }
}

/* File item container improvements */
#file-items .bg-white\/5, 
#pdf-file-items .bg-white\/5 {
  overflow: hidden;
}

/* File name text improvements */
#file-items .truncate,
#pdf-file-items .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

/* File details container */
#file-items .flex-1.min-w-0,
#pdf-file-items .flex-1.min-w-0 {
  min-width: 0;
  overflow: hidden;
}

/* Navigation styles removed - using main glassmorphism.css navigation for consistency */

/* Order summary pricing text - admin theme */
#summary-total {
  color: white !important;
  font-weight: 600 !important;
}

/* Order total section label sizing - consolidated for consistency */
#summary-service-label,
#major-revisions-line span:first-child,
#major-revisions-line span:last-child,
#rush-order-line span:first-child {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Mobile responsive font size adjustments for order review/summary */
@media (max-width: 768px) {
  /* CRITICAL FIX: Stack labels and values, allow inline if they fit */
  #order-review .review-item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    align-items: baseline !important;
  }
  
  /* Make sure labels are inline-block and flexible */
  #order-review .review-label {
    display: inline-block !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important; /* Reduced from default */
    flex-shrink: 0 !important;
  }
  
  /* Values stay inline, but wrap to new line if content is too long */
  #order-review .review-value {
    display: inline !important;
    margin-left: 0.5rem !important;
    font-size: 0.8125rem !important; /* Reduced from default */
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  /* When value content is long, it will naturally wrap to next line */
  #order-review .review-item:has(.review-value:only-of-type) {
    flex-wrap: wrap !important;
  }
  
  /* Legacy support for non-classed items */
  #order-review .space-y-2 > div:not(.review-item) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    font-size: 0.8125rem !important;
  }
  
  #order-review .space-y-2 > div:not(.review-item) .text-white\/60,
  #order-review .space-y-2 > div:not(.review-item) .text-white {
    display: inline !important;
    margin-left: 0.5rem !important;
    font-size: 0.8125rem !important;
  }
  
  #order-review .space-y-2 > div:not(.review-item) span.text-white.ml-2 {
    margin-left: 0.5rem !important;
    word-break: break-word !important;
  }
  
  /* Reduce font sizes for order summary elements - more moderate */
  #product-summary,
  #order-summary {
    font-size: 0.875rem !important;
  }
  
  #summary-total,
  .total-price,
  .order-total {
    font-size: 1.125rem !important; /* Keep total visible */
  }
  
  #summary-service-label,
  .service-label {
    font-size: 0.8125rem !important;
  }
  
  #major-revisions-line span:first-child,
  #rush-order-line span:first-child {
    font-size: 0.8125rem !important;
  }
  
  /* Reduce heading sizes in order summary */
  #product-summary h3,
  #product-summary h4,
  #order-summary h3,
  #order-summary h4,
  #order-review h3,
  #order-review h4 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
  }
  
  /* REMOVED: Overly aggressive global font-size rules that affected all elements */
  /* Only target specific review section text */
  #order-review .space-y-2 > div,
  #order-review .space-y-3 > div {
    font-size: 0.8125rem !important;
  }
}

@media (max-width: 480px) {
  /* Further optimize for very small screens */
  #order-review .review-item {
    gap: 0.375rem !important;
  }
  
  #order-review .review-label {
    font-size: 0.75rem !important;
  }
  
  #order-review .review-value {
    font-size: 0.75rem !important;
    padding-left: 0 !important;
  }
  
  /* Reduce font sizes for very small screens */
  #product-summary,
  #order-summary {
    font-size: 0.8125rem !important;
  }
  
  #summary-total,
  .total-price,
  .order-total {
    font-size: 1rem !important;
  }
  
  #product-summary h3,
  #product-summary h4,
  #order-summary h3,
  #order-summary h4,
  #order-review h3,
  #order-review h4 {
    font-size: 0.875rem !important;
  }
}

/* Override display when major-revisions-line has hidden class */
#major-revisions-line.hidden {
  display: none !important;
}

/* Step indicator label text colors - fix for black text issue */
.flex.items-center.space-x-2.text-sm span,
.flex.items-center.relative.z-10 span {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Specific override for step indicator labels with text-white/60 class */
span.ml-2.text-white\/60.hidden.sm\:inline,
span[class*="text-white/60"],
span[class*="text-white\/60"] {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Step indicator labels in all states */
#step-1-indicator + span,
#step-2-indicator + span,
#step-3-indicator + span {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Completed step label - keep original white styling */
.step-indicator.completed + span {
  color: rgba(255, 255, 255, 0.9) !important; /* Keep white like other labels */
}

/* Ensure step indicator content (numbers/checkmarks) never turn green */
.step-indicator.completed {
  color: white !important; /* Force white text/icons inside completed indicators */
}

.step-indicator.completed svg,
.step-indicator.completed span,
.step-indicator.completed::before,
.step-indicator.completed::after {
  color: white !important; /* Force all content white */
}

/* Active step label */
.step-indicator.active + span {
  color: rgba(255, 255, 255, 1) !important;
}

/* Future step labels */
.step-indicator.future + span,
.step-indicator[class*="bg-white/10"] + span {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Ensure step indicator container doesn't inherit unwanted text colors */
.flex.items-center.space-x-2.text-sm {
  color: inherit !important;
}

/* Override any global span color rules that might interfere */
.step-progress-container span,
div[class*="step"] span {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Ensure proper stacking context for paperback selection */
label[class*="relative"] {
  position: relative !important;
  z-index: 1 !important;
}

/* Content container above overlay but below badge */
label[class*="relative"] .flex-1 {
  position: relative !important;
  z-index: 10 !important; /* Above overlays (z-index: 1) but below badge (z-index: 99999) */
}

/* Comprehensive paste protection - prevent white background on paste */
input[type="text"],
input[type="email"], 
input[type="url"],
input[type="date"],
input[type="number"],
input[type="tel"],
input:not([type]),
textarea,
.input-glass {
  background: rgba(255, 255, 255, 0.015) !important;
  color: white !important;
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: none !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Prevent browser autofill white background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.015) inset !important;
  -webkit-text-fill-color: white !important;
  background: rgba(255, 255, 255, 0.015) !important;
  background-color: rgba(255, 255, 255, 0.015) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* SUPER AGGRESSIVE AUTOFILL OVERRIDE - Maximum Specificity */
input.input-glass:-webkit-autofill,
input.input-glass:-webkit-autofill:hover,
input.input-glass:-webkit-autofill:focus,
input.input-glass:-webkit-autofill:active,
textarea.input-glass:-webkit-autofill,
textarea.input-glass:-webkit-autofill:hover, 
textarea.input-glass:-webkit-autofill:focus,
textarea.input-glass:-webkit-autofill:active,
.input-glass:-webkit-autofill,
.input-glass:-webkit-autofill:hover,
.input-glass:-webkit-autofill:focus,
.input-glass:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.015) inset !important;
  -webkit-text-fill-color: white !important;
  background: rgba(255, 255, 255, 0.015) !important;
  background-color: rgba(255, 255, 255, 0.015) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: white !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Force glass styling on all input states */
input:focus,
input:active,
textarea:focus,
textarea:active,
.input-glass:focus,
.input-glass:active {
  background: rgba(255, 255, 255, 0.015) !important;
  color: white !important;
  -webkit-text-fill-color: white !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
}

/* NUCLEAR OVERRIDE for specific autofill colors - USE EXISTING ANIMATION */
input.input-glass[style*="rgb(232, 240, 254)"],
textarea.input-glass[style*="rgb(232, 240, 254)"],
input.input-glass[style*="rgb(250, 255, 189)"],
textarea.input-glass[style*="rgb(250, 255, 189)"],
input.input-glass[style*="rgb(255, 255, 255)"],
textarea.input-glass[style*="rgb(255, 255, 255)"] {
  background: rgba(255, 255, 255, 0.015) !important;
  background-color: rgba(255, 255, 255, 0.015) !important;
  -webkit-text-fill-color: white !important;
  color: white !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  /* Use existing animation from purchase-autofill-fix.css */
  animation: resetAutofillStyle 0.1s ease-in-out !important;
}

/* EXTREME AUTOFILL OVERRIDE using CSS variables and multiple selectors (exclude resizable textareas) */
input.input-glass[style*="background"],
textarea.input-glass[style*="background"]:not(#minorRevisionsDetails):not(#majorRevisions):not(#additionalGraphicsDetails):not(#seriesDetails):not(#coverDetails),
input.input-glass[data-pasted],
textarea.input-glass[data-pasted]:not(#minorRevisionsDetails):not(#majorRevisions):not(#additionalGraphicsDetails):not(#seriesDetails):not(#coverDetails) {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  -webkit-text-fill-color: white !important;
  color: white !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Prevent any browser default styling overrides */
input,
textarea {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Additional protection against paste-induced styling changes - only target input fields */
input,
textarea {
  -webkit-user-modify: read-write-plaintext-only;
}

/* Override any injected styles from clipboard content */
input[style*="background"],
textarea[style*="background"],
input[style*="color"],
textarea[style*="color"] {
  background: rgba(255, 255, 255, 0.015) !important;
  color: white !important;
}

/* Placeholder text styling - lighter/less opaque for better UX */
input::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="date"]::placeholder,
textarea::placeholder,
.input-glass::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
  opacity: 0.6 !important;
  font-weight: 300 !important;
}

/* Webkit-specific placeholder styling */
input::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="url"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="date"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.input-glass::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
  opacity: 0.6 !important;
  font-weight: 300 !important;
}

/* Mozilla-specific placeholder styling */
input::-moz-placeholder,
input[type="text"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="url"]::-moz-placeholder,
input[type="number"]::-moz-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="date"]::-moz-placeholder,
textarea::-moz-placeholder,
.input-glass::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
  opacity: 0.6 !important;
  font-weight: 300 !important;
}

/* Microsoft Edge/IE placeholder styling */
input:-ms-input-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="url"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="date"]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
.input-glass:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
  opacity: 0.6 !important;
  font-weight: 300 !important;
}

/* Placeholder styling on focus - slightly more visible but still lighter than text */
input:focus::placeholder,
input[type="text"]:focus::placeholder,
input[type="email"]:focus::placeholder,
input[type="url"]:focus::placeholder,
input[type="number"]:focus::placeholder,
input[type="tel"]:focus::placeholder,
input[type="date"]:focus::placeholder,
textarea:focus::placeholder,
.input-glass:focus::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  opacity: 0.7 !important;
}

/* Enhanced date input handling for mobile - show placeholder-like text when empty */
input[type="date"]:invalid {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Mobile-specific date input improvements */
@media (max-width: 768px) {
  input[type="date"]:invalid:before {
    content: attr(placeholder) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-right: 0.5em;
  }
}

/* Specific override for pasted content styling */
input[style],
textarea[style] {
  background: rgba(255, 255, 255, 0.015) !important;
  color: white !important;
  -webkit-text-fill-color: white !important;
}

/* --- Utility color overrides: always keep at the end for highest priority --- */
.backdrop-blur-md .text-green-400,
[class*="backdrop-blur-md"] .text-green-400,
.backdrop-blur-md.bg-white\/5 .text-green-400,
.glass-card .text-green-400 {
  color: #4ade80 !important; /* text-green-400 */
}

.backdrop-blur-md .text-yellow-400,
[class*="backdrop-blur-md"] .text-yellow-400,
.backdrop-blur-md.bg-white\/5 .text-yellow-400,
.glass-card .text-yellow-400 {
  color: #facc15 !important; /* text-yellow-400 */
}

/* --- Ensure Not Available in Paperback is red --- */
.backdrop-blur-md .text-red-500,
[class*="backdrop-blur-md"] .text-red-500,
.backdrop-blur-md.bg-white\/5 .text-red-500,
.glass-card .text-red-500,
.glass-container .text-red-500 {
  color: #ef4444 !important; /* text-red-500 true red */
}

.backdrop-blur-md .text-red-400,
[class*="backdrop-blur-md"] .text-red-400,
.backdrop-blur-md.bg-white\/5 .text-red-400,
.glass-card .text-red-400,
.glass-container .text-red-400 {
  color: #f87171 !important; /* text-red-400 */
}

/* Not Available Badge - Upper right with centered text */
#paperback-not-available {
  background: rgba(239, 68, 68, 0.9) !important; /* bg-red-500/90 equivalent with !important */
  background-color: rgba(239, 68, 68, 0.9) !important; /* Explicit backup for background-color */
  color: #ffffff !important;
  font-size: 0.675rem !important;
  font-weight: 600 !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 9999px !important;
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  z-index: 50 !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  /* Removed display, align-items, justify-content, opacity, visibility overrides to allow JavaScript control */
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Defensive rule to prevent any parent container from affecting the badge when visible */
.booktype-card #paperback-not-available:not([style*="display: none"]):not([style*="visibility: hidden"]),
.booktype-card[data-book-type="paperbackCover"] #paperback-not-available:not([style*="display: none"]):not([style*="visibility: hidden"]),
div[data-book-type="paperbackCover"] #paperback-not-available:not([style*="display: none"]):not([style*="visibility: hidden"]) {
  background: rgba(239, 68, 68, 0.9) !important;
  background-color: rgba(239, 68, 68, 0.9) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
}

/* Backup Tailwind-style rule for the red background */
.bg-red-500\/90,
[class*="bg-red-500/90"] {
  background-color: rgba(239, 68, 68, 0.9) !important;
}

/* Allow JavaScript to properly hide the badge */
#paperback-not-available[style*="display: none"] {
  display: none !important;
}

#paperback-not-available[style*="visibility: hidden"] {
  visibility: hidden !important;
}

/* Show badge when explicitly set to visible by JavaScript */
#paperback-not-available[style*="display: flex"] {
  display: flex !important;
}

/* Mute paperback content when disabled */
label[data-paperback-disabled="true"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s ease;
}

label[data-paperback-disabled="true"] .text-white,
label[data-paperback-disabled="true"] .text-white\/70,
label[data-paperback-disabled="true"] .text-green-400 {
  opacity: 0.4 !important;
  color: rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease;
}

/* Notice sections spacing override - reduce gap between terms and revision policy */
#step-1-form .backdrop-blur-sm.bg-white\/5.mb-2 {
  margin-bottom: 0.25rem !important;
}

#step-1-form .backdrop-blur-sm.bg-white\/5.mb-4 {
  margin-top: 0.25rem !important;
}

/* Alternative approach - target consecutive notice boxes */
#step-1-form .backdrop-blur-sm.bg-white\/5 + .backdrop-blur-sm.bg-white\/5 {
  margin-top: -0.5rem !important;
}

/* File upload specific improvements */
#file-list, #pdf-file-list {
  max-width: 100%;
  overflow: hidden;
}

#file-items > *, #pdf-file-items > * {
  max-width: 100%;
  overflow: hidden;
}

/* Improve file item layout */
.bg-white\/5.border.border-white\/10.rounded-lg.p-3.flex.items-center.justify-between {
  overflow: hidden;
}

.bg-white\/5.border.border-white\/10.rounded-lg.p-3.flex.items-center.justify-between .flex-1 {
  min-width: 0;
  overflow: hidden;
}

/* Better responsive button layout for step navigation */
@media (max-width: 768px) {
  /* Improve step navigation button spacing */
  .flex.justify-between {
    gap: 1rem;
  }
  
  .flex.justify-between .btn-primary,
  .flex.justify-between .btn-secondary {
    flex: 1;
    max-width: 48%;
  }
  
  .flex.justify-end .btn-primary {
    width: auto;
    min-width: 140px;
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  /* Compact navigation for small screens */
  .flex.justify-between {
    gap: 0.75rem;
  }
  
  .flex.justify-between .btn-primary,
  .flex.justify-between .btn-secondary {
    font-size: 0.8rem;
    padding: 0.6rem 0.8rem;
  }
  
  .flex.justify-end .btn-primary {
    min-width: 120px;
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
  }
}

/* Button text and icon alignment fixes */
.btn-primary, .btn-secondary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Ensure SVG icons in buttons are properly aligned */
.btn-primary svg, .btn-secondary svg {
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Specific spacing for inline SVG elements with mr-2 class */
.btn-primary svg.mr-2, .btn-secondary svg.mr-2 {
  margin-right: 0.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Specific spacing for inline SVG elements with ml-2 class */
.btn-primary svg.ml-2, .btn-secondary svg.ml-2 {
  margin-left: 0.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Override margin classes on mobile for perfect centering */
@media (max-width: 768px) {
  .btn-primary svg.mr-2, 
  .btn-secondary svg.mr-2,
  .btn-primary svg.ml-2, 
  .btn-secondary svg.ml-2 {
    margin: 0 !important; /* Remove all margins on mobile to rely on flex gap */
  }
}

/* Override any potential line-height issues from parent elements */
.btn-primary *, .btn-secondary * {
  line-height: inherit !important;
}

/* Ensure button content doesn't wrap */
.btn-primary span, .btn-secondary span {
  white-space: nowrap !important;
}

/* Mobile specific button alignment */
@media (max-width: 768px) {
  .btn-primary, .btn-secondary {
    gap: 0.5rem !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  
  /* Ensure consistent icon sizing on mobile */
  .btn-primary svg, .btn-secondary svg {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
  }
}

/* Ultra-small screens - ensure no wrapping */
@media (max-width: 360px) {
  .btn-primary, .btn-secondary {
    min-width: fit-content !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Placeholder text mobile responsive sizing */
@media (max-width: 768px) {
  /* Reduce placeholder text size for mobile */
  .input-glass::placeholder {
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }
  
  /* Textarea placeholders */
  textarea.input-glass::placeholder {
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }
}

@media (max-width: 480px) {
  /* Further reduce placeholder text size */
  .input-glass::placeholder {
    font-size: 0.8125rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
  }
  
  textarea.input-glass::placeholder {
    font-size: 0.8125rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
  }
  
  /* Further reduce button font size to prevent container overflow */
  .btn-primary, .btn-secondary {
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 360px) {
  /* Smallest placeholder text for ultra-small screens */
  .input-glass::placeholder {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }
  
  textarea.input-glass::placeholder {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }
  
  /* Ultra-compact button text sizing */
  .btn-primary, .btn-secondary {
    font-size: 0.75rem !important;
    line-height: 1.1 !important;
    padding: 0.4rem 0.8rem !important;
  }
  
  /* Ensure icons remain proportional */
  .btn-primary svg, .btn-secondary svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }
}

/* File upload containers - refactored layout with buttons on right edge and better filename space */
@media (max-width: 768px) {
  /* Main file item container - grid layout for better control */
  #file-items .bg-white\/5,
  #pdf-file-items .bg-white\/5 {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important; /* icon, filename, checkmark, x-button */
    align-items: center !important;
    padding: 0.5rem !important;
    gap: 0.5rem !important;
    overflow: hidden !important;
  }
  
  /* File info section - restructure to work with grid */
  #file-items .flex.items-center.space-x-3.flex-1,
  #pdf-file-items .flex.items-center.space-x-3.flex-1 {
    display: contents !important; /* Let children participate in grid */
  }
  
  /* File preview icons - first grid item */
  #file-items .w-10.h-10,
  #pdf-file-items .w-10.h-10 {
    width: 2rem !important;
    height: 2rem !important;
    flex-shrink: 0 !important;
    grid-column: 1 !important;
  }
  
  /* File details container - second grid item, takes remaining space */
  #file-items .flex-1.min-w-0,
  #pdf-file-items .flex-1.min-w-0 {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-right: 0.5rem !important; /* Add some spacing before buttons */
  }
  
  /* File name - now has much more space */
  #file-items .text-sm.text-white.font-medium.truncate,
  #pdf-file-items .text-sm.text-white.font-medium.truncate {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important; /* Use all available space in grid column */
    display: block !important;
    font-size: 0.875rem !important;
  }
  
  /* File size and type info - also gets full width */
  #file-items .text-xs.text-white\/60,
  #pdf-file-items .text-xs.text-white\/60 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.6875rem !important;
    width: 100% !important;
  }
  
  /* Success indicator - third grid item (right edge) */
  #file-items .text-green-400,
  #pdf-file-items .text-green-400 {
    grid-column: 3 !important;
    flex-shrink: 0 !important;
    padding: 0.25rem !important;
    margin: 0 !important;
  }
  
  /* Delete button - fourth grid item (far right edge) */
  #file-items .text-red-400,
  #pdf-file-items .text-red-400 {
    grid-column: 4 !important;
    flex-shrink: 0 !important;
    padding: 0.25rem !important;
    margin: 0 !important;
  }
  
  /* Button icons - appropriately sized */
  #file-items .text-green-400 svg,
  #pdf-file-items .text-green-400 svg {
    width: 1rem !important;
    height: 1rem !important;
  }
  
  #file-items .text-red-400 svg,
  #pdf-file-items .text-red-400 svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }
}

/* Optimize file upload container layout for maximum filename space */
@media (max-width: 768px) {
  /* Minimize container margins to free up space */
  #file-items, #pdf-file-items {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Optimize file item button group spacing */
  #file-items .bg-white\/5 .flex.items-center.space-x-2,
  #pdf-file-items .bg-white\/5 .flex.items-center.space-x-2 {
    gap: 0.25rem !important; /* Reduce button group spacing */
    margin-left: 0.25rem !important;
  }
  
  /* Make file info section use maximum available width */
  #file-items .flex-1,
  #pdf-file-items .flex-1 {
    max-width: calc(100% - 4rem) !important; /* Reserve space only for essential buttons */
  }
}

@media (max-width: 480px) {
  /* Maintain grid layout but with tighter spacing */
  #file-items .bg-white\/5,
  #pdf-file-items .bg-white\/5 {
    padding: 0.375rem !important;
    gap: 0.375rem !important;
  }
  
  /* Smaller file icons */
  #file-items .w-10.h-10,
  #pdf-file-items .w-10.h-10 {
    width: 1.75rem !important;
    height: 1.75rem !important;
  }
  
  /* Adjust file details padding */
  #file-items .flex-1.min-w-0,
  #pdf-file-items .flex-1.min-w-0 {
    padding-right: 0.375rem !important;
  }
  
  /* Slightly smaller text */
  #file-items .text-sm.text-white.font-medium.truncate,
  #pdf-file-items .text-sm.text-white.font-medium.truncate {
    font-size: 0.8125rem !important;
  }
  
  /* Even smaller file info text */
  #file-items .text-xs.text-white\/60,
  #pdf-file-items .text-xs.text-white\/60 {
    font-size: 0.625rem !important;
  }
  
  /* Compact button sizing */
  #file-items .text-green-400,
  #pdf-file-items .text-green-400,
  #file-items .text-red-400,
  #pdf-file-items .text-red-400 {
    padding: 0.1875rem !important;
  }
  
  /* Smaller button icons */
  #file-items .text-green-400 svg,
  #pdf-file-items .text-green-400 svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }
  
  #file-items .text-red-400 svg,
  #pdf-file-items .text-red-400 svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }
}

@media (max-width: 360px) {
  /* Ultra-compact grid layout */
  #file-items .bg-white\/5,
  #pdf-file-items .bg-white\/5 {
    padding: 0.25rem !important;
    gap: 0.25rem !important;
  }
  
  /* Minimal file icons */
  #file-items .w-10.h-10,
  #pdf-file-items .w-10.h-10 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  
  /* Minimal file details padding */
  #file-items .flex-1.min-w-0,
  #pdf-file-items .flex-1.min-w-0 {
    padding-right: 0.25rem !important;
  }
  
  /* Ultra-compact text */
  #file-items .text-sm.text-white.font-medium.truncate,
  #pdf-file-items .text-sm.text-white.font-medium.truncate {
    font-size: 0.75rem !important;
  }
  
  /* Minimal file info text */
  #file-items .text-xs.text-white\/60,
  #pdf-file-items .text-xs.text-white\/60 {
    font-size: 0.5625rem !important;
  }
  
  /* Ultra-compact buttons */
  #file-items .text-green-400,
  #pdf-file-items .text-green-400,
  #file-items .text-red-400,
  #pdf-file-items .text-red-400 {
    padding: 0.125rem !important;
  }
  
  /* Minimal button icons */
  #file-items .text-green-400 svg,
  #pdf-file-items .text-green-400 svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }
  
  #file-items .text-red-400 svg,
  #pdf-file-items .text-red-400 svg {
    width: 0.6875rem !important;
    height: 0.6875rem !important;
  }
}

/* Upload zone instructions - make "Click to..." text smaller on mobile */
@media (max-width: 768px) {
  /* PDF upload zone instructions */
  #pdf-upload-zone .text-white\/80.font-medium,
  #pdf-upload-zone p.text-white\/80.font-medium {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
  }
  
  /* Additional files upload zone instructions */
  #upload-zone .text-white\/80.font-medium,
  #upload-zone p.text-white\/80.font-medium {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
  }
  /* Upload zone sub-text */
  #pdf-upload-zone .text-xs.text-white\/60,
  #upload-zone .text-xs.text-white\/60 {
    font-size: 0.8125rem !important;
  }
}

@media (max-width: 480px) {
  /* Further reduce upload instructions for small screens */
  #pdf-upload-zone .text-white\/80.font-medium,
  #pdf-upload-zone p.text-white\/80.font-medium,
  #upload-zone .text-white\/80.font-medium,
  #upload-zone p.text-white\/80.font-medium {
    font-size: 0.8125rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.375rem !important;
  }
    /* Smaller sub-text */
  #pdf-upload-zone .text-xs.text-white\/60,
  #upload-zone .text-xs.text-white\/60 {
    font-size: 0.75rem !important;
  }
  
  /* Compact upload zone padding */
  #pdf-upload-zone,
  #upload-zone {
    padding: 1rem !important;
  }
}

@media (max-width: 360px) {
  /* Ultra-compact upload instructions */
  #pdf-upload-zone .text-white\/80.font-medium,
  #pdf-upload-zone p.text-white\/80.font-medium,
  #upload-zone .text-white\/80.font-medium,
  #upload-zone p.text-white\/80.font-medium {
    font-size: 0.75rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.25rem !important;
  }
    /* Ultra-small sub-text */
  #pdf-upload-zone .text-xs.text-white\/60,
  #upload-zone .text-xs.text-white\/60 {
    font-size: 0.6875rem !important;
  }
  
  /* Ultra-compact upload zone */
  #pdf-upload-zone,
  #upload-zone {
    padding: 0.75rem !important;
  }
  
  /* Smaller upload icons on ultra-small screens */
  #pdf-upload-zone .w-8.h-8,
  #upload-zone .w-8.h-8 {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
}

/* Make Back button (prevStep) more compact to give more space to Continue/Submit buttons */
@media (max-width: 768px) {
  /* Compact Back button specifically */
  button[onclick="prevStep()"] {
    max-width: 30% !important; /* Limit back button width */
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important; /* Reduced gap between icon and text */
  }
  
  /* Adjust SVG icon in back button for better spacing */
  button[onclick="prevStep()"] svg {
    width: 0.875rem !important; /* 14px - slightly smaller */
    height: 0.875rem !important;
    margin-right: 0 !important; /* Remove default margin, use gap instead */
    flex-shrink: 0 !important;
  }
  
  /* Give more space to Continue/Submit buttons */
  .flex.justify-between button[onclick="nextStep()"],
  .flex.justify-between button[onclick="submitOrder()"] {
    max-width: 65% !important; /* More space for main action buttons */
    flex: 1 !important;
  }
}

@media (max-width: 480px) {
  /* Even more compact Back button on mobile */
  button[onclick="prevStep()"] {
    max-width: 25% !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.6875rem !important;
    gap: 0.1875rem !important; /* Even smaller gap */
  }
  
  /* Further reduce SVG icon size */
  button[onclick="prevStep()"] svg {
    width: 0.75rem !important; /* 12px */
    height: 0.75rem !important;
  }
  
  /* Maximize space for Continue/Submit buttons */
  .flex.justify-between button[onclick="nextStep()"],
  .flex.justify-between button[onclick="submitOrder()"] {
    max-width: 70% !important;
    font-size: 0.75rem !important; /* Slightly larger since we have more space now */
    padding: 0.45rem 0.7rem !important;
  }
}

@media (max-width: 360px) {
  /* Ultra-compact Back button */
  button[onclick="prevStep()"] {
    max-width: 22% !important;
    padding: 0.3rem 0.4rem !important;
    font-size: 0.625rem !important;
    gap: 0.125rem !important; /* Minimal gap for ultra-small screens */
  }
  
  /* Minimal SVG icon size */
  button[onclick="prevStep()"] svg {
    width: 0.6875rem !important; /* 11px */
    height: 0.6875rem !important;
  }
  
  /* Maximum space for Continue/Submit buttons */
  .flex.justify-between button[onclick="nextStep()"],
  .flex.justify-between button[onclick="submitOrder()"] {
    max-width: 75% !important;
    font-size: 0.6875rem !important; /* Slightly larger text with more space */
    padding: 0.35rem 0.6rem !important;
  }
}

/* Mobile responsive centering for purchase form navigation buttons */
@media (max-width: 768px) {
  /* Enhanced centering for Continue to Details button (Step 1) */
  .flex.justify-end .btn-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
  }
  
  /* Enhanced centering for both navigation buttons (Step 2 and 3) */
  .flex.justify-between .btn-primary,
  .flex.justify-between .btn-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
  }
  
  /* Ensure SVG icons are properly aligned with text */
  .btn-primary svg,
  .btn-secondary svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important; /* Remove any existing margins */
  }
  
  /* Force proper centering for nextStep and submitOrder buttons */
  button[onclick="nextStep()"],
  button[onclick="submitOrder()"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
  }
  
  /* Force proper centering for prevStep button */
  button[onclick="prevStep()"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
  }
  
  /* Override any margin classes on SVG elements in navigation buttons */
  button[onclick="nextStep()"] svg.ml-2,
  button[onclick="submitOrder()"] svg.ml-2 {
    margin-left: 0 !important;
  }
  
  button[onclick="prevStep()"] svg.mr-2 {
    margin-right: 0 !important;
  }
}

/* Additional centering for smaller mobile screens */
@media (max-width: 480px) {
  /* Ensure buttons remain perfectly centered on small screens */
  .btn-primary,
  .btn-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-direction: row !important;
    gap: 0.375rem !important;
  }
  
  /* Remove any conflicting margin classes on mobile */
  button[onclick="nextStep()"] svg,
  button[onclick="submitOrder()"] svg {
    margin-left: 0 !important; /* Remove right arrow left margin */
    margin-right: 0 !important;
  }
  
  button[onclick="prevStep()"] svg {
    margin-right: 0 !important; /* Remove left arrow right margin */
    margin-left: 0 !important;
  }
  
  /* Ensure proper flex ordering for icon and text */
  button[onclick="nextStep()"],
  button[onclick="submitOrder()"] {
    flex-direction: row !important; /* Text first, then arrow */
  }
  
  button[onclick="prevStep()"] {
    flex-direction: row !important; /* Arrow first, then text */
  }
}

/* Ultra-small screens - maintain perfect centering */
@media (max-width: 360px) {
  .btn-primary,
  .btn-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.25rem !important; /* Smaller gap on ultra-small screens */
    flex-direction: row !important;
  }
  
  /* Ensure no conflicting margins on ultra-small screens */
  .btn-primary svg,
  .btn-secondary svg {    margin: 0 !important; /* Remove all margins to rely on gap */
  }
}

/* Note: Edit notifications now use admin-style glassmorphism with glass-card class */

/* Animation for slide in from right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Edit Mode - Readonly Field Styles */
.edit-mode-readonly {
    background-color: rgba(255, 255, 255, 0.015) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.edit-mode-readonly:focus {
    outline: none !important;
    box-shadow: none !important;
}

.edit-mode-readonly-label {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.8 !important;
}

.edit-mode-lock-icon {
    font-size: 0.75em;
    opacity: 0.8;
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* Ensure readonly fields are clearly distinguishable */
input.edit-mode-readonly,
textarea.edit-mode-readonly,
select.edit-mode-readonly {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.08)) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    pointer-events: none !important;
}

/* Comprehensive step indicator label protection - absolutely no green text */
.step-indicator + span,
.step-indicator.completed + span,
.step-indicator.active + span,
.step-indicator.future + span,
#step-1-indicator + span,
#step-2-indicator + span,
#step-3-indicator + span,
div[class*="step-indicator"] + span {
  color: rgba(255, 255, 255, 0.9) !important; /* Force white labels */
}

/* Override any Tailwind or dynamic classes that might make step labels green */
span.text-green-500,
span.text-green-400,
span.text-green-300,
span[class*="text-green"] {
  color: rgba(255, 255, 255, 0.9) !important; /* Override any green text classes on step labels */
}

/* Specific protection for step indicator spans with ml-2 class */
.step-indicator + span.ml-2,
.step-indicator.completed + span.ml-2,
.step-indicator.active + span.ml-2,
.step-indicator.future + span.ml-2 {
  color: rgba(255, 255, 255, 0.9) !important; /* Force white step labels */
}

/* Ensure step header circles (at the beginning of each step) maintain original styling */
.form-step .w-10.h-10.rounded-full.bg-white\/20.text-white {
  background: rgba(255, 255, 255, 0.2) !important; /* Original translucent white background */
  color: white !important; /* White text */
  border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Original white border */
  transform: none !important; /* No scaling */
  box-shadow: none !important; /* No green glow */
}

/* Also ensure these step header circles never get the completed styling */
.form-step .w-10.h-10.rounded-full.bg-white\/20.text-white.completed {
  background: rgba(255, 255, 255, 0.2) !important; /* Keep original styling */
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ZIP Upload Mobile Responsiveness */
@media (max-width: 768px) {
  /* ZIP Upload Zone Mobile Styles */
  #zip-upload-zone {
    padding: 16px !important;
  }
  
  #zip-upload-zone .upload-icon svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  
  #zip-upload-zone p:first-of-type {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
  }
  
  /* Mobile responsive line breaks for ZIP upload text */
  #zip-upload-zone .zip-upload-text-break {
    display: none;
  }
  
  @media (max-width: 640px) {
    #zip-upload-zone .zip-upload-text-break {
      display: inline;
    }
    
    #zip-upload-zone .zip-upload-text-break::before {
      content: "\A";
      white-space: pre;
    }
    
    #zip-upload-zone p:first-of-type {
      text-align: center !important;
      line-height: 1.4 !important;
    }
    
    /* Ensure balanced line spacing */
    #zip-upload-zone .zip-upload-text-line1,
    #zip-upload-zone .zip-upload-text-line2 {
      display: inline-block;
    }
  }
  
  /* Desktop: keep text on single line */
  @media (min-width: 641px) {
    #zip-upload-zone .zip-upload-text-line1::after {
      content: " file(s) ";
    }
  }
  
  /* Regular file upload text responsive breaks */
  .file-upload-text-break {
    display: none;
  }
  
  @media (max-width: 640px) {
    .file-upload-text-break {
      display: inline;
    }
    
    .file-upload-text-break::before {
      content: "\A";
      white-space: pre;
    }
    
    /* Ensure balanced line spacing for regular upload text */
    .file-upload-text-line1,
    .file-upload-text-line2 {
      display: inline-block;
    }
  }

  #zip-upload-zone p:last-of-type {
    font-size: 0.7rem !important;
  }
  
  /* ZIP File List Mobile Styles */
  #zip-file-list h4 {
    font-size: 0.7rem !important;
  }
  
  #zip-file-items .bg-white\/5 {
    padding: 0.5rem !important;
  }
  
  #zip-file-items .w-10.h-10 {
    width: 2rem !important;
    height: 2rem !important;
  }
  
  #zip-file-items .text-sm {
    font-size: 0.75rem !important;
  }
  
  #zip-file-items .text-xs {
    font-size: 0.65rem !important;
  }
  
  /* Make ZIP file text even smaller for better mobile fit */
  #zip-file-items .text-sm.text-white.font-medium.truncate {
    font-size: 0.7rem !important;
  }
  
  #zip-file-items .text-xs.text-white\/60.flex.items-center.gap-2 {
    font-size: 0.55rem !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
  }
  
  /* Make view button smaller and more compact */
  #zip-file-items .text-blue-400.hover\:text-blue-300.transition-colors.text-xs.underline {
    font-size: 0.5rem !important;
    padding: 0.125rem 0.25rem !important;
  }
  
  /* Ensure metadata container doesn't wrap */
  #zip-file-items .text-xs.text-white\/60 span {
    font-size: 0.55rem !important;
  }
  
  #zip-file-items .text-xs.text-white\/60 button {
    font-size: 0.5rem !important;
  }
  
  /* Improve button alignment on mobile */
  #zip-file-items .flex.items-center.justify-between {
    align-items: flex-start !important;
  }
  
  #zip-file-items .text-green-400,
  #zip-file-items .text-red-400 {
    margin-top: 0.25rem !important;
    flex-shrink: 0 !important;
  }
  
  #zip-file-items .text-green-400 svg,
  #zip-file-items .text-red-400 svg {
    width: 1rem !important;
    height: 1rem !important;
  }
  
  /* ZIP Upload Summary Mobile Styles */
  #zip-upload-summary {
    font-size: 0.6rem !important;
  }
  
  /* Smart truncation for ZIP Files - Match Additional Files behavior */
  #zip-file-items .text-sm.text-white.font-medium.truncate {
    max-width: calc(100vw - 160px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  #zip-file-items .truncate {
    max-width: calc(100vw - 160px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  #zip-file-items .flex-1.min-w-0 {
    min-width: 0 !important;
    flex: 1 !important;
    max-width: calc(100vw - 160px) !important;
  }
  
  /* Additional Files Upload Mobile Responsiveness - Match ZIP Format */
  /* Additional Files Upload Zone Mobile Styles */
  #upload-zone {
    padding: 16px !important;
  }
  
  #upload-zone .upload-icon svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  
  #upload-zone p:first-of-type {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.25rem !important;
  }
  
  #upload-zone p:last-of-type {
    font-size: 0.7rem !important;
  }
  
  /* Additional Files File List Mobile Styles */
  #file-list h4 {
    font-size: 0.8rem !important;
  }
  
  #file-items .bg-white\/5 {
    padding: 0.5rem !important;
  }
  
  #file-items .w-10.h-10 {
    width: 2rem !important;
    height: 2rem !important;
  }
  
  #file-items .text-sm {
    font-size: 0.75rem !important;
  }
  
  #file-items .text-xs {
    font-size: 0.65rem !important;
  }
  
  /* Improve button alignment on mobile for Additional Files */
  #file-items .flex.items-center.justify-between {
    align-items: flex-start !important;
  }
  
  #file-items .text-green-400,
  #file-items .text-red-400 {
    margin-top: 0.25rem !important;
    flex-shrink: 0 !important;
  }
  
  #file-items .text-green-400 svg,
  #file-items .text-red-400 svg {
    width: 1rem !important;
    height: 1rem !important;
  }
  
  /* Additional Files Upload Summary Mobile Styles */
  #upload-summary {
    font-size: 0.65rem !important;
  }
  
  /* Smart truncation for Additional Files - Prevent button overlap */
  #file-items .text-sm.text-white.font-medium.truncate {
    max-width: calc(100vw - 160px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Smart truncation for all file items */
  #file-items .truncate {
    max-width: calc(100vw - 160px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  #file-items .flex-1.min-w-0 {
    min-width: 0 !important;
    flex: 1 !important;
    max-width: calc(100vw - 160px) !important;
  }
  
  /* Keep file metadata on single line */
  #file-items .text-xs.text-white\/60.flex.items-center.gap-2 {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    font-size: 0.55rem !important;
    gap: 0.25rem !important;
  }
  
  /* Make Additional Files view button smaller and more compact */
  #file-items .text-blue-400.hover\:text-blue-300.transition-colors.text-xs.underline {
    font-size: 0.5rem !important;
    padding: 0.125rem 0.25rem !important;
  }
  
  /* Ensure Additional Files metadata elements are compact */
  #file-items .text-xs.text-white\/60 span {
    font-size: 0.55rem !important;
  }
  
  #file-items .text-xs.text-white\/60 button {
    font-size: 0.5rem !important;
  }
  
  /* Ensure proper spacing between file info and action buttons */
  #file-items .bg-white\/5.border.border-white\/10.rounded-lg {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }
  
  #zip-file-items .bg-white\/5.border.border-white\/10.rounded-lg {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }
  
  /* Optimize action button container spacing */
  #file-items .flex.items-center.gap-2.flex-shrink-0,
  #zip-file-items .flex.items-center.gap-2.flex-shrink-0 {
    margin-left: 0.5rem !important;
    min-width: 60px !important;
  }
}

/* ============================================
   Cleanup Warning Modal Animations
   ============================================ */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(400px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}

/* Cleanup modal specific styles */
#cleanup-warning-modal .glass-card,
#cleanup-success-modal .glass-card {
  max-width: 28rem;
}

#cleanup-warning-modal button,
#cleanup-success-modal button {
  transition: all 0.2s ease;
  min-height: 44px; /* Touch-friendly button size for mobile */
}

#cleanup-warning-modal button:hover,
#cleanup-success-modal button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Disable hover transform on mobile/touch devices */
@media (hover: none) and (pointer: coarse) {
  #cleanup-warning-modal button:hover,
  #cleanup-success-modal button:hover {
    transform: none;
  }
  
  #cleanup-warning-modal button:active,
  #cleanup-success-modal button:active {
    transform: scale(0.98);
  }
}

#cleanup-countdown {
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: 700;
}

/* Mobile-specific modal adjustments */
@media (max-width: 640px) {
  #cleanup-warning-modal .glass-card,
  #cleanup-success-modal .glass-card {
    margin: 1rem auto;
    max-height: calc(100vh - 2rem);
  }
  
  #cleanup-countdown {
    font-size: 1rem;
  }
  
  /* Keep modals centered on mobile, allow scrolling if content is tall */
  #cleanup-warning-modal,
  #cleanup-success-modal {
    align-items: center;
    justify-content: center;
    overflow-y: auto;
  }
  
  /* Make the modal card scrollable internally if content exceeds screen */
  #cleanup-warning-modal .glass-card,
  #cleanup-success-modal .glass-card {
    overflow-y: auto;
  }
  
  /* Stack buttons vertically on mobile for better touch targets */
  #cleanup-warning-modal .flex-col,
  #cleanup-success-modal .flex-col {
    width: 100%;
  }
  
  #cleanup-warning-modal button,
  #cleanup-success-modal button {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   MODAL OVERLAY BACKGROUND FIX
   Ensures all modals have proper dark overlay
   ============================================ */

/* Fix for validation modal */
#validation-modal:not(.hidden) {
  display: block !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Fix for error modal */
#error-modal:not(.hidden) {
  display: block !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Ensure hidden class properly hides modals */
#validation-modal.hidden,
#error-modal.hidden {
  display: none !important;
}

/* Ensure inner containers properly center modals */
#validation-modal > div,
#error-modal > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Glassmorphism scrollbar for validation modal */
#validation-modal .backdrop-blur-md::-webkit-scrollbar,
#validation-modal .glass-card::-webkit-scrollbar,
#validation-errors::-webkit-scrollbar {
  width: 8px;
}

#validation-modal .backdrop-blur-md::-webkit-scrollbar-track,
#validation-modal .glass-card::-webkit-scrollbar-track,
#validation-errors::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#validation-modal .backdrop-blur-md::-webkit-scrollbar-thumb,
#validation-modal .glass-card::-webkit-scrollbar-thumb,
#validation-errors::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#validation-modal .backdrop-blur-md::-webkit-scrollbar-thumb:hover,
#validation-modal .glass-card::-webkit-scrollbar-thumb:hover,
#validation-errors::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Firefox scrollbar support */
#validation-modal .backdrop-blur-md,
#validation-modal .glass-card,
#validation-errors {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.02);
}

/* Fix for exit confirmation modal */
#exit-confirmation-modal:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#exit-confirmation-modal.hidden {
  display: none !important;
}

/* Ensure the inner container is properly centered */
#exit-confirmation-modal > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Ensure exit confirmation modal buttons have white text */
#exit-confirmation-modal button {
  color: white !important;
}

#exit-confirmation-modal button:hover {
  color: white !important;
}

/* ============================================
   ORDER TOTAL SECTION - TEXT COLOR FIXES
   ============================================ */

/* Ensure all price breakdown text is visible with proper white/light colors */
#series-covers-breakdown,
#graphics-breakdown {
  color: rgba(255, 255, 255, 0.6) !important;
}

#series-covers-breakdown span,
#graphics-breakdown span {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Ensure series discount section is visible with green color */
#series-discount-section {
  color: rgba(255, 255, 255, 0.9) !important;
}

#series-discount-line,
#series-discount-line span {
  color: rgb(74, 222, 128) !important; /* text-green-400 - Green for discount */
}

#summary-series-discount {
  color: rgb(74, 222, 128) !important; /* text-green-400 - Green for discount */
}

/* Force proper text colors for all order summary elements */
#order-summary-content .text-white\/60 {
  color: rgba(255, 255, 255, 0.6) !important;
}

#order-summary-content .text-white\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
}

#order-summary-content .text-white\/90 {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Force white color for all summary price elements */
#order-summary-content span[id^="summary-"] {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Specific elements that need guaranteed white text */
#summary-base-price,
#summary-rush-price,
#summary-major-revisions-price,
#summary-series-price,
#summary-graphics-price,
#paperback-addon-price,
#summary-subtotal,
#summary-total {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* CRITICAL: Original price with strikethrough MUST be red */
#summary-sale-price,
#summary-sale-price-line .text-red-600,
.text-red-600.line-through {
  color: #dc2626 !important; /* Red color for strikethrough original price */
  text-decoration: line-through !important;
}

/* Ensure red color persists in glassmorphism containers */
#order-total-card .text-red-600.line-through,
.backdrop-blur-md .text-red-600.line-through {
  color: #dc2626 !important;
}

/* CRITICAL: Green color for all discount elements */
.text-green-400,
#series-discount-section .text-green-400,
#order-summary-content .text-green-400 {
  color: rgb(74, 222, 128) !important; /* Green for discounts */
}

/* Ensure section labels are visible */
#order-summary-content > div > div.text-xs.text-white\/60 {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* All text in order total card should default to white */
#order-total-card,
#order-total-card * {
  color: rgba(255, 255, 255, 0.9);
}

/* Then apply specific overrides */
#order-total-card .text-white\/60 {
  color: rgba(255, 255, 255, 0.6) !important;
}

#order-total-card .text-white\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
}

#order-total-card .text-red-600 {
  color: #dc2626 !important;
}

#order-total-card .text-green-400 {
  color: rgb(74, 222, 128) !important;
}

/* ============================================
   EDITED FIELD HIGHLIGHTING (EDIT MODE)
   ============================================ */

/**
 * Yellow highlighting for edited fields in order review
 * Only applies in edit mode when fields differ from original order
 */

.edited-field {
  color: #fbbf24 !important; /* Tailwind yellow-400 - plain yellow, no glow */
  font-weight: normal !important; /* Keep normal weight, don't make bold */
  position: relative;
}

/* Enhanced visibility for labels */
.review-label.edited-field {
  color: #fbbf24 !important;
  font-weight: normal !important; /* Keep normal weight */
}

/* Enhanced visibility for values */
.review-value.edited-field {
  color: #fbbf24 !important;
  font-weight: normal !important; /* Keep normal weight */
}

/* Diamond indicator for edited fields */
.edited-field::before {
  content: '✦ ';
  opacity: 0.7;
  margin-right: 4px;
}

/* Remove indicator from review values to avoid clutter */
.review-value.edited-field::before {
  content: '';
  margin-right: 0;
}

/* Hover effect - subtle color change only, no glow */
.edited-field:hover {
  color: #f59e0b !important; /* Slightly darker yellow on hover */
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .edited-field {
    font-size: 0.875rem;
  }
  
  .edited-field::before {
    font-size: 0.75rem;
  }
}

/* ==========================================
   BOOKCOVER STYLE CARDS
   Commission page - image-based style selection
   ========================================== */

.bookcover-style-card {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.bookcover-style-card > div {
  position: relative;
  transition: all 0.3s ease !important;
}

.bookcover-style-card:hover > div {
  border-color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.bookcover-style-card.selected > div {
  border-color: rgba(255, 255, 255, 0.8) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1), 0 4px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.bookcover-style-card.selected > div::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.3);
}

.bookcover-style-card.selected > div::after {
  content: '✓';
  position: absolute;
  top: 16px;
  right: 17px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

.bookcover-style-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.bookcover-style-card h4 {
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.25rem;
  text-align: center;
}

.bookcover-style-card .price-text {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-weight: 500;
}

.bookcover-style-card.selected .price-text {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

/* Mobile responsive for bookcover styles */
@media (max-width: 768px) {
  .bookcover-style-card img {
    height: 100px;
  }
  
  .bookcover-style-card h4 {
    font-size: 0.7rem;
  }
  
  .bookcover-style-card .price-text {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .bookcover-style-card img {
    height: 80px;
  }
  
  .bookcover-style-card h4 {
    font-size: 0.65rem;
  }
  
  .bookcover-style-card .price-text {
    font-size: 0.6rem;
  }
}